Download Amp by Automattic Plugin Older Version How to Set up AMP for Wordpress
Total Page:16
File Type:pdf, Size:1020Kb
download amp by automattic plugin older version How To Set Up AMP for WordPress. Recently, Google unveiled their Accelerated Mobile Pages project (also known as AMP). The open source project aims to make the mobile web faster by creating a less-flashy, less-cluttered way to view content on your phone. The idea, as with many open source projects, is to create a vibrant and healthy community around AMP which will allow Google to compete against alternative (more closed) solutions such as Apple News and Facebook’s Instant Articles. What’s really great is that Google is already pushing ahead with AMP at full speed. In fact, as of late last week Google announced it would begin to send mobile traffic from Google search to AMP-enabled articles starting in February 2016. By the way, if you’re curious what an AMP-Enabled search looks like, click here to search Google for “mars” (this will only work on your mobile device). So if you want to be ready come February 2016, you need to follow my guide below on how to set up AMP on your WordPress install . But before we get to that, let’s discuss AMP in a bit more detail. Why AMP Is Important. As the growth in mobile usage continues to climb (and it will) websites need to be able to be super fast and responsive (I don’t mean design wise). Even today, with mobile exploding, many websites still run slowly on phones. This is because the majority of websites out there aren’t optimized for mobile. Things such as larger graphics, complex scripts, and even ads are meant for a rich user experience on a desktop and can make the same pages feel sluggish on a phone. And that’s where AMP comes into play. One of the goals of Accelerated Mobile Pages (AMP) is to improve the speed and user experience for content. These are important things to care about. Why did web apps fail and native apps succeed? Speed and user experience in native apps blew away that of web apps. If you think about it, most of the time spent on a smartphone is within apps — not so much the mobile web (likely because it’s slow and clunky). If Google can change that it’ll be a huge win for them (and publishers). But anyway, that topic could be a whole separate blog post — back to the show. Why AMP Is Different Than Responsive. AMP is hoping to achieve this promised speed increase by limiting the tools a developer can use to display content. AMP guidelines include: no form fields no external javascript no external stylesheets no inline styles everything must adhere to limits for file size. How To Set Up AMP on WordPress. By the easiest, best, and fastest way to get AMP working on WordPress is by using the AMP for WordPress plugin created by the fine folks at Automattic (creators of WordPress). Note: The plugin is listed in the WordPress plugin repository but for some reason that one didn’t work correctly for me. I found downloading the latest version from the plugins Github repository to work best so that’s how I’m going to layout my instructions. Download the official AMP for WordPress plugin. Save the file on your computer somewhere you can find it. Upload, install, and activate the AMP for WordPress plugin from your WordPress admin panel. Go to the Plugins section in the admin Panel and click “Add New” From the Add New page, click the “Upload Plugin” button. Click “Choose file” and find the amp-wp-master.zip you downloaded then click “Install Now” The plugin install page will appear, once it completes click the “Activate Plugin” link. Whew! The hard part is over. Now let’s make sure it’s working properly. Here’s How You Test AMP on WordPress. Open your website and load any post page. Once the page is loaded you will need to take a look at the source code of the page. In most browsers you can right click on the page somewhere and click View source. I use Google Chrome so if you’re like me, I would right click anywhere on the page and click Inspect (alternatively you can click View Page Source). Now what are we looking for? Well, find the <head> section of the page and look for the link that is directing crawlers to your “amphtml” version of the page. You should see something like this but with your site URL. Notice the trailing “/amp/” on the URL? Click that. It will load your brand new AMP-enabled page in your browser. You can append /amp/ to any post URL and it will load the AMP-enabled version of the page. For example, https://www.besttechie.com/nautilus-startup-accelerator/ would become https://www.besttechie.com/nautilus-startup-accelerator/amp/ . The plugin provides a generic theme template which you can modify to your liking (as I did–see screenshot). My modified AMP for WordPress template. In order to edit the template for your AMP-enabled pages you will need to open the template.php file located in the amp-wp-master folder within the WordPress plugins directory. Pretty much everything you would likely want to touch/edit will be in that single file. Before you go and edit it though I would recommend reading over the HTML documentation for AMP. After you edit the template file, save it, and re-upload it your server. The changes should take effect immediately (unless you have some kind of caching plugin, if so, clear the cache for the changes to propagate quicker). Questions, comments, hate mail? Leave it below in the comments! Jeff Weisbein. Jeff is the founder & CEO of BestTechie. He's a graduate of the Harvard Business Analytics Program and loves to travel and listen to music. Comments. Sign in or become a BestTechie member to join the conversation. Just enter your email below to get a log in link. We are passionate about making the web a better place. Your blog or website Has a (free!) home on the web. Your story, your way. Tumblr. Where your interests connect you to your people one post at a time. Day One. Your thoughts become words Captured private, eternal All your days distilled. WooCommerce. Selling online? Woo! Hang your digital shingle With this free plugin. Jetpack. Stats, backups, speed, power: The first plugin your site needs Has it all built in. WP VIP. Agile CMS for Facebook, Salesforce, and Slack Content drives their growth. Pocket Casts. Built by podcasters For your listening pleasure Discover new shows. Akismet. Did someone say spam? Akismet filters it out. Nothing to see here. Longreads. Great storytelling, Long enough to dig into. Find it and share it. Simplenote. Synchronization. Now your notes are everywhere, On every device. Happy Tools. Distributed teams are happier with our tools. Less friction, more time! Gravatar. Global avatar — “Gravatar,” get it? One pic For all your profiles. We also contribute to a number of non-profit and Open Source projects, like: WordPress.org. From many, one tool. Find strength in community For a better web. WP for iOS. Updates on the go? Your site’s everywhere you are With the iPhone app. WP for Android. Same goes for Android! No matter your devices, There’s an app for you. Collaborating? Never send email again. This will change your life. BuddyPress. Without connections, There’s no such thing as a web. Make your site social. bbPress. Blogs sometimes restrain Community discussion. Forums, the new black. WordCamp US. WordPress fans, unite! Come out from behind your screens, Connect, and celebrate. WP Job Manager. Need to make a hire? Put your site to work for you. Online job listings! Five for the Future. When we give back time WordPress can change the whole world Sooner and faster. We don’t make software for free, we make it for freedom. Inspired by you Striving to create good Nothing* is perfect. © Automattic Inc., purveyors of fine blogging and site-building services since 2005. Thank you for your time. Automattic Releases WordPress Plugin for Google’s Accelerated Mobile Pages (AMP) Here’s a two-month-old story which I missed at the time but is still worth reporting today. Automattic, the company behind WordPress, has added its support to Google’s Accelerated Mobile Pages project. In October, on the same day that AMP was announced, Automattic released a WordPress plugin that added basic support for AMP standards to any WordPress website. AMP is the name of Google’s new standard for mobile webpages that optimizes the pages for speed. It trims adverts, formatting, tracking scripts, and and other details to strip a page down to its smallest size. The project is only a few months old, but it’s already drawn the support of major tech platforms like Twitter and Automattic as well as the support of major web publishers. Automattic, for example, has released that plugin (although they have yet to update it). You can find the source code for the WordPress plugin over on Github, or download the plugin from WordPress.com. Or if you want to simply view an AMP-optimized page, you can open any page on this blog and append “/amp/” to the end of the URL. (And yes, you can view that modified page in any web browser.) When you click that URL, you’ll find a webpage reminiscent of the mobile or minimalist themes many sites favored five or more years ago (before responsive became the standard).