首页 SEO攻略正文

WordPress网站文章目录新招：悬浮左边变右上角显示及代码分享

SEO攻略 2025-10-26 2

[id_[id_1774011559[id_675128228]099018070]id_1753379226]

前面的文章，我们分享了，使用代码给wordpress网站自动生成文章目录，该目录悬浮在文章页面左边的方法，这种效果是我喜欢的，然而，也有一些朋友，不喜欢这种目录显示方式，那么，今天再给大家分享，一个把文章目录放在文章内容右上角的方法。

与此类似的，我们首先针对目录进行前端显示样式的设置，将下面的CSS代码增添至你网站当下所使用的wordpress主题模板的CSS文件里，

二、文章目录CSS 样式代码：

//文章目录样式
#article-index {
带连字符的moz边框半径，为6像素，6像素，6像素，6像素；
border: 1px solid #DEDFE1;
float: right;
margin: 0 0 15px 15px;
padding: 0 6px;
max-width: 200px;
line-height: 23px;
}
#article-index strong {
边界底部，为 1 像素，呈现为虚线，颜色是#DDDDDD；
display: block;
line-height: 30px;
padding: 0 4px;
}
#index-ul {
margin: 0;
padding-bottom: 10px;
padding-left: 0px;
}
#index-ul li {
背景：不间断地滚动于起始位置零像素下的零像素处，呈现透明状态；
list-style-type: disc;
padding: 0;

margin-left: 20px;
}

二、文章目录函数代码：

翻开你那wordpress主题之下function.php文档，将如下代码添入其中：

//文章目录放在右上角 chukuanren.com
function article_index($content) {
  $matches = array();
  $ul_li = '';
  $r = '/(.*?)<\/h[2-6]>/is';
  if(is_single() && preg_match_all($r, $content, $matches)) {
    foreach($matches[1] as $key => $value) {
      $title = trim(strip_tags($matches[2][$key]));
      $content = str_replace($matches[0][$key], ' . $value . ' id="title-' . $key . '">'.$title.'', $content);
      $ul_li .= '.$key.'" title="'.$title.'">'.$title."
\n";
    }
    $content = "\n
    文章目录
    \n" . $ul_li . "
    
\n" . $content;
  }
  return $content;
}
add_filter( 'the_content', 'article_index' );