公告:

WordPress文章页添加“展开阅读全文”功能(纯代码)

作者:我爱技术网 / 时间:1年前 (2018/12/21) / 分类:数据库 / 阅读:1987 / 评论:0

一贯想要添加这个功用,原因是因为看到CSDN博客有一个“阅读更多”的功用,关于长博文和SEO优化都有优点,而且不影响用户体会。所以里维斯社通过网络查找材料,也想要在WordPress网站上运用此功用,不仅对网页版网站有用,而且关于移动版网页也是适当不错的功用,下面是实现此功用的进程。

WordPress文章页添加“展开阅读全文”功能(纯代码)

第一步:在header.php文件中添加一个JS效果代码,放在body标签前,也可以只添加在sinlge.php页面。

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

  2. <script type="text/javascript">

  3.     jQuery(document).ready(

  4.         function(jQuery){

  5.             jQuery('.collapseButton').click(

  6.                 function(){

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

  8.                 }

  9.             );

  10.         }

  11.     );

  12. </script>

第二步,将以下代码添加到主题的funtions.php.文件末尾。

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

  2. function xcollapse($atts$content = null){

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

  4.     return '<div style="margin: 0.5em 0;">

  5.             <div class="xControl">

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

  7.                 <div style="clear: both;"></div>

  8.             </div>

  9.         <div class="xContent" style="display: none;">'.$content.'</div>

  10.     </div>';

  11. }

  12. add_shortcode('collapse', 'xcollapse');

第三步:然后通过短代码来编辑内容文章实现内容的“展开全文”功能。

  1. // 展开/收缩功能短代码[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' );



推荐阅读:

谷歌安全团队发现了Apple macOS的主要安全漏洞

我们的个人网站管理员应该选择云服务器的优势是什么?

用iPhone发推特庆祝新年的华为员工处罚曝光,月薪下调5000元

  • QQ群
  • 微信公众号