给文章加个导航目录

发布时间:2020-05-06

摘要

可能有很多童鞋对HotNews Pro 2.7主题使用说明上面的目录导航感兴趣,点击上面的目录文字可以快速跳转到相关内容,适合长文章或者有特殊需求的文章使用。提供两种实现方法:
方法一、为了方便HotNews Pro主题新手阅读,在编辑文章中临时添加的。此方法适合多级目录,但编辑操作比较麻烦。
方法二、通过正则表达式,自动提取带有H3标签的文字为目录索引,使用更为方便……

可能有很多童鞋对HotNews Pro 2.7主题使用说明上面的目录导航感兴趣,点击上面的目录文字可以快速跳转到相关内容,适合长文章或者有特殊需求的文章使用。本文提供三种实现方法:

方法一、为了方便HotNews Pro主题新手阅读,在编辑文章中临时添加的。

首先将文章编辑模式改到文本模式(HTML)。

文章导航目录文字写法:

  1. <div id=“directory”>   
  2. <ul>   
  3.     <li><a href=“#1”>下载安装</a></li>   
  4.     <li><a href=“#2”>主题设置面板</a></li>   
  5.     <li><a href=“#3”>颜色风格选择</a></li>   
  6.     <li><a href=“#4”>首页布局设置</a></li>   
  7.     <li><a href=“#5”>CMS布局设置</a></li>   
  8.     <li><a href=“#6”>横向滚动图片模块</a></li>   
  9.     <li><a href=“#7”>顶部热点文章设置</a></li>   
  10.     <li><a href=“#8”>侧边推荐栏目设置</a></li>   
  11.     <li><a href=“#9”>特色图片功能</a></li>   
  12.     <li><a href=“#10”>导航菜单</a></li>   
  13. </ul>   
  14. </div>  

外面套了一个div 标签方便之后CSS控制样式。

目录跳转到的文章内容写法:

  1. <p id=“1”>下载安装。</p>   
  2. 此处添加正文内容,后面的相同。   
  3. <p id=“2”>主题设置面板</p>   
  4. <p id=“3”>颜色风格选择</p>   
  5. <p id=“4”>首页布局设置</p>   
  6. <p id=“5”>CMS布局设置</p>   
  7. <p id=“6”>横向滚动图片模块</p>   
  8. <p id=“7”>顶部热点文章设置</p>   
  9. <p id=“8”>侧边推荐栏目设置</p>   
  10. <p id=“9”>特色图片功能</p>   
  11. <p id=“10”>导航菜单</p>  

之后,在主题样式文件style.css最后加上:

  1. #directory{   
  2.     padding:0 0 0 4px;   
  3. }   
  4. #directory ul li{   
  5.     float:left;   
  6.     width:130px;   
  7. background:url(../images/icon.png) no-repeat rightright;   
  8. margin:1px;   
  9.     padding:0 0 0 5px;   
  10.     list-style:none;   
  11. text-indent:0;   
  12. border:1px solid #ccc;   
  13. }   
  14. #directory ul li a {   
  15. color#000;   
  16. text-decorationnone;   
  17. }   
  18. #directory ul li a:hover {   
  19. color#0196e3;   
  20. }  

其中:width:130px; 数值可根据字数作适当调整。

此方法适合多级目录,但编辑操作比较麻烦。

方法二、通过正则表达式,自动提取带有H3标签的文字为目录索引,使用更为方便,但只适合单级目录。

首先在主题functions.php中添加:

  1. function article_index($content) {   
  2.     $matches = array();   
  3.     $ul_li = ;   
  4.     $r = “/<h3>([^<]+)</h3>/im”;   
  5.   
  6.     if(preg_match_all($r$content$matches)) {   
  7.         foreach($matches[1] as $num => $title) {   
  8.             $content = str_replace($matches[0][$num], ‘<h4 id=“title-‘.$num.'”>’.$title.'</h4>’, $content);   
  9.             $ul_li .= ‘<li><a href=“#title-‘.$num.'” title=“‘.$title.'”>’.$title.“</a></li>n”;   
  10.         }   
  11.         $content = “n<div id=”article-index”>
  12.                 <strong>文章目录</strong>  
  13.                 <ul id=”index-ul”>n” . $ul_li . “</ul>  
  14.             </div>n” . $content;   
  15.     }   
  16.     return $content;   
  17. }   
  18. add_filter( “the_content”“article_index” );  

编辑文章时目录文字写法:

  1. <h3>我是索引标题</h3>  

在配合相应的样式:

  1.  #article-index {   
  2.     -moz-border-radius: 6px 6px 6px 6px;   
  3.     border1px solid #DEDFE1;   
  4.     floatrightright;   
  5.     margin: 0 0 15px 15px;   
  6.     padding: 0 6px;   
  7.     width200px;   
  8.     line-height23px;   
  9. }   
  10. #article-index strong {   
  11.     border-bottom1px dashed #DDDDDD;   
  12.     displayblock;   
  13.     line-height30px;   
  14.     padding: 0 4px;   
  15. }   
  16. #index-ul {   
  17.     margin: 0;   
  18.     padding-bottom10px;   
  19. }   
  20. #index-ul li {   
  21.     backgroundnone repeat scroll 0 0 transparent;   
  22.     list-style-typedisc;   
  23.     padding: 0;   
  24.     margin-left20px;   
  25. }  

此方法,不能实现多层级的复杂而完善的索引目录功能,如果你需要这些功能可以尝试使用第三种方法。

原文:wordpress:给文章添加一个导航目录

方法三、使用WP自动生成目录的插件

这几个都不错:Content Index for wordpress、jQuery Table of Contents 、WP-TOC等插件,有些可以实现多层云级显示效果。

大熊wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。大熊wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18324743309,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。