b2主题文章实现展开/收缩的效果

技巧达人 2022-10-17

1591 44

1、footer.php

加入到body之前

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

2、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>&nbsp;==>&nbsp;<a href="javascript:void(0)" class="collapseButton xButton"><span class="xbtn02">展开/收缩</span></a>
 <div style="clear: both;"></div>
 </div>
 <div class="xContent" style="display: none;">'.$content.'</div>
 </div>';
}
add_shortcode('collapse', 'xcollapse');

3、代码使用:

{collapse title=”标题”}需点击展开的内容{/collapse}

将上述代码中的{}分别替换为[]

补刀:css美化一下吧

/* 展开收缩*/
.xControl {
 background: #f6f6f6;
}
.xTitle {
 color: #333;
}
.xbtn02{
 color: #428bca;
 text-decoration: underline;
}

在编辑文章的时候快速添加该按钮 :

//添加展开/收缩快捷标签按钮
 function appthemes_add_collapse() {
 ?><script type="text/javascript">// <![CDATA[
 QTags.addButton( 'collapse', '展开/收缩按钮', '{collapse title="说明文字"}','{/collapse}' );// ]]>
 </script><?php
 }
 add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

将上述代码中的{}分别替换为[]

将上述代码添加到主题functions.php文件中,然后在编辑文章的时候切换到文本模式,就可以看到该按钮.

按钮使用方法:先单击一次,然后输入你想要收缩的内容,再单击一次按钮,然后替换替换其中的说明文字。

补充说明

[collapse title=”全文内容”]
如果WordPress主题没有jquery功能,请引入jquery.js,以下是两个教程都可以

JS版本

<script src=”https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js”></script>

PHP版本

<?php wp_enqueue_script(“jquery”); ?>[/collapse]

签名:这个人很懒,什么也没有留下!
最新回复 (44)
  • shenshiss 2022-10-6
    2
    牛逼了
    签名:这个人很懒,什么也没有留下!
  • YMercurial 2022-10-11
    3
    拿走看看
    签名:这个人很懒,什么也没有留下!
  • fjsmmlyzx 2022-10-13
    4
    666
    签名:这个人很懒,什么也没有留下!
  • 666 2022-10-14
    5
    赞一个
    签名:这个人很懒,什么也没有留下!
  • qq370976188 2022-10-14
    6
    刀云有你更美好
    签名:这个人很懒,什么也没有留下!
  • 不腻露娜唉 2022-10-14
    7
    拿走看看
    签名:这个人很懒,什么也没有留下!
  • qp985574112 2022-10-14
    8
    哈哈,不错哦
    签名:这个人很懒,什么也没有留下!
  • 1693228995 2022-10-19
    9
    试试
    签名:这个人很懒,什么也没有留下!
  • crazywhore 2022-10-19
    10
    试试
    签名:这个人很懒,什么也没有留下!
  • 晓千夜 2022-10-20
    11
    签名:这个人很懒,什么也没有留下!
  • 夜夜 2022-10-20
    12
    哈哈,不错哦
    签名:这个人很懒,什么也没有留下!
  • neiwai 2022-10-20
    13
    牛逼(破音!)
    签名:这个人很懒,什么也没有留下!
  • q917644905 2022-10-20
    14
    不错
    签名:这个人很懒,什么也没有留下!
  • wswj1234 2022-10-20
    15
    楼主牛
    签名:这个人很懒,什么也没有留下!
  • tbzzb1314 2022-10-20
    16
    不错
    签名:这个人很懒,什么也没有留下!
  • 单刀稳场 2022-10-20
    17
    看看
    签名:这个人很懒,什么也没有留下!
  • sf 2022-10-20
    18
    大佬
    签名:这个人很懒,什么也没有留下!
  • nikoniko 2022-10-20
    19
    看了楼主的贴,一顿能吃三大碗!
    签名:这个人很懒,什么也没有留下!
  • zhao0419 2022-10-20
    20
    应该可以
    签名:这个人很懒,什么也没有留下!
返回