WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 为WordPress添加文章索引

为WordPress添加文章索引

PCDotFan10年前

为WordPress添加文章索引-WP酷

前几天在知名博客我爱水煮鱼上看到了一款文章目录插件:TOC,可在文章正文旁生成索引,可惜去掉版权需要收费。Ceezi朋友制作了一个与水煮鱼插件差不多的文章索引代码版,喜欢的同学可以去试试看。

文章索引相当于文章目录,点击目录自动跳转到相应位置,这就需要你的文章有小标题,像我经常用h3标签来做小标题,这样所有的h3标签就能形成一个索引目录。我们要做的就是把h3标签自动识别出来并组装成一个目录,好了,开始实现方法。

 

实现方法

在文章里必须有h3标签,每一个三级标题都会成为索引中的一项。将下面的代码放到function.php中,就会在你的文章中自动生成一个索引。

function article_nav($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="article_nav_' . $num . '">' . $title . '</h3>', $content);
            $ul_li .= '<li><a href="#article_nav_' . $num . '" title="' . $title . '">' . $title . "</a></li>n";
        }
        if (is_singular()) {
            $content = '<div id="fn_article_nav"><div id="article_nav_title">Article Nav</div><ul>'
                . $ul_li . '<li><a href="#respond">发表评论</a></li></ul></div>' . $content;
        }
    }
    return $content;
}
add_filter("the_content", "article_nav");

 

索引样式

索引是生成了,但是只是在文章中的一个普通ul list,我们要做的是把他独立出来,所以只需要为它写一个css样式就好了。推荐用position:fixed把他固定到左边或者右边,下方提供了一个参考样式(见上图),可以根据自己的情况去修改。

#article_nav_title{font-size:11px;text-align:center;line-height:15px;color:#cc0000;border-left:3px #cc0000 solid;border-bottom:1px #aaa dotted}
#fn_article_nav{position:fixed;left:5px;top:140px;background-color:rgba(255,255,255,.55);border-radius: 0 3px 3px 0;box-shadow:0 0 2px #aaa}
#fn_article_nav ul{padding:0!important;margin:0px!important}
#fn_article_nav li{list-style:none;padding:3px;width:100px;margin:0;background: url("images/li.png") no-repeat scroll 0 5px transparent!important;text-indent: 1.6em;}

若使用上面的样式需要上传li.png到主题目录的images文件夹下,点击下载

#文章索引
1
分享

Warning: Trying to access array offset on value of type bool in /data/wwwroot/www.mywpku.com/wp-content/themes/wpku/inc/template-functions.php on line 180

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (6)
再想想
  • Aoyu

    "软件收纳盒"以后还开不?友链我要不要去掉?

    10年前
    • WP酷

      @Aoyu 估计是不可能了,请撤掉吧

      10年前
    • 12

      @WP酷 试一下评论

      5年前
  • 金银锋

    不错的功能。 [太开心]

    10年前
  • 衣服网

    好的,学习了,我来试一下,谢谢你的分享

    10年前
  • czduban

    第9行 最后一段多出一个n字母

    7年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
通杀百度结构化数据插件Sign验证失败的终极解决方法
9年前
利用缓存插件W3TC与又拍云构建WordPress全站CDN
10年前
WordPress 低版本 IE 浏览器自动使用其它主题
9年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1