{"id":2658,"date":"2025-06-11T05:11:24","date_gmt":"2025-06-10T21:11:24","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/2658.html"},"modified":"2025-06-11T05:11:24","modified_gmt":"2025-06-10T21:11:24","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8wordpress%e4%b8%ad%e5%88%9b%e5%bb%baamp%e8%a1%a8%e5%8d%95%ef%bc%88%e7%ae%80%e6%98%93%e6%96%b9%e6%b3%95%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/2658.html","title":{"rendered":"\u5982\u4f55\u5728WordPress\u4e2d\u521b\u5efaAMP\u8868\u5355\uff08\u7b80\u6613\u65b9\u6cd5\uff09"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n

在WordPress中创建AMP表单是一种提高网站加载速度和用户体验的方法。AMP（Accelerated Mobile Pages）是Google为移动设备优化的网页标准，通过减少HTTP请求、压缩图像和优化HTML等手段来提升页面加载速度。<\/p>\n

创建AMP表单的基本步骤：<\/h3>\n
    \n
  1. \n

    安装并激活AMP插件<\/strong>：<\/p>\n

      \n
    • 打开WordPress后台。<\/li>\n
    • 导航到“插件” > “添加新插件”。<\/li>\n
    • 搜索并安装“WordPress AMP Builder”插件。这个插件允许你在WordPress中快速创建AMP页面。<\/li>\n
    • 安装完成后，启用该插件。<\/li>\n<\/ul>\n<\/li>\n
    • \n

      上传表单文件<\/strong>：<\/p>\n

        \n
      • 在WordPress后台，导航到“编辑” > “页面”或“文章”，然后选择要转换成AMP的页面。<\/li>\n
      • 将表单的HTML代码复制粘贴到WordPress的文本编辑器中。例如，如果你有一个简单的表单，可能如下所示：<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
        <form>\n  <label for=\"name\">姓名:<\/label><br>\n  <input type=\"text\" id=\"name\"><br>\n  <label for=\"email\">邮箱:<\/label><br>\n  <input type=\"email\" id=\"email\"><br>\n  <button type=\"submit\">提交<\/button>\n<\/form><\/code><\/pre>\n
          \n
        1. \n
          设置表单属性<\/strong>：<\/p>\n
            \n
          • 使用amp-form<\/code>元素包裹整个表单，确保它符合AMP规范。<\/li>\n
          • 添加必要的amp-captcha<\/code>元素以防止机器人填写表单。<\/li>\n<\/ul>\n<\/li>\n
          • \n
            保存更改<\/strong>：<\/p>\n
              \n
            • 确认所有设置后，点击“发布”按钮。<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
              示例代码及使用步骤：<\/h3>\n
              假设我们有一个简单的用户注册表单，以下是完整的AMP表单代码：<\/p>\n
              <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Amp Form Example<\/title>\n    <!-- 引入AMP样式 -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.ampproject.org\/v0.js\/css\/amp.css\">\n    <!-- 引入AMP组件库 -->\n    <script async custom-element=\"amp-captcha\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-captcha-0.1.js\"><\/script>\n    <style amp-custom>\n        .container {\n            width: 75%;\n            margin-left: auto;\n            margin-right: auto;\n            padding-top: 1rem;\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n  <h1>注册<\/h1>\n  <form action=\"\/register\" method=\"post\">\n    <div class=\"form-group\">\n      <label for=\"username\">用户名:<\/label>\n      <input type=\"text\" name=\"username\" id=\"username\" required>\n    <\/div>\n    <div class=\"form-group\">\n      <label for=\"password\">密码:<\/label>\n      <input type=\"password\" name=\"password\" id=\"password\" required>\n    <\/div>\n    <div class=\"form-group\">\n      <label for=\"captcha\">验证码:<\/label>\n      <amp-captcha><\/amp-captcha>\n    <\/div>\n    <div class=\"form-group\">\n      <button type=\"submit\">注册<\/button>\n    <\/div>\n  <\/form>\n<\/div>\n\n<script async custom-element=\"amp-form\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-form-0.1.js\"><\/script>\n<script async custom-template=\"amp-mustache\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-mustache-0.2.js\"><\/script>\n\n<!-- 引入AMP脚本 -->\n<script async src=\"https:\/\/cdn.ampproject.org\/v0.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
              效果说明：<\/h3>\n
              当用户访问此页面时，浏览器会自动检测是否支持AMP。如果支持，AMP插件将处理表单的加载，同时保证良好的性能和响应时间。这不仅提高了用户的浏览体验，也提升了搜索引擎对网站的评分，从而有助于SEO。<\/p>\n
              请注意，为了使表单真正成为AMP表单，你需要确保所有的链接都指向有效的HTTPS URL，并且表单中的任何动态内容都是异步加载的，这样可以进一步提升加载速度。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
              \r\n
              \r\n
              \r\n
              \r\n
              \r\n
              \"黑板前的Bug语法讲师\"<\/figure>\r\n\r\n\r\n\r\n
              黑板前的Bug语法讲师<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
              \r\n
              \r\n
              课程目标：<\/h3>\n
              本课程旨在展示如何使用WordPress的AMP功能来创建一个简单有效的表单。<\/p>\n
              课程大纲：<\/h3>\n
                \n
              1. 引入AMP<\/strong>：了解什么是AMP以及它在WordPress中的应用。<\/li>\n
              2. 设置AMP环境<\/strong>：通过WordPress自定义菜单和插件设置AMP环境。<\/li>\n
              3. 创建AMP表单<\/strong>：使用AMP模板创建一个基本的表单页面。<\/li>\n
              4. 验证AMP表单<\/strong>：检查AMP表单是否成功提交并显示到AMP页面上。<\/li>\n
              5. 优化AMP表单<\/strong>：提供一些实用建议以提升AMP表单的表现力。<\/li>\n<\/ol>\n
                学习步骤：<\/h3>\n
                1. 引入AMP<\/h4>\n
                首先，让我们了解一下什么是AMP（Accelerated Mobile Pages）。AMP是一种为移动设备设计的快速加载、无广告、轻量级的网页格式。它可以帮助网站在移动设备上更快地加载，提高用户体验。<\/p>\n
                <!-- AMP模板文件 -->\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>AMP Form Example<\/title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <!-- 去除不必要的CSS和JavaScript -->\n    <style type=\"text\/css\">\n        body { margin: 0; }\n    <\/style>\n<\/head>\n<body>\n<div class=\"amp-container\">\n    <div class=\"amp-body\">\n        <form id=\"my-form\">\n            <label for=\"name\">Name:<\/label><br>\n            <input type=\"text\" id=\"name\" name=\"name\"><br>\n            <button type=\"submit\">Submit<\/button>\n        <\/form>\n    <\/div>\n<\/div>\n\n<script async src=\"https:\/\/cdn.ampproject.org\/v0.js\"><\/script>\n<script>\n    window.AMP.load(\n        'https:\/\/cdn.ampproject.org\/v0\/amp-form-1.js',\n        function() {\n            \/\/ 加载AMP模板后执行此函数\n            document.getElementById('my-form').addEventListener('submit', function(event) {\n                event.preventDefault();\n                const formData = new FormData(this);\n                console.log(formData.get('name')); \/\/ 输出表单数据\n                this.reset(); \/\/ 重置表单\n            });\n        },\n        null,\n        true \/* defer *\/\n    );\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
                2. 设置AMP环境<\/h4>\n
                接下来，我们设置AMP环境以便在WordPress主题中使用AMP模板。这可以通过修改WordPress的主题配置文件来实现。<\/p>\n
                打开wp-content\/themes\/[theme-name]\/functions.php<\/code>文件，找到以下位置：<\/p>\n
                function wpamplite() {\n    add_action( 'wp_enqueue_scripts', 'wpamplite_enqueue' );\n}\nadd_action( 'init', 'wpamplite_init' );\n\nfunction wpamplite_init() {\n    $scripts[] = 'https:\/\/cdn.ampproject.org\/v0\/amp-form-1.js';\n    wp_register_script( 'amp-form', esc_url( join( ',', $scripts ) ), array(), '1.0', false );\n}\n\nfunction wpamplite_enqueue() {\n    wp_enqueue_script( 'amp-form' );\n}<\/code><\/pre>\n
                然后，在functions.php<\/code>的末尾添加以下行：<\/p>\n
                add_theme_support( 'amp' );<\/code><\/pre>\n
                3. 创建AMP表单<\/h4>\n
                现在，我们将使用AMP模板创建一个简单的表单页。请确保将上述代码片段插入到相应的AMP模板文件中，例如template-parts\/content\/form.html.php<\/code>或template-parts\/content\/section.html.php<\/code>。<\/p>\n
                <?php get_header(); ?>\n<div class=\"content\">\n    <h1>AMP Form Example<\/h1>\n    <?php the_content(); ?>\n<\/div><!-- .content -->\n\n<footer class=\"site-footer\">\n    <a href=\"<?php echo esc_url( home_url( '\/' ) ); ?>\" title=\"Home\">Home<\/a> |\n    <a href=\"<?php echo esc_url( admin_url( '\/themes.php' ) ); ?>\" title=\"Themes\">Themes<\/a> |\n    <a href=\"<?php echo esc_url( admin_url( '\/options-general.php' ) ); ?>\" title=\"Options\">Options<\/a>\n<\/footer><!-- #site-navigation -->\n<?php get_sidebar(); ?>\n<?php get_template_part( 'loop', 'comments' ); ?>\n<?php wp_footer(); ?>\n<\/body>\n<\/html><\/code><\/pre>\n
                4. 验证AMP表单<\/h4>\n
                要验证AMP表单，可以在AMP模板中添加一些JavaScript代码来处理表单提交事件。<\/p>\n
                在template-parts\/content\/form.html.php<\/code>文件中加入以下代码：<\/p>\n
                <form id=\"my-form\" action=\"\/submit_form\/\" method=\"post\">\n    ...\n<\/form><\/code><\/pre>\n
                接着，在AMP模板的底部添加以下JavaScript代码：<\/p>\n
                document.addEventListener('DOMContentLoaded', () => {\n    let form = document.querySelector('#my-form');\n    if (form) {\n        form.addEventListener('submit', e => {\n            e.preventDefault();\n\n            const formData = new FormData(form);\n            console.log(formData);\n\n            \/\/ 在这里可以进一步操作表单数据，例如保存到数据库等。\n        });\n    }\n});<\/code><\/pre>\n
                注意：在实际开发过程中，需要根据具体需求对这些示例代码进行调整。<\/p>\n
                5. 提升AMP表单表现<\/h4>\n
                为了提升AMP表单的表现力，可以考虑以下几点：<\/p>\n
                  \n
                • 增加交互性<\/strong>: 使用动画效果来增强用户界面体验。<\/li>\n
                • 优化布局<\/strong>: 使用响应式设计来适应不同屏幕尺寸。<\/li>\n
                • 增加样式<\/strong>: 使用AMP提供的CSS类来定制AMP表单的外观。<\/li>\n<\/ul>\n
                  通过以上步骤，您应该能够创建一个基本的AMP表单并在WordPress中使用AMP模板。如果需要更多关于AMP的详细信息或有其他问题，请随时提问！<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                  Bug编译狮 在WordPress中创建AMP表单是一种提高网站加载..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[59],"tuisongtax":[],"class_list":["post-2658","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-pzjc"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/comments?post=2658"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2658\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=2658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=2658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=2658"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=2658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}