wordpress文章添加点击睁开/延伸按钮编制

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文章纯代码添加点击睁开/延伸按钮演示地址:

版权声明:锦鲤网址导航 发表于 2020-03-31 14:10:06。
转载请注明:wordpress文章添加点击睁开/延伸按钮编制 | 锦鲤网址导航

暂无评论

暂无评论...