WordPress侧边栏关闭/显示设置方法 – WordPress

在这里，我们要实现博客侧边栏具有关闭/显示的功能。我们需要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