2. 教程技巧
  3. 纯代码为WordPress文章内容添加展开收缩功能

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

技巧达人 2022-10-17 2370

添加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;
}

 

收藏的用户（0） X
正在加载信息~
签名：这个人很懒，什么也没有留下！
上一篇：Linux宝塔面板如何挂载硬盘？BT宝塔面板磁盘挂载教程来了
下一篇：分享一枚获取高清壁纸的api 附成品源码
最新回复 (31)
  • garyex 2022-10-4
    2楼
    大佬
    签名：这个人很懒，什么也没有留下！
  • wohenbang 2022-10-12
    3楼
    牛逼（破音！）
    签名：这个人很懒，什么也没有留下！
  • 3052824169 2022-10-12
    4楼
    楼主牛逼
    签名：这个人很懒，什么也没有留下！
  • 千万人 2022-10-13
    5楼
    666，牛
    签名：这个人很懒，什么也没有留下！
  • 手我i 2022-10-13
    6楼
    大佬
    签名：这个人很懒，什么也没有留下！
  • hujunjie 2022-10-14
    7楼
    非常棒
    签名：这个人很懒，什么也没有留下！
  • 啦啦啦好几年 2022-10-14
    8楼
    楼主牛逼
    签名：这个人很懒，什么也没有留下！
  • akrios 2022-10-19
    9楼
    太强了
    签名：这个人很懒，什么也没有留下！
  • m378584840 2022-10-20
    10楼
    签名：这个人很懒，什么也没有留下！
  • dchb 2022-10-20
    11楼
    赞一个
    签名：这个人很懒，什么也没有留下！
  • 貔貅 2022-10-20
    12楼
    太强了
    签名：这个人很懒，什么也没有留下！
  • 2973133290 2022-10-20
    13楼
    看看
    签名：这个人很懒，什么也没有留下！
  • lingchen 2022-10-20
    14楼
    签名：这个人很懒，什么也没有留下！
  • meichengyi1991 2022-10-20
    15楼
    赞！
    签名：这个人很懒，什么也没有留下！
  • lamer 2022-10-20
    16楼
    谢谢大佬
    签名：这个人很懒，什么也没有留下！
  • jj981023 2022-10-20
    17楼
    哈哈，不错哦
    签名：这个人很懒，什么也没有留下！
  • zzzzzz 2022-10-20
    18楼
    牛逼（破音！）
    签名：这个人很懒，什么也没有留下！
  • z1414114 2022-10-20
    19楼
    赞！
    签名：这个人很懒，什么也没有留下！
  • rjk 2022-10-20
    20楼
    刀云有你更美好
    签名：这个人很懒，什么也没有留下！
返回
发新帖
TAG
作者最近主题：