ミギムキ

[WordPress] 目次リンクをプラグインなしで自動生成したい

やりたいこと

サンプルコード

functions.php

function set_index_link() { ob_start(); echo '<p class="index_title">目次</p>'; echo '<ul class="index_link"></ul>'; $html = ob_get_contents(); ob_end_clean(); return $html; } add_shortcode( 'index_link', 'set_index_link' );
スポンサー広告

jQuery

jQuery(function($) { if($('.index_link')) { $('h2, h3, h4, h5, h6').each(function(index) { var anker = 'anker_' + index; $(this).attr( 'id', anker ); $('.index_link').append('<li class="index_link_' + $(this).prop('tagName').toLowerCase() + '"><a href="#' + anker + '">' + $(this).text() + '</a></li>'); }); } });

CSS

.index_title { padding: 0px; margin: 0px; font-size: 18px; font-weight: bold; } .index_link { padding: 0px; margin: 1em 0px 0px 1.5em; } .index_link_h3 { margin: 0px 0px 0px 1.5em; } .index_link_h4 { margin: 0px 0px 0px 3em; } .index_link_h5 { margin: 0px 0px 0px 4.5em; } .index_link_h6 { margin: 0px 0px 0px 6em; }

html

[index_link]
  • 目次リンクを置きたいところにショートコードを挿入してください
スポンサー広告

仕組み、解説、補足など