编程马·菜鸟教程

Appearance

6.2 默认小工具使用 ​

WordPress自带了多种默认小工具，这些小工具可以帮助我们在主题中显示各种内容，如最新文章、分类、标签云等。本章节将详细介绍WordPress默认小工具的使用方法，帮助你更好地利用这些小工具来增强主题的功能。

默认小工具列表 ​

WordPress默认提供了以下小工具：

  1. 最近文章：显示最新发布的文章列表
  2. 最近评论：显示最新的评论列表
  3. 分类：显示文章分类列表
  4. 标签云：显示文章标签的云状列表
  5. 搜索：显示搜索表单
  6. 日历：显示文章发布日历
  7. 归档：显示文章归档列表
  8. 导航菜单：显示导航菜单
  9. 文本：显示自定义文本或HTML内容
  10. 图片：显示图片
  11. 自定义HTML：显示自定义HTML内容
  12. RSS：显示RSS订阅链接
  13. 登录：显示登录表单

最近文章小工具 ​

功能：显示最新发布的文章列表

设置选项：

  • 标题：小工具的标题
  • 显示项目数量：要显示的文章数量
  • 显示日期：是否显示文章发布日期

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Recent Posts', 'my-custom-theme'); ?></h3>
            <ul>
                <?php
                $recent_posts = wp_get_recent_posts(array(
                    'numberposts' => 5,
                    'post_status' => 'publish'
                ));
                foreach ($recent_posts as $post) : ?>
                    <li>
                        <a href="<?php echo get_permalink($post['ID']); ?>">
                            <?php echo $post['post_title']; ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>
</aside>

最近评论小工具 ​

功能：显示最新的评论列表

设置选项：

  • 标题：小工具的标题
  • 显示项目数量：要显示的评论数量
  • 显示评论者头像：是否显示评论者的头像

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Recent Comments', 'my-custom-theme'); ?></h3>
            <ul>
                <?php
                $recent_comments = get_comments(array(
                    'number' => 5,
                    'status' => 'approve'
                ));
                foreach ($recent_comments as $comment) : ?>
                    <li>
                        <a href="<?php echo get_permalink($comment->comment_post_ID); ?>#comment-<?php echo $comment->comment_ID; ?>">
                            <?php echo $comment->comment_author; ?> on <?php echo get_the_title($comment->comment_post_ID); ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>
</aside>

分类小工具 ​

功能：显示文章分类列表

设置选项：

  • 标题：小工具的标题
  • 显示层次：是否显示分类的层次结构
  • 显示帖子计数：是否显示每个分类中的文章数量

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Categories', 'my-custom-theme'); ?></h3>
            <ul>
                <?php wp_list_categories(array(
                    'title_li' => '',
                    'show_count' => true
                )); ?>
            </ul>
        </div>
    <?php endif; ?>
</aside>

标签云小工具 ​

功能：显示文章标签的云状列表

设置选项：

  • 标题：小工具的标题
  • 显示标签数量：要显示的标签数量

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Tags', 'my-custom-theme'); ?></h3>
            <div class="tagcloud">
                <?php wp_tag_cloud(array(
                    'number' => 45,
                    'smallest' => 8,
                    'largest' => 22
                )); ?>
            </div>
        </div>
    <?php endif; ?>
</aside>

搜索小工具 ​

功能：显示搜索表单

设置选项：

  • 标题：小工具的标题

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Search', 'my-custom-theme'); ?></h3>
            <?php get_search_form(); ?>
        </div>
    <?php endif; ?>
</aside>

日历小工具 ​

功能：显示文章发布日历

设置选项：

  • 标题：小工具的标题

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Calendar', 'my-custom-theme'); ?></h3>
            <?php get_calendar(); ?>
        </div>
    <?php endif; ?>
</aside>

归档小工具 ​

功能：显示文章归档列表

设置选项：

  • 标题：小工具的标题
  • 显示为下拉菜单：是否以下拉菜单的形式显示
  • 显示帖子计数：是否显示每个归档中的文章数量

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Archives', 'my-custom-theme'); ?></h3>
            <ul>
                <?php wp_get_archives(array(
                    'type' => 'monthly',
                    'show_post_count' => true
                )); ?>
            </ul>
        </div>
    <?php endif; ?>
</aside>

导航菜单小工具 ​

功能：显示导航菜单

设置选项：

  • 标题：小工具的标题
  • 选择菜单：选择要显示的导航菜单

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Navigation Menu', 'my-custom-theme'); ?></h3>
            <?php wp_nav_menu(array(
                'theme_location' => 'sidebar',
                'menu_class' => 'sidebar-menu',
                'container' => false
            )); ?>
        </div>
    <?php endif; ?>
</aside>

文本小工具 ​

功能：显示自定义文本或HTML内容

设置选项：

  • 标题：小工具的标题
  • 内容：要显示的文本或HTML内容
  • 自动添加段落：是否自动为内容添加段落标签

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Text Widget', 'my-custom-theme'); ?></h3>
            <p><?php esc_html_e('This is a text widget. You can add text, images, and links here.', 'my-custom-theme'); ?></p>
        </div>
    <?php endif; ?>
</aside>

自定义HTML小工具 ​

功能：显示自定义HTML内容

设置选项：

  • 标题：小工具的标题
  • 内容：要显示的HTML内容

使用示例：

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Custom HTML', 'my-custom-theme'); ?></h3>
            <div class="custom-html-content">
                <!-- Custom HTML content here -->
            </div>
        </div>
    <?php endif; ?>
</aside>

默认小工具的最佳实践 ​

  1. 合理使用：根据主题的功能和布局，合理使用默认小工具
  2. 样式设计：为默认小工具添加美观的样式
  3. 性能优化：避免在小工具中使用过于复杂的操作，影响网站性能
  4. 安全使用：在使用自定义HTML小工具时，确保HTML代码安全，避免XSS攻击
  5. 测试：在不同的设备和浏览器中测试小工具的显示效果

常见错误及解决方法 ​

1. 小工具不显示 ​

问题：小工具不显示，可能是因为小工具区域没有正确注册或调用

解决方法：确保在functions.php文件中注册了小工具区域，并在模板文件中正确调用

2. 小工具样式显示异常 ​

问题：小工具样式显示异常，可能是因为CSS样式不正确

解决方法：检查CSS样式，确保选择器与HTML结构匹配

3. 小工具功能不工作 ​

问题：小工具功能不工作，可能是因为小工具的设置不正确或代码有错误

解决方法：检查小工具的设置，确保它们正确无误，检查代码是否有错误

小结 ​

WordPress默认小工具是主题开发中非常有用的工具，它们可以帮助我们在主题中显示各种内容，如最新文章、分类、标签云等。通过本章节的学习，你应该：

  1. 了解WordPress默认小工具的种类和功能
  2. 掌握如何在主题中使用默认小工具
  3. 了解如何为默认小工具添加样式
  4. 掌握默认小工具的最佳实践
  5. 了解常见错误及解决方法

在后续的章节中，我们将详细介绍如何创建自定义小工具，以及如何使用小工具来增强主题的功能。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建