wordpress插件：点击展开文章隐藏内容

类似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;
}

原文地址：

wordpress插件：点击展开文章隐藏内容 - 方包博客 - java|python|前端开发|运维|电商|ui设计

我叫方包，关注公众号【优派编程】，学习和了解到更多编程知识和资源干货！

感谢你的在看和“点赞”，祝大家事业有成，学业进步，心想事成！