WordPress 文章添加点击展开/收缩按钮

WordPress 写文章时,有的内容会比较长,会影响页面美观等。更新日志也更适合点开/收缩按钮。

这时只能通过“展开/收缩”按钮将内容隐藏起来,这样更加简洁有条理。

以下是纯代码实现可以将文章部分内容隐藏,点击按钮可展开。再次点击按钮可以收缩。

将以下JS代码添加到你的主js文件中
/* 文章页展开/收缩按钮JS效果*/
jQuery(document).ready(
function(jQuery){
jQuery(‘.collapseButton’).click(function(){
jQuery(this).parent().parent().find(‘.xContent’).slideToggle(‘slow’);
});
});
在主题 functions.php 文件下添加以下代码
//文章页展开/收缩按钮
function xcollapse($atts, $content = null) {
extract(shortcode_atts(array( “title” => “” ) , $atts));
return ‘<div style=”margin: 0.5em 0;”><div class=”xControl”><a href=”javascript:void(0)” class=”collapseButton xButton”><i class=”fa fa-plus-square” ></i> ‘ . $title . ‘</a><div style=”clear: both;”></div></div><div class=”xContent” style=”display: none;”>’ . $content . ‘</div></div>’;
}
add_shortcode(‘collapses’, ‘xcollapse’);
短代码
在需要使用的地方手动输入
<div style=“margin: 0.5em 0;”>
<div class=“xControl”>
<a href=“javascript:void(0)” class=“collapseButton xButton” style=“color: #fff;”><i class=“fa fa-plus-square”></i> 标题</a>
<div style=“clear: both;”></div>
</div>
<div class=“xContent” style=“display: none;”>内容</div>
</div>
添加短代码到 functions.php

可以添加“展开/收缩按钮”,以后编辑文章时,鼠标直接点击按钮可直接插入短代码实现“展开/收缩”功能,不用再手动输入。

//文章页展开/收缩按钮
function appthemes_add_collapse() {
?>
<script type=“text/javascript”>
if ( typeof QTags != ‘undefined’ ) {
QTags.addButton( ‘collapses’, ‘展开/收缩按钮’,
<div style=”margin: 0.5em 0;”>
<div class=”xControl”>
<a href=”javascript:void(0)” class=”collapseButton xButton” style=”color: #fff;”><i class=”fa fa-plus-square”></i> 标题</a>
<div style=”clear: both;”></div>
</div>
<div class=”xContent” style=”display: none;”>’,‘</div>
</div>’ );
}
</script>
<?php
}
add_action(‘admin_print_footer_scripts’, ‘appthemes_add_collapse’ );

 

给TA买糖
共{{data.count}}人
人已赞赏
值得一看

国内支持DNS-over-HTTPS/DNS-over-TLS合集

2020-10-10 13:18:55

值得一看

手机欠费3个月可能会上征信

2020-10-11 11:17:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索