ログイン画面や管理画面のbody直下にHTMLなどを挿入するコードメモ

公開日:2025(令和7)年9月30日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressにはwp_body_openというフックがあり、対応しているテーマではフロントエンドにおいてbodyタグの直下に何かのコンテンツを挿入できるようになっています。

これを使えばタグマネージャーなどbodyタグ内に挿入してくださいと言われるコンテンツも簡単に挿入できて便利なのですが、これはフロントエンドの話であって、管理画面側には適用されません。

この件については現在で調べた限りでは「New action hooks: admin_body_open, login_body_open & embed_body_open」というtracの古いチケットで提起はされているものの、実現されていません。

私の場合は管理画面に画面トップへスクロールして戻るボタンがあったら便利だろうなということでbodyタグ直下にターゲットとなるdiv要素を追加したくてこの問題に当たりました。

そこで本ページでは、簡単なコードを使って、WordPressの管理画面やログイン画面のbodyタグの直下(または閉じタグの直前)に何かの要素を追加する方法をメモとして公開しておきます。

管理画面のbodyタグ直下(または/bodyタグの直上)に何かを追加する

管理画面ではjQueryが読み込まれているので、以下のような簡単なコードで実装できます。

function pwcn_add_page_head_div_to_admin_body() {
	if ( is_admin() ) {
		$custom_div_html = '<div id="pwcn-admin-page-head"></div>';//挿入するコンテンツ
        
		?>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				// bodyタグの最初の子要素として追加
				$('body').prepend('<?php echo wp_kses_post($custom_div_html); ?>');
                
				// bodyタグの最後の子要素として追加
				// $('body').append('<?php echo wp_kses_post($custom_div_html); ?>');
			});
		</script>
		<?php
	}
}
add_action( 'admin_footer', 'pwcn_add_page_head_div_to_admin_body' );

コード中の「挿入するコンテンツ」の部分に出力したいHTMLタグを書きます(上記のコードでは、セキュリティ向上のためwp_kses_postで無害化していますので、この処理は適宜変更してください)

コードを追加したら、ダッシュボードなどを開いた上でHTMLソースを表示させ、bodyタグの直下に「<div id=”pwcn-admin-page-head”></div>」というタグが出力されていることを確認してください(出力されない場合はキャッシュのクリアをしてみてください)。

ログイン画面のbodyタグ直下(または/bodyタグの直上)に何かを追加する

ログイン画面ではjQueryが読み込まれていないため、通常のJavaScriptを使って「挿入するコンテンツ」に書いたものを出力します。

function pwcn_add_page_head_div_to_login_body() {
	// 追加するHTML
	$custom_div_html = '<div id="pwcn-login-page-head"></div>';//挿入するコンテンツ
    
	// PHPでサニタイズ
	$sanitized_html = wp_kses_post( $custom_div_html );

	?>
	<script type="text/javascript">
		// 挿入するHTML文字列
		const htmlToInsert = '<?php echo $sanitized_html; ?>';
        
		// DOMツリーが完全に構築された後に実行
		document.addEventListener('DOMContentLoaded', function() {
			// 新しいHTML要素を作成
			const divElement = document.createElement('div');
			divElement.innerHTML = htmlToInsert;
            
			// <body>タグの直下、一番上に挿入 (prepend)
			document.body.prepend(divElement.firstChild);
			
			// </body>タグの直上に挿入
			//document.body.append(divElement.firstChild);
		});
	</script>
	<?php
}
add_action( 'login_footer', 'pwcn_add_page_head_div_to_login_body' );

こちらもwp_kses_postで出力するコンテンツのサニタイズをしていますので、内容によって適宜変更してください

, , , ,
Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
管理画面に独自のスタイルを適用させる方法(プラグインなし)