关于wordpress侧边栏并排显示的使用

发布于，归属于wordpress主题。 前3个座位已被强势霸占！ 共有318人围观    

像通常看到的有的wp博客侧边栏上并排显示的2个widget，实现的原理也很简单。

首先需要在你的主题里面的sidebar.php页面写好相应的div+css。

我的写法就是先写一个大的div，用来包含这2个并排显示的widget，同时写好css。

  1. <div class="merge">   //这个是大的div
  2. <div id="leftsidebar">   //显示在左边widget的div
  3. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('left_sidebar') ) : ?>   //这表示如果不启用默认的Widget的话，会在下面显示sidebar中自定义的widget，我们写的并排widget就是默认显示的,默认显示的是分类，当然如果你在后台自己设置并排的widget也是可以的。
  4. <!-- categories -->  //这里我让他左边显示的是分类的widget
  5. <div class="widget widget_category">   //这个是wp默认的widget的class名称，或者也可以写成别的，以便自己到时候修改css
  6. <ul>
  7. <?php wp_list_cats('sort_column=name&optioncount=0&depth=1'); ?>   //这是wp分类的函数，里面的参数代表的不同的含义，具体可以去wp官网上查看
  8. </ul>
  9. </div>
  10. </div>
  11. <div id="rightsidebar">
  12. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right_sidebar') ) : ?>  //和上面是相同的道理，这里我们默认让他显示为Archive的widget
  13. <div class="widget widget_archive">
  14. <ul>
  15. <?php wp_get_archives('type=monthly'); ?>
  16. </ul>
  17. </div>
  18. </div>
  19. </div>

sidebar.php页面就写完了，下面让我们看看functions.php的写法

既然是widget，那么就要用widget来操作了。

在functions.php里面注册2个sidebar，分别用来显示并排的widget

  1. if( function_exists('register_sidebar') ) {
  2. register_sidebar(array(                                                          //注册sidebar
  3. 'name' => 'left_sidebar',                                                          //名称
  4. 'before_widget' => '<div id="%1$s">',                              //文本之前的标签
  5. 'after_widget' => '</div>',                                                     //之后的标签
  6. 'before_title' => '<h3>',                                                          //标题的标签
  7. 'after_title' => '</h3>'                                                            //之后的标签
  8. ));
  9. register_sidebar(array(
  10. 'name' => 'right_sidebar',
  11. 'before_widget' => '<div id="%1$s">',                            //和上面的同理
  12. 'after_widget' => '</div>'
  13. 'before_title' => '<h3>',
  14. 'after_title' => '</h3>'
  15. ));
  16. }

这样当你选择了widget以后，会看见右边多出2个sidebar，分别是用来控制左右2边显示哪个widget的。

如果不选择，就会显示前面我们默认填写的widget！

如果有不对的地方，请及时指出，以便修改！

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

3个座位已被强势霸占！

  1. licream

    没明白．有图没

  2. 231231

    复杂了点。

  3. 如何祛斑

    自己操作了一遍，懂了，感谢！

同类