添加侧边栏以及让每篇文章调用不同的侧边栏 —— WordPress教程

爱资源网 WordPress教程评论125阅读模式
20

WordPress博客每页文章固定内容的侧边栏看多了很枯燥,怎么添加侧边栏以及让每篇文章调用不同的侧边栏?本篇文章不需任何基础,按照我的方式一步步来就能完成,原因自然是不同的侧边栏可以让用户体验和seo效果更好啦。

添加侧边栏以及让每篇文章调用不同的侧边栏 —— WordPress教程

 

添加侧边栏

wordpress怎么添加侧边栏,不仅仅是上传个代码那么简单,为了方便,能将其放在wp的后台部分是更好的选择。下面说流程

首先我们找到主题的functions.php文件,打开编辑functions.php,找到关于sidebar的代码,直接复制。

function twentysixteen_widgets_init() {
register_sidebar( array(
'name' => __( 'Sidebar', 'twentysixteen' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}

基本参数介绍:

  • name – 侧边栏的名字(默认是 ‘Sidebar’ 加 数字 ID)
  • id – 侧边栏 ID,必须全部小写,不带空格(默认是一个自动递增的数字 ID)
  • description – 用来说明侧边栏是什么,在哪里显示的文字。会在小工具管理界面显示。(默认为空)
  • class – 分配到小工具 HTML输出 中的CSS选择器名字(默认为空)
  • before_widget – 在每个小工具前面输出的 HTML代码(默认: ‘<li id="%1$s" class="widget %2$s">’)注:使用sprintf的变量替换
  • after_widget – 在每个小工具后面输出的 HTML代码(默认: "</li>\n")
  • before_title – 在标题前输出的 HTML代码(默认: <h2 class="widgettitle">)
  • after_title – 在标题后输出的 HTML代码 (默认:"</h2>\n")

 

我们具体使用只需要参考原来的代码进行改动就好了。比如我现在就在后面加了一段

register_sidebar( array(
'name' => __( 'Sidebar4', 'twentysixteen' ),
'id' => 'sidebar-4',
'description' => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );

这个时候打开小工具就发现后面多了一个叫sidebar4的侧边栏啦。可以把你想要的侧边栏效果工具往里面添加了。

如下图,我添加了三个“文章测栏1,文章测栏2,文章测栏3”。

此处注意id的不同

添加侧边栏以及让每篇文章调用不同的侧边栏 —— WordPress教程

保存完毕之后,返回到wp后台的小工具选项,打开后我们发现页面上新多了三个侧边栏。

添加侧边栏以及让每篇文章调用不同的侧边栏 —— WordPress教程

 

文章调用侧边栏

首先是添加文章需要绑定的代码文件。

在主题根目录新对应的三个文件,如下图。

添加侧边栏以及让每篇文章调用不同的侧边栏 —— WordPress教程

以第一个文件为例,我这里名字为side1.php

内容为:

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

添加侧边栏以及让每篇文章调用不同的侧边栏 —— WordPress教程

functions.php文件和side1.php文件修改完毕之后。

怎么让文章跟侧边栏绑定到一起呢?使用自定义字段是个很不错的选择,具体使用方法就是打开文章编辑界面的显示选项,然后输入参数和值即可。

要想让自定义字段起作用,就要先让文章能够识别自定义字段的作用。我们编辑single.php文件。找到get_sidebar()函数:

<?php get_sidebar(); ?>

将其替换为:

<?php
$sidebar = get_post_meta($post->ID, 'sidebar', true);
if (empty($sidebar)){
$sidebar = 'sidebar';
}
include_once("$sidebar.php");
?>

更新后文章就会根据我们输入的自定义字段的值来变化侧边栏了。我这里输入了:

添加侧边栏以及让每篇文章调用不同的侧边栏 —— WordPress教程

对应的就是我刚刚测试的那个文件名字。最后更新文章后,发现侧边栏改变成我们刚才添加的侧边栏sid1的侧边栏了。

ps:注意标点符号,容易出错误。我当时弄了半天才发现。

 

资源下载
下载价格为20资源币立即购买,终身VIP免费
【温馨提示】
  • 金币可用于购买网站里需要付费才能查看或下载的文章资源,由于资源属于可复制类,购买后概不退款,请考虑清楚后选择购买!
  • 如有问题,请及时联系客服 QQ:7664849
  • 若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!欢迎打赏!

    • 版权声明 1、本网站名称:爱资源网
      本站永久网址:https://www.izywang.com
      2、如果您喜欢本站,点击这儿 不花一分钱捐赠本站

      这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

      3、本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
      附:二00二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
      4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
      5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
      6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

    • 转载请务必保留本文链接:添加侧边栏以及让每篇文章调用不同的侧边栏 —— WordPress教程https://www.izywang.com/151.html

    评论  0  访客  0
    匿名

    发表评论

    匿名网友

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: