【ワードプレス】テーマの作り方⑪：カスタムフィールドを追加して設定項目を増やす

このページではテーマにカスタムフィールドを追加する方法について解説します。

カスタムフィールドについて

まずはカスタムフィールドの説明から。

フィールドとは

カスタムフィールドの前にフィールドについて。

フィールドとは、投稿編集画面でメタデータを手動で設定するウィンドウです。

メタフィールドって何？という方は、事前に下のページを読んでおいていただけると、よりカスタムフィールドについて理解しやすくなると思います。

メタデータとは？メタデータについて初心者向けにわかりやすく解説！

まず思い出していただきたいのが投稿編集画面です。

「投稿記事のタイトル」や「投稿記事の本文」、「投稿記事のカテゴリー」、「投稿記事のタグ」など、投稿編集画面では様々な情報を設定することが可能です。

投稿編集画面でこの情報を設定する部分を「フィールド」と呼びます。

それぞれのフィールドで設定できる情報は、投稿記事を説明する情報であり、こういった投稿記事（データ本体）を説明するデータはメタデータと呼ばれます。

例えばカテゴリフィールドで設定できる情報は、その投稿記事の分類（カテゴリ）を説明する情報（メタデータ）です。

このフィールドで設定したメタデータは、投稿記事を保存した際に、投稿記事に紐づける形でデータベースに保存されます。イメージとしては、各投稿記事に対して、各設定が下の表のように保存されます。

また、ワードプレスではこれらのフィールドに設定されるメタデータを用いて、様々な機能が実現されています。

例えば、上で示したデータベースに保存される情報から、カテゴリが特定のもののみの投稿記事の情報を表示することで、カテゴリページ一覧を表示することもできます。

スポンサーリンク

カスタムフィールドとは

で、ここまで解説したフィールドは、もともとのワードプレスに用意されているものです。

それに対して「カスタムフィールド」とは、テーマ開発者やプラグイン開発者によって独自に追加される「フィールド」のことを言います。

カスタムフィールドを追加することで、投稿編集画面から設定できる項目を増やすことができます。

また、カスタムフィールドで設定された情報も、もともと用意されていたフィールドに設定した情報と同様にデータベースにメタデータとして保存することができます。

また、カスタムフィールドで設定した情報をデータベースから取得して利用することで、様々な独自の機能を実現することができます。

例えばテンプレートファイルからこのカスタムフィールドで設定された情報を取得し、そのカスタムフィールドの設定に応じてページ表示の内容を変更することができるようになります。

下のように「サイドバーを非表示にする」というカスタムフィールドを追加してやれば、チェックボックスの ON / OFF のみでサイドバーの表示 / 非表示を簡単に切り替えるようなこともできます。

また、カスタムフィールドで「おすすめページ」のような設定を行えるようにしておけば、おすすめページ一覧も表示することができるようになります。

前述のカテゴリページ一覧を表示する時と同様に、オススメページが ON になっている投稿記事のみを抽出し、それらの投稿記事の情報を表示してやれば、オススメページ一覧が出来上がります。

こんな感じで、カスタムフィールドを追加することで、投稿編集画面で設定できる情報（メタデータ）を増やし、さらにその設定された情報を利用して様々な機能を実現することができます。

カスタムフィールドの追加

では、そのカスタムフィールドはどのようにして追加するのでしょうか？ここからはそのカスタムフィールドの追加方法について説明していきたいと思います。

このカスタムフィールドの追加は、大きく分けると下記の３つの手順で実現することができます。

• カスタムフィールドを表示
• カスタムフィールドの設定値をメタデータとして保存
• メタデータを取得して利用

まず投稿編集画面に「カスタムフィールドを表示」し、ユーザーが投稿編集画面で設定できるようにします。

次に「カスタムフィールドの設定情報ーメタデータとしてデータベースに保存」します。

また、メタデータは保存するだけでは意味がありません。活用してなんぼです。

