functions.phpで管理画面にHTML挿入

  • 投稿日
  • 更新日
  • 著者 kngsmym
  • カテゴリー WordPress

以前、functions.phpを使ってWordpress管理画面にカスタムフィールドを追加するやり方を書いたのですが、前回は流れとソースをざっくり書いただけでしたので今回はそのやり方をもう少し詳しく整理してみたいと思います。

今回は単純なHTMLを普通に追加する手順をきちんと記します。
ぶっちゃけ、今日同じような作業をやろうとした際「以前書いたから自分のエントリーを見よう」と思って以前のエントリーを見てみたら、自分でも微妙にわからず結局CODEXを参照するはめになったので、ちゃんと書こう！と思った次第です。ええ、大変申し訳ありません。手を抜いていたようです。そのときの自分。

さて、管理画面にボックスを追加して、そこにHTMLをはめ込むという目的の場合、必要な記述は以下の３つです。

  1. はめ込むHTML部分の記述
  2. HTMLをはめ込むBOXの定義
  3. それらを実行するアクションの記述

それらを、テーマファイルの中のfunctions.php(もし無い場合は作りましょう)に追記し、アップするだけです。
順にサンプルと、その説明を示します。

１番

HTMLの記述ですが、適当な名前をつけてfunctionを用意し、その中に、HTMLをPHPで吐き出すように記述します。サンプルは以下の通り

function my_manual_link(){
	echo '<a href="/pdf/manual.pdf" target="_blank">入力手順マニュアルPDF（2.4MB）</a><br /><br />';
	echo '入力手順のマニュアルです';
}

echoというのは、書いたそのままをがつんと吐き出しちゃえよ、っていうPHPのコマンドです。半角開けて記述した内容をそのまま書き出してくれます。今回はテキストですので、’　’で囲っています。

２番

管理画面にHTMLを入れる為のボックスを配置して、その中に今用意したHTMLを挿入する記述です。これも適当な名前でfunctionとして記述します。サンプルは以下の通り。

function add_manual_link() {
	add_meta_box('manual_link', '入力手順マニュアル', 'my_manual_link', 'post', 'side', 'high');
}

add_meta_boxは、管理画面にボックスを配置するためのWordpressの関数です。それぞれのプロパティは以下の通り。

add_meta_box(
管理画面にボックスが配置された際,idとして設定する値,
配置したボックスのタイトル,
箱の中に配置するHTMLを記述したfunction名,
どのページに配置するかの設定（値は　post/page/link　から選択して記述）,
配置する場所（値は　normal/advanced/side　から選択して記述）,
表示の優先度（値は　high/low　から選択して記述）
);

ここでわかりにくいのはnormalとadvancedの違いです。基本はどちらも左カラムへの追加となります。
日本語ではそれ以上の情報が得られず、がんばって英語を読んで、かつ実験してみたところ、恐らく次のような挙動をするようです。たぶん。

normal：highやlowで優先度を設定した場合に、既存の他のボックスを含めて優先度が決定される
advanced：基本的に既存ボックスの一番末尾に追加される。優先度を設定した場合には、同じadvancedの中で優先度が変化する。

３番

上の二つが準備できたら、管理画面に書き込むタイミングを決定します。サンプルは以下の通り。

add_action('admin_menu', 'add_manual_link');

add_actionは、functionを実行するタイミングを決定づけるWordPressの関数です。それぞれのプロパティは以下の通り。
少し書くのが面倒なのでCODEXからコピペします。

add_action( $tag, $function_to_add, $priority, $accepted_args );

$tag
（文字列）（必須） フックするアクション名 (アクションの一覧は アクションフック一覧 を参照)
初期値： なし

$function_to_add
（コールバック） （必須） 呼び出す関数名。注: any of the syntaxes explained in ‘callback’ タイプについてのドキュメント で説明される構文は全て有効です。
初期値： なし

$priority
（整数） （オプション） 関数の重要度です。呼び出す関数と他の関数との順序を変更します。デフォルト値は 10 で、例えば 5 に設定すると早く実行され、12 に設定すると遅く実行されます。
初期値： 10

$accepted_args
（整数） （オプション） 関数の引数の数です。WordPress 1.5.1+ では、フックした関数は、対応する do_action() あるいは apply_filters() が実行される時に、余分に引数を取ることができます。例えば、アクション comment_id_not_found は、これにフックする関数に、リクエストされたコメントの ID を渡すことができます。
初期値： 1

今回管理画面に追加するにあたって使うのは$tagと$function_to_addです。
$tagにはadmin_menu、$function_to_addには自分で定義したボックス配置の為の関数を設定しています。acmin_menuは、管理画面の基本要素が配置された後に実行する、というタイミングを示すアクションなので、サンプルで書いた記述は

「管理画面の基本要素を配置し終わったタイミングで、add_manual_linkを実行して、サイドバーの一番上にボックスを配置し、その中にmy_manual_linkに記述されたHTMLを挿入する」

という意味になります。

まとめて書くと以下の通りです。

function my_manual_link(){
	echo '<a href="/pdf/manual.pdf" target="_blank">入力手順マニュアルPDF（2.4MB）</a><br /><br />';
	echo '入力手順のマニュアルです';
}

function add_manual_link() {
	add_meta_box('manual_link', '入力手順マニュアル', 'my_manual_link', 'post', 'side', 'high');
}

add_action('admin_menu', 'add_manual_link');

これを、functions.phpの末尾に追加して、テーマファイルにアップし管理画面を開くと、意図通りの表示がされていることを確認できると思います。

今回のこのサンプルは実際に使ったものですが、WordPressを納品したお客様から管理画面使用中にぱっと見られるマニュアルがほしいという要望を受け、管理画面の右上に弊社製のマニュアルPDFへのリンクを追加する為に書いたコードです。HTMLの部分は無限に拡張可能なわけですので、他の関数と組み合わせることで管理画面に様々な機能を付加することができそうです。WordPressってほんとにすごいなと思います。これからもお世話になります。

functions.php wordpress カスタマイズ ワードプレス