本文内のすべての指定タグの上へ自動で「ページ上部へ戻る」リンクを表示させる方法（メモ）

「上へ戻る」リンクを機能させるための準備用コード

これはどちらの方法で「上へ戻る」リンクを表示させる場合にも必要なコードです。

「上へ戻る」リンクは文字通りリンクなので、リンク先（遷移先）が必要です。

さらにページ内へのリンクとなることから、ターゲットはクラス(class)ではなくIDである必要があります。

つまり、「上へ戻る」リンクをクリックした時に遷移先となる場所（IDを持つタグ）をページの最上部に出力しておく必要があるのです。

以下が、「sample-page-head」というidを持つ空のdivタグを、body直下（つまりページの先頭部分付近）へ追加するコードです。

有効化しているテーマのfunctions.phpへ追加することで適用されます。

/*** ページ先頭へdiv ID「#sample-page-head」を出力 ***/
/* コールバック関数 */
if ( !function_exists( 'sample_add_page_head_id_insert_to_body_cb' ) ){
function sample_add_page_head_id_insert_to_body_cb() {
	$sticky_content = '<div id="sample-page-head"></div>';
	return $sticky_content;
}
}

/* 出力 */
if ( !function_exists( 'sample_add_page_head_id_insert_to_body' ) ){
function sample_add_page_head_id_insert_to_body() {
	echo sample_add_page_head_id_insert_to_body_cb();
}
}
add_action( 'wp_body_open', 'sample_add_page_head_id_insert_to_body' );

このコードを追加すると、以下のリンクターゲット用のdivタグが、出力されるHTMLソースのbodyタグ下へ出力されます。

<div id="sample-page-head"></div>

上記のコードは、WordPress5.2以降で追加された「wp_body_open」フックを使用しています。このフックの使い方については以下のページでより詳しく解説していますのでご覧ください。

リンク先ページをご覧いただくとわかる通り、「wp_body_open」フックはWordPressのバージョンが古かったり、お使いのテーマが対応していない場合には出力されません。

もしもコードを追加しても、ターゲットとなるdivタグが出力されない（本ページのコードをすべて追加して、問題なく機能の実装できてるはずなのにリンクをクリックしてもページ上部へ移動しない）場合には、「wp_body_open」フックが効いていない環境である可能性がありますので、以下のいずれかの方法でターゲットの指定を行ってください。

クラシックテーマの場合

管理画面に「外観」→「エディター」メニューがなく「カスタマイズ」というメニューがあるテーマは、一般的にクラシックテーマと呼ばれています。

このタイプのテーマの場合は、PHPファイル上でテンプレートの編集を行いますので、以下のようにしてターゲットdivタグの挿入を行う必要があります。

1. 親テーマでは更新時に上書きされて設定が消えることがあるので、子テーマを作り有効にする
2. 親テーマの「body」タグが含まれるテンプレート（通常はheader.php）を子テーマへコピーする
3. 子テーマにコピーしたテンプレートを編集してターゲットdivタグを挿入する

下図は一般的なテーマのheader.phpの編集画面でbodyタグ下へターゲットdivタグを挿入した状態です。

ブロックテーマの場合

管理画面に「外観」→「エディター」というメニューがあるテーマはブロックテーマと考えていいでしょう（WordPress標準ではTwenty Twenty-TwoやTwenty-Twenty-Threeがブロックテーマです）。

ブロックテーマでは基本的に「wp_body_open」フックが利用できるはずですので、措置の必要はないと思いますが一応紹介しておきます。

ブロックテーマの場合には、この「エディター」から、投稿（や固定ページ）テンプレートを選択し、上部にあるヘッダー部分のグループの「HTMLアンカー」に「sample-page-head」を入力することで、上記コードと同じような役割を持たせることができます。

前準備は以上です。

ターゲットとなる空のdivタグがきちんと出力されていないと、ここから先のコードを実装してリンクが自動表示されるようになっても実際には動作しませんのできちんと出力されているかを確認ください。

本文内すべての特定タグ上へ自動で上部へ戻るリンクを表示させるコード

さて、前準備が終わったらいよいよ本文内へ自動で「上へ戻る」リンクを挿入するコードを追加します。

前準備で出力されるべきターゲットdivタグがHTMLソース上にきちんと出力されていないと動作しませんのでご注意ください

冒頭で触れた通り、2通りの体系のコードを順に紹介しますので、用途に合った方を採用ください。

①とにかく簡単にすべての特定タグ上へリンクを挿入する方法

とにかくすべてのページ本文にある特定のタグの上すべてに自動で「上に戻る」リンクを出力したい方向けのコードです。

