当前位置:首页>文章资讯WordPress教程> WordPress实现文章内容收缩和展开功能教程

WordPress实现文章内容收缩和展开功能教程

第一、JS代码部分

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

需要将JS部分添加到内容页模板中,或者我们有全局JS的可以添加。

// 收缩和展开功能 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)" rel="external nofollow"  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' );

同样添加到Functions.php文件中,用来编辑器中有一个按钮,这样添加的时候直接点击按钮。

第四、实现方法

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

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

版权声明 1 本站永久网址:https://www.gzkj8.com
2 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长:yixinis@163.com,进行删除处理。
3 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
4 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
WordPress教程文章资讯

WordPress添加百度API 自动提交收录

2023-8-12 10:22:48

WordPress教程文章资讯

WordPress死链自动收集方便提交到站长平台

2023-8-12 10:27:36

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