本文是《推荐(共38篇)》专题的第 4 篇。阅读本文前,建议您先阅读前面的文章:
点击展开更多弹出提示框,确定跳转APP页面,取消展开全文
functions.php文件添加
//字数统计
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;
}
function add_confirm_popup_script() {
?>
<script type="text/javascript">
var readMoreButton = document.querySelector('.readmore');
readMoreButton.addEventListener('click', function(e){
var wantToExpand = confirm('下载APP查看更多内容?');
if(!wantToExpand){
}
else {
window.location.href = 'https://'; //替换此处的链接为需要跳转的链接
}
});
</script>
<?php
}
add_action('wp_footer', 'add_confirm_popup_script');
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 } ?>
您已阅读完《推荐(共38篇)》专题的第 4 篇。您可以继续阅读该专题下面的文章:
- 5.B2主题网格样式文章鼠标悬浮弹出分类角标
- 6.B2主题菜单栏样式美化
- 7.B2主题 圈子首页加上轮播图
- 8.WordPress主题登录界面样式优化效果
- 9.B2主题网站侧边栏小工具添加一款好看的粒子当前时间
- 10.B2主题侧边栏信息统计小工具
- 11.B2主题美化之仿致美化页脚
- 12.WorePress安全检测GO内外链跳转页面html源码
- 13.WordPress实现内容加密模式/需要输入密码可见方法
- 14.WordPress给文章内容添加密码[WP教程]
- 15.WorePress复制网站文章内容弹窗提示+末尾自动添加版权信息
- 16.WordPress主题简约优雅GO外链页面
- 17.WordPress主题添加右侧悬浮导航
- 18.B2主题顶部随鼠标移动3D图片效果
- 19.WordPress用代码在文章内容加入微信关注后获取验证码可见
- 20.B2主题自带的语音播放失效了
- 21.B2 Pro主题文章创建内容目录
- 22.WordPress主题添加文章最后更新时间
- 23.WordPress可视化短代码简码
- 24.B2主题添加小工具炫酷倒计时
- 25.WordPress主题判断手机与PC设备自适应跳转代码
- 26.WordPress跳转外链页面
- 27.B2主题美化(用户等级)和(会员等级)图标
- 28.B2主题修改微信扫码登录效果
- 29.B2主题美化 顶部消息铃消息数值闪烁特效
- 30.B2主题添加小工具的目录
- 31.B2主题加上随机一言的功能
- 32.B2主题添加侧边小工具广告
- 33.B2主题添加全站底部波浪提示条
- 34.B2主题网站底部右下角小工具美化
- 35.B2主题网站底部添加动态人物和收藏按钮模块
- 36.B2主题美化添加首页会员开通展示模块
- 37.B2主题首页添加注册会员用户与付费会员展示
- 38.B2主题首页添加热门用户展示
人是要整活的——没活了,可不就是死了么?
谎言不一定是谎言,被发现的谎言,才算是谎言。
就像那句狠话:有一天,我一定会后悔的。