ですので、カスタムフィールドを追加するのであれば、カスタムフィールドで設定した情報、つまり「メタデータを取得して利用」する処理も必要になります。

それぞれの手順の具体的なやり方を説明していきます。

カスタムフィールドを表示

カスタムフィールドは add_meta_box 関数を実行することで追加できます。

スポンサーリンク

add_meta_box 関数

add_meta_box 関数は、下記のような関数になります。

 <?php add_meta_box( $id, $title, $callback, $screen, $context, $priority, $callback_args ); ?>

ポイントは第３引数の $callback です。

カスタムフィールド表示時には、この $callback で指定した関数が実行され、この中で出力された HTML が表示されることになります。

function sidebar_setting_field() {
	echo '<input type="checkbox" name="my_sidebar_setting" value="no_display">非表示にする';
}

例えば上記のように関数を作成し（functions.php）に、$callback に ‘sidebar_setting_field’ を指定すれば、下の図のようにカスタムフィールドが表示されるようになります。

カスタムフィールドは投稿記事に対して情報を「設定する」フィールドです。ですので、情報を設定できるように、入力フォームとして表示するようにしましょう。

例えば input、textarea、select タグ等を利用して入力フォームとして表示を行えば良いです。

name 属性に指定した値はカスタムフィールドの設定情報を保存する際に使用しますので、name 属性には分かりやすいものを設定しておいた方が良いです。

カスタムフィールドを表示するプログラム

例えば、投稿記事表示時にサイドバー表示の有無が設定できるカスタムフィールドは  functions.php に下記を追記することで表示することができます。

<?php
/**
 * カスタムフィールドを表示するHTMLを出力する関数
 */
function my_display_sidebar_field() {

	echo '<input type="checkbox" name="my_sidebar_setting" value="no_display">非表示にする';
}

/**
 * カスタムフィールドを追加する関数
 */
function add_sidebar_setting_field() {
	add_meta_box(
		'my_sidebar_setting_id',
		'サイドバーを非表示にする',
		'my_display_sidebar_field',
		'post',
		'normal',
		'low',
		null
	);
}

add_action( 'add_meta_boxes', 'add_sidebar_setting_field' );
?>

最後に行っているのは add_meta_boxes アクションフックへの ‘add_sidebar_setting_field’ 関数のフックです。

投稿編集画面表示時に add_meta_boxes にフックされた関数が実行されるので、その際に add_sidebar_setting_field 関数が実行され、その中で add_meta_box 関数が実行され、カスタムフィールドが追加して表示されることになります。

フックについては下記で解説していますので、必要に応じて参考にしてください。

ワードプレスのフックとは？使い方は？初心者向けに分かりやすく解説します！

これにより、投稿記事の編集画面の下側にサイドバー非表示設定が表示されるようになります。

表示されない場合は「画面の一番左上にあるボタン」→「オプション」から、「サイドバーを非表示にする」にチェックを入れると表示されるようになるはずです。

カスタムフィールドの設定値をメタデータとして保存

カスタムフィールドが表示されても、カスタムフィールドで設定した設定値はそのままでは保存されません。カスタムフィールドを保存するようにプログラムを実装する必要があります。

カスタムフィールドの設定値はデータベースに保存されるようにメタデータとして保存を行います。このメタデータの保存は update_post_meta 関数で行うことができます。

スポンサーリンク

update_post_meta 関数

update_post_meta 関数はメタデータを更新する関数です。

<?php update_post_meta( $post_id, $meta_key, $meta_value, $prev_value ); ?>

update_post_meta 関数は下記のメタデータ解説ページでも使用していますのでこちらも参考にしてください。

メタデータとは？メタデータについて初心者向けにわかりやすく解説！

カスタムフィールドの設定値をメタデータとして保存するプログラム

カスタムフィールドを表示のプログラムではカスタムフィールドを追加し、サイドバーの非表示設定が行えるようにしました。

このサイドバーの非表示設定は下記のプログラムを functions.php に追記することでメタデータとして保存することができます。

