Help us understand the problem. What is going on with this article?

worpdressのカスタムフィールドを劇的に使いやすくする方法

More than 1 year has passed since last update.

wordpress構築するときに、好きな場所で好きなカスタムフィールドを好きな回数使う方法です。

例えば、「画像大」「画像小」「テキスト」「youtube」という入力項目を作るとします。
普通にカスタムフィールドを使おうとすると、上から

「画像大」「画像小」「テキスト」「youtube」

と1つずつフィールドを作ると思います。しかし、記事によって

「画像大」「youtube」、
「画像小」「youtube」「画像大」「テキスト」、
「画像小」「テキスト」「画像大」「テキスト」「画像大」、
など

色々な順番、回数カスタムフィールドを自由に使いたいことがあるはずです。

「画像大1」「画像大2」「画像大3」のように事前にフィールドを用意しておくことは可能ですが、
順番の変更に対応できないのと何よりスマートじゃありません。

そんな時は、いつも使用しているカスタムフィールド拡張プラグイン

■Advanced Custom Fields
https://ja.wordpress.org/plugins/advanced-custom-fields/

とともに、「Advanced Custom Fields」を拡張する有料プラグイン

■Advanced Custom Fields The Repeater Field
https://www.advancedcustomfields.com/add-ons/repeater-field/

を使います。安いので必ず買いましょう、30分くらいで元が取れます。
「Repeater Field」を使うとカスタムフィールドが繰り返し使えるようになります。
細かいタグのチュートリアルは上記のリンク先に載っています。

1.png

2つのプラグインをインストールすると、
管理画面のサイドナビの「カスタムフィールド」から自由にカスタムフィールドが作成出来るようになっているはずです。
フィールドグループを新規作成してください。

「Repeater Field」を入れているとカスタムフィールドの入れ子?ができるようになります。
フィールドタイプに「Repeater」が追加されているのでそれを選択してください。

2.png

入れ子のフィールドを以下のように作ります。
「レイアウト」は今回はRowにします、適宜変えてください。
「Button Label」もわかりやすい文言にした方が良いです。

3.png

入れ子フィールドを作る時のポイントその1として、
まずプルダウンの設定を以下のようにしてください。

4.png

次に実際にサイトに表示するコンテンツのフィールド達です。
「画像大」を例にします。
ポイントその2として、「条件判定」で種類が画像大に選択された時、とします。
他のフィールドも真似て設定します。

5.png

これが終わったら設定を保存してください。
このカスタムフィールドを使う場所が、「投稿」なのか「カスタム投稿」なのか「固定ページ」なのか
も忘れずに設定しましょう。

6.png

次にfunction.phpに以下のように記述します。
htmlタグは適時変更してください。

functions.php
// カスタムフィールドの制御 関数名は他と被らなければ自由
function set_body_content() {
  while ( have_rows( 'コンテンツ' ) ): the_row();
    switch ( get_sub_field( '種類' ) ) {
    case '画像大':
      echo '<div class="img img--l"><img src="' . get_sub_field( '画像大' ) . '" alt=""></div>';
    break;
    case '画像小':
      echo '<div class="img img--s"><img src="' . get_sub_field( '画像小' ) . '" alt=""></div>';
    break;
    case 'テキスト':
      echo '<div class="text">' . nl2br(get_sub_field( 'テキスト' )) . '</div>';
    break;
    case 'youtube':
      echo '<div class="youtube"><iframe src="https://www.youtube.com/embed/' . get_sub_field( 'youtube' ) . '" frameborder="0" allowfullscreen></iframe></div>';
    break;
    }
  endwhile;
}

このように定義しておけば、その関数をテンプレートから呼び出せるので、
呼び出したい箇所に以下のように記述します。

single.php
<?php set_body_content(); ?>

ここまでできたら準備完了です。
投稿画面を開くと、プルダウンでカスタムフィールドを選択できるようになっており
「順番」「種類」「繰り返し回数」も自由に制御できます。
試しに入力してみます。

7.png

するとこんなふうにちゃんと出力されます。

8.png

このテクニックを使うと、htmlが使えないユーザーも割と自由に
記事のカスタマイズができます。

resistance_gowy
フロントエンド。 https://github.com/underground0930/ https://twitter.com/resistance_gowy http://resistance-underground.hateblo.jp/
https://htmlgo.site/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした