n

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

作者 : 凡酷官方 发布时间: 2019-10-14 文章热度:239 共1215个字,阅读需4分钟。 本文内容有更新 隐藏侧边 显示侧边

添加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文章内容添加展开收缩功能代码

发表评论

4
+493天安全运行
0
+0篇本周更新

Title - Artist
0:00