Advanced Custom Fieldsの使い方と空欄時に非表示にする方法

カスタムフィールドを作成できる便利プラグイン、Advanced Custom Fieldsについて。

使い方

使い方

Advanced Custom Fieldsをダウンロード

プラグインをダウンロードし、有効化します。
管理画面メニューの一番下に、「カスタムフィールド」という項目が出てくるのでクリック。

フィールドグループを設定

新規投稿から、フィールドグループを作成します。

フィールドラベル→フィールドのタイトル
フィールド名→出力するときに使うので、必ずローマ字で入力
フィールドタイプ→テキスト・テキストエリア・セレクトタイプなど作成したいものを選びます
フィールドの説明やプレースホルダーはページ作成者さんに向けたものなので、必要であれば入力しましょう。

投稿画面に戻ると、カスタムフィールドができているかと思います。

入力した内容を出力する

ここからは、テンプレートファイルの編集です。
カスタムフィールドに入力した内容をテンプレートに出力します。
投稿ページならsingle.phpに、固定ページならpage.phpに記述します。

<?php the_field('フィールド名'); ?>

1	<?php the_field('フィールド名'); ?>

未入力時は出力されないようにする

例えば、出力したい内容にスタイルをあてているような場合は、カスタムフィールドが空でもそのままスタイルは適応されてしまいます。

<div>
  <p><?php the_field('フィールド名'); ?></p>
</div>
<style>
div{
    background-color:#aaa;
    padding:10px;
    }
</style>

<div>

</div>

<style>

div{

background-color:#aaa;

padding:10px;

}

</style>

というような場合、背景色と余白がそのまま出力されてしまいます。
これを防ぐために、カスタムフィールドが空欄のときは表示させない、という条件分岐をする必要があります。

<?php $value = get_post_meta($post->ID, 'フィールド名', true);?>
  <?php if(empty($value)):?>

  <?php else:?>
  <div>
    <p><?php the_field('フィールド名'); ?></p>
  </div>
  <?php endif;?>

<?php $value = get_post_meta($post->ID, 'フィールド名', true);?>

<?php if(empty($value)):?>

<?php else:?>

<div>

</div>

<?php endif;?>

もし$value＝フィールド名が空なら何も表示させない、空じゃなければ表示してね！という内容です。