php 文章页面阅读全文,纯代码为WordPress文章内容页增加阅读全文展开功能

摘要：首页大挖想要分享这篇文章内容的原因是由于csdn，这个交流社区不得不说是一个技术开发人员，外链引流的圣地，权重高、易收录...

首页大挖想要分享这篇文章内容的原因是由于csdn，这个交流社区不得不说是一个技术开发人员，外链引流的圣地，权重高、易收录、排名好，而且wordpress相关的一些技术文章质量也都不错，最近csdn更新的文章内容样式添加了一个阅读全文的功能，这让大挖也想把此功能移植过来，方便用户的浏览体验，也就是为wordpress文章添加一个展开和收缩的功能，让一些部分内容可以优先隐藏起来，重点内容优先展示给用户，

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

// 添加文章页展开收缩JS效果

jQuery(document).ready(

function(jQuery){

jQuery('.collapseButton').click(

function(){

jQuery(this).parent().parent().find('.xContent').slideToggle('slow');

}

);

}

);

1

2

3

4

5

6

7

8

9

10

11

12

// 添加文章页展开收缩JS效果

jQuery(document).ready(

function(jQuery){

jQuery('.collapseButton').click(

function(){

jQuery(this).parent().parent().find('.xContent').slideToggle('slow');

}

);

}

);

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

// 文章页添加展开收缩效果

function xcollapse($atts, $content = null){

extract(shortcode_atts(array("title"=>""),$atts));

return '

'.$title.'展开/收缩

'.$content.'

';

}

add_shortcode('collapse', 'xcollapse');

1

2

3

4

5

6

7

8

9

10

11

12

// 文章页添加展开收缩效果

functionxcollapse($atts,$content=null){

extract(shortcode_atts(array("title"=>""),$atts));

return'

'.$title.'展开/收缩

'.$content.'

';

}

add_shortcode('collapse','xcollapse');

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

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

1

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

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

//添加展开/收缩快捷标签按钮

function appthemes_add_collapse() {

?>

if ( typeof QTags != 'undefined' ) {

QTags.addButton( 'collapse', '展开/收缩按钮', '[collapse title="说明文字"]','[/collapse]' );

}

}

add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

1

2

3

4

5

6

7

8

9

10

11

//添加展开/收缩快捷标签按钮

functionappthemes_add_collapse(){

?>

if(typeofQTags!='undefined'){

QTags.addButton('collapse','展开/收缩按钮','[collapse title="说明文字"]','[/collapse]');

}

}

add_action('admin_print_footer_scripts','appthemes_add_collapse');

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