纯代码为 WordPress Modown 主题添加文章内容折叠隐藏,点击按钮展开阅读的功能[PHP]

鉴于文章过长或者其中有不太重要可选择阅读的内容,很多WordPress网站会添加收缩折叠文章,通过点击后展开,查看更多内容的功能。折叠部分内容可以是文字也可以是图片等等,效果如下:

+ 点击展开 查看更多 ↓

想要实现该效果,需要用到三部分代码:

1、php功能代码;  2、js代码;  3、css样式代码;

PHP代码

一般是放到functions.php文件中,也可以自己编辑个小插件,然后可以把自定义增加的功能代码全放到自建小插件中。这样,也可以避免直接修改主题文件可能导致的问题。

// 文章页添加展开收缩效果
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
$button_text = empty($title) ? '+ 点击展开 查看更多 ↓' : $title;
return '<div class="collapse-wrap" style="margin: 0.5em 0;">
<div class="xControl collapseButton" onclick="toggleCollapse(this)"><i class="fa fa-angle-right"></i><span data-expand="'.$button_text.'" data-collapse="- 点击折叠 隐藏内容 ↑">'.$button_text.'</span></div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');

JS代码

一般是添加到网站js文件中,或者自建js文件后引用。目前大部分WordPress国产主题,比如Modown主题的设置中,可以直接添加js代码,简单方便。

<script>
jQuery(document).ready(function(jQuery) {
jQuery('.collapseButton').click(function() {
var button = jQuery(this).find('span');
var content = jQuery(this).parent().find('.xContent');
if (content.css('display') === 'none') {
button.text(button.data('collapse'));
} else {
button.text(button.data('expand'));
}
content.slideToggle('slow');
});
});
</script>

CSS代码

同js代码一样,Modown主题也支持在设置(样式 -自定义CSS样式)中添加。

/* 展开收缩 */
.collapse-wrap {
background-color: #ffffff;
border-radius: 5px;
}

.collapseButton {
display: block;
width: fit-content;
margin-left: auto;
margin-right: auto;
color: #ff5f33;
font-weight: bold;
cursor: pointer;
}

.xContent {
display: none;
margin-top: 1em;
}

.collapse-wrap .content-wrapper {
margin-top: 1em;
margin-bottom: 1em;
}

如何使用

上述代码全部添加以后,我们应该如何在文章中使用呢?其实也很简单,通过短代码就可以快速添加需要折叠隐藏的内容。

【collapse title="按钮显示的文字"]需要隐藏的内容[/collapse】

如果不需要自定义按钮文字,也可以直接使用下方的短代码,

【collapse]需要隐藏的内容[/collapse】

实际使用时,注意“【】”替换为“[]”,总之还是挺方便的。

2
没有账号?注册  忘记密码?