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

作者: 凡酷官方 VIP 24百度已收录

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

 


凡酷网 (fankuw.cn) - 综合性资源分享平台网站 » WordPress文章内容添加展开收缩功能代码
喜欢 (0)
版权免责声明

1、本网站名称:凡酷网【www.fankuw.cn】
2、本站资源均来自互联网或会员发布,仅供研究学习请勿商用以及产生法律纠纷本站概不负责!如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站资源大多存储在云盘,如发现链接失效请反馈我们会第一时间更新。

发表评论

1

Title - Artist
0:00
    隐藏