纯代码实现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>
这篇文章如果帮到了你 打赏
分享到: 更多 (0)
0
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • 每个IP自定义时间弹窗转跳广告代码
    分享一段网页自定义ip时间转跳弹窗的广告代码,支持自定义设置用户IP重复转跳网址的时间,做到每个用户,每个IP一定时间内不重复弹窗的功能。 许多站长接广告的时候,因为弹窗价格比较高,所以经常会选择弹窗广告,不过这样对用户体验非常的差。 但是...
  • WordPress标签自动别名转换插件:Auto Tag Slug
    很多使用WordPress建站的朋友,都会使用默认的标签格式,英文还好,中文就有些不美观了。虽然中文标签对搜索引擎的收录没有什么影响,但是为了用户体验,还是建议大家把标签别名修改为英文或拼音。可是每次发表文章,再去修改标签别名很繁琐有木有…...
  • js各种跳转代码汇总
    js跳转代码在网页前端用得是比较多的了,甚至在后台php中也会直接用echo用到,主要是因为js跳转代码使用方面,不拖泥带水的,这里就来简单总结一下在前端js跳转代码的一个简单汇总。 按钮式的js跳转代码如下: <INPUT name...
  • 用新浪jS接口取客户端IP 及位置
    新浪的IP地址查询接口:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js 新浪多地域测试方法:http://int.dpool.sina.com.cn/iplookup...
  • Fliqlo(1.3.3)翻页时钟屏幕保护程序 简单大次上档气
    windows系统适用,使用windows的时候又会羡慕mac上的一些东西,比如AppStore就有一些翻页时钟样式的屏保程序,对于windows来说,使用Fliqlo也可以实现翻页时钟屏幕保护程序,妹子觉的逼格非常高。  
  • FTP软件FileZilla的使用方法
    玩网站的大牛小神都知道FTP的作用是上传和下载,是本地和服务器端运输的桥梁。 对建站新手来讲,一切并不是那么容易,特为对FTP使用懵懂的人准备此文,主要解决FTP的基本使用。为了更好更容易的了解,我们将通过FTP热门软件FileZilla来...
  • 配置本地的虚拟主机的方法过程
    我新建了一个项目,名Hello,位于:I:\wamp\www目录下。 想访问这个项目,需要在地址栏上输入localhost/hello,但是我不想这样,我想要在地址栏输入local.hello.com就可以访问到我这个项目。具体步骤,如下:...
  • Win10开始菜单增强工具StartIsBack++2.7.3 完美破解版
    StartIsBack,StartIsBack++,是一款专为Windows 10/Windows 8.1所设计的开始菜单恢复工具,可以有效的完美恢复成完整功能的Windows 7风格开始菜单,含各种菜单样式、配置等自定义修改功能,使用最新...
  • 蚂蚁下载器Ant Download Manager Pro 1.10.1 特别版
    Ant Download Manager是一款简单但快速的文件下载工具,支持HTTP(S)和FTP(S)协议,支持浏览器集成插件,支持音视频、图片等多媒体及软件、各种格式的文件等。Ant Download Manager Pro可以说是一款...
  • js判断访问设备是电脑还是手机
    用户访问网页的设备基本分为桌面设备(电脑)和移动设备(手机、pad等),为了更好的用户体验,很多站点都做了PC和mobile两种页面。那么除了通过后端程序判断访问设备外,可以通过js来判断访问设备是电脑还是手机吗?可以的!! 有朋友该问了,...
  • Android 搜书王v4.1 去广告版
    精选几十家优质免费小说书源,具有海量免费小说资。搜索功能很强大,搜书速度快,范围广,不是太冷门的书籍一般都可以搜索到。 软件风格清晰,阅读体验也还不错。 特点:精心维护已有书源,保证书源全部是可用的优质书源,书源这块会一直坚持宁缺毋滥,做到...
  • WordPress 5.0 换回原有”Classic Editor”经典编辑器的三种方法
    WordPress 5.0 正式采用了全新的“Block Editor”编辑器,从而替换了原有“Classic Editor”编辑器,相信有很多人都不习惯或者不喜欢新编辑器,那么新版 WordPress 该如何换回原来的 WordPress...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