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

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

 

保存代码刷新前端页面:

从0到1制作WordPress主题#11使用小工具widgets_第1张图片
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包裹在内,代码大致如下:

......

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


从0到1制作WordPress主题#11使用小工具widgets_第2张图片
区域划分

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' => '
','after_widget' => '
', 'before_title' => '

', 'after_title' => '

' )); } add_action('widgets_init', 'init_widgets');

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

从0到1制作WordPress主题#11使用小工具widgets_第3张图片
小公具页面(widget)

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

从0到1制作WordPress主题#11使用小工具widgets_第4张图片
Sidebar内工具

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

 

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

从0到1制作WordPress主题#11使用小工具widgets_第5张图片
小公具出现

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_第6张图片
sidebar

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

    
    

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

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

    
    

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

    
    

© 2018 -

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

    
    

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

你可能感兴趣的:(从0到1制作WordPress主题#11使用小工具widgets)