{"id":1076,"date":"2025-06-10T02:35:48","date_gmt":"2025-06-09T18:35:48","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/1076.html"},"modified":"2025-06-14T11:47:52","modified_gmt":"2025-06-14T03:47:52","slug":"wordpress%e5%8c%ba%e5%9d%97%e7%bc%96%e8%be%91%e5%99%a8%e4%b8%ad%e7%9a%84%e5%b0%81%e9%9d%a2%e5%9b%be%e7%89%87%e4%b8%8e%e7%89%b9%e8%89%b2%e5%9b%be%e7%89%87%ef%bc%88%e5%88%9d%e5%ad%a6%e8%80%85%e6%8c%87","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/1076.html","title":{"rendered":"WordPress\u533a\u5757\u7f16\u8f91\u5668\u4e2d\u7684\u5c01\u9762\u56fe\u7247\u4e0e\u7279\u8272\u56fe\u7247\uff08\u521d\u5b66\u8005\u6307\u5357\uff09"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n

写 Bug工程师：<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n

WordPress区块编辑器中的封面图片与特色图片<\/h3>\n

在WordPress的区块编辑器中，我们经常需要添加封面图片和特色图片来美化我们的文章或页面。这两个元素对于提升网站的整体视觉效果至关重要。本文将详细介绍如何在WordPress中使用这些区块。<\/p>\n

1. 添加封面图片<\/h4>\n

步骤：<\/strong><\/p>\n

    \n
  1. 登录到您的WordPress后台。<\/li>\n
  2. 在左侧菜单栏选择“内容” -> “页面”或“帖子”。<\/li>\n
  3. 找到您想要添加封面图片的文章或页面。<\/li>\n
  4. 点击页面顶部的“编辑”按钮。<\/li>\n
  5. 在右侧编辑区域，找到并点击位于顶部的“区块”选项。<\/li>\n
  6. 在“区块”列表中找到“封面图片”或“背景图像”，点击它打开其设置面板。<\/li>\n
  7. 在“封面图片”设置中，您可以调整以下参数：\n
      \n
    • 标题<\/strong>：为封面图片添加一个标题。<\/li>\n
    • 链接<\/strong>：如果您的封面图片是一个链接，请在这里输入链接地址。<\/li>\n
    • 高度<\/strong>：设定封面图片的高度。<\/li>\n
    • 宽度<\/strong>：设定封面图片的宽度。<\/li>\n<\/ul><\/li>\n
    • 完成设置后，点击保存更改。<\/li>\n<\/ol>\n

      效果：<\/strong>\n封面图片现在会出现在文章或页面的顶部，根据您设置的高度和宽度自动缩放以适应整个页面。<\/p>\n

      2. 添加特色图片<\/h4>\n

      步骤：<\/strong><\/p>\n

        \n
      1. 如上所述，登录到WordPress后台并在“内容” -> “页面”或“帖子”中找到要添加特色图片的文章或页面。<\/li>\n
      2. 点击页面顶部的“编辑”按钮。<\/li>\n
      3. 在右侧编辑区域，找到并点击位于顶部的“区块”选项。<\/li>\n
      4. 在“区块”列表中找到“特色图片”或“内嵌图像”，点击它打开其设置面板。<\/li>\n
      5. 在“特色图片”设置中，您可以调整以下参数：\n
          \n
        • 标题<\/strong>：为特色图片添加一个标题。<\/li>\n
        • 链接<\/strong>：如果您的特色图片是一个链接，请在这里输入链接地址。<\/li>\n
        • 高度<\/strong>：设定特色图片的高度。<\/li>\n
        • 宽度<\/strong>：设定特色图片的宽度。<\/li>\n<\/ul><\/li>\n
        • 完成设置后，点击保存更改。<\/li>\n<\/ol>\n

          效果：<\/strong>\n特色图片现在会出现在文章或页面的底部，根据您设置的高度和宽度自动缩放以适应整个页面。<\/p>\n

          示例代码<\/h3>\n

          假设您已经有一个名为my_page.php<\/code>的页面文件，下面是一个简单的HTML代码片段，用于展示封面图片和特色图片：<\/p>\n

          <!-- 包含头部 -->\n<!DOCTYPE html>\n<html <?php language_attributes(); ?>>\n<head>\n    <meta charset=\"<?php bloginfo('charset'); ?>\">\n    <title><?php wp_title('|', true, 'right'); ?><\/title>\n    <!-- 引入CSS样式 -->\n    <link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\" \/>\n<\/head>\n\n<body>\n    <div class=\"container\">\n        <h1>Welcome to My Page<\/h1>\n\n        <!-- 使用封面图片 -->\n        <section id=\"cover-image-section\">\n            <figure>\n                <img src=\"<?php the_post_thumbnail_url('full'); ?>\" alt=\"Cover Image\">\n                <figcaption><?php the_title(); ?><\/figcaption>\n            <\/figure>\n        <\/section>\n\n        <!-- 使用特色图片 -->\n        <section id=\"featured-image-section\">\n            <figure>\n                <a href=\"<?php echo get_permalink(); ?>\"><img src=\"<?php the_post_thumbnail_url('thumbnail'); ?>\" alt=\"Featured Image\"><\/a>\n                <figcaption><?php the_title(); ?><\/figcaption>\n            <\/figure>\n        <\/section>\n\n        <!-- 其他区块内容 -->\n        <p>This is some content that follows the featured image.<\/p>\n    <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n
          这段代码展示了如何在WordPress页面中使用封面图片和特色图片。请确保在上传图片时，它们被正确地设置为特定尺寸以便在网页上显示。<\/p>\n
          通过以上步骤和示例代码，您可以轻松地在WordPress中添加封面图片和特色图片，从而增强您的网站视觉吸引力。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
          \r\n
          \r\n
          \r\n
          \r\n
          \r\n
          黑板IDE教书匠：<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
          \r\n
          \r\n
          课程目标<\/h3>\n
          本课程将帮助您了解如何使用WordPress的区块编辑器来添加封面图片和特色图片。通过这个教程，您将学习如何选择合适的图像文件、设置文件位置以及创建自定义区块以满足特定需求。<\/p>\n
          目标受众<\/h3>\n
            \n
          • WordPress初学者<\/li>\n
          • 对WordPress开发有基本了解的人士<\/li>\n<\/ul>\n
            教学大纲<\/h3>\n
              \n
            1. \n
              基础概念<\/strong><\/p>\n
                \n
              • 理解WordPress的块编辑器<\/li>\n
              • 基础HTML语法：标签和属性<\/li>\n<\/ul>\n<\/li>\n
              • \n
                上传封面图片<\/strong><\/p>\n
                  \n
                • 使用<div><\/code>区块插入图像<\/li>\n
                • 设置图像尺寸和位置<\/li>\n<\/ul>\n<\/li>\n
                • \n
                  上传特色图片<\/strong><\/p>\n
                    \n
                  • 使用<div><\/code>区块插入图像<\/li>\n
                  • 设置图像尺寸和位置<\/li>\n<\/ul>\n<\/li>\n
                  • \n
                    创建自定义区块<\/strong><\/p>\n
                      \n
                    • 创建自定义区块并设置样式<\/li>\n
                    • 配置自定义区块以显示或隐藏特定信息<\/li>\n<\/ul>\n<\/li>\n
                    • \n
                      主题集成<\/strong><\/p>\n
                        \n
                      • 如何在WordPress主题中集成自定义区块<\/li>\n
                      • 自定义区块如何影响页面布局<\/li>\n<\/ul>\n<\/li>\n
                      • \n
                        常见问题解答<\/strong><\/p>\n<\/li>\n<\/ol>\n
                        演示示例代码<\/h3>\n
                        示例一：上传封面图片<\/h4>\n
                        <div class=\"post-thumbnail\">\n    <img src=\"path\/to\/your\/image.jpg\" alt=\"Cover Image\">\n<\/div><\/code><\/pre>\n
                        示例二：上传特色图片<\/h4>\n
                        <div class=\"post-thumbnail\">\n    <img src=\"path\/to\/your\/image.jpg\" alt=\"Feature Image\">\n<\/div><\/code><\/pre>\n
                        示例三：创建自定义区块<\/h4>\n
                        <div id=\"custom-block\" class=\"block-content\">\n    <h2>Custom Block Title<\/h2>\n    <p>This is a custom block content.<\/p>\n<\/div><\/code><\/pre>\n
                        示例四：在WordPress主题中集成自定义区块<\/h4>\n
                        add_action( 'wp_head', function() {\n    wp_enqueue_script('my-custom-script');\n} );\n\nfunction my_custom_block_shortcode() {\n    return '<div id=\"custom-block\" class=\"block-content\"><h2>Custom Block Title<\/h2><p>This is a custom block content.<\/p><\/div>';\n}\n\nadd_shortcode('my_custom_block', 'my_custom_block_shortcode');<\/code><\/pre>\n
                        结语<\/h3>\n
                        通过以上步骤，您已经掌握了如何使用WordPress的区块编辑器为您的博客添加封面图片和特色图片。您可以根据需要进一步定制这些元素，以实现个性化的设计效果。希望这个教程能对您有所帮助！如果您有任何疑问，请随时提问。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                        写 Bug工程师： WordPress区块编辑器中的封面图片与特&#..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[49,50,3193],"tuisongtax":[],"class_list":["post-1076","post","type-post","status-publish","format-standard","hentry","category-wpdt","tag-rmzn","tag-xsbdtj","tag-bjqsyjq"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/1076","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=1076"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/1076\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=1076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=1076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=1076"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=1076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}