とある案件にて、どんどんプログラマの領域に踏み込んで帰れなくなってしまいました。
僕の肩書きは一応ディレクター。ベースはデザイナーです。
だから、どこかで自重するべきだったとは思うのですが、
やっちゃったのはしょうがない。うん、しょうがないよ。
さてお題はWordPressと既存の予約システムの連携。
予約システム側の値を読み込んで、カスタムフィールドとしてドロップダウンリストを生成しました。※今回は読み込んでドロップダウン化する部分は割愛
デザイナーなんだけど色々やっててちょっとだけプログラム部分も触らなきゃ。なんていうふわふわなポジションの人に贈りたいメモ。
以下、その手順。
管理画面に自分で作ったHTMLを追加するには、functions.phpを使います。
追加する部分のHTMLを書いたfunctions.phpを自分で作ったテーマの中に入れておけば、
それを指定したタイミングで画面に追加してくれるって寸法です。
まずは具体的なコードを。
<?php
/* １．カスタムフィールドを追加する記述 */
function myplugin_add_custom_box() {
add_meta_box('my_meta_id', 'カスタムフィールド名', 'myplugin_inner_custom_box', 'post', 'normal', 'high');
}
/* ２．カスタムフィールドボックス内のHTMLを記述 */
function myplugin_inner_custom_box() {
echo '<label for="myplugin_new_field">' . __("Description for this field", 'myplugin_textdomain' ) . '</label> ';
echo '<input type="text" name="myplugin_new_field" value="whatever" size="25" />';
}
/* ３．設定したカスタムフィールドの値をDBに書き込む記述 */
function myplugin_save_postdata( $post_id ) {
$mydata = $_POST['myplugin_new_field'];
if ( "" == get_post_meta( $post_id, 'myplugin_new_field' )) {
/* myplugin_new_fieldというキーでデータが保存されていなかった場合、新しく保存 */
add_post_meta( $post_id, 'myplugin_new_field', $mydata, true ) ;
} else if ( $mydata != get_post_meta( $post_id, 'myplugin_new_field' )) {
/* myplugin_new_fieldというキーのデータと、現在のデータが一致しなかった場合、更新 */
update_post_meta( $post_id, 'myplugin_new_field', $mydata ) ;
} else if ( "" == $mydata ) {
/* 現在のデータが無い場合、myplugin_new_fieldというキーの値を削除 */
delete_post_meta( $post_id, 'myplugin_new_field' ) ;
}
}
/* ４．上記関数の動作タイミング指定 */
add_action('admin_menu', 'myplugin_add_custom_box');/*管理画面が開いたときに実行*/
add_action('save_post', 'myplugin_save_postdata');/*更新ボタンが押されたときに実行*/
?>
おおまかには
１．カスタムフィールドを追加する記述
２．カスタムフィールドボックス内のHTMLを記述
３．設定したカスタムフィールドの値をDBに書き込む記述
４．上記関数の動作タイミング指定
最低限上記４つの記述が必要となります。今回は最低限のコードにとどめ、認証であるとか、自動保存の際にはDBに書き込みをしないとか諸々細かな処理は割愛しました。以下、タイトルとコード中のコメントを対応させてご覧ください。
１．カスタムフィールドを追加する記述
add_meta_boxはカスタムフィールドを追加するためのWordPressの関数です。
add_meta_box('html上のid属性値', 'カスタムフィールドの見出しタイトル', '別途記述したhtml部分の関数名', 'カスタムフィールドを配置するページの種類', '配置する場所', '配置の優先度');
という内容を記述します。
２．カスタムフィールドボックス内のHTMLを記述
ここでは、実際にカスタムフィールドで表示させたい入力部分をhtmlで記述して、echoで画面に吐き出すようにします。
３．設定したカスタムフィールドの値をDBに書き込む記述
ここではDBへの書込み操作を行います。
- 書き込むキーが存在するかどうか判断し、存在しない場合は新しくキーを作成して保存します。
- 存在する場合には値が一致するかどうかを判断し、一致する場合には更新します。
- 入力された値が存在するかどうか判断し、存在しない場合にはDB上の値を消去します。
新規保存のadd_post_metaを例にして各設定内容を説明すると、以下の通りです。
add_post_meta( 'その記事のpost_idを格納した変数', 'DBに保存する際のキー名', '保存するデータを格納した変数', 'trueにしておくと、既に同じキーが存在する場合はキーを新たに作成しません' ) ;
４．上記関数の動作タイミング指定
ここまでに記述した関数を実行するタイミングを指定します。
今回は、
- カスタムフィールドの表示:管理画面を開くタイミング(admin_menu)
- 値の保存:更新ボタンを押したタイミング(save_post)
で実行するように指定しました。
以上をテーマファイルの中のfunctions.phpとして（既に有る場合には追加して）保存し、テーマフォルダの中にアップすると、管理画面を開いた際に実行されて、定義したカスタムフィールドが表示されます。
htmlの部分は自由にカスタマイズが可能なので、その部分に好きなようにカスタムフィールドを追加することができます。
カスタムフィールド自体は、例えばCustom Field GUI Utilityなどを使えば至極簡単にできると思うのですが、例えば僕の場合既存の別システムから生成されるデータ一覧をWordPressの管理画面で選択して入力したい、などの要望がありました。
その場合、リストデータは常に動的に生成されるため動的に管理画面側リストに取り込む必要があり、僕がやり方を知らないだけかもですがプラグインだとどうしても難しく、上記方法で手動で追加する形となりました。
なお、今回のコードでは端折っていますが、認証や、パーミッションのチェックなどセキュリティ面での記述が別途必要ですので、実装の際にはCODEX等参照していただき、その辺り充分ご配慮ください。
どなたかのお役に立てば幸いです。