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

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

JS代码

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

// 添加文章页展开收缩JS效果
<script type="text/javascript">
    jQuery(document).ready(
        function(jQuery){
            jQuery('.collapseButton').click(
			    function(){
                    jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
                }
		    );
        }
    );
</script>

 

编辑主题functions.php文件

将一下代码添加到你主题的functions.php文件中

// 文章页添加展开收缩效果
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><i class="fa fa-plus-square" aria-hidden="true"></i><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');

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

// 展开/收缩功能短代码
【collapse title="说明文字"]需点击展开的内容[/collapse】

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

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?>
    <script type="text/javascript">
        if ( typeof QTags != 'undefined' ) {
            QTags.addButton( 'collapse', '展开/收缩按钮', '【collapse title="说明文字"]','[/collapse]' );
        } 
    </script>
<?php 
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

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

美化展开收缩功能

更改前端“展开/收缩”字符显示样式

如果你想要改变“展开/收缩”字符在前端的显示效果，可以通过添加<span>、<em>、<stong>等标签来实现，例如下面的代码。

<span style="font-size: 18pt; font-family: impact, sans-serif;"><em><strong><span style="color: #ff0000;">展开/收缩</span></strong></em></span>

当然，如果你不会编辑这些标签，一个简单的方法是你先在WordPress文章可视化编辑窗口编辑好字符样式，然后进入代码窗口复制代码即可。

添加Font Awesome字体图标

如果你的主题支持Font Awesome字体，你可以通过在上面functions.php文件中代码内的“展开/收缩”字符前面添加Font Awesome图标标签来为你的展开/收缩按钮添加一个美化图标；当然如果主题不支持Font Awesome字体也没关系，你可以安装Font Awesome 4 Menus插件进行拓展。具体设置代码可参照下面示例。

<i class="fa fa-plus-square" aria-hidden="true"></i> <a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
点击文字按钮，查看设置好的效果：>>>展开/收缩