WordPress主题sidebar.php制作

扫描下面的二维码，“关注”我的百家号。

今天要教的部份是Sidebar.php，相信大家如果已经细心的将前几篇反覆的看过并练习，我想应该对于网站制作应该已经都有基本的概念与知识，渐渐的应该愈来愈熟悉后面的内容，今天要介绍的Sidebar.php主要是让你了解怎幺加入Widget模组，这并不是wordpress主题本身都一定会有，是要有加入Widget的相关程式码才能在后台直接拖曳Widget使用，而最常用到的地方就是侧边栏，今天我们也一样用最简单的方式来搞定侧边栏吧。

侧边若想要使用模组(就是在后台直接拖曳Widget到侧边)就得先在functions.php里定义，定义Widget的函式如下，其中需要修改的含义如下：

• 'name' => 'SideBar'，Widget名称
• 'before_widget' => '<div class="sidebar">'，widget前所使用的div
• 'after_widget' => '</div>'，设了div当然就要关闭了。
• 'before_title' => '<h3>'，widget的标题所使用的div
• 'after_title' => '</h3>'，设了div当然就要关闭了。

 1: <?php

 2: if ( function_exists('register_sidebar') )

 3:         register_sidebar(array(

 4:         'name' => 'SideBar',

 5:         'before_widget' => '<div class="sidebar">',

 6:         'after_widget' => '</div>',

 7:         'before_title' => '<h3>',

 8:         'after_title' => '</h3>',

 9:  ));

 10: ?>

functions设定完后，就可以先到后台的模组里看看，是不是多了一个我们刚刚所加上去的Widget。

既然后台已经完成，那幺接下来就是要在前台能够显示，所以我们必须在sidebar.php里加入以下内容，其中红框的地方，这个名称必须跟我们刚刚在functions里所填入的「name'」要一模一样。

当然也记得可以在外层加入一个div区块将widget包起来，方便定义css。

 1: <div id="right_sidebar">

 2: <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('SideBar') ) : else : ?>

 3: <?php endif; ?>

 4: </div>

好了，可以看看这还没有定义CSS之前的样子，可以到后台的模组先去拖曳一些内容进去，然后到网站看看，侧边栏的内容有没有正常显示。

以上都完成后就可以大概来定义一下CSS的部份，在style.css里加入以下内容，当然你也可以自己定义。

 1: #right_sidebar{

 2: float:left;

 3: width:280px;

 4: padding:0 10px;

 5: }

 6: .sidebar{

 7: background:#eee;

 8: width:260px;

 9: padding:10px;

 10: margin-bottom:10px;

 11: }

 12: .sidebar h3{

 13: font-size:18px;

 14: border-bottom:1px solid #222;

 15: margin:5px 0;

 16: }

 17: .sidebar li{

 18: margin-left:16px;

 19: }

定义完css后，看起来就像样了一些吧，今天sidebar.php就到这里为止啰，下一次就是介绍footer.php。请记得css语法必须自己想办法学习，主题才能做的更漂亮，更多元哦。