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

カスタムフィールド追加の解説ページアイキャッチ

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

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

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

フィールドとは

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

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

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

メタデータ解説ページのアイキャッチメタデータとは?メタデータについて初心者向けにわかりやすく解説!

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

投稿編集画面の例

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

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

フィールドの例

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

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

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

メタデータが管理される様子

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

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

カスタムフィールドを用いてカテゴリページ一覧を作成する様子

カスタムフィールドとは

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

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

カスタムフィールドの例

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

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

カスタムフィールドでの設定情報がデータベースに保存される様子

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

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

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

設定値に応じてサイドバーの表示非表示を切り替える例

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

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

オススメページ一覧を作成する様子

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

add_meta_box 関数

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

使い方:

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

 

関数の説明:

投稿編集画面にカスタムフィールドを追加する

カスタムフィールドのタイトルは $title で指定でき、カスタムフィールド本体部分は $callback で指定した関数が出力した HTML が表示される

 

引数:

各引数の説明を簡単にしておきます

  • $id:カスタムフィールドの div タグに付与する ID
  • $title:追加するカスタムフィールドのタイトル
  • $callback:追加するカスタムフィールド表示時に実行する関数
  • $screen:追加するカスタムフィールドを表示する投稿タイプ(投稿 [post] 固定ページ [page] など)
  • $context:追加するカスタムフィールドを表示する位置(横 [side] など)
  • $priority:追加するカスタムフィールドを表示する優先度。高い方が上に表示される(低 [low]、高 [high] など)
  • $callback_args:$callback で指定した関数に渡す引数

戻り値:

なし

ポイントは第3引数の $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タグで入力フォームが表示される様子

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

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

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

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

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

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 関数が実行され、カスタムフィールドが追加して表示されることになります。

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

ワードプレスのフック解説ページのアイキャッチワードプレスのフックとは?使い方は?初心者向けに分かりやすく解説します!

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

カスタムフィールドの表示例

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

MEMO

カスタムフィールドのチェックボックスは、本当であれば前回の設定値を取得し、その設定値に応じてチェックボックスにチェックをつけておく or チェックを外しておくを切り替えて表示する方が良いです

上記のプログラムではその切り替えは行っていませんので注意してください

前回の設定値を取得するのはメタデータを取得して利用で紹介する get_post_meta 関数により行うことができます

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

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

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

update_post_meta 関数

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

使い方:

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

 

関数の説明:

投稿 ID が $post_id の投稿記事の $meta_key をキーとするメタデータの情報を、$meta_value に更新する

$prev_value を指定した場合は、元々のメタデータの値が $prev_value の場合のみ更新される(オプション)

 

戻り値:

成功時は true、失敗時は false

 

参考:
投稿 ID が $post_id の投稿記事がまだ $meta_key をキーとするメタデータの情報が追加されていない場合は、関数内部でメタデータの追加が行われる。この時のみ戻り値が追加したメタデータの ID となる

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

メタデータ解説ページのアイキャッチメタデータとは?メタデータについて初心者向けにわかりやすく解説!

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

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

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

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 ); ?>

 

関数の説明:

投稿 ID が $post_id の投稿記事の $meta_key をキーとするメタデータの情報を取得して $meta_values に格納する

$meta_key はオプションで、指定しなかった場合は $post_id の投稿記事の全てのメタデータを取得する

$single に true 指定した場合は文字列として情報を取得する(false の場合は配列として取得する、オプション)

 

戻り値:

取得した情報($single が true の場合は文字列として、指定しない or false の場合は配列措定情報を取得)

 

参考:
取得できるメタデータの情報は add_post_meta 等で独自に追加したメタデータのもののみ

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 実行しないを切り替えています。

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

設定値に応じてサイドバーの表示非表示を切り替える例

スポンサーリンク

まとめ

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

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

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

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

オススメ投稿記事一覧表示の解説ページのアイキャッチカスタムフィールドを利用して「オススメ投稿記事一覧」を表示する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ワードプレスの処理時間は約 0.225 秒です