WordPress纯代码实现文章指定内容折叠点击查看抽屉效果

亲测吧
亲测吧
亲测吧
661
文章
23
评论
03/13/202123:47:01 4 682
饿了么领红包

这个教程也是在钻芒博客看到的,感觉自己确实也需要这个功能,所以转载一下。感谢钻芒博客无私提供教程。
期初感觉不需要这方面的功能,最近突然发觉对于有些经常更新的文章来说,一下子太长的篇幅的确显得有些臃肿,在这个快速的信息时代来说,大多数人不喜欢太长篇大论的文章,所以说有时候折叠一部分内容显得还是很有必要的,用户可以选择查看自己感兴趣的内容,那么接下来结合本站实践来实现这一功能。

效果展示

添加代码

把下方代码添加到当前主题的footer.php文件中。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
/* 为wordpress主题添加“内容展开/收缩”功能开始 */
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
/* 为wordpress主题添加“内容展开/收缩”功能开始 */
</script>

将下方代码添加至主题目录下的functions.php中

// 文章页添加展开收缩效果
function xcollapse($atts, $content = null){
	extract(shortcode_atts(array("title"=>""),$atts));
	return '
    <style>.xControl {
    font-size: 15px;
    font-weight: bold;
    padding: 5px 0;
    box-shadow:0 0 20px #d0d0d0;/* 阴影 */
    background-color: #FFFFFF;/* 背景颜色 */
    border-bottom: 2px solid #e74c3c;/* 边 */
    transition: all 0.1s linear;
    text-align: center;
    border-radius: 0 0 5% 5%;
    border-radius:4px;
}
.xControl a{
	text-decoration: none;
    display: block;}
.xControl a:hover {
	text-decoration: none;
    display: block;
    color:red;
}
.xControl i{font-style:normal;}
</style>
<div style="margin: 0.5em 0;">
		    <div class="xControl">
			    <a href="javascript:void(0)" class="collapseButton xButton"> <i class="fa fa-toggle-on" aria-hidden="true">&nbsp;</i><span class="xTitle">'.$title.'</span></a>
			    <div style="clear: both;"></div>
		    </div>
		<div class="xContent" style="display: none;">'.$content.'</div>
	</div>';
}
add_shortcode('collapse', 'xcollapse');

添加后台快捷按钮

把下面代码添加到主题目录下的functions.php,去掉第6行【collapse title="点击展开 查看更多】前的斜杠/

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?>
    <script type="text/javascript">
      if ( typeof QTags != 'undefined' ) {
            QTags.addButton( 'collapse', '展开/收缩按钮', '[/collapse title="点击展开 查看更多"]','[/collapse]' );
        } 
    </script>
<?php 
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

使用方法

下面就可以直接使用了
WordPress纯代码实现文章指定内容折叠点击查看抽屉效果

有什么不懂可以在下方留言,与大家共进步。

继续阅读

<温馨提示>

① 显示倒计时或长期活动的都可以直接参与

② 活动二维码或链接失效请添加小编微信更换

③ 关注微信公众号第一时间接收活动信息

④ 任何活动疑问随时添加小编微信交流

  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
亲测吧
  • 本文由亲测吧网友收集并发布
  • 转载请务必保留本文链接:https://qince8.com/5447.html
纯代码实现WordPress一键复制文章页指定内容 建站日记

纯代码实现WordPress一键复制文章页指定内容

因为有些发布的活动都是通过分享口令来参与的,比如说淘口令、京东口令、支付宝口令之类的,这种不像网址链接可以直接跳转,还必须要手动复制之后再打开相应的app,对于活动参与者来说相当麻烦。 所以一直都想实...
饿了么领红包
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:4   其中:访客  2   博主  2
    • 忽然 忽然 5

      站长你好,function xcollapse($atts, $content = null){
      这段代码我添加在主题中提示出错,这是什么情况

        • 亲测吧 亲测吧

          @ 忽然 我也是按着步骤操作的哦,并没有任何问题的呀,我想可能是你主题的问题。。。

        • 小白 小白 5

          求教站长继续阅读按钮怎么实现的?支持古腾堡编辑器吗

            • 亲测吧 亲测吧

              @ 小白 本站继续阅读功能是主题集成的功能,可以选择开启或不开启的,若是涉及到其他主题需要修改代码实现的,爱莫能助了…