l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中显示相关页面（2 种方法）

如何在 WordPress 中显示相关页面（2 种方法）

Bug编译狮

Bug编译狮

在 WordPress 网站上展示相关的页面可以帮助用户更好地了解网站的内容和结构，同时也能够提高网站的用户体验。以下是两种常见的方法来实现这一目标：

方法 1: 使用 related_posts 插件

步骤：

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

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

示例代码：

<!-- 在文章页中添加以下代码 -->
<div id="related-posts">
    <?php related_posts(); ?>
</div>

<script>
jQuery(document).ready(function($) {
    // 自定义相关文章数量
    $('#related-posts').wp_relatedPosts({
        'posts_per_page': 5,
        'post_type': 'post',
        'category__in': [/* 需要筛选的分类 ID */],
        'tags_in': ['tag1', 'tag2'],
        'exclude': /* 要排除的文章 ID 或类目 ID */
    });
});
</script>

注意：

  • 将 [/* 需要筛选的分类 ID */] 替换为实际需要的分类 ID。
  • 如果不提供 category__in 参数，则默认显示所有类别下的相关文章。
  • tags_in 参数用于指定要查看的标签。

方法 2: 利用 HTML 和 JavaScript 实现自定义相关页面

步骤：

  1. HTML 结构： 创建一个容器元素来放置相关页面列表。
  2. JavaScript 动作： 编写 JavaScript 代码来动态加载相关页面。

示例代码：

<!-- 添加一个容器 -->
<div class="related-posts-container"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var container = document.querySelector('.related-posts-container');

    // 模拟获取相关文章数据
    var relatedPostsData = [
        { title: 'Post Title 1', link: '#', excerpt: 'Excerpt for Post 1' },
        { title: 'Post Title 2', link: '#', excerpt: 'Excerpt for Post 2' },
        { title: 'Post Title 3', link: '#', excerpt: 'Excerpt for Post 3' }
    ];

    // 渲染相关文章
    relatedPostsData.forEach(post => {
        var li = document.createElement('li');
        li.innerHTML = `
            <a href="${post.link}" target="_blank">${post.title}</a>
            <span>${post.excerpt}</span>
        `;
        container.appendChild(li);
    });
});
</script>

效果： 这段代码会在页面加载时自动渲染出一系列相关文章链接，方便用户快速访问相似内容。

这两种方法都可以帮助您在 WordPress 网站上有效地展示相关页面，提升用户体验。选择哪种方法取决于您的具体需求和站点的具体情况。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

相关页面简介

在 WordPress 中，”相关页面”通常指的是根据用户浏览历史、搜索关键词或网站结构来推荐的内容列表。这些页面可以帮助提高用户的使用体验，同时也可以作为搜索引擎优化的一部分。

方法一：通过标签和分类管理相关性

1. 简单地添加标签和分类

首先，在 WordPress 的主题文件夹中创建一个 tags.php 或 categories.php 文件，用于处理与标签和分类相关的逻辑。例如：

<?php
function add_tags_and_categories() {
    global $wp_query;
    if ($wp_query->query_vars['cat'] && is_category()) {
        register_sidebar(array(
            'name' => __('Categories'),
            'id' => 'categories-sidebar',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h4>',
            'after_title' => '</h4>'
        ));
    }

    if (is_tag()) {
        register_sidebar(array(
            'name' => __('Tags'),
            'id' => 'tags-sidebar',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h4>',
            'after_title' => '</h4>'
        ));
    }
}
add_action('init', 'add_tags_and_categories');

然后，在 <head> 部分添加以下代码以启用这些插件：

<script type="text/javascript">
jQuery(function($) {
    $('body').ready(function(){
        var wpd = window.wpdocs;
        wpd.init({
            categories: [
                { title: "Category 1", slug: "category-1" },
                { title: "Category 2", slug: "category-2" }
            ],
            tags: [
                { title: "Tag 1", slug: "tag-1" },
                { title: "Tag 2", slug: "tag-2" }
            ]
        });
    });
});
</script>

方法二：使用插件

使用 Gutenberg Editor 插件

  1. 安装并激活 Gutenberg Editor 插件。在 WordPress 主目录下的 plugins 文件夹中找到 gutenberg-editor.zip 文件，解压到当前工作目录下。

  2. 在 functions.php 文件中加载插件：

    function my_custom_gutenberg_editor_init() {
   // 加载 Gutenberg 编辑器插件
   require_once(ABSPATH . '/wp-admin/includes/plugin.php' );
   load_plugin_textdomain( 'your-plugin-name', false, basename( __DIR__, '.php' ) . '/languages/' );
   load_plugin_file( 'your-plugin-name', 'inc/gutenberg/editor/init.php' );
}
add_action( 'admin_init', 'my_custom_gutenberg_editor_init' );

  3. 在需要的地方调用 Gutenberg 编辑器初始化函数：

    add_action( 'gutenberg_before_theme_setup', 'my_custom_gutenberg_editor_init' );

使用其他插件

对于其他类型的插件，如 related_posts 插件，你可以按照其文档指导进行配置和使用。

示例代码

标签和分类示例代码

function add_tags_and_categories() {
    global $wp_query;
    if ($wp_query->query_vars['cat'] && is_category()) {
        register_sidebar(array(
            'name' => __('Categories'),
            'id' => 'categories-sidebar',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h4>',
            'after_title' => '</h4>'
        ));
    }

    if (is_tag()) {
        register_sidebar(array(
            'name' => __('Tags'),
            'id' => 'tags-sidebar',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>',
            'before_title' => '<h4>',
            'after_title' => '</h4>'
        ));
    }
}
add_action('init', 'add_tags_and_categories');

使用 Gutenberg Editor 插件

function my_custom_gutenberg_editor_init() {
    // 加载 Gutenberg 编辑器插件
    require_once(ABSPATH . '/wp-admin/includes/plugin.php' );
    load_plugin_textdomain( 'your-plugin-name', false, basename( __DIR__, '.php' ) . '/languages/' );
    load_plugin_file( 'your-plugin-name', 'inc/gutenberg/editor/init.php' );
}
add_action( 'admin_init', 'my_custom_gutenberg_editor_init' );

注意事项

  • 在使用任何插件之前，请确保已正确安装和激活它们。
  • 不要将敏感信息（如密码）存储在插件或主题文件中，以防数据泄露。

通过上述方法，你可以在 WordPress 中轻松实现“相关页面”的功能。希望这对你有所帮助！

最新更新