WordPress文章添加展开阅读两种方法-资源客

使用 wordpress 编写文章的时候我们常常会遇到这样一个问题：为了能满足不同用户对文章内容的理解，我们希望能够将文章内容编写的尽可能详细，但是过于详细的内容对于某些已有一定知识基础的用户来说难免显的啰嗦。这时候我们就需要使用“展开/收缩”功能将文章中某些可说可不说的内容隐藏起来，从而使得文章内容更加简洁有条理性。网上关于实现文章内容“展开/收缩”效果的方法有很多，但是有很多代码似乎已经不可用，而另一些虽然可用但是前端显示效果不怎么美观，于是我便根据网上的一些代码进行了些许的改动便有了这篇文章，今天有空就手写一个简单的示例吧，大家结合自己的需要再在此基础上整合到自己的主题就好了。

方法一

次方法采用的是 CSS+jQuery 方式，不仅仅可以在 wordpress 上使用，也适用于所有网站。

<!doctype html>
    <html lang="en">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <script src="jquery.min.js" type="text/javascript"></script>
      <style> body{
                position: relative;
            }
            .show_text{
                width: 100%;
                margin:0 auto;
            }
            .show_text p{
                height:71px;
                overflow:hidden;
            }
            .mask{
                width:100%;
                position: absolute;
                top:0;
                height: 71px;
                background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0), #fff);
                background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff);
                background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff);
                background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff);
            }
            .showall{text-align:center;}</style>
     </head>
     <body>
      <div class="show_text">
        <p>他一次萍聚，让多少午夜梦回，衣袖盈香？一次邂逅，让多少暗香浮动，刹那芳华？一份爱情，从开始到结束，初见，永远是最美丽的风景；一个故事，从上演到谢幕，初见，永远是最难忘的情节。初见，它可以是朦胧到极致，又可以是清晰到极致的画面；初见，它可以是淡雅到极致，又可以浓烈到极致的情愫。人生来去，虽然初见只是惊鸿一瞥，昙花一现，但它总是让人朝思暮想，念念不忘。从古至今，人生遗憾的事，莫过于故事还未开始就已结束；人生痛苦的事，莫过于故事未完主角就已匆匆离场；人生悲哀的事，莫过于故事还在继续悲剧就已注定。缘来缘去，若一切如初见那该有多美妙、多幸福，若相看两不厌那该有多难得、多可贵。人生来去，虽然初见只是惊鸿一瞥，昙花一现，但它总是让人朝思暮想，念念不忘。从古至今，人生遗憾的事，莫过于故事还未开始就已结束；人生痛苦的事，莫过于故事未完主角就已匆匆离场；人生悲哀的事，莫过于故事还在继续悲剧就已注定。缘来缘去，若一切如初见那该有多美妙、多幸福，若相看两不厌那该有多难得、多可贵。</p></div>
     <div class="mask"></div>
    <p class="showall">展开阅读全文<svg viewBox="0 0 10 6" width="10" height="16" aria-hidden="true" style="height: 16px; width: 10px; margin-left: 8px;    vertical-align: text-bottom;"><title></title><g><path d="M8.716.217L5.002 4 1.285.218C.99-.072.514-.072.22.218c-.294.29-.294.76 0 1.052l4.25 4.512c.292.29.77.29 1.063 0L9.78 1.27c.293-.29.293-.76 0-1.052-.295-.29-.77-.29-1.063 0z"></path></g></svg></p>
    <script>
    $(function(){  
        $('.showall').click(function(){
             $(".show_text p").css("height","100%");
              $(".mask").css("display","none");
              $(".showall").html("");
        })  
    })  
    </script>
     </body>
    </html>

方法二

此方法仅适用于 WordPress 主题

第一，首页我们需要添加一个 JS 效果代码在 header.php 中，放在 body 标签前面，当然你也可以只添加在 sinlge.php 内。

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

第二，需要编辑 wordpress 主题的 functions.php 文章，将下面代码添加到你的主题的 funtions.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]

为了方便我们后面对文章内容的操作，可以将短码直接写进我们的编辑器中，继续复制下面的代码到 function.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 style="font-size: 18pt; font-family: impact, sans-serif;"><em><strong><span style="color: #ff0000;">展开/收缩</span></strong></em></span>

当然，如果你不会编辑这些标签，一个简单的方法是你先在 WordPress 文章可视化编辑窗口编辑好字符样式，然后进入代码窗口复制代码即可。如果你的主题支持 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>

通过上面的代码添加就完成了我们 wordpress 添加文章内容展开收缩的功能，是不是很简单。

http://xzh.i3geek.com