如何在WordPress中添加、删除和自定义侧边栏的完整指南

什么是WordPress 侧边栏

WordPress 侧边栏(Sidebar)是一个网站布局中的区域,通常位于页面的左侧或右侧,但也可以位于页面的顶部或底部。侧边栏的主要功能是展示附加内容,提供导航,增强用户体验。它们通常包含各种小工具(Widgets),如搜索框、最近的帖子、分类目录、标签云、社交媒体链接、广告、日历、和自定义HTML代码等。

如何在WordPress中添加、删除和自定义侧边栏的完整指南

网站侧边栏的事例

1.维基百科

如何在WordPress中添加、删除和自定义侧边栏的完整指南

2.Elementor帮助中心

如何在WordPress中添加、删除和自定义侧边栏的完整指南

侧边栏主要功能和用途

  1. 导航和搜索:侧边栏可以包含网站的导航菜单和搜索框,帮助用户更轻松地找到他们感兴趣的内容。
  2. 最新内容展示:通过显示最新的帖子、评论或热门文章,侧边栏可以吸引用户点击并增加页面浏览量。
  3. 广告和促销:侧边栏是展示广告或促销内容的理想位置,能够有效地吸引用户的注意力。
  4. 社交媒体链接:通过在侧边栏添加社交媒体图标和链接,网站可以鼓励用户在社交平台上分享内容,从而增加网站的曝光率。
  5. 自定义内容:侧边栏可以添加自定义HTML代码、文本或其他内容,提供更多的个性化和功能

从 WordPress 定制器管理侧边栏

如何在WordPress中添加、删除和自定义侧边栏的完整指南

管理主题侧边栏的一个主要途径是通过 WordPress 定制器。如果你的主题支持侧边栏和自定义功能,它们通常会在这里显示。

具体设置的位置取决于主题,但通常需要查找“布局设置”、“常规设置”或“站点范围设置”等选项。

例如,在使用 OceanWP 主题时,可以在常规设置中选择不同的侧边栏配置,如右侧边栏、左侧边栏,或左右两侧都有侧边栏,还可以配置侧边栏的宽度。

如何在WordPress中添加、删除和自定义侧边栏的完整指南

如果找不到这些设置,尝试探索 WordPress 定制器中的不同区域。或者,查阅主题开发人员的支持文档。

管理各个内容的侧边栏

一些主题还提供页面级设置,让你可以控制单个帖子或页面的侧边栏。

如果主题具备此功能,可以在使用 WordPress 编辑器时看到这些选项。它们可能会显示在编辑器下方的元框中,或者在文档侧边栏中。

例如,使用 OceanWP 主题时,可以在单个页面或帖子上选择不同的侧边栏布局。

如何在WordPress中添加、删除和自定义侧边栏的完整指南

如何将小部件添加到 WordPress 侧边栏

侧边栏是网站上的一个区域,但要向其中添加内容,需要使用 WordPress 小部件。

你可以通过两种方式将小部件添加到主题的侧边栏:

  1. WordPress 定制器
  2. 专用小部件区域

这两个方法都会自动同步,所以使用任何一个都可以。使用 WordPress 定制器的优点是,可以实时预览小部件的效果。

通过 WordPress 定制器管理小部件

要通过 WordPress 定制器管理侧边栏小部件,请按照以下步骤操作:

  1. 转到 外观 → 自定义
如何在WordPress中添加、删除和自定义侧边栏的完整指南
  1. 选择 小部件 菜单选项。
  2. 系统会提示选择要管理的小部件区域。根据你的主题,可能只会看到一个选项,也可能会看到多个选项,包括非侧边栏区域(例如页脚)。
如何在WordPress中添加、删除和自定义侧边栏的完整指南
  1. 然后,单击“添加小部件”按钮开始将小部件添加到侧边栏。添加小部件后,使用侧栏中的选项对其进行配置:
如何在WordPress中添加、删除和自定义侧边栏的完整指南

添加新的小部件时,你将立即看到它们出现在网站的实时预览中。还可以使用拖放来重新排列现有小部件的顺序。

除了使用定制器之外,WordPress还提供了一个专门用于管理小部件的区域。你可以简单地通过“外观”菜单下的“小部件”选项来访问它。

在这个区域,你可以看到所有可以添加到网站上的小部件,以及你的主题自带的侧边栏区域(可能还有其他小部件区域,比如页脚)。

要添加一个小部件到你的网站,你只需将它从可用小部件列表中拖放到侧边栏或其他你希望放置它的区域即可。之后,你可以通过点击小部件的设置按钮来进一步自定义它的内容,比如调整文本、选择图片等:

