SWELL│「目次へ戻る」のアンカーリンクを自動挿入するカスタマイズ

swell-back-toc

有名ブロガーさんのブログで、h2タグに「目次へ戻る」のアンカーリンクがあるのを見たことがないでしょうか?

目次と閲覧したい項目とを行き来できるアンカーリンクはユーザービリティを向上させます。

本記事ではSWELL用にh2タグ上に「目次に戻る」のアンカーリンクを自動挿入するカスタマイズを作成しましたので紹介します。

目次

「目次に戻る」のアンカーリンクを自動挿入するカスタマイズ

「目次に戻る」のアンカーリンクを自動挿入するカスタマイズはfunctions.phpをコードを挿入するだけです。

以下、詳しく解説いたします。

functions.phpにコードを挿入する

コードを記述する場所は下記になります。

WordPressの管理画面 > 外観 > テーマファイルエディター > functions.php

functions.phpに下記のコードを挿入してください。

投稿ページとカテゴリーページにこのカスタマイズが適応できるように指定しています。

function motoki_back_toc( $content ){
		if ( is_single() || is_category() ){
			$back_toc = '<div class="back-toc"><a href="#mokuji">⇧ 目次に戻る</a></div>';
			$count = 0;
			$content = preg_replace_callback('/<h2 *[^>]*>/i', function( $m ) use (&$count, $back_toc) {
				$count++;
				if( $count == 1 ) {
					return $m[0]; 
				} else {
					return $back_toc.PHP_EOL.$m[0];
				}
			}, $content, -1).$m[0];
		}
		return $content;
	}
add_filter('the_content','motoki_back_toc',999);

function motoki_add_toc_id() {
	echo <<< EOM
	<script>
		var tmp = document.getElementsByClassName("p-toc__ttl") ;
		var val="mokuji";
		try {
		  tmp[0].setAttribute("id",val);
		} catch (error) {
	}
	</script>
	EOM;
	}
add_action( 'wp_footer', 'motoki_add_toc_id' );

カスタマイズは以上です。

コード挿入後にキャッシュをクリアして、h2上に「目次に戻る」のアンカーリンクが表示されているか確認しましょう。

まとめ

本記事では「目次に戻る」のアンカーリンクを自動挿入するカスタマイズを紹介いたしました。

じっくり記事を見比べるときは、目次との各h2への行き来が便利になってきますので、ユーザービリティをあげるためにも是非導入を検討してみてください。

SWELLカスタマイズ全まとめ

SWELLに関連するカスタマイズ記事を全てまとめました。

是非チェックしてみてください。

contact

お問い合わせ

WordPressの技術的なお悩みやご要望がありましたら、お気軽にお問い合わせください。

もちろんデザインに関することも相談できます。

  • 見た目の調整エラー相談その他技術に関する相談をしたい
  • 絞り込み検索オリジナルのブロックを作りたい
  • SEO内部施策構造化データの設定を依頼したい
  • サイトの高速化を診断・依頼したい
  • トップページデザインを依頼したい

この記事を書いた人

すいみんのアバター すいみん テクニカルアーティスト

カナダ在住のテクニカルアーティスト。
大学ではアート(油画)を専攻。卒業後はアニメ・映画・映像・ゲーム業界で、2Dから3DCG、ゲームエンジン、WEB制作まで幅広いコンテンツ制作の経験を積んでいます。デザイナーとエンジニアの中間のポジションでお仕事をするのが得意。

目次
閉じる