如何将WordPress主题转为AMP就绪主题？Robot主题子主题改造求助

Alright, let's walk through converting the Robot multipurpose WordPress theme to AMP-ready using a child theme—no plugins needed. I’ve tackled similar theme conversions before, so here’s a practical, step-by-step guide tailored to your goal:

Never modify the parent Robot theme directly—all changes need to live in a child theme to avoid losing them on updates. Here’s how to set it up:

• Create a folder named robot-child in your WordPress wp-content/themes/ directory.
• Inside this folder, create a style.css file with the following header (update the details to match your site):

/*
Theme Name: Robot Child (AMP Ready)
Theme URI: https://your-site-url.com/
Description: Child theme for Robot multipurpose theme, modified for AMP compliance
Author: Your Name
Author URI: https://your-site-url.com/
Template: robot
Version: 1.0.0
*/

/* Import parent theme base styles */
@import url("../robot/style.css");

/* Add your AMP-specific custom styles here */

• Create a functions.php file in the child theme folder, starting with the opening PHP tag:

<?php
// Child theme functions for AMP compliance

AMP enforces strict rules against unapproved scripts and styles. Let’s clean up the theme’s output:

• Remove unapproved inline scripts: Add these filters to your child theme’s functions.php to strip out inline JS that isn’t AMP-related:

// Clean inline scripts from post content
add_filter('the_content', 'robot_child_remove_non_amp_js');
function robot_child_remove_non_amp_js($content) {
    // Remove any script tags that don't reference AMP components
    return preg_replace('#<script(?!.*amp-.*)>(.*?)</script>#is', '', $content);
}

// Clean scripts from header and footer
add_action('wp_head', 'robot_child_clean_head_output', 99);
function robot_child_clean_head_output() {
    ob_start(function($output) {
        // Strip non-AMP scripts and unapproved styles
        $output = preg_replace('#<script(?!.*amp-.*)>(.*?)</script>#is', '', $output);
        $output = preg_replace('#<link rel="stylesheet"(?!.*amp-custom)#is', '', $output);
        return $output;
    });
}

add_action('wp_footer', 'robot_child_clean_footer_output', 99);
function robot_child_clean_footer_output() {
    ob_start(function($output) {
        return preg_replace('#<script(?!.*amp-.*)>(.*?)</script>#is', '', $output);
    });
}

• Replace regular images with <amp-img>: AMP requires using its own image component. Add this filter to convert images in your content:

add_filter('the_content', 'robot_child_convert_images_to_amp');
function robot_child_convert_images_to_amp($content) {
    // Replace <img> tags with <amp-img>, adding responsive layout
    return preg_replace('#<img(.*?)src="(.*?)"(.*?)>#i', '<amp-img$1src="$2"$3layout="responsive"></amp-img>', $content);
}

Pro tip: Ensure all images have width and height attributes (the parent theme should already add these, but double-check). The responsive layout will handle scaling for mobile devices.

AMP needs specific core scripts and boilerplate code to work. Add these to your child theme’s functions.php:

// Add AMP core scripts and components
add_action('wp_head', 'robot_child_add_amp_components');
function robot_child_add_amp_components() {
    // AMP core script
    echo '<script async src="https://cdn.ampproject.org/v0.js"></script>';
    
    // Add additional AMP components your theme uses (example: for sliders)
    echo '<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>';
    
    // AMP viewport meta tag
    echo '<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">';
}

// Add AMP boilerplate CSS
add_action('wp_head', 'robot_child_add_amp_boilerplate', 10);
function robot_child_add_amp_boilerplate() {
    echo '<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>';
}

Robot is a multipurpose theme, so you’ll need to adjust its unique features:

• Sliders/Carousels: If the parent theme uses a custom JS slider, copy the slider template file from the parent theme to your child theme, then rewrite it using the <amp-carousel> component. Structure it with amp-carousel tags, set layout="responsive", and add slides as direct children.
• Forms: Replace regular contact forms with <amp-form>. Add the amp-form component script (like we did for amp-carousel), then modify your form tags to use action-xhr instead of action, and ensure form inputs follow AMP’s rules.
• Responsive Menus: Replace any JS-powered menu toggles with CSS-only solutions (using :checked pseudo-classes for hamburger menus, for example) since custom JS isn’t allowed.

Once you’ve made these changes, test for compliance:

• Append #development=1 to any page URL (e.g., https://your-site.com/about/#development=1) and open it in Chrome or Firefox.
• Check the browser’s developer console for AMP-specific errors. Fix each issue one by one—common problems include missing image dimensions, unapproved scripts, or invalid CSS.

To help search engines recognize your AMP pages, add a canonical link to your child theme’s functions.php:

add_action('wp_head', 'robot_child_add_amp_canonical');
function robot_child_add_amp_canonical() {
    echo '<link rel="canonical" href="' . get_permalink() . '">';
}

内容的提问来源于stack exchange，提问作者Rakesh Dubey