Table of Contents plusの目次に戻るボタンを見出し毎に自動挿入するプラグイン「TOC Extension – Back To Index」

Table of Contents plusの目次に戻るボタンを見出し毎に自動挿入するプラグイン「TOC Extension – Back To Index」

今日ツイッターを見ていたらこのようなツイートが。

長文記事の滞在時間、読了率を高める目的で、
「目次←→各見出し」
と往来できる様、各h2段落の最後にアンカーで「目次に戻る」を置くのは有効。

もちろん短い記事なら必要無し。
あと心なしか目次アンカーの検索インデックス率上がった気がするw

脱線だけど、kindle本にもこれ実装されて欲しい…

— おおき/SEOコンサル (@ossan_mini) November 25, 2018

なるほど!確かにこれは便利だ。

ということで知識がない人でも簡単に各見出しの最後に「目次に戻る」リンクを自動挿入するプラグインを作りました。

各hタグの段落の最後に「目次へ戻る」を追加

早速ですがこのブログにも自作したプラグインを動作させています。

ものすごい即席で作ったのでカスタマイズ性は弱いですが、どうやったらいいのか右も左も分からないという方には役立つかなーと思ってます。

ちゃんと一番下にも「目次に戻る」が追加されますよ。

Table of contents plusのインストールが必須

目次を生成するプラグインはたくさんありますが、このプラグインは「Table of contents plus」により生成される目次が表示されている場合のみリンクが正しく動作します。

他の目次自動生成プラグインは動作対象外なので注意してください。

CSSのカスタマイズ

おそらく何もせず導入すると、ただのリンクテキストとして挿入されて、上下の余白などが全然ないと思います。

ですので最低限上下の余白と下線で装飾できるコードを用意しておいたので、[カスタマイズ]->[追加 CSS]に貼り付けてください。

もちろん、CSSがわかる人はボタンにするなり自由にカスタマイズしてくださいね。

.toc_back{
	display:inline-block;
	padding:1.5em 0 2em;
	text-decoration:underline;
}

特定の見出しの上に広告を入れるおまけ機能付き

これは私が個人的に欲しかった機能だったのでついでに実装しました。

簡単に誰でもカスタマイズできる機能は実装していないのですが、プラグインを直接編集することで広告コードを設定することができます。

あまり意味はないですがモザイクを入れてみました(笑)

その下の方に行くとどの見出しの上に挿入するので設定する項目があります。

<?php
/*
	広告挿入に使用
	1つ目の値が見出しタグのレベルを表す
	1だとh1タグ
	6だとh6タグ

	2番目の数値は何番目のhタグに挿入するか指定する
	1番目の数値が2で2番目の数値が3なら
	3番目に表示されるh2タグの直前に広告が設置される
*/
$ads_insert_index=array(2,3);

?>

書いてあるコメント通りなのですが、プラグインを直接編集してここの数値を変更することでどの見出しレベルで何個目の見出しの上に挿入するのか設定することができます。

うちのサイトでは2番目のh2(見出し2)の上に広告が来るようにしています。
この記事にはh2タグが1個しか無いから記事内広告は出ないんですけどね(笑)

この記事を書いている時がもうすでに日付が変わる時間だったので、専用の設定画面などは作れていませんが、やる気があれば設定画面も作るかもしれません(多分無い笑)

明日…というか今日もいつも通り仕事なのでここでタイムアップ!

特別な機能はありませんが、サクッと「目次に戻る」リンクを追加したいという方はどうぞ!

Wordpressカテゴリの最新記事

pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus