wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > wordpress主题制作:怎样给wordpress文章内容添加目录导航?

    wordpress主题制作:怎样给wordpress文章内容添加目录导航?

    高时银博客 wordpress CMS主题制作 点击: 2,438 次 0 0

    在我们帮客户制作wordpress主题时,对方可能会提出很多的要求,这时,我们就要花尽脑子去开足马力开创。比如本章所要讲解的内容——如何给wordpress文章内容添加导航目录?嗯,这个功能的实现,对于浏览者在浏览网站文章时大大的方便,尤其是特别的长的长篇文章,可以提升用户体验。所以,我们在制作wordpress时还是有必要做一下这方面的工作。闲话不多说,一起跟随高时银博客来看看怎样来添加wordpress文章目录导航吧。

    方法1:通过插件来实现。

    这方面的插件也不少,如 Content Index for WordPress插件。插件不是本章的要点,这里不多说。如果想用插件,可以百度一下,或者后台插件里搜索安装使用。

    方法2:纯代码实现。

    首先将以下代码放到主题的functions.php文件中,

    //文章目录
    function article_index($content) {
    $matches = array();
    $ul_li = '';
    $r = "/<h4>([^<]+)<\/h4>/im";
    if(preg_match_all($r, $content, $matches)) {
    foreach($matches[1] as $num => $title) {
    $content = str_replace($matches[0][$num], '<h2 id="title-'.$num.'">'.$title.'</h2>', $content);
    $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
    }
    $content = "\n<div id=\"article-index\">
    <b>[文章目录]</b>
    <ul id=\"index-ul\">\n" . $ul_li . "</ul>
    </div>\n" . $content;
    }
    return $content;
    }
    add_filter( "the_content", "article_index" );

    下面是wordpress文章目录导航的CSS样式代码,把它放到你主题的style.css文件中:

    /* 文章目录 */
    #article-index { background:#CCCCCC; float: right; margin: 0 20px 10px 10px; padding: 6px; width: 150px; }
    #article-index strong { border-bottom: 1px dashed #DDDDDD; display: block; line-height: 30px; padding: 0 4px;}
    #index-ul { margin: 0; padding-bottom: 10px; margin-top:15px; }
    #index-ul li { list-style-type: none; margin-bottom:10px; margin-left:0px; font-size:12px; line-height: 18px;}
    #index-ul li a{ color:#3366CC;}

    这样,我们就给这个主题添加了wordpress文章目录导航功能。这样我们在发表文章时,如果文章比较长,就可以使用这个功能。

    使用方法:在我们发表文章时,选择文章中要作为目录导航的词语或语句,然后用<h4>标签把它括住,如下图:

    wordpress主题制作:怎样给wordpress文章内容添加目录导航?

    如上图,在选中作为目录的语句后,点击编辑器上的“段落”下拉框,然后选中“四级标题”,这表示以<h4>把选中的语句括起来了。当然,你也可以在代码模式下修改。

    这样,文章发表成功后,就会在文章的右上角留下文章目录导航,如下图:

    wordpress主题制作:怎样给wordpress文章内容添加目录导航?

     

    效果可以看:http://wanlimm.com/77201504233180.html

    这个样式,你可以修改上面的CSS代码,来达到自己的需求。

    好了,wordpress如何添加文章目录导航就介绍完了。如果 还不什么不明白的,可以本站相关文章。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201506114348.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论