【wordpress】カスタムフィールドをプラグイン無しで作るメモ

カスタムフィールドはいつも「Advanced Custom Fields (ACF)」を使ってたんだけど、毎回設定するのめんどくさいし、簡単な情報であればプラグイン無しでできるようにしたいな〜と、常日頃思いつつもやってこなかった。

いつも使ってる「Advanced Custom Fields (ACF)」

が、いい加減やろうとやっとこさ重い腰を上げ、chatGPTさんに教えてもらうことにした。(早く聞けばよかった。。)

入力情報がなければ投稿表示画面では表示しないように、テキストエリアで改行できるように、といろいろ調整した。
ま、私が調整したわけではなく、chatGPTさんに教えてもらったんだけど。
ほんま便利だわ〜ありがとうchatGPTさん!

chatGPTさんへの指示は、「wordpressのカスタムフィールドを自作したいです。日時・会場・料金の項目で、テキストエリアを使用したカスタムフィールドのコードを生成してください。」というところからはじまり、改行やらいろいろ調整。

<lavel>で表示されたところは<p>に書き換えたり、single.phpに書いたほうが使い回すときにcssの調整とか楽かなーっていうところは省いたりした。

コピペで使えるように、ここにメモしておく。

functions.php(custom-field.php)

<?php
// カスタムフィールドのメタボックスを追加
function custom_event_fields_meta_box() {
add_meta_box(
'custom_event_fields_meta_box',
'イベント情報',
'custom_event_fields_meta_box_callback',
'post',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'custom_event_fields_meta_box');

// カスタムフィールドのメタボックスのコールバック関数
function custom_event_fields_meta_box_callback($post) {
// 現在の値を取得
$event_date = get_post_meta($post->ID, 'event_date', true);
$event_location = get_post_meta($post->ID, 'event_location', true);
$event_fee = get_post_meta($post->ID, 'event_fee', true);

// テキストエリアの表示
echo '<p>日時</p>';
echo '<textarea id="event_date" name="event_date">' . esc_textarea($event_date) . '</textarea>';
echo '<p>会場</p>';
echo '<textarea id="event_location" name="event_location">' . esc_textarea($event_location) . '</textarea>';
echo '<p>料金</p>';
echo '<textarea id="event_fee" name="event_fee">' . esc_textarea($event_fee) . '</textarea>';
}

// カスタムフィールドの保存
function save_custom_event_fields($post_id) {
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!current_user_can('edit_post', $post_id)) return;

// 各項目の保存
if (isset($_POST['event_date'])) {
$event_date = wp_kses_post($_POST['event_date']);
update_post_meta($post_id, 'event_date', $event_date);
} else {
delete_post_meta($post_id, 'event_date');
}

if (isset($_POST['event_location'])) {
$event_location = wp_kses_post($_POST['event_location']);
update_post_meta($post_id, 'event_location', $event_location);
} else {
delete_post_meta($post_id, 'event_location');
}

if (isset($_POST['event_fee'])) {
$event_fee = wp_kses_post($_POST['event_fee']);
update_post_meta($post_id, 'event_fee', $event_fee);
} else {
delete_post_meta($post_id, 'event_fee');
}

}
add_action('save_post', 'save_custom_event_fields');

?>

直接functions.phpに記述するのもいいけど、可読性も考えて「custom-field.php」を作ってfunctionsフォルダに入れて読み込ませる仕様にすると良いかも。
その場合のfunctions.phpへの記述は

require get_template_directory() . '/functions/custom-field.php';

投稿画面

single.php(入力が合った場合のみ表示仕様)

<dl class="event-summary">
<?php
$event_date = get_post_meta($post->ID, 'event_date', true);
$event_location = get_post_meta($post->ID, 'event_location', true);
$event_fee = get_post_meta($post->ID, 'event_fee', true);
?>
<?php if (!empty($event_date)) : ?>
<dt>日時</dt>
<dd><?php echo nl2br(esc_html($event_date)); ?></dd>
<?php endif; ?>
<?php if (!empty($event_location)) : ?>
<dt>会場</dt>
<dd><?php echo nl2br(esc_html($event_location)); ?></dd>
<?php endif; ?>
<?php if (!empty($event_fee)) : ?>
<dt>料金</dt>
<dd><?php echo nl2br(esc_html($event_fee)); ?></dd>
<?php endif; ?>
</dl>

入力があった場合のみ表示する仕様にした。

表示画面

「イベント情報」なんて言葉、記述してないよ?chatGPTさんすごい。

chatGPTさんに
「テキストエリアの入力にしたい」
「カスタムフィールド入力で改行できるように修正して」
などなど、いろいろ指示して実装できた〜。

「wp_kses_post」って、今まで使ったことあったかな〜?記憶にないんだけど、、
chatGPTさん曰く、

とのこと。
安全に保持し、改行を許可してくれるようになるのか〜。

びっくりしたのが「イベント情報」というワードが出たこと。
「日時・会場・料金」というワードで「これはイベント情報なんだな」って認識してくれたってことだよね。すごいわ〜。

解説もきちんとしてくれたし、このコードで運用してみよう。

ABOUT US
yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。