纯代码为WordPress文章内容添加展开收缩功能-教程技巧-刀云网

纯代码为WordPress文章内容添加展开收缩功能

技巧达人 2022-10-17

添加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 文件

这里的代码，博主稍微改动了一下，感觉比之前的更好看，并且更具人性化一些

// 文章页添加展开收缩效果
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"><span class="xTitle">'.$title.'</span></a>
			    <div style="clear: both;"></div>
		    </div>
		<div class="xContent" style="display: none;">'.$content.'</div>
	</div>';
}
add_shortcode('collapse', 'xcollapse');
 
//添加展开/收缩快捷标签按钮
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' );

注意：把上面代码的【都改成 [ ！
添加完以上代码，在后台点击文章编辑的文本菜单，便会出现一个展开/收缩按钮的一个快捷按钮

添加 css 样式

将下面的代码添加到 main.css 文件中，即可显示你想要的文章内容收缩展开样式了

.xControl {
    font-size: 15px;
    font-weight: bold;
    padding: 5px 0;
    background-color: #f5f5f5;
    border-bottom: 4px solid #d0d0d0;
    transition: all 0.3s linear;
    text-align: center;
    border-radius: 0 0 5% 5%;
}
.xControl a{
    text-decoration: none;
    display: block;
}

刀云免责声明

1、帖子原作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
2、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责。
3、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意。

本贴地址：https://www.ddml.net/thread-8529.htm

签名：这个人很懒，什么也没有留下！

上一篇：Linux宝塔面板如何挂载硬盘？BT宝塔面板磁盘挂载教程来了
下一篇：分享一枚获取高清壁纸的api 附成品源码

最新回复 (31)

九鬼 2022-11-14

32楼

谢谢
签名：这个人很懒，什么也没有留下！
Catmint 2022-11-14

31楼

666，牛
签名：这个人很懒，什么也没有留下！
zyj 2022-11-14

30楼

谢谢
签名：这个人很懒，什么也没有留下！
我非神棍 2022-11-14

29楼

感谢分享！！！
签名：这个人很懒，什么也没有留下！
bobo21 2022-11-14

28楼

牛逼了
签名：这个人很懒，什么也没有留下！
c523707635 2022-11-13

27楼

拿走看看
签名：这个人很懒，什么也没有留下！
AS741 2022-11-12

26楼

大佬
签名：这个人很懒，什么也没有留下！
2381735086 2022-11-10

25楼

666
签名：这个人很懒，什么也没有留下！
qweqwewqe 2022-11-8

24楼

哈哈，不错哦
签名：这个人很懒，什么也没有留下！
蛋蛋 2022-11-5

23楼

楼主好人
签名：这个人很懒，什么也没有留下！
Janesas 2022-10-31

22楼

楼主牛逼
签名：这个人很懒，什么也没有留下！
rjk 2022-10-20

21楼

刀云有你更美好
签名：这个人很懒，什么也没有留下！
z1414114 2022-10-20

20楼

赞！
签名：这个人很懒，什么也没有留下！
zzzzzz 2022-10-20

19楼

牛逼（破音！）
签名：这个人很懒，什么也没有留下！
jj981023 2022-10-20

18楼

哈哈，不错哦
签名：这个人很懒，什么也没有留下！
lamer 2022-10-20

17楼

谢谢大佬
签名：这个人很懒，什么也没有留下！
meichengyi1991 2022-10-20

16楼

赞！
签名：这个人很懒，什么也没有留下！
lingchen 2022-10-20

15楼

签名：这个人很懒，什么也没有留下！
2973133290 2022-10-20

14楼

看看
签名：这个人很懒，什么也没有留下！
貔貅 2022-10-20

13楼

太强了
签名：这个人很懒，什么也没有留下！

关于作者

技巧达人

UID:4106超级版主组

主题数
-10

帖子数
0

0
精华数

注册排名
4106

导航

论坛

我的