乌徒帮技术范WordPressWordPress开发 › 无需插件为wordpress文章添加目录索引

无需插件为wordpress文章添加目录索引

分类:WordPress开发

今天在阅读水煮鱼的文章时发现了一款插件,可以实现给一篇文章开头添加文章内的索引锚链接,(http://fairyfish.net/project/toc/)让用户在文章开头就对文章结构一目了然,这不正如本站实现的文章页头的情况么。所以乌徒帮也将自己的实现方法贴出来,供大家讨论交流。

概述

乌徒帮实现该功能是通过写新函数,对the_content函数进行修缮,并在文章页模板中加入代码的方法,完全没有使用插件。于水煮鱼不同的是,乌徒帮并非每篇文章都会设置醒目的子标题作为索引,所以乌徒帮将那些没有采用子标题的文章在这里用摘要输出。在写文章时,利用可视化编辑中对段落的规定,将想要设置为锚链接的子标题设置为“三级标题”(即h3)即可。接下来,frustigor就将实现该功能的函数、模板页、css样式部分贴出来供大家把玩。

函数部分

加下面这段代码加入到模板文件functions.php中

/* 在文章开头显示文章索引 */
function get_article_index() {
$matches = array();
$ul_li = '';
$r = "/<h3>([^<]+)<\/h3>/im";
global $post;
$content=$post->post_content;
if(preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $num => $title) {
//$content = str_replace($matches[0][$num], '<h3 id="title-'.$num.'">'.$title.'</h3>', $content);
$ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
}
$name='文章索引';
}else{
global $post;$excerpt=$post->post_excerpt;
if($excerpt)$ul_li=$excerpt;
else $ul_li=mb_strimwidth(get_the_excerpt(),0,200,'...');
$name='文章摘要 <a href="javascript:initialize()">读READ</a>';
}
$content ='
<div id="article-index-ad">
<span><strong>'.$name.'</strong>'.$ul_li.'</span>
<span>'.get_single_ad().'</span>
</div>
';
return $content;
}
function article_index($content) {
$matches = array();
$ul_li = '';
$r = "/<h3>([^<]+)<\/h3>/im";
if(preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $num => $title) {
$content = str_replace($matches[0][$num], '<h3 id="title-'.$num.'">'.$title.'</h3>', $content);
}
}
return $content;
}
add_filter( "the_content", "article_index" );

第一个函数将在文章模板中用到,目的是实现在文章页的文章内容上方输出带索引的列表。其中get_single_ad()函数是本站在文章旁边的广告函数,你可以更换成你自己的广告代码,或者删除。第二个函数和add_filter()句就是对文章内容进行调整。将文章中所有<h3>标签修改为带有锚的形式,这样你在点击文首的锚链接时就链到该标题。

模板修改

在文章页模板single.php或loop-single.php或其他名称的文章页模板内作如下修改

<?php if(function_exists('get_article_index'))echo get_article_index(); ?>
<?php the_content(); ?>

即在the_content()函数上方添加刚才的新增函数,不过你需要对布局进行适当调整,如可以用漂浮的方法等。

css样式

因为每个人的布局不同,想要呈现的方式不一样,本文不做统一规定,不过要提醒的是:1、你最好学乌徒帮,对文章中的h3做另类的规定;2、如果你的谋篇文章设置了比较多的子标题,就会产生很多锚索引,撑破你的div框,你可以用下面的方法来实现固定高度:

overflow:scroll;
overflow-x:hidden;

使用这种方法可以让你的div在溢出时横向不能滚动,纵向可以滚动,如此可以让你的空间够用又不太影响美观。

PS:其实百度更新很快的,本文发布时间20:53,结果21:00左右就收录,下图是我在23:00site百度得到的结果

百度收录快速

已有1条评论 快速评论
  1. […] 在之前的文章无需插件为wordpress文章添加目录索引中,我介绍了如何实现为文章添加目录索引。为何要添加目录索引就不再赘述。本文详细的来介绍实现该目标的逻辑思路。为了描述方便,我们将上面这篇文章成为“文A”。而这种目录在我的另一个SEO博客嗖录网中已经利用起来,有兴趣的朋友可以去看一下效果。 […]

填写个人信息,赶快回复吧!