l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress侧边栏添加特色文章（4种方法）

如何在WordPress侧边栏添加特色文章（4种方法）

写 Bug工程师：

在WordPress的侧边栏添加特色文章可以让你的文章脱颖而出，吸引更多的访问者。以下是四种不同的方法来实现这一目标：

方法一：使用插件

  1. 安装“侧边栏文章”插件：

    • 请访问此链接下载并安装“侧边栏文章”插件。
    • 安装完成后，激活该插件。

  2. 配置插件：

    • 登录到您的WordPress管理后台。
    • 导航至“外观 > 布局”，然后选择您要添加特色文章的页面或区域。
    • 在右侧菜单中找到“侧边栏文章”选项，点击它以启用它。

  3. 设置文章类别：

    • 确保您已经为这些文章设置了特定的类别。这样，当用户浏览时，他们可以看到与之相关的文章。

示例代码

// 插入以下代码到主题的functions.php文件中，或者创建一个自定义函数并在主题的functions.php文件中调用

function add_featured_posts() {
    $args = array(
        'post_type' => 'post',
        'orderby' => 'rand', // 随机排列
        'posts_per_page' => 5, // 每页显示5篇文章
        'meta_key' => '_featured_post', // 自定义字段名
        'meta_value' => true, // 标记为"true"
        'order' => 'ASC'
    );

    $query = new WP_Query($args);
    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
            echo '<div class="featured-post">';
            the_title('<h3>', '</h3>');
            the_excerpt(); // 只显示文章摘要
            echo '</div>';
        endwhile;
    endif;
}
add_action('after_setup_theme', 'add_featured_posts');

// 创建一个自定义字段
function create_featured_field() {
    register_meta( 'post', '_featured_post', array(
        'type' => 'boolean',
        'show_in_rest' => false,
    ) );
}
add_action('init', 'create_featured_field');

方法二：手动添加文章标签

  1. 创建文章标签：

    • 在WordPress编辑器中输入新文章标题后，在文章内容下方点击“添加分类”按钮。
    • 从下拉菜单中选择您想要标记的文章类别。

  2. 通过URL添加文章标签：

    • 将带有?category=123&tag=abc参数的新文章地址复制粘贴到浏览器地址栏中，其中123是文章类别的ID，abc是文章标签的名称。

方法三：使用短代码

  1. 插入短代码：
    • 在侧边栏的空白处右击，选择“插入” -> “短代码”。
    • 输入以下短代码： 
      [featured_posts]
    • 这将自动根据设置的条件和数量显示最新或随机的特色文章。

方法四：使用CSS样式突出显示

  1. 设计CSS样式：

    • 编辑主题的样式表（如style.css），添加如下样式： 
      .featured-article {
 background-color: #f0f8ff; /* 背景颜色 */
 border-radius: 5px; /* 圆角边框 */
 padding: 20px; /* 内部边距 */
 margin-bottom: 20px; /* 下边距 */
}

  2. 应用样式：

    • 在侧边栏中为文章添加相应的CSS类（例如featured-article），然后确保它们位于其他文章之上，以便视觉上突出显示。

结论

以上方法可以帮助你在WordPress的侧边栏中添加特色文章。选择哪种方法取决于您的需求和偏好。每种方法都有其独特的优势，比如插件提供了更高级的功能，而手动添加则更灵活，适合对代码有更高控制力的开发者。

黑板IDE教书匠：

课程目标

本课程将介绍如何在WordPress侧边栏添加特色文章。我们将通过以下四种方法来实现这一目标：

  1. 自定义菜单：使用wp_nav_menu()函数创建一个侧边栏菜单。
  2. 定制CSS样式：利用CSS选择器为特定元素添加样式。
  3. 插件功能：引入并激活主题插件以实现此功能。
  4. 使用短代码：利用WordPress的短代码编辑器。

学习资源

方法一：使用自定义菜单

示例代码：

function custom_sidebars_menu() {
    $sidebars = array(
        'sidebar-1' => 'Sidebar 1',
        'sidebar-2' => 'Sidebar 2',
    );

    wp_nav_menu( array(
        'theme_location' => 'primary', // 主题位置名称
        'container'      => false, // 是否显示导航菜单容器
        'menu_class'     => 'custom-sidebars-menu', // 自定义菜单类名
        'items_wrap'     => '%3$s',
        'depth'          => -1, // 深度，默认值是-1表示无限深度
        'fallback_cb'    => 'fallback_callback', // 如果主菜单未找到时调用的回调函数
        'walker'         => new MySidebarsMenuWalker(), // 自定义的菜单解析器
        'sidebars'       => $sidebars,
    ) );
}

add_action('init', 'custom_sidebars_menu');

解释：

  1. wp_nav_menu()函数用于创建和管理WordPress侧边栏中的菜单。
  2. 设置$sidebars数组以指定每个侧边栏的标题。
  3. wp_nav_menu()函数接受一系列参数，包括$theme_location、$container、$menu_class等，以及$items_wrap、$depth、$fallback_cb和$walker。
  4. MySidebarsMenuWalker是自定义的菜单解析器，用于处理侧边栏菜单。
  5. fallback_callback可以作为wp_nav_menu()函数的一个回调函数，当主菜单不存在时执行。

方法二：使用CSS样式

示例代码：

/* 添加到您的主题的 CSS 文件 */
.sidebar .widget {
    width: 200px;
    margin-bottom: 10px;
}

解释：

  1. 使用.widget选择器来选择具有特定类名（例如sidebar）的所有.widget元素。
  2. 根据需要调整宽度、下边距和其他属性。

方法三：使用WordPress插件

示例代码：

  1. 安装并激活名为“Custom Sidebars”或类似名称的主题插件。
  2. 在“Custom Sidebars”插件设置中启用“Create Custom Sidebars”选项。
  3. 创建新的侧边栏，然后将您想要包含的文章添加到该侧边栏。

解释：

  1. 运行WordPress插件安装和激活过程。
  2. 导航至插件设置页面。
  3. 点击“创建新侧边栏”，命名侧边栏并添加文章。

方法四：使用短代码

示例代码：

<div id="my-custom-sidebar">
    <?php echo do_shortcode('[my_custom_sidebar]'); ?>
</div>

解释：

  1. <div>标签用于定义侧边栏的内容区域。
  2. do_shortcode()函数允许我们在HTML中插入短代码，这里我们使用了[my_custom_sidebar]。
  3. my_custom_sidebar是自定义的短代码，用于生成特定的侧边栏内容。

结论

通过上述方法，您可以轻松地在WordPress侧边栏添加特色文章。根据您的需求，可以选择合适的方法实现所需的功能。希望这个教程能帮助您有效地使用WordPress的侧边栏功能！

,

最新更新