Giter Club home page Giter Club logo

amp-wp's Introduction

AMP Plugin for WordPress

Banner

An easier path to great Page Experience for everyone. Powered by AMP.

Contributors: google, xwp, rtcamp, automattic, westonruter, albertomedina, schlessera, delawski, swissspidy, pierlo, joshuawold, thelovekesh
Tags: page experience, performance, amp, mobile, optimization
Requires at least: 5.3
Tested up to: 6.5
Stable tag: 2.5.3
License: GPLv2 or later
Requires PHP: 7.4

Build Status Coverage Status Built with Grunt

Description

Page Experience (PX) is a set of ranking signals—including Core Web Vitals (CWV)—measuring the user experience of interacting with a web page. AMP is a powerful tool which applies many optimizations and best practices automatically on your site, making it easier for you to achieve good page experience for your visitors. The official AMP Plugin, supported by the AMP team, makes it easy to bring the power of AMP to your WordPress site, seamlessly integrating with the normal publishing flow and allowing the use of existing themes and plugins.

Play video on YouTube

For more videos like this, check out the ongoing AMP for WordPress video series.

The plugin's key features include:

  1. Automate the process of generating AMP-valid markup as much as possible, letting users follow the standard workflows they are used to in WordPress.
  2. Provide effective validation tools to help users deal with AMP incompatibilities when they happen, including mechanisms for identifying, contextualizing, and resolving issues caused by validation errors.
  3. Provide development support to make it easier for WordPress developers to build AMP-compatible ecosystem components and build websites and solutions with AMP-compatibility built-in.
  4. Support the serving of AMP pages to make it easier for site owners to take advantage of mobile redirection, AMP-to-AMP linking, and generation of optimized AMP by default (via PHP port of AMP Optimizer).
  5. Provide a turnkey solution for segments of WordPress creators to be able to go from zero to publishing AMP pages in no time, regardless of technical expertise or availability of resources.

