给WordPress文章页面添加“内容展开/收缩”功能

/ 0评 / 0

只需三步:给WordPress文章页面添加“内容展开/收缩”功能

参考设置

一、添加代码

将以下代码加入至wordpress主题文章内容页面的底部,通常为single.php(或者footer.php等)

<script>
/* 为wordpress主题添加“内容展开/收缩”功能开始 */
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
/* 为wordpress主题添加“内容展开/收缩”功能开始 */
</script>

二丶再次添加代码

将下方代码添加到“模板函数 (functions.php)”

/* 为WordPress添加“点击展开/收缩”功能开始 */
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin: 0.5em 0;">
<div class="xControl">
<span class="xTitle">'.$title.'</span>
<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');
/* 为WordPress添加“点击展开/收缩”功能结束 */

三丶使用短代码

进行到我们的写文章页面,切换点文本模式点击“展开/收缩”

[collapse title=”“点击展开”预览”]这样就能展开/收缩了[/collapse]

未开放评论区