FavoriteLoading
0

纯代码实现WordPress文章页展开收缩功能

在使用WordPress编写文章的时候我们常常会遇到这样一个问题:为了能满足不同用户对文章内容的理解,我们希望能够将文章内容编写的尽可能详细,但是过于详细的内容对于某些已有一定知识基础的用户来说难免显的啰嗦。这时候我们就需要使用“展开/收缩”功能将文章中某些可说可不说的内容隐藏起来,从而使得文章内容更加简洁有条理性。

网上关于实现文章内容“展开/收缩”效果的方法有很多,但是有很多代码似乎已经不可用,而另一些虽然可用但是前端显示效果不怎么美观,于是我便根据网上的一些代码进行了些许的改动便有了这篇文章。下面我们就来具体了解下如何实现文章内容的“展开/收缩”功能吧。

JS代码

将以下代码添加到你主题header.php文件的标签前面

/* 为网站添加“点击展开/收缩”功能开始 */
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
/* 为网站添加“点击展开/收缩”功能结束 */

修改主题functions.php文件

然后将下方代码添加到“模板函数 (functions.php)”的最底部? > 之前

/* 为WordPress添加“点击展开/收缩”功能开始 */
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin: 0.5em 0;">
<div class="xControl">
<span class="xTitle">'.$title.'</span>
<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');
/* 为WordPress添加“点击展开/收缩”功能结束 */

至此,你就可以通过使用下面的短代码在编辑文章时为文章内容添加“展开/收缩”按钮了。

【collapse title="说明文字"]需点击展开的内容[/collapse】

在添加代码的时候注意上方代码中将中文【】字符修改为[]。

当然,为了更方便的使用“展开/收缩”功能,你也可以将下面的代码继续添加到你主题的functions.php文件中去,在文章编辑的代码界面就可以看到一个“展开/收缩按钮”了。编辑文章的时候直接选中要隐藏的内容再点击这个按钮就可以自动插入短代码实现“展开/收缩”功能了。

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?>
    
<?php 
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );