Table of Contents Plusの目次を画像に変更する方法
よく読まれている記事
Table of Contents Plusとは
Table of Contents Plusとは、TOC＋といって、wordpressの記事やページに、自動で目次を付けてくれる便利なプラグインです。
修正したバージョンは、Version: 1311 です
番号を画像にしたい場合、うまくいかない
toc_depth_というclassが、全て、toc_depth_1 になってしまいます。結果、cssで、toc_depth_1、toc_depth_2などを用意しても、全て同じ表示になってしまします。
これは、table-of-contents-plus/toc.php を直接編集することで、修正が可能です。
↓全て同じ画像になってしまう。
phpを修正する
1294行目を修正します。|
1 2 3 |
$html .= '<span class="toc_number toc_depth_' . ($current_depth - $numbered_items_min + 1) . '">'; |
↓下に修正
|
1 2 3 |
$html .= '<span class="toc_number toc_depth_' . ($numbered_items[$current_depth] + 1) . '">'; |
元のソースがこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// list item if ( in_array($matches[$i][2], $this->options['heading_levels']) ) { $html .= '<a href="#' . $this->url_anchor_target( $matches[$i][0] ) . '">'; if ( $this->options['ordered_list'] ) { // attach leading numbers when lower in hierarchy $html .= '<span class="toc_number toc_depth_' . ($current_depth - $numbered_items_min + 1) . '">'; for ($j = $numbered_items_min; $j < $current_depth; $j++) { $number = ($numbered_items[$j]) ? $numbered_items[$j] : 0; $html .= $number . '.'; } $html .= ($numbered_items[$current_depth] + 1) . '</span> '; $numbered_items[$current_depth]++; } $html .= strip_tags($matches[$i][0]) . '</a>'; } |
修正したソースがこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// list item if ( in_array($matches[$i][2], $this->options['heading_levels']) ) { $html .= '<a href="#' . $this->url_anchor_target( $matches[$i][0] ) . '">'; if ( $this->options['ordered_list'] ) { // attach leading numbers when lower in hierarchy $html .= '<span class="toc_number toc_depth_' . ($numbered_items[$current_depth] + 1) . '">'; for ($j = $numbered_items_min; $j < $current_depth; $j++) { $number = ($numbered_items[$j]) ? $numbered_items[$j] : 0; $html .= $number . '.'; } $html .= ($numbered_items[$current_depth] + 1) . '</span> '; $numbered_items[$current_depth]++; } $html .= strip_tags($matches[$i][0]) . '</a>'; } |
これで、目次の画像がcssで変更できるようになります。
リストタグの変更
あと、別件ですが、目次のリストがulになっているのをolに修正しておくと、なお良いかと思います。ウィジェットで利用している場合は、1686行目あたり。
|
1 2 3 |
'<ul class="toc_widget_list' . $css_classes . '">' . $items . '</ul>' |
↓下に修正
|
1 2 3 |
'<ol class="toc_widget_list' . $css_classes . '">' . $items . '</ol>' |
修正は以上です。
私は、h2だけに目次を表示させる設定にして利用しています。
さらに、ウィジェットで利用して、サイドメニューに設置して、
そのサイドメニューをフローティングさせて、長い文章でも常に目次が見えるようにしました。