何かのサービスを利用する際などに「開始bodyタグ下に〇〇を追加してください」などという案内があった場合どうしてますか？
また、ページトップへ戻るボタンなどをプラグインなしで実装する場合、ターゲットとなる場所をbodyタグ付近に設置するといった場合には、どうしていますか？
テンプレートをPHPで直接編集できるクラシックテーマであれば、以下のようにして行うのが通常ですね。
- 子テーマを用意する
- 親テーマの開始bodyタグが出力されているテンプレート（header.phpなど）をコピー
- コピーしたテンプレートを直接編集
でも、WordPress5.2で追加された「wp_body_open」というフックが利用できるテーマであれば、わざわざこんな作業しなくても、出力されるHTMLのbodyタグ下へ何かのコンテンツを出力することができるんです。
今回は、ページトップへ戻るボタン実装時のターゲットとなるIDを含んだdiv要素をbodyタグ直下に出力する例として、「wp_body_open」フックの使い方を紹介します。
本ページの右下に表示されるページ上部へ戻るボタンのターゲットもこの方法で実装しています（つまりこの方法できちんと動作します）
この方法は有効化しているテーマが「wp_body_open」に対応していることが前提となります。Twenty Twenty-TwoやTwenty Twenty-Threeといったブロックテーマのほとんどでは問題なく使用できると思いますが、対応していないテーマもありますので注意が必要です。
本ページで紹介するコードを追加しても追加したい要素が出力されない場合は「wp_body_openが使えるかどうかの確認方法と対処」を参考に確認してみてください
コードを使用する前に、ここをクリックして注意事項をご確認ください
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
bodyタグ下に何かの要素を出力するコード例
冒頭で書いたように、「ページ上部へ戻る」リンクのターゲットとなる要素を出力するためのコード例を紹介します。
以下のコードをテーマの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>';
echo $page_top_target;
}
}
add_action( 'wp_body_open', 'add_div_id_insert_to_below_body_tag' );すると、ソース表示した時のbodyタグの下付近に以下のHTMLタグが出力されます。
<div id="page-top"></div>余談 wp_body_openフックを使わない方法もある
実は上記コード例のようにターゲットとなる要素を出力したいという目的であれば、「wp_body_open」を使わなくても以下の方法で実現することは可能です。
ただ、「wp_body_open」を使うことで、それ以外のコンテンツを追加したい、後々追加する可能性がある場合には重宝しますので、覚えておいて損はないでしょう。
クラシックテーマの場合
クラシックテーマとは、一般的に管理画面に「外観」→「エディター」メニューがないものと認識していただければよいかと思います
クラシックテーマの場合には、テンプレートを直接編集できるので、冒頭で紹介した通り、該当のテンプレートを子テーマへコピーして直接タグを記述するか、bodyタグへ「id=”〇〇”」と追記すれば同じことになります。
また、「id=”〇〇”」の〇〇の部分をコールバック関数にして、任意のIDをテーマのfunctions.phpから指定することもできます（本ページの主旨と外れるので、方法については検索等をして調べてください）。
ブロックテーマの場合
ブロックテーマとは、「外観」→「エディター」というメニューがあり、各テンプレートをブロック形式で編集するタイプのテーマと認識していただければよいかと思います
私が確認する限りでは、Twenty Twenty-Two、Twenty Twenty-Threeテーマのようなブロックテーマでは「wp_body_open」フックが使えるようになっていますので、上記のコードを使えば問題ありません。
ただブロックテーマ自体はできるだけ追加コードを使わずに編集できるようにするというのが最大の特徴でもありますから、ページの冒頭部分にIDを付与する目的であれば、以下のようにして対応が可能です。
- サイトエディター（ブロックテーマの編集画面）を開く
- ヘッダーテンプレートを開く
- ヘッダーテンプレート内のブロック全体をグループ化し（既にグループ化されている場合はそのグループを選択し）、「高度な設定」パネルの「HTMLアンカー」に目的のIDを記述する、
または、テンプレート冒頭に「カスタムHTMLブロック」を追加して上記コードのHTMLタグを直接記述する
wp_body_openが使えるかどうかの確認方法と対処
冒頭で書いた通り、「wp_body_open」フックを使うには、以下の条件が必要です。
- WordPress 5.2以上のバージョンで稼働しているサイト
- 有効化しているテーマのテンプレートが「wp_body_open」に対応していること
もしもこのページで紹介したコードを追加してもHTML内に以下のコードが出力されない場合には、「wp_body_open」が使えるのかどうかをチェックしてみてください。
<div id="page-top"></div>WordPressのバージョンを上げる
まあ、現在で、WordPressのバージョンが5.1.x以前というサイトの場合はセキュリティの観点からも更新された方がいいでしょう（古いバージョンからの更新は細心の注意を払ってください）。
テーマが対応しているかを確認する
有効化しているテーマのテンプレートが「wp_body_open」に対応しているかは、以下の手順で実際に目で見て確認するとよいでしょう。
- 本ページで紹介したコードを追加する
- 何かの投稿や固定ページを表示させる
- ページの中ほどで右クリックし、「ソースを表示」をクリックする
- 出てきたソースコードのどこかで「Ctrl」+「F」をクリックする
- 出てきた窓に「page-top」を入力して、存在するかを確認する
→検索結果が「0/0」だったら、「wp_body_open」未対応の可能性が高い
クラシックテーマ（管理画面の「外観」→「エディター」メニューが存在しないテーマ）の場合は、対応していないケースがありますから、bodyタグが書かれているテンプレート（テーマによってファイルが異なるのでご自身で調べてください）のbodyタグ下に以下のコードがあるかの確認をし、ない場合には追加します。
<?php wp_body_open(); ?>追加したら、再度検証をして存在していることを確認ください。
テーマファイルの編集に失敗すると、サイトの外観を壊してしまうので、スキルのない方はあきらめた方がいいでしょう
後述
私自身セキュリティ関係に明るくありませんし、特に外部から入力される値を出力するわけではないので、あまり気にする必要もないかも知れませんが、出力するコンテンツをあえてコールバック関数で作成してから、コールバック関数の内容をechoで出力したほうがより安全かも知れませんので、気にされる方は以下のように出力するのもいいと思います。
/* bodyタグ直下へIDを持つ空のdivタグを出力 */
/* コールバック関数 */
if ( !function_exists( 'add_div_id_insert_to_below_body_tag_cb' ) ){
function add_div_id_insert_to_below_body_tag_cb() {
$page_top_target = '<div id="page-top"></div>';
return $page_top_target;
}
}
/* 出力 */
if ( !function_exists( 'add_div_id_insert_to_below_body_tag' ) ){
function add_div_id_insert_to_below_body_tag() {
echo add_div_id_insert_to_below_body_tag_cb();
}
}
add_action( 'wp_body_open', 'add_div_id_insert_to_below_body_tag' );また、さらにセキュリティを高めたいのであれば、コールバック時にPHP関数の「htmlspecialchars」で特殊文字に変換しておいて、出力時に逆の処理をする「htmlspecialchars_decode」で元に戻すというのもアリかと思いますが、そこまでする必要もある？というのが個人的見解です。
コメントを残す