Here are some lessons in making a theme AMP-compatible, from adding AMP support to Twenty Nineteen:
Prevent Enqueuing Of Scripts
Though the plugin can remove enqueued scripts, it’s good to prevent enqueuing them on AMP URLs. This prevents a validation error.
In a function that enqueues scripts, you can exit early if it’s an AMP endpoint:
add_action( 'enqueue_scripts', function() {
if ( function_exists( 'is_amp_endpoint' && is_amp_endpoint() ) {
return;
}
// Enqueue scripts here.
} );
The skip-link-focus-fix.js script in Twenty Nineteen that doesn’t need an AMP implementation.
This workaround for IE 11 keyboard users is common in themes. But it’s not needed at all now, as there’s a fix in the AMP project.
Styling Fixes
Comparing AMP and non-AMP pages can show when there are styling fixes needed on AMP:
The AMP version of this URL is horizontally compressed. This is because the styling on the non-AMP URL doesn’t correctly apply to the AMP URL.
The validator converts style selectors for img
to amp-img
.
For example this selector:
.site-header.featured-image .site-featured-image .post-thumbnail img {
height: auto;
/* more style rules */
}
…is converted to:
.site-header.featured-image .site-featured-image .post-thumbnail amp-img {
height: auto;
/* more style rules */
}
This usually works well, as the <amp-img>
is the AMP version of <img>
.
But there’s a style rule of object-fit: cover
that doesn’t work when applied to <amp-img>
.
So this can simply use a selector that ends in amp-img > img
to ensure that it applies to <img>
.
.site-header.featured-image .site-featured-image .post-thumbnail amp-img > img {
height: auto;
/* more style rules */
}