登录

wordpress文章添加点击展开/收缩按钮方法

wordpress建站 maolai 1204次浏览 0个评论 扫描二维码

wordpress写文章时,有的内容详细比较长,会影响页面美观等。这时只能通过“展开/收缩”功能将内容隐藏起来,这样更加简洁有条理。以下是纯代码实现可以将文章部分内容隐藏,点击按钮可展开。如下截图演示

wordpress怎么控制展开或者收拢文章

1、将以下JS代码添加到你网站引用的js文件中(如global.js等,查看你网站头部的js文件)。或者新建一个js文件复制以下代码保存后,上传到网站根目录主题下,最后在网站头部或底部引用js链接。

/* 添加文章页展开收缩JS效果*/
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});

2、将以下函数添加到主题functions.php文件下。

//为WordPress内容页添加展开收缩功能
function xcollapse($atts, $content = null) {
extract(shortcode_atts(array( "title" => "" ) , $atts));
return '<div style="margin: 0.5em 0;"><div class="xControl"><a href="javascript:void(0)" class="collapseButton xButton"><i class="fa fa-plus-square" ></i> ' . $title . '</a><div style="clear: both;"></div></div><div class="xContent" style="display: none;">' . $content . '</div></div>';
}
add_shortcode('collapses', 'xcollapse');

3、一般到这里可以实现了,在后台编辑器编辑文章时切换文本模板,要隐藏的内容手动输入[collapses title="标题"]需点击展开的内容[/collapses],但很麻烦,可以添加“展开/收缩按钮”,以后编辑文章时,鼠标直接点击按钮可直接插入短代码实现“展开/收缩”功能,不用再手动输入。在主题functions.php文件添加以下代码。

//wordpress添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?>
<script type="text/javascript">
if ( typeof QTags != 'undefined' ) {
QTags.addButton( 'collapses', '展开/收缩按钮', '[collapses title="标题lmlblog.com"]','[/collapses]' );
}
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

wordpress文章纯代码添加点击展开/收缩按钮演示地址:http://www.lmlblog.com/1063.html


本文由maolai编辑整理发布,转载请注明wordpress文章添加点击展开/收缩按钮方法!如果本文对你有帮助,可打赏博主,鼓励博主继续写作!
喜欢 (0)
[maolai]
分享 (0)
maolai
关于作者:
无折腾,不生活。一个爱折腾,爱分享的90后,欢迎你认识我,我是MAOLAI。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址