wordpress管理画面の/body直前にjsコードを入れる

ボタンを押した時に確認ダイアログを表示

wordpressの管理画面でsubmitボタンを押した時に確認ダイアログが表示されるようにしたい。

退会ページと退会処理を簡単に実装のエントリーでは、管理画面内に退会処理専用のページを作成し、マルチサイト環境下でブログサイトの退会処理を行うページを作成した。このページのボタンを押すとデータベースにフラグが格納されるのだが、ボタンを押してからバックエンドの処理が開始されるまでの間に確認ダイアログボックスを表示してみようというのが本エントリーのテーマ。

そして、javascriptコードをscript要素として直前に記述するという方法を採用する。理由は、javascriptコード内にphpで扱えるデータを引数として利用しやすくなるというのがその理由。jsを外部ファイルに記述するよりも、script要素として動的にjsを生成する方法の方がPHPとjavascriptを分けて考える必要が無くなり良い部分もある。

テーマと管理画面では影響するフッターアクションが異なる

今回はテーマのフッター(直前)ではなく、wordpressの管理画面に作成したページのフッターにjavascriptを記述する。以下のアクションフックでフッターにjsコードを挿入することが可能。

• admin_print_footer_scripts
• admin_footer-hook_suffix

前者は、管理画面の全ページで機能するアクションにで、後者は、hook_suffixで指定したページ専用のアクションフックとなる。なお、wp_footerアクションフックでは、管理画面内では機能させることはできなかった。

使い方

admin_print_footer_scripts

アクションを以下のように定義した上で、

add_action('admin_print_footer_scripts', array($this, 'js_buffer'));

js_buffer関数を以下のように書いてみた。

function js_buffer() {
	
	$js = <<< EOF
<script type="text/javascript">
	jQuery(function() {
		jQuery('input[type="submit"].confirm').click(function() {
		    if (!confirm("退会処理を行います。よろしいですか？")) {
		        return false;
		    }
		})
	});
</script>
        EOF;

	echo $js;
}

PHPのEOFの間には自由にjsコードを書くことができる。

そして、最後にjsコードが格納された変数をechoすればコードがそのまま出力される。今回の場合は、管理画面のフッターに出力される。

admin_footer-hook_suffix

まず、hook_suffixの調べ方を書いてみたい。hook_suffixはwordpressのページ名のようなもので、管理画面内の各ページに固有の値が設定されている。

global $hook_suffix;
var_dump($hook_suffix);

調べ方は上のようにして調べることができる。自作のプラグインなどで

add_options_page('Leave blog', '退会処理', 8, 'seeyou', array($this, 'mt_options_page'));

として管理画面に独自のページを追加している場合は、hook_suffixが、

settings_page_seeyou

となる。

その場合には、以下のようにしてsettings_page_seeyouというページに対してフックさせることが可能。

add_action('admin_footer-settings_page_seeyou', array($this, 'js_buffer'));

PHPで動的にjavascriptを生成

上で記述した独自関数js_buffer内のjsコードを動的なものに変えてみようと思う。

退会処理を行います

ではなく、

○○ドメインの退会処理を行います

に変えてみる。

function js_buffer() {
	
	global $current_blog;

	$js = <<< EOF
<script type="text/javascript">
	jQuery(function() {
		jQuery('input[type="submit"].confirm').click(function() {
		    if (!confirm("{$current_blog->domain}の退会処理を行います。よろしいですか？")) {
		        return false;
		    }
		})
	});
</script>
EOF;

	echo $js;
}

上のコードでは、現在のブログ情報を利用するため$current_blog変数を設定している。そして、そのデータをEOF内で利用してブログサイト毎に動的にメッセージが表示されるようにしたのが上のコードになる。

{$current_blog->domain}

というようにカッコで括るとEOF内で変数を展開することができる。この方法のメリットは、wordpressの関数で取得可能なデータを引数や表示するためのデータとしてjsコード内で利用可能になる点があげられる。

まとめ

wordpress管理画面のフッターにjavascriptコードを挿入する方法を書いてみた。簡単な確認ダイアログボックスを表示するというテーマで、script要素のjsコードをwordpress側からダイナミックに生成するイメージを把握してもらえたことと思う。