如何在WordPress中添加、删除和自定义侧边栏的完整指南

使用 Elementor 设计自定义小部件

如何在WordPress中添加、删除和自定义侧边栏的完整指南

拥有 Elementor Pro,那么设计自定义小部件并将其添加到侧边栏中会非常简单。以下是如何使用 Elementor 的直观界面来创建和添加自定义小部件的步骤:

首先,打开 WordPress 后台,并导航到 Elementor 的“模板”部分,选择“添加新项”来创建一个新的部分模板。这个模板可以是任何你想要展示的内容,比如一个电子邮件订阅表单或一个吸引人的号召性用语(CTA)。

在创建模板时,可以使用 Elementor 的拖放界面来轻松添加和布局各种元素,如文本、图片、按钮等。确保在完成设计后,点击“发布”按钮,将您的模板保存到库中。

接下来,转到想要展示这个自定义小部件的侧边栏区域。找到并添加“Elementor Library”小部件。添加后,看到一个选择模板的下拉列表。从这个列表中,选择刚刚创建的特定模板。

如何在WordPress中添加、删除和自定义侧边栏的完整指南

如何在 WordPress 中添加自定义侧边栏

在 WordPress 网站中添加自定义侧边栏,但你的主题没有内置侧边栏支持或想添加更多侧边栏,可以按照以下简单的步骤来操作:

步骤一:注册自定义侧边栏

首先,向 WordPress 注册侧边栏,这样它才会出现在“外观” → “小部件”页面中。可以通过以下两种方式来添加代码:

  1. 编辑主题的 functions.php 文件(注意,直接编辑主题文件可能不安全,因此最好使用子主题):
    • 创建一个子主题(如果还没有的话)。
    • 在子主题的 functions.php 文件中添加注册侧边栏的代码。
  2. 使用代码片段插件(例如 Code Snippets、Insert Headers and Footers 插件):
    • 安装并激活代码片段插件。
    • 创建一个新的代码片段,并添加注册侧边栏的代码。

注册侧边栏的代码示例

function my_custom_sidebars() {  
    register_sidebar(array(  
        'name' => '自定义侧边栏 1',  
        'id' => 'custom-sidebar-1',  
        'description' => '这是一个自定义侧边栏',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget' => '</div>',  
        'before_title' => '<h2 class="widgettitle">',  
        'after_title' => '</h2>',  
    ));  
  
    // 如果需要更多侧边栏,可以复制上面的代码并修改 'name'、'id' 和其他参数  
}  
add_action( 'widgets_init', 'my_custom_sidebars' );

步骤二:在前端显示侧边栏

注册了侧边栏,需要在前端模板文件中(例如 header.phpsidebar.phpfooter.php 或单页面模板文件)调用它,以便在网站上显示侧边栏。这通常涉及到使用 dynamic_sidebar() 函数和适当的条件判断。

例如,在 sidebar.php 文件中:

<?php if ( is_active_sidebar( 'custom-sidebar-1' ) ) : ?>  
    <aside id="secondary" class="widget-area" role="complementary">  
        <?php dynamic_sidebar( 'custom-sidebar-1' ); ?>  
    </aside>  
<?php endif; ?>

这段代码会检查名为 ‘custom-sidebar-1’ 的侧边栏是否包含活动的小部件,如果包含,则显示该侧边栏。

按照以上步骤操作后,就可以在“外观” → “小部件”页面中看到新的侧边栏,并可以向其中添加小部件了。

如何使用 Elementor 创建侧边栏

要使用 Elementor 显示自定义侧边栏,需要创建一个新的帖子或页面模板,其中包含侧边栏以及主要内容区域。

首先,转到模板 → 主题生成器。然后,选择首先添加侧边栏的位置 – Single PostSingle Page

如何在WordPress中添加、删除和自定义侧边栏的完整指南

你可以选择预制模板之一。或者完全从头开始构建你的设计。最简单的选择是仅选择已包含侧边栏的模板之一:

如何在WordPress中添加、删除和自定义侧边栏的完整指南

然后,编辑侧边栏小部件并使用选择侧边栏下拉列表选择在上一步中注册的自定义侧边栏。

完成此操作后,应该会看到已添加的所有小部件的实时预览:

如何在WordPress中添加、删除和自定义侧边栏的完整指南

要完成任务,确保发布模板。执行此操作时,可以使用显示条件来控制侧边栏模板的显示位置。将其显示在所有内容上(以在整个网站范围内使用侧边栏)。或者使用显示规则仅将侧边栏添加到特定内容。

如果你习惯使用 HTML、CSS 或 PHP,可以用代码添加侧边栏。否则,建议你使用 Elementor 方法。

