最新公告
  • 欢迎您光临站壳网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 【Wordpress教程】wordpress如何给文章内容页添加展开收缩功能

    我们经常在浏览有些网站的时候发现内容只展示部分内容,如果需要阅读全文则需要点击"阅读更多内容"按钮才可以展现全部的内容。这样的好处就是不至于一次将文字页面全部打开,使得页面不至于一次加载太长。并且有利于文章页打开的速度,给用户更好的体验。这个功能到底如何实现的呢?能否用插件实现呢?

    其实wordpress用户都知道插件是能不用尽量不用,如果每个小功能都要用插件来实现,随着插件的增多,你会发现网站的响应速度会非常的卡顿,所以这边推荐直接用代码直接修改从而达到想要的功能!当然,也有部分主题是自带此项功能。

    但是大部分WordPress主题都不带这样的功能,这就需要我们自行修改模板来实现。那具体如何实现的呢?这里我们一起整理实现WordPress文章内容收缩和展开的功能。

    第一、JS代码部分

    在header.php中添加下面的代码,或者也可以单独写进一个js文件中然后在header.php中引入也可以。

    <script type="text/javascript">
        jQuery(document).ready(function(jQuery) {
            jQuery('.collapseButton').click(function() {
                jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
            });
        });
    </script>

    第二、内置功能模块

    在function.php中加入下面的代码:

    // 收缩和展开功能 itbulu.com修改
    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');

     

    第三、添加短代码按钮

    同样添加到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' );

     

     

     

    第四、实现方法

    根据实际需要我们可以在编辑内容的时候以上面格式出现。把需要展现的内容添加到对应标签中。

    [collapse title="说明"]内容部分[/collapse]

     

     

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,请不要用于商业用途!
    3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"gwph.xyz",如遇到无法解压的请联系管理员!
    8.源社区是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系

    源社区-专注优质资源分享的网络社区 » 【Wordpress教程】wordpress如何给文章内容页添加展开收缩功能

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

    发表评论

    • 53会员总数(位)
    • 186资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 96稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情