垃圾站 WP教程 WordPress纯代码实现文章页添加展开阅读全文功能

WordPress纯代码实现文章页添加展开阅读全文功能

可能是因为看到很多博客站长都有一个“阅读更多”的功能,对于长博文和SEO优化都有好处,而且不影响用户体验。所以通过网络搜索资料,也想要在WordPress网站上应用此功能,不仅对网页版网站有用,而且对于移动版网页也是相当不错的功能,下面是实现此功能的过程。

WordPress纯代码实现文章页添加展开阅读全文功能插图

首页我们需要添加一个JS效果代码在header.php中,放在body标签前面,当然你也可以只添加在sinlge.php内。

// 添加文章页展开收缩JS效果
<script type="text/javascript">
    jQuery(document).ready(
        function(jQuery){
            jQuery('.collapseButton').click(
			    function(){
                    jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
                }
		    );
        }
    );
</script>

第二,需要编辑wordpress主题的functions.php文章,将下面代码添加到你的主题的funtions.php.文件中

// 文章页添加展开收缩效果
function xcollapse($atts, $content = null){
	extract(shortcode_atts(array("title"=>""),$atts));
	return '<div style="margin: 0.5em 0;">
		    <div class="xControl">
			    <span class="xTitle">'.$title.'</span><i class="fa fa-plus-square" aria-hidden="true"></i><a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
			    <div style="clear: both;"></div>
		    </div>
		<div class="xContent" style="display: none;">'.$content.'</div>
	</div>';
}
add_shortcode('collapse', 'xcollapse');

完成上面内容,我们就可以通过短代码来编辑内容文章实现内容的展开全文功能了

// 展开/收缩功能短代码[collapse title="说明文字"]需点击展开的内容[/collapse】

为了方便我们后面对文章内容的操作,可以将短码直接写进我们的编辑器中,继续复制下面的代码到function.php文章中,就可以在文本编辑器内直接点击使用。

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

通过上面的代码添加就完成了我们wordpress添加文章内容展开收缩的功能,是不是很简单。

上一篇
下一篇

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

返回顶部