从0到1制作WordPress主题#11使用小工具widgets

这一章节,我们学习如何在主题中创建窗口小工具。 我们将有一个小工具位置,这将位于侧边栏中。
1、打开index.php,找到class=main的div标签,在其结束标签下方创建一个class=sidebar的div,和一个class=clr的div用于清除浮动,代码如下:

<div class="sidebar">     Sidebar </div>   <div class="clr"></div> 

保存代码刷新前端页面:

从0到1制作WordPress主题#11使用小工具widgets

Sidebar

2、现在我们将.main div浮动并设置宽度,然后让侧边栏浮动到右边,我们在样式表中修改如下代码:

.main{     margin:15px 0;     float:left;     width:68%;  } 

然后为侧边栏添加样式;将其向右浮动,我们将设置28%的宽度,并清除浮动,如下面的代码所示:

.sidebar{     float:right;     width:28%; }  .clr{     clear:both; } 

3、现在我们将main div里面的container div拿到其外部,将main和sidebar包裹在内,代码大致如下:

<div class="container">      <div class="main">     ......     <div class="sidebar">         Sidebar     </div>     <div class="clr"></div> </div> 

回到前端刷新页面,现在我们有了main区域和侧边栏区域

从0到1制作WordPress主题#11使用小工具widgets

区域划分

4、接下来,我们将看到如何添加小工具,我们转到functions.php。 在这里,我们可以使用小部件并定义我们想要小工具显示的位置。我们将深入到文件的最底层并创建一个函数,如下面的代码块所示。 我们将其称为init_widgets,并且将接收id,我们将其称之为register_sidebar
我们将使用register_sidebar创建一个侧边栏小工具,实际上无论你的小部件创建在哪里,底部或是标题位置,都必须使用register_sidebar,它的功能就是用于实际注册小工具位置的。
在functions.php文件内下方加入如下新代码然后保存。

//Widget Locations function init_widgets($id){     register_sidebar(array(         'name' => 'Sidebar',         'id' => 'sidebar',         'before_widget' => '<div class="side-widget">','after_widget' => '</div>',         'before_title' => '<h3>',         'after_title' => '</h3>'     )); }   add_action('widgets_init', 'init_widgets');  

返回后台页面刷新,看到如下页面:

从0到1制作WordPress主题#11使用小工具widgets

小公具页面(widget)

5、我们把“分类目录”和“近期文章”小工具拖动到Sidebar。

从0到1制作WordPress主题#11使用小工具widgets

Sidebar内工具

此时回到前端刷新,不会发现任何变化,因为我们还没在模板中添加它。让我们来看看我们在index.php文件中有Sidebar的位置,加入以下代码用来检查窗口小工具

<div class="sidebar">     <?php if(is_active_sidebar('sidebar')) : ?>     <?php dynamic_sidebar('sidebar'); ?>     <?php endif; ?> </div>  

回到前端来刷新一下,我们得到了“分类目录”和“近期文章”小公具

从0到1制作WordPress主题#11使用小工具widgets

小公具出现

6、还记得我们在functions.php文件中放了一个side-widget类,它可以方便我们使用style.css文件设置小工具样式,如下面的代码块所示,我们为小工具添加一些样式

.side-widget{     border:1px #ccc solid;     padding:10px 10px;     margin-bottom:20px;     margin-top:20px; } .side-widget li{     list-style: none;     line-height:2.2em;     border-bottom:dotted 1px #ccc; }  .side-widget a{     text-decoration: none; } 

现在看起来就好多了

从0到1制作WordPress主题#11使用小工具widgets

sidebar

7、此时我们点击导航或文章详情页时,发现页面出现了问题,这是因为我们只在index.php中修改了containermain的层级关系,我们把在index.php中修改和添加的代码复制粘贴到page.phpsingle.php文件中。

    <div class="sidebar">         <?php if(is_active_sidebar('sidebar')) : ?>         <?php dynamic_sidebar('sidebar'); ?>         <?php endif; ?>     </div>     <div class="clr"></div> </div>  <?php get_footer(); ?> 

现在检查各个页面,应该都恢复正常了。

8、所有不同的格式和所有不同的页面都已设置; 它们都有了侧边栏。 当然,如果你不想要哪个页面显示侧边栏,你只需修改相应页面。 如果我们想稍微减少代码,我们可以将以下代码放在footer.php中:

    <div class="sidebar">         <?php if(is_active_sidebar('sidebar')) : ?>         <?php dynamic_sidebar('sidebar'); ?>         <?php endif; ?>     </div>     <div class="clr"></div> </div> 

将其放在footer.php中后,我们来展示一下footer.php中的代码:

    <div class="sidebar">         <?php if(is_active_sidebar('sidebar')) : ?>         <?php dynamic_sidebar('sidebar'); ?>         <?php endif; ?>     </div>     <div class="clr"></div> </div>  <footer>     <div class="container">      <p>&copy; 2018 - <?php bloginfo('name'); ?></p>     </div> </footer>  <?php wp_footer(); ?> </body> </html> 

我们同样需要将page.php、index.php和single.php中相对应的以下代码删掉:

    <div class="sidebar">         <?php if(is_active_sidebar('sidebar')) : ?>         <?php dynamic_sidebar('sidebar'); ?>         <?php endif; ?>     </div>     <div class="clr"></div> </div> 

保存代码并返回前端页面刷新,所有页面显示都正常。

点赞