WordPress系统7B2主题文章内页点击展开更多。本文介绍了在B2主题文章内页添加展开更多功能,可通过代码在主题的functions.php
中实现字数统计和内容展开效果。
作者提供了相应的代码和CSS样式,以及修改文章页代码的方法。功能可以增加网站PV,但需注意搜索引擎的规则。

功能上是可以增加网站的PV,但是之前百度好像严打过这种按钮一次。
将下面的代码放入你主题的functions.php
中,可以放子主题。
//字数统计www.dzcrv.com
function word_num () {
global $post;
$text_num = mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');
return $text_num;
}
CSS代码
/*阅读全文*/
#contTab{
display: none;
}
.content-more{
display: none;
}
#contTab:checked ~ #cont{
max-height: 1000px;
overflow: hidden;
}
#contTab:checked ~ .content-more{
display: block;
position: relative;
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
#contTab:checked ~ .content-more .gradient{
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(#fff));
background-image: -webkit-linear-gradient(top,rgba(255,255,255,0),#fff);
background-image: linear-gradient(-180deg,rgba(255,255,255,0),#fff);
height: 80px;
position: absolute;
left: 0;
top: -79px;
width: 100%;
}
#contTab:checked ~ .content-more .readmore{
display: inline-block;
background: #f44360;
color: #fff;
width: 175px;
height: 42px;
border-radius: 42px;
line-height: 42px;
font-size: 16px;
cursor: pointer;
}
前往文章页的找到
<?php the_content(); ?>
修改为
<?php if (word_num() > 250) { ?>
<input type="checkbox" id="contTab" checked="checked" class="tabbed">
<div id="cont">
<?php the_content(); ?>
</div>
<div class="content-more"><div class="gradient"></div> <label for="contTab" class="readmore">点击展开全文</label></div>
<?php } else { ?>
<?php the_content(); ?>
<?php } ?>