• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > 网站建设 > WordPress主题sidebar.php制作

    WordPress主题sidebar.php制作

    作者: 分类:网站建设 点击: 1,894 次
    wordpress CMS主题:ssmay主题

      今天要教的部份是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。

      WordPress主题sidebar.php制作

      既然后台已经完成,那幺接下来就是要在前台能够显示,所以我们必须在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语法必须自己想办法学习,主题才能做的更漂亮,更多元哦。

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201505153860.html
    本文时间:2015-05-15 08:39:47
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

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

    This site uses Akismet to reduce spam. Learn how your comment data is processed.