针对鸡西中小企业的网站建设,网页制作,网站优化(seo/sem),网站改版等业务定制最佳解决方案的工作室.QQ:331148(7*24H免费咨询)
本页定位

为WordPress添加展开全文功能

臭保安👮2.48kA+A-
为WordPress添加展开全文功能
为WordPress添加展开全文功能

心如碧海宽 有容乃大
身如荷莲洁 淤泥不染

MAC软件下载站的页面需要同时提供软件简介、软件截图、软件下载等内容,势必会大幅增加页面高度。大概看了一下软件站的几个页面,以每张图片800PX的高度来说,8张截图大概就能达到10几屏的高度。如果用鼠标滚轮往下滑动大概要滑动5秒的时间才能正确的找到下载软件的正确位置。可想而知,这对于需要下载软件的用户体验是极其不友好的,太浪费时间不说,很有可能用户根本不需要看截图或者简介。

很长一段时间发现CSDN上的技术文章都是只显示一部分,想全部把文章内容显示出来的话需要用户自己点击一下“展开阅读全文”的按钮。这几天闲暇的时间想了一下关于这个功能的优缺点,一句话,毕竟用户体验高于一切,感觉还是可行的。演示?这就是啦!

找了一下相关资料,当然也顺便看了CSDN这部分的源码。整理代码如下,有喜欢的朋友可以直接拿去使用。CSS部分就不发出来了,自己抄一下举一反三即可。


1、PHP部分,将下面的代码复制到funcions.php

//内容展开功能
function xcollapse($atts, $content = null){
    extract(shortcode_atts(array("title"=>""),$atts));
    return '<div class="hide-box-content">'.$content.'</div><div class="hide-content-box hide-content-pos">

    <div class="hide-box-control">
            <a href="javascript:void(0)" class="hide-box-collapse btn btn-red-line" title="'.$title.'">展开全文<i class="iconfont icon-arrow-crude"></i></a>
    </div>
    </div>';
}
add_shortcode('collapse', 'xcollapse');

function appthemes_add_collapse() {
?>
<script type="text/javascript">
    if ( typeof QTags != 'undefined' ) {
        QTags.addButton( 'collapse', '内容收缩按钮', '[collapseX title="说明文字"]','[/collapseX]' );//因本站已经开始使用,直接贴出短代码会直接启用展开全文的功能,所以加了X绕过编译,复制后请把大写的X去掉
    }
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

2、JS部分,将以下代码复制到你的js文件,依赖于jq

//内容展开功能
$('.hide-box-collapse').click(
	function(){
	$(this).parent().parent().prev('.hide-box-content').slideToggle('slow');
	$(this).parent().parent().slideToggle('slow');
	}
);

全部评论: 1
登录没有账号 切换注册

邮箱或名字

忘记密码 ?

用第三方帐号直接登录
注册已有账号 切换登录

请真实填写

注意:邮箱涉及账号安全,也是您在完善资料之前唯一的登陆凭证,请务必填写真实的常用邮箱