类似csdn博客那样,点击“阅读更多”可以展开隐藏的文章内容

 

简介:

由方包开发的wp插件(fangbao-subscribe-show),本插件可以隐藏文章中的任意部分内容。

原文地址:https://www.fang1688.cn/study-code/3050.html

使用方法:在文章编辑页插入短代码[collapse title=”点击展开 查看更多”]此处输入你要隐藏的内容[/collapse]

 

使用教程:

点击下图蓝色文字后,会自动展开隐藏的文章内容。

显示的内容:

 

关于插件自行的修改的内容“click-showHidden.php”。如下图:

项目目录结构:

项目代码:

click-showHidden.php

<?php
/*
Plugin Name:click-showHidden
Plugin URI: https://www.fang1688.cn/study-code/3050.html
Description:方包点击展开文章隐藏的内容
Version: 1.0
Author: 方包
Author URI: http://www.fang1688.cn
License: GPLv2
*/

//设置时区为 亚洲/上海
date_default_timezone_set('Asia/Shanghai');

class click-showHidden {



//构造方法,创建类的时候调用
function click-showHidden() {



// //引用文件的钩子
add_action( 'wp_enqueue_scripts', 'fbao_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'fbao_enqueue_script');
//
//
// //自定义引用样式表
function fbao_enqueue_style() {
wp_enqueue_style( 'core', plugins_url('css/modal.css', __FILE__) , false );
}
//
// //自定义引用脚本文件
function fbao_enqueue_script() {

wp_enqueue_script('plugin_script', plugins_url('js/modal.js', __FILE__), '','1.1', true);
}

//添加一个collapse短标签,调用 fb_show 方法进行处理
add_shortcode( 'collapse', array( $this, 'fb_show' ) );

add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );



}

function fb_show( $atts, $content = "" ) {


// 文章页添加展开收缩效果
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin: 0.5em 0;">
<div class="xControl">
<a href="javascript:void(0)" class="collapseButton xButton"><span class="xTitle">'.$title.'</span></a>
<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';



// $atts = shortcode_atts( array(
// 'title' => '方包博客',
// ), $atts, 'fbshow' );
//
// return $atts['title'];

}


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


}

new click-showHidden();

//定义插件停用时候调用的方法
register_deactivation_hook( __FILE__, 'fb-click-showHidden');

function fb-click-showHidden() {

//插件停用,设置停用标识为1
update_option( "fb-click-showHidden", "yes" );

}

 

modal.js

// 添加文章页展开收缩JS效果


jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(
function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
jQuery(this).parent().addClass("hidden-element");
}
);
}
);

 

modal.css

.xControl {
font-size: 15px;
font-weight: bold;
padding: 5px 0;
background-color: #f5f5f5;
border-bottom: 4px solid #d0d0d0;
transition: all 0.3s linear;
text-align: center;
border-radius: 0 0 5% 5%;
}
.xControl a{
text-decoration: none;
display: block;
}

.hidden-element{
display: none;
}

 


本期内容就到这里啦~以上内容均可在 方包博客http://fang1688.cn 网站直接搜索名称访问哦。欢迎感兴趣的小伙伴试试,如果本文对您有帮助,也请帮忙点个 赞 + 在看 啦!❤️

欢迎大家加入方包的优派编程学习圈子,和多名小伙伴们一起交流学习,向方包 1 对 1 提问、跟着方包做项目、领取大量编程资源等。Q群763256989欢迎想一起学习进步的小伙伴~

另外方包最近开发了一款工具类的小程序方包工具箱」,功能包括:抖音、小红书、快手去水印,天气预报,小说在线免费阅读(内含上万部热门小说),历史今天,生成图片二维码,图片识别文字,ai伪原创文章,数字摇号抽奖,文字转语音MP3功能...

送福利!关注下方的公众号:优派编程回复资料,即可获得软件app下载资源和python、java等编程学习资料!

   
点击卡片关注「优派编程」
定期分享 it编程干货

 ⬇️ 点击链接阅读原文直达 方包博客

1 对 “wordpress插件:点击展开文章隐藏内容”的想法;

发表评论

您的电子邮箱地址不会被公开。

34 − = 27