（null/5）
「Advanced Custom Fields」は、カスタムフィールドを作成、表示できるプラグインです。
今回は応用編として、カスタムフィールドで本のレビューページを作成してみます。
基本の使い方は、「基本編」をご参照ください。
↓こんな感じのページを作っていきます。
今回は有料オプションの「繰り返しフィールド」を使用しますが、使用部分は「おすすめポイント」の部分のみです。
カスタムフィールドを作成する
本のレビュー項目として、以下の項目を作ります。
- 書籍名
- 画像
- 詳細
- 評価
- オススメポイント
繰り返しフィールドは「おすすめポイント」で使用します。
項目を無限に追加できます。
公式サイトから25ドルで購入できます。
無限に追加できる項目を増やしたい方は、プラグイン⇒新規追加で購入した繰り返しフィールドをアップし、有効化しておきましょう。
WP管理画面⇒サイドバー：カスタムフィールド と進みます。
- 書籍名を追加します。
フィールドタイプ：テキスト
フィールド名：book_name - 画像アップロード項目を追加します。
フィールタイプ：ファイル
フィールド名：book_img
返り値：ファイルURL - 本の詳細を追加します。文字色を変えたりしたいのでビジュアルエディタにします。
フィールド名：book_Impressions
フィールタイプ：Wysiwygエディタ - 本の評価をセレクトボックスで選べるようにします。
フィールド名：book_star
フィールタイプ：セレクトボックス
「選択し」の部分に評価の数字を入れます。 - いくつでも追加できるおすすめポイントを作成します。
フィールド名：book_point_g
フィールタイプ：Repeater
「Add Sub Field」ボタンでサブフィールドを追加します。
サブフィールド名：book_point
サブフィールタイプ：テキスト
以上の項目を追加したら「公開」か「更新」を押します。
カスタムフィールドに入力する
カスタムフィールドに値を入力していきます。
投稿ページへ行くと以下のような項目が下に追加されていると思います。
上記項目に、本のレビューを入れていきましょう。
オススメポイントは、「Add Row」を押すことで、項目を追加できます。
ページにカスタムフィールドの入力値を表示する
single.phpなどにコードを追加していきます。
書籍名
書籍名を表示するには以下のコードを任意の場所に入れます。
php
<?php if( get_field('book_name') ): ?>
<h2><?php the_field('book_name'); ?></h2>
<?php endif; ?>
<?php if( get_field('フィールド名') ): ?>でフィールドに入力があった場合。
<?php the_field('フィールド名'); ?>で、フィールドの入力値を表示させます。
画像
画像を表示させるには、以下のコードを追加します。
cssはどの大きさでアップロードしても同じ大きさになるように調整しています。
altには書籍名を入れました。
php
<?php if( get_field('book_img') ): ?>
<p class="img"><img src="<?php the_field('book_img'); ?>" alt="<?php the_field('book_name'); ?>" /></p>
<?php endif; ?>css
.img img{
width:150px;
}詳細
本の詳細です。
php
<?php if( get_field('book_Impressions') ): ?>
<h3>詳細</h3>
<p class="impressions"><?php the_field('book_Impressions'); ?></p>
<?php endif; ?>評価
本の５段階評価は、星をCSSで表示させます。
php
<h3>評価</h3>
<p class="star star<?php the_field('book_star'); ?>">（<?php the_field('book_star'); ?>）</p>
css
.star:before {
color:#F90;
}
.star5:before {
content:'★★★★★';
}
.star4:before {
content:'★★★★';
}
.star3:before {
content:'★★★';
}
.star2:before {
content:'★★';
}
.star1:before {
content:'★';
}オススメポイント
オススメポイントのみ有料プラグインを使用し、入力があった分だけ表示させます。
画像を複数登録したい場合などにも使えます。
php
<?php if( get_field('book_point_g') ): ?>
<h3>オススメポイント</h3>
<ul class="book_point_g">
<?php while ( have_rows("book_point_g") ) : the_row(); ?>
<li><?php the_sub_field('book_point');?></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
have_rowsが繰り返しフィールド。
サブフィールドを表示させるときは、「the_sub_field」を使います。
コードまとめ
上記のコードを全てまとめたものです
php
<?php if( get_field('book_name') ): ?>
<h2><?php the_field('book_name'); ?></h2>
<?php endif; ?>
<?php if( get_field('book_img') ): ?>
<p class="img"><img src="<?php the_field('book_img'); ?>" alt="<?php the_field('book_name'); ?>" /></p>
<?php endif; ?>
<h3>評価</h3>
<p class="star star<?php the_field('book_star'); ?>">（<?php the_field('book_star'); ?>）</p>
<?php if( get_field('book_Impressions') ): ?>
<h3>詳細</h3>
<p class="impressions"><?php the_field('book_Impressions'); ?></p>
<?php endif; ?>
<?php if( get_field('book_point_g') ): ?>
<h3>オススメポイント</h3>
<ul class="book_point_g">
<?php while ( have_rows("book_point_g") ) : the_row(); ?>
<li><?php the_sub_field('book_point');?></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
css
.img img{
width:150px;
}
.star:before {
color:#F90;
}
.star5:before {
content:'★★★★★';
}
.star4:before {
content:'★★★★';
}
.star3:before {
content:'★★★';
}
.star2:before {
content:'★★';
}
.star1:before {
content:'★';
}
以上の手順でレビューページをカスタムフィールドで作成できます。
繰り返しフィールドとカスタムフィールドは色々なサイトに応用できます。
レシピサイトや、色々なレビューサイトを作ることも可能です。
ぜひ色々なサイトを作ってみてください。