<?php
/**
 * カスタムフィールドの設定値を保存する関数
 *
 * @param in $pid : 投稿記事のID.
 */
function save_sidebar_setting( $pid ) {
	/* 自動保存の場合はなにもしない */
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}

	/* $_POST自体が空の場合は何もしない */
	if ( empty( $_POST ) ) {
		return;
	}

	/* メタデータを更新 */
	update_post_meta( $pid, '_my_sidebar_stting', $_POST['my_sidebar_setting'] );
}

add_action( 'save_post', 'save_sidebar_setting' );
?>

$_POST は投稿編集画面で設定された情報が格納される配列です。

入力フォームの name 属性した文字列をキーとし、そのキーの値として入力フォームに入力された情報が格納されています。

カスタムフィールドを表示では入力フォームを下記の input タグにより表示していましたので、name 属性は my_sidebar_setting です。

<input type="checkbox" name="my_sidebar_setting" value="no_display">非表示にする

したがって、この入力フォームで設定された情報は、$_POST[‘my_sidebar_setting’] に格納されることになります。

また、入力フォームがチェックボックスの場合は、チェック時には value 属性で指定した情報（つまり “no_display” ）が $_POST[‘my_sidebar_setting’] に格納されます。

なので、下記を実行することにより、カスタムフィールドに設定された情報がメタデータとしてデータベース（キーは ‘_my_sidebar_setting’）に保存されることになります。

update_post_meta( $post_id, '_my_sidebar_setting', $_POST['my_sidebar_setting'] );

必要に応じて $_POST に格納された情報はサニタイズなどを行うと良いと思います。

最後に行っているのは save_post アクションフックへの関数のフックで、これを実行することにより、投稿更新・投稿保存時に save_sidebar_setting 関数が実行されてカスタムフィールドの設定値が保存されるようになります。

メタデータを取得して利用

メタデータ（カスタムフィールドの設定値）は保存するだけでは意味がないです。このメタデータの情報を取得して、取得したメタデータの情報を利用してページ表示に反映する必要があります。

このメタデータの情報の取得は get_post_meta 関数で行うことができます。

スポンサーリンク

get_post_meta 関数

get_post_meta 関数はメタデータを取得する関数です。

<?php $meta_values = get_post_meta( $post_id, $key, $single ); ?>

get_post_meta 関数は下記のメタデータ解説ページでも使用していますのでこちらも参考にしてください。

メタデータとは？メタデータについて初心者向けにわかりやすく解説！

メタデータを取得して利用するプログラム

例えばサイドバーの非表示設定のメタデータを取得し、その設定値に応じてサイドバーの表示 or 非表示を切り替えるためには single.php を下記のように記述します。

<?php
get_header();
echo '<div id="content">';

while ( have_posts() ) {

	the_post();

	echo '<h1>';
	the_title();
	echo '</h1>';

	the_content();

}
echo '</div>';
$display_sidebar = get_post_meta( get_the_ID(), '_my_sidebar_setting', true );
if ( 'no_display' !== $display_sidebar ) {
	get_sidebar();
}
get_footer();
?>

get_post_meta 関数の結果に応じてサイドバーを表示する get_sidebar 関数を実行する or 実行しないを切り替えています。

これにより、ページ表示時にカスタムフィールドで設定した情報を取得し、それに応じてページ表示が切り替わるようになります。

まとめ

このページでは、テーマにカスタムフィールドを追加する方法について解説しました。

カスタムフィールドの追加、および、そのカスタムフィールドの設定値を利用した機能をテーマに用意しておくことで、よりテーマの価値をあげることができます。

是非このページを参考にしてご自身のテーマにカスタムフィールドを追加してみてください！

下のページでは「オススメページ設定」のカスタムフィールドを追加し、「オススメ投稿記事一覧」を表示するサンプルプログラムの紹介をしていますので、よりカスタムフィールドの理解を深めたいという方は是非読んでみてください。

カスタムフィールドを利用して「オススメ投稿記事一覧」を表示する