在这里，我们要实现博客侧边栏具有关闭/显示的功能。我们需要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文件中:
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => '首页侧栏',
'id' => 'widget_homesidebar',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => '文章页侧栏',
'id' => 'widget_postsidebar',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}
以上代码注册了两个侧边栏:“首页侧栏”与“文章页侧栏”.
2、在主题的侧边栏文件 siderbar.php 添加如下代码:
<?php
if(is_home() || is_front_page()) { //首页显示“首页侧栏”
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_homesidebar')){}
}
?>
<?php
if ( is_single() ) {//文章页显示 “文章页侧栏”
if (function_exists('dynamic_sidebar') && dynamic_sidebar('widget_postsidebar')){}
}
?>
OK,到后台看看效果吧.
转载请注明：汇站网 » WordPress 侧边栏关闭/显示设置方法 – WordPress
