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

由于该版本样式有些老旧了,文字咖特意写一篇目前来讲比较满意的展开收缩功能二次美化版,详细情况

最近博主还算是比较空闲,无聊的时候,静下来,折腾一下 DUX 主题,之前博主的博客就已经实现在文章里面实现部分内容收缩展开的功能,当然代码用的是 蝈蝈要安静 的,这里非常感谢 蝈蝈要安静 大佬,无私的把这些代码,免费的分享出来!

但是,博主总觉得这个样式不好看,并且在晚上搜了一圈,发现那些代码都是直接搬运的 蝈蝈要安静 的代码,一脸无奈的我,只能又一次开启自己的折腾之路。

代码很简单,主要还是仿照 蝈蝈 大神的代码,自己稍微改了下样式,所以在这里分享给大家!

1. 添加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>

2. 添加代码至主题 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' );

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

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

教程结束!


本期内容就到这里啦~以上内容均可在 方包博客http://fang1688.cn 网站直接搜索名称访问哦。欢迎感兴趣的小伙伴试试,如果本文对您有帮助,也请帮忙点个 赞 + 在看 啦!❤️

欢迎大家加入方包的优派编程学习圈子,和多名小伙伴们一起交流学习,向方包 1 对 1 提问、跟着方包做项目、领取大量编程资源等。Q群891029429欢迎想一起学习进步的小伙伴~

另外方包最近开发了一款工具类的小程序「方包工具箱」,功能包括:抖音、小红书、快手去水印,天气预报,小说在线免费阅读(内含上万部热门小说),历史今天,生成图片二维码,图片识别文字,ai伪原创文章,数字摇号抽奖,文字转语音MP3功能...

送福利!关注下方的公众号:优派编程回复资料,即可获得软件app下载资源和python、java等编程学习资料!

   
点击卡片关注「优派编程」
定期分享 it编程干货

 ⬇️ 点击链接阅读原文直达 方包博客

分享到:
赞(0)

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

免责声明:本站为非盈利性个人博客,博客所发布的一切源码、软件的文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。

本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。访问和下载本站内容,说明您已同意上述条款。本站不贩卖软件,所有内容不作为商业行为。

如果有侵犯版权请发送邮箱至619018020@qq.com,我们会在24小时之内处理。

Copyright © 2019-2021知识学堂