WordPressでページトップへ戻るボタンなどをプラグインなしで実装する場合、ターゲットとなる場所をbodyタグ付近に設置する必要があります。

そして、HTMLでは内部リンクの遷移先として、クラス(class)ではなくID(id)で指定する必要があります。

しかしながら、WordPressのbodyタグ内にはIDは指定されておらず、bodyタグ内へクラスを追加する関数は存在するものの、IDを追加する関数は存在しません。

これを解決するために、テーマのテンプレート内にIDを持つ空のdivタグを挿入したり、body_idなどというユーザー定義関数を作った上で、テンプレート内のbody出力部分へ関数に従ってIDを出力する方法が数々紹介されています。

body_idに関する参考記事:WordPressでbodyに任意のid名を指定する

この方法は、自作のテーマや子テーマにbodyタグ出力をしているテンプレートをコピーして書き換えることで実装可能ではありますが、プラグインで汎用に機能を実装したい場合には不向きです。

そこで発想を変えて、bodyタグに無理にIDを振るのではなく、bodyタグの直下にidを持つ空のdivタグを入れれば同じことなのでは?というのが以下のコードです。

ちなみにスクロールするとこのページ右下に表示されるページ上部へ戻るボタンのターゲットもこの方法で実装しています(つまりこの方法できちんと動作します)

テーマのfunctions.php、または自作プラグインのプログラム内へ追加するだけです。

/* bodyタグ直下へIDを持つ空のdivタグを出力 */
if ( !function_exists( 'add_div_id_insert_to_below_body_tag' ) ){
function add_div_id_insert_to_below_body_tag() {
	$page_top_target = '<div id="page-top"></div>';

	return esc_html('.$page_top_target.');
}
}
add_action( 'wp_body_open', 'add_div_id_insert_to_below_body_tag' );

あとは、コード内にあるdivタグの「page-top」となっている部分を自身のターゲットとするid名に書き換えればOKです。

returnにエスケープは必要ないと認識していますが、一応esc_htmlでエスケープしています

私は何とかbodyタグにidを..と結構な時間を費やしましたが、今回使ったWordPressの組み込み関数である「wp_body_open」を使えばこんなに簡単にターゲット指定ができるんですね。