I’ve started seeing more and more sites every day using AMP pages.
If you don’t know what AMP is, it means Accelerated Mobile Pages Project which is an open source initiative that aims to provide mobile optimized content that can load instantly everywhere.
Automattic supports AMP on WordPress.com already from some time now and they also released a free plugin for self-hosted WordPress sites.
It creates automatically the AMP version of your posts, but it does not offer any way to customize the look of that page, unless you are a developer and have some knowledge of PHP, HTML and CSS.
That means that AMP pages on your site will probably not match your theme’s style. I’m using Storefront on my blog, but my AMP pages had a completely different style. So I wrote an extensions for their plugin to match the style of my AMP articles to the theme.
Meet Storefront AMP
Storefront AMP is a free Storefront extensions that tweaks your AMP pages to match the style of Storefront.
It uses the options from the Customizer for main colors, text, footer and header, and adds the post featured image at the top of the post.
It’s also very easy to use, just download the plugin from my GitHub repository, upload it on your WordPress self-hosted website, and activate it. That’s it!
How Does it Look
Open this page with your mobile, or scan the QR code below to see my article Ulysses Meets WordPress AMP version.
F.A.Q.
Can I download it from WordPress.org?
No, the plugin is only available on GitHub.
Does it support other Storefront Extensions?
It does not support options from the other Storefront extensions, but it will work properly if they are installed.
What do I do if I find an issue?
Please report it on GitHub and I’ll take a look as soon as I can.
Does it work with other themes?
No, it will probably break your site with a fatal error because it uses Storefront functions that would not be available on other themes.
Does it support Storefront child themes?
I didn’t test it with any child theme, sorry.
Where can I find more info about AMP?
Check the project official website at https://www.ampproject.org/.
Leave a Reply