[WordPress] 初めてのカスタムフィールド

2019年6月9日2022年3月5日

カスタムフィールドって使ってますか？Wordpressのカスタマイズ本にもあまり紹介されていないので、時間をかけて書き溜めた覚え書きを纏めました。プログラミングは苦手なので、あっているのか分かりませんが、とりあえず使えました。役立てば嬉しいです。

例えば、美味しいレストランの紹介を投稿する場合、基本情報って決まっていますよね？
住所、電話番号、営業時間、定休日をその都度入力するのも面倒です。以前紹介した Addquicktag プラグインで、テンプレートを作る事も出来ますが、ある程度htmlの知識が無いと　それも難しです。誰でもブログが書けるレベルでも、決まったフォーマットで情報を掲載する事が出来る、カスタムフィールド機能を使って見ましょう

出力するのはこんな感じです。あとはCSSで装飾すればOK

プラグインを使用したい場合

[WordPress] Custom Field Suite で手軽にカスタムフィールド「カスタムフィールド」と言えば、ちょっと設定が難しく、使い勝手が悪い印象ではないでしょうか？そこで、Custom Field Suiteプラグインがオススメします。人気のプラ…

INDEX

カスタムフィールド画面を表示する

新規投稿画面を開き、上の方の[表示オプション]をクリックし、一覧を表示。カスタムフィールドの✔を入れると、入力画面が本文入力エリアの下に表示されます。

こんな感じになるはずです。

カスタムフィールドの登録

[カスタムフィールドを追加]をクリックし、「名前」と「値」に入力します。[新規追加]をクリックし、項目を増やして行きます。

ちなみに、[カスタムフィールドを追加]を追加すると、新たなグループとして登録する事が出来ます。

以降は、ドロップダウンメニューに「名前」は登録されるので、選んで「値」を入力するだけです。

カスタムフィールドを出力する

テンプレートにコードを記入する訳ですが、例えば WordPress Bootstrap Starter Themeを使用している場合、子テーマの中の、template-parts/contents.phpに書き足します。

カスタムフィールドの名前と値をまとめて出力する場合

<?php the_meta(); ?>

出力結果は↓こんな感じ

<ul class="post-meta">
      <li><span class="post-meta-key">住所:</span> 東京都千代田区内幸町１丁目１?１</li>
      <li><span class="post-meta-key">営業時間:</span> 17:00～21:00 (ラストオーダー)</li>
      <li><span class="post-meta-key">電話番号:</span> 03-1234-5678</li>
      <li><span class="post-meta-key">ホームページ:</span> https://cocotiie.com</li>
    </ul>

個別に出力する場合

値を個別に出力できます。

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

htmlをリンク形式にする

URLを<a href=とすれば良いのですが、面倒なので単にURLを入力すればリンク形式になる様にしてみました。

<a href="<?php echo get_post_meta($post->ID, 'ホームページ', true); ?>" target="_blank"><?php echo get_post_meta($post->ID, 'ホームページ', true); ?></a>

初めは、下記のhttpを自動で追加するコードを見つけて使用していたのですが、sslのサイトが増えて来たのでhttpsになってきました。httpからリダイレクトされているとは思うのですが、良く分からないので上記のコードを使う事にしました。

<?php
$value = get_post_meta( $post->ID, 'ホームページ', true );

if ( $value ) {
    // Returns an empty string for invalid URLs
    $url = esc_url( 'http://' . $value );

    if ( '' !== $url ) {
        $display = esc_html( $value );

        print "<a href='$url' target='_blank'>$display</a>";
    }
}
?>

テキストを改行必要がある場合

住所など改行が予想される様なテキストもあると思うので、改行が反映される様です。

 <?php 
    echo nl2br( esc_html( get_post_meta( get_the_ID(), '住所', true) ) ); 
    ?>

最終的なコード

こんな感じになりました。※ カスタムフィールドを使用していなくても名前は表示されます。

<ul class="post-meta">
<li><span class="post-meta-key">住所:</span><?php echo get_post_meta($post->ID, '住所', true); ?> </li>
<li><span class="post-meta-key">電話番号:</span><?php echo get_post_meta($post->ID, '電話番号', true); ?> </li>
<li><span class="post-meta-key">営業時間:</span><?php echo get_post_meta($post->ID, '営業時間', true); ?> </li>
<li><span class="post-meta-key">URL:</span><a href="<?php echo get_post_meta($post->ID, 'ホームページ', true); ?>" target="_blank"><?php echo get_post_meta($post->ID, 'ホームページ', true); ?></a>
</li>
</ul>

未入力の場合は表示されない様にする

個々の「値」が空欄の場合は、「名前」も表示されないようにしました。もっとスマートに書く方法があるのかも？

<ul class="post-meta">
<?php if(get_post_meta($post->ID, '住所',true)): ?>
<li><span class="post-meta-key">住所:</span><?php echo get_post_meta($post->ID, '住所', true); ?> </li>
<?php endif; ?>
<?php if(get_post_meta($post->ID, '電話番号',true)): ?>
<li><span class="post-meta-key">電話番号:</span><?php echo get_post_meta($post->ID, '電話番号', true); ?> </li>
<?php endif; ?>
<?php if(get_post_meta($post->ID, '営業時間',true)): ?>
<li><span class="post-meta-key">営業時間:</span><?php echo get_post_meta($post->ID, '営業時間', true); ?> </li>
<?php endif; ?>
<?php if(get_post_meta($post->ID, 'ホームページ',true)): ?>
<li><span class="post-meta-key">URL:</span><a href="<?php echo get_post_meta($post->ID, 'ホームページ', true); ?>" target="_blank"><?php echo get_post_meta($post->ID, 'ホームページ', true); ?></a>
</li>
<?php endif; ?>
</ul>

個々の「値」が空欄の場合は、ダッシュ[-]を表示する場合。

<?php if(get_post_meta($post->ID, '住所',true)):  ?> 
<li><span class="post-meta-key">住所:</span><?php echo get_post_meta($post->ID, '住所', true); ?></li>  
<?php else: // 入力がない場合 ?>
<li><span class="post-meta-key">住所:</span>- </li>  
<?php endif; ?>