Speaking Design

Blogブログ

【プラグインなし】 WordPressのカスタムフィールドを追加して、入力欄を増やす

【プラグインなし】 WordPressのカスタムフィールドを追加して、入力欄を増やす

WordPressの記事投稿画面において、タイトルや本文以外の入力欄を設ける事ができるのがカスタムフィールドです。

目次

カスタムフィールドとは

WordPressの記事は『タイトル』や『本文』、『抜粋』などの要素で構成されていますが、これ以外にオリジナルの項目を追加する事ができるのがカスタムフィールドです。
例えば商品を紹介するようなページであれば『価格』という項目を追加して、値段情報を別途持たせることができます。

基本のカスタムフィールド

デフォルトで用意されているカスタムフィールドは 『名前』欄と『値』欄に都度情報を入力していく形式です。

デフォルトのカスタムフィールド
基本のカスタムフィールド

今回のカスタムフィールド

これから制作するカスタムフィールドは、『名前』がフィックスされていて『値』だけを入力すればよい形式になるので、画面が使いやすくなります。

作成したカスタムフィールド
『値』の入力だけでOK

作成にあたって、カスタムフィールドを利用した入力欄の作成保存(削除)、値の表示という3つのステップを実装していきます。

入力欄の作成

使用しているテーマのfunctions.php内に以下を追加します。

// カスタムフィールドの作成
add_action('admin_menu', 'addExtraField');

function addExtraField() {
  // 引数はそれぞれ、ID, 編集画面に表示されるタイトル, 実行関数名, 対象の投稿タイプ
  add_meta_box('priceField', '価格', 'makePriceArea', 'post');
}

// カスタムフィールドの入力形式はここで
function makePriceArea(){
  global $post;
  echo '<input type="text" name="price" style="width:100px" value="'.get_post_meta($post->ID, "price", true).'">';
}

add_meta_box()の引数について

第一引数『priceField』

フィールドのID名。編集画面に<div id=”priceField”>としてhtml展開されます。

第二引数『価格』

編集画面に表示されるカスタムフィールドのタイトル。

第三引数『makePriceArea』

入力欄を表示する関数名。

第四引数『post』

入力欄をどこに設けるかを設定。以下、代表的な指定を挙げておきます。
・『post』:投稿の編集画面
・『page』:固定ページの編集画面

その他の設定は公式のリファレンスに説明があります。

makePriceArea関数

入力欄の形式です。
htmlに明るければ、textareaやcheckboxなど、好きな入力形式で作る事ができます。

ここまで終えると、編集画面に『価格』の入力項目ができあがります。

カスタムフィールド『価格』が追加
カスタムフィールド『価格』を追加

値の保存

入力欄ができたので、値を保存するための記述を追加します。
functions.phpに記述します。

add_action('save_post', 'saveExtraField');

function saveExtraField($post_id){
  // 価格が入力されている場合は保存
  if(!empty($_POST['price'])){
    update_post_meta($post_id, 'price', $_POST['price'] );
  }else{
    delete_post_meta($post_id, 'price');
  }
}

記事を保存する際、値が入っていればupdate_post_meta()でデータが保存されます。
ちなみに、削除の場合はdelete_post_meta()を使います。

値の表示

最後に値の表示です。
任意のテンプレートファイル(single.php等)内に以下のように追加すると、カスタムメニューが画面に表示されます。
任意の投稿IDのカスタムフィールド『price』の値を表示する、という表記です。

<?php
 echo get_post_meta($post->ID, 'price', true);
?>

これで入力と保存、表示、3つのステップ全てを実装する事ができました。

まとめ

  • カスタムフィールドによる入力:add_meta_box()
  • 保存:update_post_meta() / 削除:delete_post_meta()
  • 表示:get_post_meta()

上手く使うと、一つの記事に紐づく情報を丁寧に仕分けて扱う事ができます。
ぜひ試してみてください。