要在 WordPress 中通过代码显示自定义侧边栏,需要直接编辑主题的模板文件。由于这是在直接修改主题,因此使用子主题非常重要,这样可以防止更新主题时覆盖你的更改。

关于子主题的创建和使用,可以参考WordPress 子主题综合指南。

创建子主题后,将父主题文件夹中的 single.php 文件复制到子主题文件夹中。然后,编辑子主题中的 single.php 文件,并在你希望显示自定义侧边栏的位置添加以下代码片段:

<?php get_sidebar(); ?>

如何删除 WordPress 中的侧边栏

如何删除不想使用的侧边栏。例如,你的主题自带了一个侧边栏,但你希望部分或所有内容使用全宽模板。

要删除 WordPress 中的侧边栏,你有两种选择:

  1. 使用 Elementor Pro
  2. 使用代码

在使用这些方法之前,先检查你的主题是否有内置功能可以禁用侧边栏。许多主题在 WordPress 自定义器中提供了选项,可以禁用侧边栏,无需手动操作。或者,主题可能自带全宽模板,可以在使用 WordPress 编辑器时选择。

如果你的主题没有这些选项,按以下步骤手动删除侧边栏。

使用 Elementor 删除侧边栏

要使用 Elementor 删除 WordPress 侧边栏,你需要创建一个不包含侧边栏区域的模板。具体步骤如下:

  1. 创建模板:前往“模板” → “主题生成器”,选择要删除侧边栏的位置,例如单篇文章或单页。
  2. 全局应用:如果你希望在整个网站上删除侧边栏,可以使用这个模板覆盖所有内容。
  3. 局部应用:如果只想在某些页面删除侧边栏,可以在需要的地方选择无侧边栏的模板。
如何在WordPress中添加、删除和自定义侧边栏的完整指南

完成后,可以发布模板并使用显示条件来控制其显示的位置。

使用代码删除 WordPress 侧边栏

你可以通过直接编辑主题的模板文件来删除 WordPress 侧边栏。具体步骤如下:

  1. 使用子主题:由于需要编辑主题文件,请确保使用子主题。这样可以防止更新主题时覆盖你的更改。
  2. 复制模板文件:将需要删除侧边栏的模板文件(如 single.phparchive.php 等)从父主题复制到子主题文件夹中。
  3. 编辑模板文件:打开这些文件,删除所有类似 <?php get_sidebar(); ?> 的代码段(代码可能有些许不同,但基本上都是调用侧边栏的)。
  4. 调整 HTML 和 CSS:根据需要调整 HTML 和 CSS 代码,确保页面布局正确。
如何在WordPress中添加、删除和自定义侧边栏的完整指南

如何在不同的内容上显示不同的侧边栏

之前我们讨论了如何在 WordPress 中添加侧边栏,即使你的主题不支持它。但如果你想在不同的内容上显示不同的侧边栏,该怎么办?这可以让你为不同类型的内容显示不同的小部件集合。

例如,你可能希望在“评论”类别的博客文章中使用一组小部件,而在“教程”类别的博客文章中使用另一组小部件。

使用 Elementor 显示不同的侧边栏

这是最简单的方法,你可以按以下步骤操作:

  1. 创建模板:首先,创建多个 Elementor 模板,每个模板包含自己的侧边栏。
  2. 设置条件:然后,转到条件设置,将每个模板分配给相关的类别、页面或其他条件。

使用内容感知侧边栏插件

另一种方法是使用免费的“内容感知侧边栏”插件。安装并激活插件后,按照以下步骤操作:

  1. 添加新侧边栏:转到“Content Aware → Add New”。
  2. 设置条件:选择你想要替换默认侧边栏的条件。例如,如果你想将此侧边栏用于“评论”类别中的所有博客文章,创建一个类别条件。
如何在WordPress中添加、删除和自定义侧边栏的完整指南
  1. 转到“操作”选项卡并选择要替换的侧边栏。或者,您也可以“合并”侧边栏以包含两者的内容:
如何在WordPress中添加、删除和自定义侧边栏的完整指南
  1. 做出选择后,单击“创建”。然后,转到外观 → 小部件以将内容添加到条件侧边栏:
如何在WordPress中添加、删除和自定义侧边栏的完整指南

总结:

通过使用Elementor或代码,你可以为不同内容类型设置不同的小部件集合,还可以使用内容感知侧边栏插件来实现更高级的自定义。无论是通过WordPress定制器还是手动编辑模板文件,本指南提供了全面的步骤和方法,适合各种用户需求。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/10350/

(0)
上一篇 2024年 5月 26日 下午12:42
下一篇 2024年 5月 26日 下午1:17

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信