出力されるリンクをより細かく設定したい場合には次の「任意の位置（順位）にある特定タグの上へリンクを挿入する方法」のコードがおすすめです。

このページで紹介している機能は、「ads-after-each-3rd-paragraph.php」のコードを元に、自身でカスタマイズしたものです

以下のコードを有効化しているテーマのfunctions.phpへ追加します。

/***** 特定のタグ前に何かを出力する *****/
/* コールバック */
if ( !function_exists( 'sample_top_scroll_auto_insert_tags_callback' ) ){
function sample_top_scroll_auto_insert_tags_callback( $insertion, $content ) {
	//自動挿入する要素を指定
	$element_type = 'h2';
	$start_element = '<'.$element_type;

	//ヘッダーとコンテンツを分解
	$heading = explode( $start_element, $content );

	//必要分だけコンテンツを作る
	$top_scroll_insert = array_map(fn ($a) => $a . $insertion, $heading);

	//指定したヘッダーと作成されたコンテンツを元に戻す
	return implode( $start_element, $top_scroll_insert );
}
}

/* 書き換え処理 */
if ( !function_exists( 'sample_top_scroll_auto_insert_tags_insert' ) ){
function sample_top_scroll_auto_insert_tags_insert( $content ) {

	//テキストやターゲットの設定
	$ins_text = esc_html(__('Go To Page Top&nbsp;&gt;&gt;',''));
	$ins_id = esc_html('#sample-page-head');

	//文字の前にアイコンフォントを使う場合は「'.$ins_text」の前へHTMLタグで挿入
	//文字の後ろにアイコンフォントを使う場合は「$ins_text.'」の後ろへHTMLタグで挿入
	$insert_content = '
		<aside class="top-scroll-inline"><a href="'.$ins_id.'">'.$ins_text.'</a></aside>
	';

	//条件によって出力する
	if(!is_admin()){//管理画面以外

		//固定ページ、固定ページのフロントページ以外の個別ページ
		if ( is_singular() && !is_page() && !is_front_page() ) {//固定ページ以外の個別ページ
			return sample_top_scroll_auto_insert_tags_callback( $insert_content, $content );
		}

	}

	return $content;
}
}
add_filter( 'the_content', 'sample_top_scroll_auto_insert_tags_insert' );

再三にわたり「特定のタグ」と書いているのは、本コード中の「h2」の部分が、本文中のH2見出しタグの前に出力するという意味を持つからです。

この「h2」を「h3」に変更すればH3タグの前に出力、「section」に変更すれば、HTML要素を「section」にしたグループの前に出力するなどといったカスタマイズができます。

また、「Go To Page Top >>」を変更すれば、出力されるリンク文字列を自由に変更できます。

以下の行で、「固定ページ以外の個別ページ」（投稿及びカスタム投稿タイプ）すべてに自動で出力されるようにしていますので、必要に応じて条件を書き換えれば出力の調整ができます。

