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

2018年12月21日13:15:42 4

一直想要添加这个功能,原因是因为看到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文件中,就可以在文本编辑器内直接点击使用。

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

以上代码来自挖主题,通过上面的代码就完成了在WordPress文章内容页面实现展开收缩的功能。

©里维斯社,本站推荐使用的主机:阿里云腾讯云;本站推荐使用的WP主题:WordPress主题

晨会游戏

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  3   博主  1

    • avatar 绿软吧 1

      感谢分享,试试效果

      • avatar 醉后的力量 0

        效果出不来……

        • avatar ax 0

          你好 将以下代码添加到主题的funtions.php.文件末尾。 这个文件没有找到 请问在哪里

            • avatar 里维斯社 Admin

              @ax 我这边显示正常,你那边显示不了吗?