密云公司网站建设:如何显示WordPress页面或POST类型的内容感知侧栏

2019.05.22 密云公司网站建设

153

好的,让我们密云公司网站建设谈谈内容感知的侧边栏。然而,在我们这样做之前,我们应该先谈谈一般的侧边栏。

典型的侧边栏是网页设计和许多WordPress主题的一个主要部分。他们是一个很好的地方显示额外的信息,如联系表格,你的最新或最受欢迎的博客帖子,广告或任何其他不是你的网站的主要吸引力。而在最近几年,这一趋势已向以下方向发展:单页设计没有侧边栏,它们仍然是一个受欢迎的元素。

在大多数情况下,一个网站的侧边栏将显示相同的内容,无论你在哪个网页。然而,这并不总是最佳的做法。事实上,有足够的理由在不同的页面或帖子上显示自定义侧边栏,这些页面或帖子知道它们所伴随的内容。

因此,在本文中,我们将更多地讨论这个主题。我们将首先向您展示内容感知侧栏的用例。这样,你就会明白它们对你是否有意义。在此之后,我们将继续解释如何在WordPress网站上实现这种类型的侧边栏。

准备好出发了吗?那我们开始吧。

内容感知的侧边栏有什么意义?

在此之前,让我们先谈谈为什么您甚至会费心定制侧边栏,具体取决于侧边栏旁边显示的内容。毕竟,静态侧边栏已经存在了很长时间了,而且似乎仍然能做到这一点。为什么要乱搞系统?

事实证明,在很多用例中,使用内容感知的侧边栏是有意义的:

· 入职-初次访客作为常客可能需要不同的内容。例如,您的登录用户不需要看到“注册”呼叫行动,这是为了让人们加入您的网站或您的电子邮件列表。

· 量身定制信息-某些信息在某些页面上比另一些页面更有意义。例子包括联系页面上的其他联系信息,博客页面上最好的或最新的文章,商店页面上的特别优惠-你可以得到要点。

· 改进SEO-虽然不是一个主要因素,但侧边栏的内容仍然对搜索引擎的优化很重要(特别是如果小部件标题被正确地包装在标题标签中)。因此,您可以使用内容感知的侧边栏使您的页面更有针对性。

· 呼吁采取行动-您也可以使用这种类型的侧边栏为您的网站上的不同位置定制行动调用。

· 语言-它们还可以为网站的不同语文版本创建侧边栏,并针对不同的市场。

正如您所看到的,使用内容感知的侧边栏有几个原因,这个列表还远远不够详尽。然而,现在让我们将注意力转向如何实现它们。

如何在WordPress中实现内容感知的侧边栏

密云公司网站建设有三种主要的方式来设置自定义侧边栏的文章和网页。它们的共同之处在于,侧边栏的内容会根据显示在哪个页面或帖子上的响应而更改。条件包括WordPress标签、类别、页面名称或其他属性,如用户是否登录。

在此之后,侧栏通常通过以下三种方式中的一种进行更改:

· 过滤小部件-一个边栏充满了小部件,后台的某种逻辑决定了哪些小部件出现在哪个位置,哪些小部件是隐藏的。

· 设置整个侧边栏-另一种方法是创建完全独立的侧边栏,在满足不同条件时出现在同一位置。它们可以包含单独的小部件配置。

· 硬编码成主题-当然,您也可以向主题文件中添加自定义侧边栏,如果您有主题文件的编码裁剪的话

我个人认为第二种方法是导致最有序的用户界面的方法。然而,在下面我们将详细介绍每一条路,这样你就可以做出自己的决定了。之后,我们将列出更多的选项,以实现自定义侧边栏在您的WordPress网站。

使用Jetpack Widget可见性来筛选小部件

筛选站点上小部件外观的最简单方法是小部件可见性中包含的模块喷气背包。如果您已经在您的站点上有插件,创建自定义侧边栏就像激活模块一样容易(如果它在默认情况下尚未激活)。或者,您也可以使用这个独立版本.

一旦您这样做并转到小部件菜单,您将发现一个新的能见度所有小部件上的按钮。单击它,您可以轻松地通过下拉菜单为您的小部件实现所需的显示逻辑。

密云公司网站建设

能见度条件如下:

· 范畴-小部件可以出现在某些类别页面上,也可以全部出现

· 作者-在所有作者页面上出现或仅限于某些用户

· 用户-检查用户是否已登录

· 角色-根据用户角色控制小部件

· 标签-工作方式类似类别页,但适用于标签

· 日期-控制档案小部件出现在哪个日期

· 页-为首页、帖子页、存档页、404错误页、POST类型、POST类型存档和静态页面

对于每个选项,您可以定义小部件是显示的还是隐藏的。规则必须单独输入,这意味着不可能同时输入几个页面。但是,在其他解决方案中(更详细地介绍),在其他解决方案中手动输入页面ID仍然更方便。还有一个匹配所有条件复选框,该复选框强制仅在所有条件有效时才显示小部件。

内容感知侧栏允许您设置自定义侧栏

