类似csdn博客那样,点击“阅读更多”可以展开隐藏的文章内容
简介:
由方包开发的wp插件(fangbao-subscribe-show),本插件可以隐藏文章中的任意部分内容。
原文地址:https://www.fang1688.cn/study-code/3050.html
使用方法:在文章编辑页插入短代码[collapse title=”点击展开 查看更多”]此处输入你要隐藏的内容[/collapse]
使用教程:
点击下图蓝色文字后,会自动展开隐藏的文章内容。
![dcfc173867dca7fa32c768d41c93fd99.png](https://i-blog.csdnimg.cn/blog_migrate/f8f38bde7db1dd6e61a00f8528ffbffa.png)
显示的内容:
![8840851e9b97ea522c2ea25727875895.png](https://i-blog.csdnimg.cn/blog_migrate/e25aec19ac020367277cc0c4f308372b.png)
关于插件自行的修改的内容“click-showHidden.php”。如下图:
![9c439f08786b3a94f37cac471e87eda0.png](https://i-blog.csdnimg.cn/blog_migrate/bb654f6abdb696743420620bbbe157e1.png)
![4343d0e0acb07c49ac7bbf4066d32671.png](https://i-blog.csdnimg.cn/blog_migrate/8763995126cb5044a7d6cab0a12ac042.png)
项目目录结构:
![d6d75a61f2a5811fd795574388884e5a.png](https://i-blog.csdnimg.cn/blog_migrate/3941cf77addb04a15fb0e71e94b3e9c5.png)
项目代码:
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设计我叫方包,关注公众号【优派编程】,学习和了解到更多编程知识和资源干货!
感谢你的在看和“点赞”,祝大家事业有成,学业进步,心想事成!