免插件实现WordPress文章增加阅读目录的方法

  • A+
所属分类:wordpress
摘要

在文章中,有很多标题,点击下就跳到文章底部相对应的内容。简单的来说,其实就是为文章增加阅读目录,方便查看条目,,其实这种功能不需要增加什么插件,用代码就可以在wordpress文章页面中直接实现。

之前,在网上有看到推荐一个插件,在文章中,有很多标题,点击下就跳到文章底部相对应的内容。简单的来说,其实就是为文章增加阅读目录,方便查看条目,类似百度百科的目录。其实这种功能不需要增加什么插件,用代码就直接可以实现。

免插件实现WordPress文章增加阅读目录的方法

插件这里就不推荐了,自己去问度娘,我也没有用过这样的插件,不过,用代码给文章增加阅读目录的方法可以分享给大家。

1.把下面的代码复制加入 functions.php 里:

  1. // 为文章增加阅读目录
  2. /*
  3. * SeoMoz.Link - 微信号 WPGeek
  4. */
  5. function read_list($content) {
  6.   $matches = array();
  7.   $ul_li = '';
  8.   $r = "/<h5>([^<]+)<\/h5>/im";
  9.   if(preg_match_all($r$content$matches)) {
  10.       foreach($matches[1] as $num => $title) {
  11.           $content = str_replace($matches[0][$num], '<h4 id="title-'.$num.'">'.$title.'</h4>', $content);
  12.           $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
  13.       }
  14.       $content = "\n<div id=\"article-read-list\">
  15.               <strong>阅读目录</strong>  
  16.               <ul id=\"read-list\">\n" . $ul_li . "</ul>
  17.           </div>\n" . $content;
  18.   }
  19.   return $content;
  20. }
  21. add_filter( "the_content""read_list" );

2.当然,少不了需要增加样式(style.css),这个你可以根据需要定制:

  1. /*阅读目录样式*/
  2. #article-read-list {
  3. float:right;
  4. width:160px;
  5. height:auto;
  6. border:solid 1px #c0c0c0;
  7. overflow:hidden;
  8. padding:10px;
  9. }
  10. #article-read-list #read-list {
  11. width:120px;
  12. height:auto;
  13. margin:0 auto;
  14. overflow:hidden;
  15. }

3.文章中想要加入目录的标题用<h5>标签即可实现想要的结果(在文章编辑页面左上角段落处选择即可)。

发表评论

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

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

    • avatar boke112导航 1

      方法还是挺简单的,具体是否需要显示文章目录就看个人喜好了。欢迎投稿这篇文章到boke112导航。