B2主题文章内页点击展开更多 显示引导下载APP

点击展开更多弹出提示框，确定跳转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 } ?>