在这里,我们要实现博客侧边栏具有关闭/显示的功能。我们需要jquery
的帮助。通过 jquery
,我们可以方便快捷地实现这个功能。现在让我们来看看实现过程。
首先,为了加载 JQuery
库,JQuery
现在被添加到一般主题中,但是如果没有,请在 header
.php
之前添加参考代码。
一种是通过 php
语句调用wordpress
的 jquery
库,代码如下:
一种是通过 html
语句在相应的位置添加 jquery
库。你可以调用自己下载并存储在主题文件夹中的 jquery
库,也可以调用 google
提供的 jquery
库。代码如下:
然后,添加 html
显示代码,在适当的位置添加文本或按钮,样式可以根据主题进行修改。这个主题将它放在文章内容页面 single
.php
的面包屑导航中。代码如下:
关闭边栏
最后,要添加 jquery
控制代码,您可以在 header
.php
中添加以下代码,或者将以下代码添加到新的 js
文件中,例如 global
.js
,然后调用,调用方法参数,并替换 src
属性中 global
.js
的存储位置。代码如下:
/* * *关闭/显示侧栏* * */
jQuery
(文档)。就绪(功能($){ 0
//选择“id
= Close
-侧边栏”中 A
标签的内容,即“关闭侧边栏”
$(‘ # close
-侧栏 a
‘)。切换(函数(){ 0
//中点后的文本显示为“显示侧边栏”。
$(这个)。文本(“显示侧栏”);
//隐藏“id
=侧边栏”的内容,也就是侧边栏,更改你的主题的侧边栏是什么 id
或者类别;如果需要隐藏其他部分,可以在添加逗号后继续添加标签,比如隐藏滚动条。
$(‘ #侧边栏,#滚动’)。hide
();
//将“class
=main
”的宽度扩展到 990px,持续 1000 毫秒;如果需要加宽其他部分,可以在添加逗号后继续添加标签,比如文章主体。
$(‘.main
’)。动画({width
: “990px”},1000);
},function
(){ 0
//中点后的文字显示为“关闭侧边栏”。
$(这个)。文本(“关闭边栏”);
//显示“id
=侧边栏”的内容,即侧边栏,其他注意事项同上。
$(‘ #侧边栏,#滚动’)。show
();
//将“class
=main
”的宽度减小到 700px,持续 1000 毫秒,其他注意事项同上。
$(‘.main
’)。动画({width
: “700px”},1000);
});
});
看完笔记,应该可以把对应的属性和属性值改成自己主题的属性和属性值。修改成功后就能看到效果,具体细节还得自己调整。通过这三个步骤,可以实现关闭/显示侧边栏的功能。至于关闭的位置和样式,关闭和显示的内容,以及关闭显示时的动态效果,可以自行展开。
如果我们仍然希望在 wordpress
的不同页面上显示侧边栏,我们可以参考以下方法。首页侧边栏和文章页面是分开的,这样我们就可以很好地控制想要显示的内容。
如何才能达到这种效果?方法如下:
1.将以下代码添加到主题functions
.php
文件中:
以上代码注册了两个侧边栏:“首页侧栏”与“文章页侧栏”.
2、在主题的侧边栏文件 siderbar
.php
添加如下代码:
OK
,到后台看看效果吧.
转载请注明:汇站网 » WordPress
侧边栏关闭/显示设置方法 – WordPress