{"id":2935,"date":"2025-06-11T09:20:29","date_gmt":"2025-06-11T01:20:29","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/2935.html"},"modified":"2025-06-11T09:20:29","modified_gmt":"2025-06-11T01:20:29","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-wordpress-%e4%b8%ad%e6%98%be%e7%a4%ba%e7%9b%b8%e5%85%b3%e9%a1%b5%e9%9d%a2%ef%bc%882-%e7%a7%8d%e6%96%b9%e6%b3%95%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/2935.html","title":{"rendered":"\u5982\u4f55\u5728 WordPress \u4e2d\u663e\u793a\u76f8\u5173\u9875\u9762\uff082 \u79cd\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 网站上展示相关的页面可以帮助用户更好地了解网站的内容和结构，同时也能够提高网站的用户体验。以下是两种常见的方法来实现这一目标：<\/p>\n

方法 1: 使用 related_posts<\/code> 插件<\/h3>\n

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

    \n
  1. 安装插件：<\/strong> 在您的 WordPress 后台中，导航到“插件”部分，搜索并安装“Related Posts”插件。<\/li>\n
  2. 激活插件：<\/strong> 安装完成后，找到该插件，点击“激活”按钮。<\/li>\n
  3. 配置插件：<\/strong> 进入“相关帖子”设置选项，根据需要调整相关性、发布时间范围等参数。<\/li>\n
  4. 应用样式：<\/strong> 可以通过 CSS 样式或者插件提供的样式选择器来定制相关页面的外观。<\/li>\n<\/ol>\n

    效果：<\/strong>\n安装并启用后，您可以在文章页或特定页面下看到相关的其他文章列表。这些文章通常会基于它们与当前页面的相关性和发布时间而被排列。<\/p>\n

    示例代码：<\/h3>\n
    <!-- 在文章页中添加以下代码 -->\n<div id=\"related-posts\">\n    <?php related_posts(); ?>\n<\/div>\n\n<script>\njQuery(document).ready(function($) {\n    \/\/ 自定义相关文章数量\n    $('#related-posts').wp_relatedPosts({\n        'posts_per_page': 5,\n        'post_type': 'post',\n        'category__in': [\/* 需要筛选的分类 ID *\/],\n        'tags_in': ['tag1', 'tag2'],\n        'exclude': \/* 要排除的文章 ID 或类目 ID *\/\n    });\n});\n<\/script><\/code><\/pre>\n
    注意：<\/strong><\/p>\n
      \n
    • 将 [\/* 需要筛选的分类 ID *\/]<\/code> 替换为实际需要的分类 ID。<\/li>\n
    • 如果不提供 category__in<\/code> 参数，则默认显示所有类别下的相关文章。<\/li>\n
    • tags_in<\/code> 参数用于指定要查看的标签。<\/li>\n<\/ul>\n
      方法 2: 利用 HTML 和 JavaScript 实现自定义相关页面<\/h3>\n
      步骤：<\/strong><\/p>\n
        \n
      1. HTML 结构：<\/strong> 创建一个容器元素来放置相关页面列表。<\/li>\n
      2. JavaScript 动作：<\/strong> 编写 JavaScript 代码来动态加载相关页面。<\/li>\n<\/ol>\n
        示例代码：<\/strong><\/p>\n
        <!-- 添加一个容器 -->\n<div class=\"related-posts-container\"><\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var container = document.querySelector('.related-posts-container');\n\n    \/\/ 模拟获取相关文章数据\n    var relatedPostsData = [\n        { title: 'Post Title 1', link: '#', excerpt: 'Excerpt for Post 1' },\n        { title: 'Post Title 2', link: '#', excerpt: 'Excerpt for Post 2' },\n        { title: 'Post Title 3', link: '#', excerpt: 'Excerpt for Post 3' }\n    ];\n\n    \/\/ 渲染相关文章\n    relatedPostsData.forEach(post => {\n        var li = document.createElement('li');\n        li.innerHTML = `\n            <a href=\"${post.link}\" target=\"_blank\">${post.title}<\/a>\n            <span>${post.excerpt}<\/span>\n        `;\n        container.appendChild(li);\n    });\n});\n<\/script><\/code><\/pre>\n
        效果：<\/strong>\n这段代码会在页面加载时自动渲染出一系列相关文章链接，方便用户快速访问相似内容。<\/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
        \"黑板前的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 中，”相关页面”通常指的是根据用户浏览历史、搜索关键词或网站结构来推荐的内容列表。这些页面可以帮助提高用户的使用体验，同时也可以作为搜索引擎优化的一部分。<\/p>\n
        方法一：通过标签和分类管理相关性<\/h3>\n
        1. 简单地添加标签和分类<\/h4>\n
        首先，在 WordPress 的主题文件夹中创建一个 tags.php<\/code> 或 categories.php<\/code> 文件，用于处理与标签和分类相关的逻辑。例如：<\/p>\n
        <?php\nfunction add_tags_and_categories() {\n    global $wp_query;\n    if ($wp_query->query_vars['cat'] && is_category()) {\n        register_sidebar(array(\n            'name' => __('Categories'),\n            'id' => 'categories-sidebar',\n            'before_widget' => '<div id=\"%1$s\" class=\"widget %2$s\">',\n            'after_widget' => '<\/div>',\n            'before_title' => '<h4>',\n            'after_title' => '<\/h4>'\n        ));\n    }\n\n    if (is_tag()) {\n        register_sidebar(array(\n            'name' => __('Tags'),\n            'id' => 'tags-sidebar',\n            'before_widget' => '<div id=\"%1$s\" class=\"widget %2$s\">',\n            'after_widget' => '<\/div>',\n            'before_title' => '<h4>',\n            'after_title' => '<\/h4>'\n        ));\n    }\n}\nadd_action('init', 'add_tags_and_categories');<\/code><\/pre>\n
        然后，在 <head><\/code> 部分添加以下代码以启用这些插件：<\/p>\n
        <script type=\"text\/javascript\">\njQuery(function($) {\n    $('body').ready(function(){\n        var wpd = window.wpdocs;\n        wpd.init({\n            categories: [\n                { title: \"Category 1\", slug: \"category-1\" },\n                { title: \"Category 2\", slug: \"category-2\" }\n            ],\n            tags: [\n                { title: \"Tag 1\", slug: \"tag-1\" },\n                { title: \"Tag 2\", slug: \"tag-2\" }\n            ]\n        });\n    });\n});\n<\/script><\/code><\/pre>\n
        方法二：使用插件<\/h3>\n
        使用 Gutenberg Editor 插件<\/h4>\n
          \n
        1. \n
          安装并激活 Gutenberg Editor 插件<\/strong>。在 WordPress 主目录下的 plugins<\/code> 文件夹中找到 gutenberg-editor.zip<\/code> 文件，解压到当前工作目录下。<\/p>\n<\/li>\n
        2. \n
          在 functions.php<\/code> 文件中加载插件<\/strong>：<\/p>\n
          function my_custom_gutenberg_editor_init() {\n   \/\/ 加载 Gutenberg 编辑器插件\n   require_once(ABSPATH . '\/wp-admin\/includes\/plugin.php' );\n   load_plugin_textdomain( 'your-plugin-name', false, basename( __DIR__, '.php' ) . '\/languages\/' );\n   load_plugin_file( 'your-plugin-name', 'inc\/gutenberg\/editor\/init.php' );\n}\nadd_action( 'admin_init', 'my_custom_gutenberg_editor_init' );<\/code><\/pre>\n<\/li>\n
        3. \n
          在需要的地方调用 Gutenberg 编辑器初始化函数<\/strong>：<\/p>\n
          add_action( 'gutenberg_before_theme_setup', 'my_custom_gutenberg_editor_init' );<\/code><\/pre>\n<\/li>\n<\/ol>\n
          使用其他插件<\/h4>\n
          对于其他类型的插件，如 related_posts<\/code> 插件，你可以按照其文档指导进行配置和使用。<\/p>\n
          示例代码<\/h3>\n
          标签和分类示例代码<\/h4>\n
          function add_tags_and_categories() {\n    global $wp_query;\n    if ($wp_query->query_vars['cat'] && is_category()) {\n        register_sidebar(array(\n            'name' => __('Categories'),\n            'id' => 'categories-sidebar',\n            'before_widget' => '<div id=\"%1$s\" class=\"widget %2$s\">',\n            'after_widget' => '<\/div>',\n            'before_title' => '<h4>',\n            'after_title' => '<\/h4>'\n        ));\n    }\n\n    if (is_tag()) {\n        register_sidebar(array(\n            'name' => __('Tags'),\n            'id' => 'tags-sidebar',\n            'before_widget' => '<div id=\"%1$s\" class=\"widget %2$s\">',\n            'after_widget' => '<\/div>',\n            'before_title' => '<h4>',\n            'after_title' => '<\/h4>'\n        ));\n    }\n}\nadd_action('init', 'add_tags_and_categories');<\/code><\/pre>\n
          使用 Gutenberg Editor 插件<\/h4>\n
          function my_custom_gutenberg_editor_init() {\n    \/\/ 加载 Gutenberg 编辑器插件\n    require_once(ABSPATH . '\/wp-admin\/includes\/plugin.php' );\n    load_plugin_textdomain( 'your-plugin-name', false, basename( __DIR__, '.php' ) . '\/languages\/' );\n    load_plugin_file( 'your-plugin-name', 'inc\/gutenberg\/editor\/init.php' );\n}\nadd_action( 'admin_init', 'my_custom_gutenberg_editor_init' );<\/code><\/pre>\n
          注意事项<\/h3>\n
            \n
          • 在使用任何插件之前，请确保已正确安装和激活它们。<\/li>\n
          • 不要将敏感信息（如密码）存储在插件或主题文件中，以防数据泄露。<\/li>\n<\/ul>\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":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[59],"tuisongtax":[],"class_list":["post-2935","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\/2935","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=2935"}],"version-history":[{"count":0,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/posts\/2935\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/media?parent=2935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/categories?post=2935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tags?post=2935"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/wpcms\/wp-json\/wp\/v2\/tuisongtax?post=2935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}