l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何为每个分类添加自定义头部、底部或侧边栏

如何为每个分类添加自定义头部、底部或侧边栏

Bug编译狮

Bug编译狮

为了帮助您了解如何为每个分类（Category）添加自定义头部、底部或侧边栏，我们首先需要理解这些选项的设置方式和WordPress中的分类管理器。

1. 创建自定义头部、底部或侧边栏

自定义头部：

  • 设置：进入WordPress后台，导航到Appearance > Customize，然后找到Header Options部分。
  • 操作：点击Customize Header，这里您可以选择是否显示自定义头部内容，以及其样式和位置。
  • 效果：例如，如果您希望在顶部展示一些特定的信息，可以在此处编写HTML/CSS来定制头部的内容。

自定义底部：

  • 设置：同样，在Appearance > Customize下的Footer Options部分。
  • 操作：点击Customize Footer，这将打开一个界面供您编辑底部信息。
  • 效果：与顶部类似，您可以在这里插入任何HTML/CSS以定制底部内容。

自定义侧边栏：

  • 设置：进入Appearance > Widgets页面，找到您的侧边栏并拖动至所需的位置。
  • 操作：通过拖放功能调整侧边栏布局，添加自定义标题、文本或其他元素。
  • 效果：通过此方法，您可以根据需要灵活地排列和组织侧边栏内容，使其更加符合网站的整体设计风格。

示例代码：

假设我们想要在WordPress站点上实现一个简单的侧边栏定制功能，以下是一个基本的示例：

// 定义函数，用于添加侧边栏
function add_custom_sidebar() {
    register_sidebar( array(
        'name'          => __('Custom Sidebar', 'textdomain'), // 设置侧边栏名称
        'id'            => 'custom-sidebar', // 使用唯一的ID
        'description'   => __('A custom sidebar for your site.', 'textdomain'), // 描述
        'before_widget' => '<div class="widget %2$s">', // 标签前的HTML模板
        'after_widget'  => '</div>', // 标签后的HTML模板
        'before_title'  => '<h3>', // 标题标签前的HTML模板
        'after_title'   => '</h3>' // 标题标签后的HTML模板
    ) );
}
add_action('widgets_init', 'add_custom_sidebar');

// 添加侧边栏内容
function add_custom_content() {
    $sidebar = get_option('sidebars_widgets');
    if (!empty($sidebar['custom-sidebar'])) { 
        echo '<div id="custom-widget-area">';
        foreach ($sidebar['custom-sidebar'] as $widget) {
            if (is_admin()) continue;
            wp_load_current_theme();
            $args = array(
                'theme_location' => 'custom-sidebar',
                'number_of_items' => 1,
                'orderby' => 'menu_order'
            );
            wp_nav_menu($args);
        }
        echo '</div>';
    } else {
        echo 'No widgets added to the custom sidebar.';
    }
}
add_action('wp_footer', 'add_custom_content');

使用步骤：

  1. 在本地环境中安装WordPress。
  2. 登录后，前往Appearance > Customize，然后切换到Widgets。
  3. 在侧边栏区域添加自定义侧边栏，如“Custom Sidebar”。
  4. 编辑侧边栏内容，确保它按需显示在页面上。

通过上述方法，您可以轻松地为WordPress站点上的每个分类添加自定义头部、底部或侧边栏，从而提高网站的专业性和个性化体验。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

要为WordPress网站中的每个分类添加自定义头部、底部或侧边栏，您可以按照以下步骤操作：

步骤 1: 添加分类页面

首先，在您的主题文件夹下创建一个新文件，例如 category.php 或 archive.php。这将用于处理每个分类的页面。

<?php
/**
 * Template Name: Category archive page
 */
?>

然后，打开该文件并编辑其中的内容。确保使用适当的类名来区分不同的分类页面（如 archive.php）。

步骤 2: 添加自定义头部

在您选择的分类页上，可以插入自定义的HTML头部元素。这可以通过在模板文件中添加 <header> 标签来实现。

<header class="site-header">
    <!-- 自定义头部内容 -->
</header>

步骤 3: 添加自定义底部

在同类型的类别页面上，可以插入自定义的HTML底部元素。同样，通过在模板文件中添加 <footer> 标签来实现。

<footer class="site-footer">
    <!-- 自定义底部内容 -->
</footer>

步骤 4: 添加侧边栏

对于侧边栏，可以在分类页面中嵌套另一个分类页面，或者直接使用CSS来创建一个动态的侧边栏区域。

方法一：嵌套另一个分类页面

创建一个新的分类页面，例如 sidebar.php，并将它放在相应分类的模板文件下方。

<?php
/**
 * Template Name: Sidebar page
 */
?>

在 sidebar.php 中，编写自定义内容以填充侧边栏。

示例代码

假设我们有一个名为 archive.php 的模板，我们需要在其中显示一个分类列表和一个侧边栏。

<div class="site-content">
    <div class="container">
        <h1><?php echo get_cat_title(); ?></h1>

        <?php if ( have_posts() ) : ?>
            <ul class="nav nav-pills mb-3">
                <li class="nav-item"><a href="<?php echo esc_url( get_pagenum_link( 1 ) ); ?>" class="nav-link active">首页</a></li>
                <li class="nav-item"><a href="<?php echo esc_url( get_pagenum_link( 2 ) ); ?>" class="nav-link">二级分类</a></li>
                <?php while ( have_posts() ) : the_post(); ?>
                    <li class="nav-item">
                        <a href="<?php the_permalink(); ?>"><?php the_category(); ?></a>
                    </li>
                <?php endwhile; ?>
            </ul>
        <?php endif; ?>

        <aside class="col-lg-4 col-md-6 mb-5 mb-lg-0">
            <div class="card h-100">
                <img src="<?php echo get_template_directory_uri(); ?>/images/branding.png" class="card-img-top" alt="...">
                <div class="card-body p-4">
                    <h5 class="card-title text-center mb-4">侧边栏</h5>
                    <p class="text-muted mb-2">这是侧边栏的内容。</p>
                    <a href="#" class="btn btn-primary">点击这里</a>
                </div>
            </div>
        </aside>
    </div>
</div>

总结

以上就是如何为WordPress网站中的每个分类添加自定义头部、底部或侧边栏的基本步骤。根据您的需求，您可以灵活地调整这些部分的样式和内容。希望这个例子对您有所帮助！如果您需要进一步的帮助，请随时提问。

,

最新更新