我们要讨论的第二个解决方案是内容感知侧栏插件。如前所述,这个插件允许您设置整个侧边栏,然后可以填充小部件并将其分配给POST和页面。使用起来很简单。

安装之后,您会发现一个名为侧栏在WordPress菜单中。

当你选择添加新在这里,你来到这个屏幕:

密云公司网站建设在这里,首先要做的是命名你的侧边栏。之后,是时候设置显示它的条件了。可用的选项类似于Jetpack:

· 静态页-选择静态页面以显示侧边栏,如首页、搜索结果或404错误页

· 员额-除员额外,与上文相同的备选办法

· 页-选择站点上显示侧边栏的页面

· 媒体-确定侧边栏上显示的媒体页

· 作者-将显示限制在作者页上

· 页面模板-选择页面模板在侧边栏上显示

· 类别-挑选某些类别或所有类别的档案

· 标签-相同的选项,但适用于标签

· 格式-同样,同样的格式档案设置

· 日期-又一次用于日期档案

· URL(仅支持版本)-限制某些URL的侧边栏显示

其他设置:

· 进度表-设置侧边栏显示的时间。在免费版本中,你被限制在一整天,专业版提供更多的颗粒时隙。

· 设计-向侧边栏、小部件和小部件标题中添加自定义CSS类,以操作它们的

· 先进-设置侧边栏的顺序(以防出现多个侧边栏)

除此之外,您还可以相互合并侧边栏,替换它们,将它们设置为小部件区域,并控制登录用户(Pro中可用的用户角色)的可见性。

配置完成后,新的侧栏将显示在“常规小部件”菜单中,您可以在该菜单中填充、激活和禁用它,甚至可以查看过去的修订。整洁又简单。

手动创建自定义侧边栏

最后,还可以通过编码创建自定义侧边栏。WordPress为此提供了大量的选择,我们将很快完成这个过程。

创建自定义侧边栏的第一件事是注册一个新的扩展区域。为此,只需将以下代码输入Functions.php你(孩子)的主题:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

function custom_sidebar_init() {

    register_sidebar( array(

        'name'          => 'New Custom Sidebar',

        'id'            => 'custom_sidebar_1',

        'description'   => 'Add widgets here to appear for single posts.',

        'before_widget' => '<section id="%1$s" class="widget %2$s">',

        'after_widget'  => '</section>',

        'before_title'  => '<h2>',

        'after_title'   => '</h2>',

    ) );

}

add_action( 'widgets_init', 'custom_sidebar_init' );

[/php

Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

 

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

 

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

 

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

 

<?php get_sidebar(); ?>

因此:

01

02

03

04

05

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>

    <aside id="secondary" class="widget-area" role="complementary">

        <?php dynamic_sidebar( 'custom_sidebar_1' ); ?>

    </aside><!-- #primary-sidebar -->

<?php endif; ?>

在那之后,这就是前面的最终结果:

当然,如果您有进一步的开发裁剪,可以添加更多的条件,例如只为登录用户显示侧栏。您还可以通过使用WordPress模板层次结构。它可能不是最动态的解决方案,然而,它可以发挥作用,完全可以在后台工作,而不需要安装额外的插件。

实现内容感知侧栏的其他方法

除了上面的选项,我们还有一些具有类似功能的插件。

小部件逻辑

这个插件与jetpack解决方案类似,但是,您需要手动输入,而不是下拉菜单。WordPress条件标记。这样,您就可以根据您想要的规则来确定窗口小部件的出现位置。

然而,要做到这一点,您需要知道页面的ID,总的来说,它比我们前面看到的要更技术性一些。这并不意味着它不工作,也不是一个强大的插件,然而,较少的技术人员可能会更好地使用其他东西。

自定义侧边栏

由WPMUDEV制作,这里我们有另一个解决方案来设置与任何小部件区域一起工作的内容感知侧边栏。该插件允许您在任何帖子、页面、类别存档、POST类型等上动态显示小部件。另外,它还具有非常强大和易于使用的用户界面。要获得完整的介绍,请检查汤姆·尤尔的文章在他们的网站上。

简单页面侧边栏

创建自定义侧边栏的最终解决方案是为了简单。它允许您分配侧边栏,并直接从页面编辑器批量进行更改。完成之后,您可以像往常一样在小部件菜单中填充它们。

不幸的是,缺少更高级的定制选项。但是,如果您只想为您的页面拥有不同的侧边栏,这可能是您正在寻找的解决方案。

简单地说,内容感知的侧边栏

密云公司网站建设在您的站点上使用定制的侧栏有很多很好的理由。并不是所有的内容都需要相同的信息来显示在它旁边。使用内容感知的侧边栏,您可以显示有意义的内容,而不是使用一个标准的侧边栏。

在本教程中,我们学习了创建自定义侧栏的几种方法。从过滤小部件到创建整个新的侧边栏,再到将它们编码到主题中,都是如此。

有了这些信息,您现在就可以为您的受众提供改进用户交互和服务所需的侧边栏内容。试试看!

 


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP