为了满足不同用户对文章内容的理解,需要将文章内容编写的尽可能详细,对于有些用户而言会觉得啰嗦,就需要使用“展开/收缩”功能,那么WordPress网站如何给文章设置展开阅读功能?
WordPress网站如何给文章设置展开阅读功能?
方法一

采用的是CSS+jQuery方式,不仅仅可以在wordpress上使用,也适用于所有网站。

<!doctype html>

<html lang="en">

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>Document</title>

<script src="https://www.wpzt.net/jquery.min.js" type="text/javascript"></script>

<style> body{

position: relative;

}

.show_text{

width: 100%;

margin:0 auto;

}

.show_text p{

height:71px;

overflow:hidden;

}

.mask{

width:100%;

position: absolute;

top:0;

height: 71px;

background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,0), #fff);

background-image: -moz-linear-gradient(top, hsla(0,0%,100%,0), #fff);

background-image: -o-linear-gradient(top, hsla(0,0%,100%,0), #fff);

background-image: linear-gradient(top, hsla(0,0%,100%,0), #fff);

}

.showall{text-align:center;}</style>

</head>

<body>

<div class="show_text">

<p>他一次萍聚,让多少午夜梦回,衣袖盈香?一次邂逅,让多少暗香浮动,刹那芳华?一份爱情,从开始到结束,初见,永远是最美丽的风景;一个故事,从上演到谢幕,初见,永远是最难忘的情节。初见,它可以是朦胧到极致,又可以是清晰到极致的画面;初见,它可以是淡雅到极致,又可以浓烈到极致的情愫。人生来去,虽然初见只是惊鸿一瞥,昙花一现,但它总是让人朝思暮想,念念不忘。从古至今,人生遗憾的事,莫过于故事还未开始就已结束;人生痛苦的事,莫过于故事未完主角就已匆匆离场;人生悲哀的事,莫过于故事还在继续悲剧就已注定。缘来缘去,若一切如初见那该有多美妙、多幸福,若相看两不厌那该有多难得、多可贵。人生来去,虽然初见只是惊鸿一瞥,昙花一现,但它总是让人朝思暮想,念念不忘。从古至今,人生遗憾的事,莫过于故事还未开始就已结束;人生痛苦的事,莫过于故事未完主角就已匆匆离场;人生悲哀的事,莫过于故事还在继续悲剧就已注定。缘来缘去,若一切如初见那该有多美妙、多幸福,若相看两不厌那该有多难得、多可贵。</p></div>

<div class="mask"></div>

<p class="showall">展开阅读全文<svg viewBox="0 0 10 6" width="10" height="16" aria-hidden="true"><title></title><g><path d="M8.716.217L5.002 4 1.285.218C.99-.072.514-.072.22.218c-.294.29-.294.76 0 1.052l4.25 4.512c.292.29.77.29 1.063 0L9.78 1.27c.293-.29.293-.76 0-1.052-.295-.29-.77-.29-1.063 0z"></path></g></svg></p>

<script>

$(function(){

$('.showall').click(function(){

$(".show_text p").css("height","100%");

$(".mask").css("display","none");

$(".showall").html("");

})

})

</script>

</body>

</html>

方法二

此方法仅适用于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>

<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></div>

</div>

<div class="xContent">'.$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' );

 美化展开收缩功能

如果你想要改变“展开/收缩”字符在前端的显示效果,可以通过添加、、等标签来实现,例如下面的代码。

<span><em><strong><span>展开/收缩</span></strong></em></span>

当然,如果你不会编辑这些标签,一个简单的方法是你先在WordPress文章可视化编辑窗口编辑好字符样式,然后进入代码窗口复制代码即可。如果你的主题支持Font Awesome字体,你可以通过在上面functions.php文件中代码内的“展开/收缩”字符前面添加Font Awesome图标标签来为你的展开/收缩按钮添加一个美化图标;当然如果主题不支持Font Awesome字体也没关系,你可以安装Font Awesome 4 Menus插件进行拓展。具体设置代码可参照下面示例。

<i class="fa fa-plus-square" aria-hidden="true"></i> <a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>

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

发表评论

后才能评论