if ( is_singular() && !is_page() && !is_front_page() ) {//固定ページ以外の個別ページ

②任意の位置（順位）にある特定タグの上へリンクを挿入する方法

本文内にある特定のタグのうち、〇番目に見つかった特定タグではリンクを出力（非出力）にしたい場合には有効なコードです。この方が実用的かも知れません。

/***** 指定したタグ上に「ページ上部へ戻る」リンクを出力 *****/
if ( !function_exists( 'sample_add_back_to_top_content_before_sp_tag' ) ){
function sample_add_back_to_top_content_before_sp_tag($the_content) {
//変数の指定
	//リンクに表示する文字列(必要ないと思うけど一応エスケープ処理)
		$bc_text = esc_html(__('Go To Page Top >>',''));
	//クリック時の遷移先ID
		$target = esc_html('#sample-page-head');
	//反応させるHTMLタグの指定
	//h2.h3...sectionなどの中から1つ指定
		$heading = 'h2';

	//リンクの整形
	//文字の前にアイコンフォントを使う場合は「'.bc_text」の前へHTMLタグで挿入
	//文字の後ろにアイコンフォントを使う場合は「bc_text.'」の後ろへHTMLタグで挿入
	$bc = '<aside class="top-scroll-inline"><a href="'.$target.'">'.$bc_text.'</a></aside>';

	//自動挿入するタグの正規表現を整形
	$tag = '/<'.$heading.'.*?>.+?<\/'.$heading.'>/i';

//該当箇所を置き換え
//「$bc」が挿入されているとリンクを出力するので必要に応じて変更
if ( is_singular() && !is_front_page() && !is_page() ) {//固定ページ以外の個別ページ
	//指定タグが本文中にあるかどうかで判断
	if ( preg_match_all( $tag, $the_content, $tags )) {
		if ( $tags[0] ) {//配列があるかのチェック（不要かも．．）
			//1番目の指定タグを置き換え
			if ( $tags[0][0] ) {
				$the_content  = str_replace($tags[0][0], $tags[0][0], $the_content);
			}

			//2番目の指定タグを置き換え
			if ( $tags[0][1] ) {
				$the_content  = str_replace($tags[0][1], $bc.$tags[0][1], $the_content);
			}

			//3番目の指定タグを置き換え
			if ( $tags[0][2] ) {
				$the_content  = str_replace($tags[0][2], $tags[0][2], $the_content);
			}

			//4番目の指定タグを置き換え
			if ( $tags[0][3] ) {
				$the_content  = str_replace($tags[0][3], $bc.$tags[0][3], $the_content);
			}

			//5番目の指定タグを置き換え
			if ( $tags[0][4] ) {
				$the_content  = str_replace($tags[0][4], $bc.$tags[0][4], $the_content);
			}

		}
	}
}

//コンテンツを返却
	return $the_content;

}
}
add_filter('the_content','sample_add_back_to_top_content_before_sp_tag',11);

コード中にコメントを目いっぱい書いているので大丈夫だと思いますが、一応以下のカスタマイズが可能です

• 「$bc_text」変数の「Go To Page Top >>」を編集すれば任意の文字列へ変更できます
• 「$heading」変数の「h2」を「h3」など他のタグにすることでリンクを自動挿入される特定タグを変更できます

また、コードでは、以下の部分で本文中に見つかった特定タグの場所で処理を分けるようにしています。

//1番目の指定タグを置き換え
if ( $tags[0][0] ) {
	$the_content  = str_replace($tags[0][0], $tags[0][0], $the_content);
}

//2番目の指定タグを置き換え
if ( $tags[0][1] ) {
	$the_content  = str_replace($tags[0][1], $bc.$tags[0][1], $the_content);
}

//3番目の指定タグを置き換え
if ( $tags[0][2] ) {
	$the_content  = str_replace($tags[0][2], $tags[0][2], $the_content);
}

//4番目の指定タグを置き換え
if ( $tags[0][3] ) {
	$the_content  = str_replace($tags[0][3], $bc.$tags[0][3], $the_content);
}

//5番目の指定タグを置き換え
if ( $tags[0][4] ) {
	$the_content  = str_replace($tags[0][4], $bc.$tags[0][4], $the_content);
}

本文中の〇番目に見つかった特定タグなのかで処理を分けています。一応5番目のタグまで判別するようにしていますが必要であればいくつでも条件は追加できます（コードを良く見て条件を追加したコード行中の何を変更すべきかは判断ください）。

そして、見つかった〇番目のタグに対して「$bc.」を入れている場合はリンクを表示、「$bc.」を入れていない場合はリンクを表示させないというカスタマイズができるようにしています（コード例では1.3番目のタグ前にはリンク表示されないようにしています）。

「$bc.」の位置によって、特定タグの「前」にリンクを表示するか「後」に表示するかも変更できますが、基本的なPHPの変数の扱い方に慣れていない方はエラーを起こす可能性がありますのでご注意ください

また、前項で紹介したのと同様、「固定ページ以外の個別ページ」（投稿及びカスタム投稿タイプ）すべてに自動で出力されるようにしていますので、必要に応じて条件を書き換えれば出力の調整ができます。

スタイルの調整

コードを追加して自動挿入された「上へ戻る」リンクには何も装飾がありませんので、左側に、通常の設定と同じリンクの形で表示されます。そして何もなければリンククリック時に瞬間的にページ冒頭へ移動するはずです。

これを少し変えて、以下のように表示させてみましょう。

• リンク文字を右寄せで少し薄い色で表示する
• リンク文字にアンダーラインなどの装飾をしない
• リンク文字をマウスオーバーしたら、テーマ標準の文字色に変え、アンダーラインを表示する
• リンクをクリックしたら、スルスルっと移動（スムーズにスクロール）するようにする

以下のコードを有効化しているテーマのstyle.cssへ追加します。

.top-scroll-inline {
	text-align: right;
}

.top-scroll-inline a{
	color:#777;
	text-decoration:none;
}

.top-scroll-inline a:hover{
	color:var(--wp--preset--color--foreground);
	text-decoration:underline;
}

html {
	scroll-behavior: smooth;
}

最後の「scroll-behavior: smooth」については、ページ内遷移時の動作をスムーズにさせるためのものですので、必要ない、既に設定済などの場合には削除して構いません。

「scroll-behavior: smooth」はJSなどを使ったスムーススクロールと併用すると、どちらかの動きに不具合が出ることがありますから、自身のサイトで実装してみてから調整ください