The official AMP plugin for WordPress is a powerful tool that helps you build user-first WordPress sites, that is, sites that are fast, beautiful, secure, engaging, and accessible. A user-first site will deliver experiences that delight your users and therefore will increase user engagement and the success of your site. And, contrary to the popular belief of being only for mobile sites (it doesn't stand for Accelerated Mobile Pages anymore!), AMP is a fully responsive web component framework, which means that you can provide AMP experiences for your users on both mobile and desktop devices.

AMP Plugin Audience: Everyone

This plugin can be used by both developers and non-developer users:

  • If you are a developer or tech savvy user, you can take advantage of advanced developer tools provided by the AMP plugin to fix validation issues your site may have and reach full AMP compatibility.
  • If you are not a developer or tech savvy user, or you just simply don't want to deal with validation issues and tackling development tasks, the AMP plugin allows you to assemble fully AMP-compatible sites with different configurations taking advantage of AMP-compatible components. The plugin helps you to deal with validation issues by removing invalid AMP markup in cases where it is possible, or altogether suppressing AMP-incompatible plugins on AMP pages.

The bottom line is that regardless of your technical expertise, the AMP plugin can be useful to you.

Template Modes

The official AMP plugin enables site owners to serve AMP to their users in different ways, which are referred to as template modes: Standard, Transitional, and Reader. The differences between them are in terms of the number of themes used (one or two), and the number of versions of the site (non-AMP, AMP). Each template mode brings its own value proposition and serves the needs of different scenarios in the large and diverse WordPress ecosystem. And in all cases, the AMP plugin provides as much support as possible in terms of automating the generation of AMP pages, as well as keeping the option chosen AMP valid. In a nutshell, the available template modes are the following:

Standard Mode: This template mode is the ideal, as there is only one theme for serving requests and a single version of your site: the AMP version. Besides enabling all of your site to be AMP-first, this has the added benefit of reducing development and maintenance costs. This mode is the best choice for sites where the theme and plugins used in the site are fully AMP-compatible. It's also a good option if some components are not AMP-compatible but the site owner has the resources or the know-how to fix them. See our showcase of sites using Standard mode.

Transitional Mode: In this mode there is also a single theme used, but there can be two versions of each page: AMP and non-AMP. The active theme is used for serving the AMP and non-AMP versions of a given URL. This mode is a good choice if the site uses a theme that is not fully AMP compatible, but the functional differences between the AMP and non-AMP pages are acceptable (due to graceful degradation). In this case, users accessing the site from mobile devices can get the AMP version and get an optimized experience which also retains the look and feel of the non-AMP version. Check out our showcase of sites using Transitional mode.

Reader Mode: In this mode there are two different themes, one for AMP pages and another for non-AMP pages, and therefore there are also two versions of the site. This mode may be selected when the site is using an AMP-incompatible theme, but the level of incompatibilities is significant without graceful degradation. It's also a good choice if you are not technically savvy (or simply do not want to deal with the incompatibilities) and therefore want simplified and robust workflows that allow you to take advantage of AMP with minimal effort.

Different modes would be recommended in different scenarios, depending on the specifics of your site and your role. As you configure the plugin, it will suggest the mode that might be best for you based on its assessment of the theme and plugins used on your site. And, independently of the mode used, you have the option of serving all or only a portion of your site as AMP. This gives you all the flexibility you need to get started enabling AMP on your site progressively.

AMP Ecosystem

It is possible today to assemble great looking user-first sites powered by the AMP plugin by picking and choosing themes and plugins from a growing AMP-compatible ecosystem. In this context, the AMP plugin acts as an orchestrator of the overall AMP content creation and publishing process; it serves as a validator and enforcer making it easier to not only get to AMP experiences, but to maintain them with confidence.

Many popular theme and plugin developers have taken efforts to support the official AMP plugin. If you are using a theme like Astra or Newspack, or if you are using plugins like Yoast or WP Forms — they will work out of the box! You can see the growing list of tested themes and plugins.

AMP Development

Although there is a growing ecosystem of AMP-compatible WordPress components, there is still a ways to go before majority AMP compatibility in the ecosystem. If you are a developer, or you have the resources to pursue development projects, you may want in some cases to develop custom plugin or theme to serve your specific needs. The official AMP plugin can be of great help to you by providing powerful and effective developer tools that shed light into the AMP development process as it is done in WordPress. This includes mechanisms for detailing the root causes of validation issues, the contextual space to understand them properly, and methods to deal with them during the process of achieving full AMP compatibility. Read more about Developer Tools.

Getting Started

To learn more about the plugin and start leveraging its capabilities to power your AMP publishing workflow, check the official AMP plugin product site.

If you are a developer, we encourage you to follow along or contribute to the development of this plugin on GitHub.

We have put up a comprehensive FAQ page and extensive documentation to help you start as smoothly as possible.

But if you need some help, we are right here to support you in the plugin's support forum, as well as through GitHub issues (for technical bugs and feature requests). And our thriving AMP Expert ecosystem has indie freelancers to enterprise grade agencies in case you need commercial support!

Installation

  1. Upload the folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the "Plugins" menu in WordPress.
  3. Navigate to AMP > Settings in the WordPress admin to configure the plugin; use the onboarding wizard there for guided setup.

Frequently Asked Questions

Please see the FAQs on amp-wp.org. Don't see an answer to your question? Please search the support forum to see if it has already been discussed. Otherwise, please open a new support topic.

Screenshots

New onboarding wizard to help you get started.

New onboarding wizard to help you get started.

Built for developers and non-technical content creators alike.

Built for developers and non-technical content creators alike.

Theme selection to enhance the Reader mode experience.

Theme selection to enhance the Reader mode experience.

Preview how your site looks across desktop and mobile before finalising changes.

Preview how your site looks across desktop and mobile before finalising changes.

Customize the design of AMP pages in the Customizer.

Customize the design of AMP pages in the Customizer.

Reopen the onboarding wizard, change individual options, or manage advanced settings.

Reopen the onboarding wizard, change individual options, or manage advanced settings.

Changelog

Version 2.5.1 is a maintenance and security release which fixes a reflected XSS vulnerability when mobile redirection is enabled. For prior affected versions, the fix is backported to new patch releases: v2.0.12, v2.1.5, v2.2.5, v2.3.1, and v2.4.3. These are available in the WordPress.org Plugin Directory but not on GitHub.

For the plugin’s changelog, please see the Releases page on GitHub.

Upgrade Notice

If you currently use older versions of the plugin in Reader mode, it is strongly encouraged to pick a Reader theme instead of using the legacy Reader templates. You may also want to switch to Standard mode or Transitional mode if you have AMP-compatible theme and plugins.

amp-wp's People

Contributors

allancole avatar amedina avatar barklund avatar bartoszgadomski avatar bcampeau avatar davidcramer avatar delawski avatar delputnam avatar dependabot-preview[bot] avatar dependabot[bot] avatar dhaval-parekh avatar felixarntz avatar jacobschweitzer avatar johnwatkins0 avatar kaitnyl avatar kienstra avatar miina avatar mikeschinkel avatar mjangda avatar naveen17797 avatar pdclark avatar pierlon avatar renovate-bot avatar rutviksavsani avatar schlessera avatar spacedmonkey avatar swissspidy avatar thelovekesh avatar thierrya avatar westonruter avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

amp-wp's Issues

YouTube Videos not working

Iframes and links from youtube are not working in my amp post. Showing this console error
"Expected width to be available and be an integer/length value: null"
"Blocked script execution in 'youtube link' because the document's frame is sandboxed and the 'allow-scripts' permission is not set"

Three Plugin Conflicts I Noticed

I noticed that this plugin causes both the Floating Social Bar and the Sexy Author Bio plugin's CSS code to be rendered on the page as text. Also, there is a JavaScript conflict with the WP Tab Widget plugin. I had to disable the plugin in order to get the JavaScript code to not render on the page as text. My site is hosted on WP Engine, but it doesn't appear to be anything specific to their services (at least that I can tell). For now I'm just hiding the display of the CSS text using display: none in CSS, ironic and horrible so if anyone knows a better way to fix this please let me know. I can then update my Sexy Author Bio plugin accordingly.

PHP 5.2 Compat

Some PHP5.3+isms have snuck in and we need to remove them.

Floated images should not have layout=responsive

ampproject/amphtml#385

We need a min-width or drop the responsiveness. Since floated images more than likely don't need to be responsive anyway, and it's hard to set a minimum min-width for all floated images.

Basically, any images with the class alignleft or alignright should drop layout=responsive

Add Comments Link

Makes sense not to include comments in the amp version, of course, but if comments are on, at least a link to them seems like it would be a good idea?

Cache `/amp/` responses

On WPCOM, we should set longer-ish expiries, similar to how we handle feeds.

Ideally, these should invalidate on post updates.

Initial feedback - many things not working (possible JetPack issue)

Just tried the plugin on http://www.get-business-online.com/ and saw the following:

  1. Static front page is not handled properly. When adding "amp/" to my home page, you get a 404
  2. When adding ?amp=1 to the home page, you get the blog page instead, apparently unchanged
  3. Links on AMP pages should have "amp/" to them. We can't expect mobile users to add that manually
  4. Pages and posts show with some standard theme and no navigation
  5. Sidebars seem to be ignored
  6. Sharing widget styling seems to be ignored and sharing links appear as simply links
  7. Permalinks must be updated after activation to make the "amp/" option work
  8. Adding "amp/" to a post category URL gives a 404
  9. Adding "?amp=1" to a post category URL shows the page unchanged

This plugin is seriously in its early stages.

Cheers,
Gal

Handle missing width and height attributes for images

Not all <img> tags have width/height attributes which are required for the matching <amp-img> tag. We should find a way to include that somehow.

  • If srcset or sizes are included, try to pull from them, if possible.
  • Pull from attachment metadata.
  • Fetch the remote image and calculate/save the size (getimagesize and wpcom's getimagesize).

Related #13

Use default filter content

Why don't we just use the default content filter from WordPress core instead of using remove filters?

Broken images

Using 0.1.

Photon enabled this first working block is what my typical image HTML looks like. The second block is with AMP. The image URLs are a bit different, but both are valid.

Console:
screen shot 2015-11-14 at 9 15 32 am

Works:
<img class=" size-full wp-image-2202 alignleft" src="http://i0.wp.com/developdaly.com/shared/content/uploads/2015/05/Screen-Shot-2015-05-12-at-1.38.51-PM.png?zoom=2&amp;resize=115%2C36" alt="Insecure https" width="115" height="36" srcset="http://i0.wp.com/developdaly.com/shared/content/uploads/2015/05/Screen-Shot-2015-05-12-at-1.38.51-PM.png?zoom=2&amp;resize=115%2C36" src-orig="http://i0.wp.com/developdaly.com/shared/content/uploads/2015/05/Screen-Shot-2015-05-12-at-1.38.51-PM.png?resize=115%2C36" scale="2">

Doesn't work:
<amp-img class=" size-full wp-image-2202 alignleft -amp-element -amp-layout-container -amp-error" src="http://i0.wp.com/developdaly.com/wp/../shared/content/uploads/2015/05/Screen-Shot-2015-05-12-at-1.38.51-PM.png?resize=115%2C36" alt="Insecure https" id="AMP_2"><img amp-img-id="AMP_2" alt="Insecure https" class="-amp-fill-content -amp-replaced-content" width="0" height="0"></amp-img>

http://developdaly.com/seriously-banks-obvious-website-security-issues-at-major-us-banks/
vs
http://developdaly.com/seriously-banks-obvious-website-security-issues-at-major-us-banks/amp/

Missing .editorconfig file

Maybe you should consider the option to add a .editorconfig, that should be helpful for somebody else to stick to the same standard you are using for this project and *.php files.

Thank you ! ✋

amp-video/amp-audio supports limited children

amp-video only supports <source> <div fallback> and <div placeholder> as children.

amp-audio only supports <source> and <div fallback>.

We should reformat the child nodes to match this.

Exclude content on a per-post basis

A lot of pages that use custom templates may not have a conventional IMAGE/TITLE/CONTENT structure. The ability to prevent those pages from generating what would essentially be empty AMP pages would be useful.

2 Important Problems With WordPress Plugin

The most important problem is that the pages generated by this plugin do NOT show the Google ads: here is a page of Monty Python quotes NOT generated by this plugin, and here is the same page generated by this plugin. As you can see from the links, plugin strips Google ads and replaces them with pure code.

The second problem concerns the usability of this plugin. It does NOT add "amp" at the end of existing pages. Rather, you can create those links yourself. However, how can a site with hundreds of pages and thousands of links manually replace every link with the version that has 'amp' at the end of itself? This is impossible. Therefore, this plugin has to automatically find and replace instances of existing links. Otherwise, Google's bots are not going to index AMP pages.

kses leaves content inside stripped tags

If post content has something like <script>alert( 'Howdy' )</script>, running the content through kses for amp rendering results in alert( 'Howdy' ) showing up in the content, which isn't ideal.

Add WPCOM Stats Pixel

For WPCOM + Jetpack: we should output a stats pixel to bump appropriate stats when an AMP page is viewed.

Easier Templating

We should make it easier to swap in your own template to allow for customization of styles, layout, header/footer, etc.

Feature Request: AMP Link Toggle for Smartphone Visitors

So when it's toggled on all your AMP-enabled content links redirects to the AMP version of the content if the visitor is on a smartphone, but the links remain the same for non-smartphone users. This way visitors can take advantage of the speed increases even though they didn't access your content through Google's new AMP-powered carousel. If it's toggled off (default), then all your links point to the original content, even for smartphone visitors.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.