WordPressにカスタムフィールドを追加する（プラグインなし）
吉田 亮介こんにちは。
株式会社ホームリンク代表の吉田です。
前回に引き続きWordPressの話なんですが、今回はカスタムフィールドについて解説していきたいと思います。
カスタムフィールドとは
WordPressの通常の投稿タイプであらかじめ用意されている入力項目は投稿のタイトルと本文ですが、カスタムフィールドを追加するとその項目が拡張されることになります。
前回の投稿でカスタム投稿タイプを導入して売買物件情報をブログみたいに更新していくようにしたんですが、この売買物件の登録に使用する入力項目ってタイトルと本文だけでは全然足りませんよね。
例えば、物件所在地、価格、交通、都市計画、用途地域、建ぺい率、容積率、接道、現況など、決まった項目を物件ごとに毎回入力する必要があります。
新規投稿時にタイトルの入力欄があらかじめ存在するように、物件詳細の入力項目が初めから存在する方が便利ですよね。
これを実現するのが今回解説するカスタムフィールドです。
完成イメージ
実際に導入後の投稿画面を見ていただく方がイメージがつきやすいと思います。
いかがでしょうか。
画像をクリックまたはタップすると拡大画像が表示されますのでご参照ください。
このように、投稿の編集画面上に自分が必要な項目を好きなように追加できるのがカスタムフィールドです。
functions.phpにコードを追加
今回もプラグインなしで実装することを目標にしていますので、functions.phpにコードを追記していきます。
// カスタムフィールド
function add_property_fields() {
add_meta_box( 'property_setting', '物件詳細情報', 'insert_property_fields', 'buying-list', 'advanced', 'high' );
}
add_action('admin_menu', 'add_property_fields');
カスタムフィールドを追加する箇所の記述はこんな感じです。
add_meta_boxの中で色々と定義しています。
- "property_setting"は表示される入力ボックスのHTMLのIDになります。CSSで見た目を装飾するのに使えます。
- "物件詳細情報"は先ほどの画像を見ていただくと分かる通り、入力ボックスのタイトル部分になります。
- "insert_property_fields"の箇所ですが、私が変更したのは"property"の箇所です。物件のことなのでpropertyとしました。
- "buying-list"はカスタム投稿タイプのスラッグですね。
- "advanced"の箇所は、投稿の編集画面上のどこに表示するかを指定するものです。サイドにも表示できるみたいですが私はやってないので分かりません。
- "high"は優先度です。入力ボックスが他にもある場合、一番上に表示したければhighにしておくといいようです。
詳しいことは例のようにググっていただければと思います。
入力項目を定義していく
次は具体的に入力項目を定義していきます。
// カスタムフィールドの入力エリア
function insert_property_fields() {
global $post;
//nounceフィールドの追加
wp_nonce_field('custom_field_save_meta_box_data', 'custom_field_meta_box_nonce');
echo '
<table>
<tr><td>所在地：</td><td><input type="text" name="area" value="'.get_post_meta($post->ID, 'area', true).'" size="50" /></td></tr>
<tr><td>交通：</td><td><input type="text" name="traffic" value="'.get_post_meta($post->ID, 'traffic', true).'" size="50" /></td></tr>
<tr><td>価格：</td><td><input type="text" name="price" value="'.get_post_meta($post->ID, 'price', true).'" size="50" /></td></tr>
<tr><td>土地面積：</td><td><input type="text" name="land_area" value="'.get_post_meta($post->ID, 'land_area', true).'" size="50" /></td></tr>
<tr><td>坪単価：</td><td><input type="text" name="per_tsubo" value="'.get_post_meta($post->ID, 'per_tsubo', true).'" size="50" /></td></tr>
<tr><td>建物面積：</td><td><input type="text" name="building_area" value="'.get_post_meta($post->ID, 'building_area', true).'" size="50" /></td></tr>
<tr><td>専有面積：</td><td><input type="text" name="occupation_area" value="'.get_post_meta($post->ID, 'occupation_area', true).'" size="50" /></td></tr>
<tr><td>築年月：</td><td><input type="text" name="construction_date" value="'.get_post_meta($post->ID, 'construction_date', true).'" size="50" /></td></tr>
<tr><td>建物構造：</td><td><input type="text" name="structure" value="'.get_post_meta($post->ID, 'structure', true).'" size="50" /></td></tr>
<tr><td>用途地域：</td><td><input type="text" name="use_district" value="'.get_post_meta($post->ID, 'use_district', true).'" size="50" /></td></tr>
<tr><td>建ぺい率：</td><td><input type="text" name="building_coverage_ratio" value="'.get_post_meta($post->ID, 'building_coverage_ratio', true).'" size="50" /></td></tr>
<tr><td>容積率：</td><td><input type="text" name="floor_area_ratio" value="'.get_post_meta($post->ID, 'floor_area_ratio', true).'" size="50" /></td></tr>
<tr><td>管理費等：</td><td><input type="text" name="management_fee" value="'.get_post_meta($post->ID, 'management_fee', true).'" size="50" /></td></tr>
<tr><td>階建て・階：</td><td><input type="text" name="floor" value="'.get_post_meta($post->ID, 'floor', true).'" size="50" /></td></tr>
<tr><td>駐車場：</td><td><input type="text" name="parking" value="'.get_post_meta($post->ID, 'parking', true).'" size="50" /></td></tr>
<tr><td>接道状況：</td><td><input type="text" name="connecting_road" value="'.get_post_meta($post->ID, 'connecting_road', true).'" size="50" /></td></tr>
<tr><td>現況：</td><td><input type="text" name="present_condition" value="'.get_post_meta($post->ID, 'present_condition', true).'" size="50" /></td></tr>
<tr><td>取引態様：</td><td><input type="text" name="conditions_of_transactions" value="'.get_post_meta($post->ID, 'conditions_of_transactions', true).'" size="50" /></td></tr>
</table>
';
}
改行されているので見にくいですがこんな感じです。
表形式にしてどんどん項目を追加していきます。
ここでのポイントは、例えば所在地だったらarea、交通だったらtrafficのように、それぞれに対応する文字列を記載することです。
こうすることで無限に自分の好きな項目を追加することができます。
カスタムフィールドの値を保存
そして最後に、一度入力した値を保存しておかないと困りますので、以下のコードを追記します。
// カスタムフィールドの値を保存
function save_property_fields( $post_id ) {
//nonceがセットされているか確認
if (!isset($_POST['custom_field_meta_box_nonce'])) {
return;
}
//nounceが正しいか検証
if (!wp_verify_nonce($_POST['custom_field_meta_box_nonce'], 'custom_field_save_meta_box_data')) {
return;
}
if (isset($_POST['area'])) { $data = sanitize_text_field($_POST['area']); update_post_meta($post_id, 'area', $data); }
if (isset($_POST['traffic'])) { $data = sanitize_text_field($_POST['traffic']); update_post_meta($post_id, 'traffic', $data); }
if (isset($_POST['price'])) { $data = sanitize_text_field($_POST['price']); update_post_meta($post_id, 'price', $data); }
if (isset($_POST['land_area'])) { $data = sanitize_text_field($_POST['land_area']); update_post_meta($post_id, 'land_area', $data); }
if (isset($_POST['per_tsubo'])) { $data = sanitize_text_field($_POST['per_tsubo']); update_post_meta($post_id, 'per_tsubo', $data); }
if (isset($_POST['building_area'])) { $data = sanitize_text_field($_POST['building_area']); update_post_meta($post_id, 'building_area', $data); }
if (isset($_POST['occupation_area'])) { $data = sanitize_text_field($_POST['occupation_area']); update_post_meta($post_id, 'occupation_area', $data); }
if (isset($_POST['construction_date'])) { $data = sanitize_text_field($_POST['construction_date']); update_post_meta($post_id, 'construction_date', $data); }
if (isset($_POST['structure'])) { $data = sanitize_text_field($_POST['structure']); update_post_meta($post_id, 'structure', $data); }
if (isset($_POST['use_district'])) { $data = sanitize_text_field($_POST['use_district']); update_post_meta($post_id, 'use_district', $data); }
if (isset($_POST['building_coverage_ratio'])) { $data = sanitize_text_field($_POST['building_coverage_ratio']); update_post_meta($post_id, 'building_coverage_ratio', $data); }
if (isset($_POST['floor_area_ratio'])) { $data = sanitize_text_field($_POST['floor_area_ratio']); update_post_meta($post_id, 'floor_area_ratio', $data); }
if (isset($_POST['management_fee'])) { $data = sanitize_text_field($_POST['management_fee']); update_post_meta($post_id, 'management_fee', $data); }
if (isset($_POST['floor'])) { $data = sanitize_text_field($_POST['floor']); update_post_meta($post_id, 'floor', $data); }
if (isset($_POST['parking'])) { $data = sanitize_text_field($_POST['parking']); update_post_meta($post_id, 'parking', $data); }
if (isset($_POST['connecting_road'])) { $data = sanitize_text_field($_POST['connecting_road']); update_post_meta($post_id, 'connecting_road', $data); }
if (isset($_POST['present_condition'])) { $data = sanitize_text_field($_POST['present_condition']); update_post_meta($post_id, 'present_condition', $data); }
if (isset($_POST['conditions_of_transactions'])) { $data = sanitize_text_field($_POST['conditions_of_transactions']); update_post_meta($post_id, 'conditions_of_transactions', $data); }
}
add_action('save_post', 'save_property_fields');
定義した項目に対応するようにそれぞれ追記していきます。
項目を定義するのと同じだけ値の保存も設定しないといけないのでちょっと大変かと思いますが、頑張りましょう。
最後に
今回はカスタムフィールドをプラグインなしで追加する方法を解説しましたが、いかがでしたでしょうか。
最後に本日のコードをまとめて掲載しておきますので、私と全く同じでいいと言う方（いないとは思いますが）は丸っとコピペでOKです。
// カスタムフィールド
function add_property_fields() {
add_meta_box( 'property_setting', '物件詳細情報', 'insert_property_fields', 'buying-list', 'advanced', 'high' );
}
add_action('admin_menu', 'add_property_fields');
// カスタムフィールドの入力エリア
function insert_property_fields() {
global $post;
//nounceフィールドの追加
wp_nonce_field('custom_field_save_meta_box_data', 'custom_field_meta_box_nonce');
echo '
<table>
<tr><td>所在地：</td><td><input type="text" name="area" value="'.get_post_meta($post->ID, 'area', true).'" size="50" /></td></tr>
<tr><td>交通：</td><td><input type="text" name="traffic" value="'.get_post_meta($post->ID, 'traffic', true).'" size="50" /></td></tr>
<tr><td>価格：</td><td><input type="text" name="price" value="'.get_post_meta($post->ID, 'price', true).'" size="50" /></td></tr>
<tr><td>土地面積：</td><td><input type="text" name="land_area" value="'.get_post_meta($post->ID, 'land_area', true).'" size="50" /></td></tr>
<tr><td>坪単価：</td><td><input type="text" name="per_tsubo" value="'.get_post_meta($post->ID, 'per_tsubo', true).'" size="50" /></td></tr>
<tr><td>建物面積：</td><td><input type="text" name="building_area" value="'.get_post_meta($post->ID, 'building_area', true).'" size="50" /></td></tr>
<tr><td>専有面積：</td><td><input type="text" name="occupation_area" value="'.get_post_meta($post->ID, 'occupation_area', true).'" size="50" /></td></tr>
<tr><td>築年月：</td><td><input type="text" name="construction_date" value="'.get_post_meta($post->ID, 'construction_date', true).'" size="50" /></td></tr>
<tr><td>建物構造：</td><td><input type="text" name="structure" value="'.get_post_meta($post->ID, 'structure', true).'" size="50" /></td></tr>
<tr><td>用途地域：</td><td><input type="text" name="use_district" value="'.get_post_meta($post->ID, 'use_district', true).'" size="50" /></td></tr>
<tr><td>建ぺい率：</td><td><input type="text" name="building_coverage_ratio" value="'.get_post_meta($post->ID, 'building_coverage_ratio', true).'" size="50" /></td></tr>
<tr><td>容積率：</td><td><input type="text" name="floor_area_ratio" value="'.get_post_meta($post->ID, 'floor_area_ratio', true).'" size="50" /></td></tr>
<tr><td>管理費等：</td><td><input type="text" name="management_fee" value="'.get_post_meta($post->ID, 'management_fee', true).'" size="50" /></td></tr>
<tr><td>階建て・階：</td><td><input type="text" name="floor" value="'.get_post_meta($post->ID, 'floor', true).'" size="50" /></td></tr>
<tr><td>駐車場：</td><td><input type="text" name="parking" value="'.get_post_meta($post->ID, 'parking', true).'" size="50" /></td></tr>
<tr><td>接道状況：</td><td><input type="text" name="connecting_road" value="'.get_post_meta($post->ID, 'connecting_road', true).'" size="50" /></td></tr>
<tr><td>現況：</td><td><input type="text" name="present_condition" value="'.get_post_meta($post->ID, 'present_condition', true).'" size="50" /></td></tr>
<tr><td>取引態様：</td><td><input type="text" name="conditions_of_transactions" value="'.get_post_meta($post->ID, 'conditions_of_transactions', true).'" size="50" /></td></tr>
</table>
';
}
// カスタムフィールドの値を保存
function save_property_fields( $post_id ) {
//nonceがセットされているか確認
if (!isset($_POST['custom_field_meta_box_nonce'])) {
return;
}
//nounceが正しいか検証
if (!wp_verify_nonce($_POST['custom_field_meta_box_nonce'], 'custom_field_save_meta_box_data')) {
return;
}
if (isset($_POST['area'])) { $data = sanitize_text_field($_POST['area']); update_post_meta($post_id, 'area', $data); }
if (isset($_POST['traffic'])) { $data = sanitize_text_field($_POST['traffic']); update_post_meta($post_id, 'traffic', $data); }
if (isset($_POST['price'])) { $data = sanitize_text_field($_POST['price']); update_post_meta($post_id, 'price', $data); }
if (isset($_POST['land_area'])) { $data = sanitize_text_field($_POST['land_area']); update_post_meta($post_id, 'land_area', $data); }
if (isset($_POST['per_tsubo'])) { $data = sanitize_text_field($_POST['per_tsubo']); update_post_meta($post_id, 'per_tsubo', $data); }
if (isset($_POST['building_area'])) { $data = sanitize_text_field($_POST['building_area']); update_post_meta($post_id, 'building_area', $data); }
if (isset($_POST['occupation_area'])) { $data = sanitize_text_field($_POST['occupation_area']); update_post_meta($post_id, 'occupation_area', $data); }
if (isset($_POST['construction_date'])) { $data = sanitize_text_field($_POST['construction_date']); update_post_meta($post_id, 'construction_date', $data); }
if (isset($_POST['structure'])) { $data = sanitize_text_field($_POST['structure']); update_post_meta($post_id, 'structure', $data); }
if (isset($_POST['use_district'])) { $data = sanitize_text_field($_POST['use_district']); update_post_meta($post_id, 'use_district', $data); }
if (isset($_POST['building_coverage_ratio'])) { $data = sanitize_text_field($_POST['building_coverage_ratio']); update_post_meta($post_id, 'building_coverage_ratio', $data); }
if (isset($_POST['floor_area_ratio'])) { $data = sanitize_text_field($_POST['floor_area_ratio']); update_post_meta($post_id, 'floor_area_ratio', $data); }
if (isset($_POST['management_fee'])) { $data = sanitize_text_field($_POST['management_fee']); update_post_meta($post_id, 'management_fee', $data); }
if (isset($_POST['floor'])) { $data = sanitize_text_field($_POST['floor']); update_post_meta($post_id, 'floor', $data); }
if (isset($_POST['parking'])) { $data = sanitize_text_field($_POST['parking']); update_post_meta($post_id, 'parking', $data); }
if (isset($_POST['connecting_road'])) { $data = sanitize_text_field($_POST['connecting_road']); update_post_meta($post_id, 'connecting_road', $data); }
if (isset($_POST['present_condition'])) { $data = sanitize_text_field($_POST['present_condition']); update_post_meta($post_id, 'present_condition', $data); }
if (isset($_POST['conditions_of_transactions'])) { $data = sanitize_text_field($_POST['conditions_of_transactions']); update_post_meta($post_id, 'conditions_of_transactions', $data); }
}
add_action('save_post', 'save_property_fields');
参考にしたサイト
カスタムフィールドをプラグインなしで追加する方法｜BringFlower
WordPressのカスタムフィールドはプラグインのAdvanced Custom Fieldsを利用すると簡単に追加し活用することができますが、当方はプラグインを利用しないようにしています…
株式会社BringFlower 
カスタムフィールドの入力の有無を判定して表示・非表示 - WordPress Note
カスタムフィールドの入力の有無を判定して、入力がなければ項目ごと非表示にする書き方のご紹介。
WordPress Note 
[WordPress] 記事に紐づいたタクソノミー・タームを表示する - ブログ | mgtnsn.com
WordPressのタクソノミー・タームに関する備忘録です。記事に登録したカテゴリを表示させる方法をまとめます。
mgtnsn.com 
投稿者プロフィール
- 代表取締役
- 株式会社ホームリンク代表。1978年1月生まれ。31歳で不動産業界に転職後、約14年間不動産売買仲介専門エージェントとして従事。その後、2023年12月に株式会社ホームリンクを設立し、代表取締役に就任。お客様との出会いやご縁を大切にする会社を目指しています。
最新の投稿
不動産コラム2025年6月14日準工業地域を解説します。
不動産コラム2025年6月7日商業地域について解説いたします。
不動産コラム2025年5月31日リフォームとリノベーションの違い
不動産コラム2025年5月24日近隣商業地域を解説します。
