【YouTube講座】WordPress開発講座 #07：本文に入力欄を追加できるカスタムフィールドを使おうの概要
WordPress開発講座 #07：本文に入力欄を追加できるカスタムフィールドを使おう
ワードプレスのカスタム３兄弟。
カスタムフィールド、カスタムポスト、カスタムタクソノミーについて紹介していきます。
今回は、カスタムフィールドについて勉強しましょう。
ワードプレスには、新規投稿画面には、タイトルを入力する所と、本文を入力する所があります。
タイトルと本文だけだと、思ったようなレイアウトができないことがあります。
オンラインショッピングなどでは、値段の更新を入力すれば、そのたびに、レイアウトが崩れてしまうことにもなります。
値段を入力する欄を作って、そこさえ入力すれば、レイアウトが崩れないようになります。
管理画面で、カスタムフィールドを作る
投稿〜新規追加〜右上３つの点 オプション 詳細パネル〜カスタムフィールドにチェックを入れます。
カスタムフィールドの入力欄が出てきます。
特殊な入力欄で、２つの入力エリアがあります。
名前は、カスタムフィールドのキー。
キーと値のコンビで、増やすことができます。
カスタムフィールドに、次の2つのコンビを作ってみました。
価格 1500
発売日 2020/09/09
カスタムフィールドは、値を入れても、そのままでは表示されません。
テンプレートファイルを変更しなければなりません。
single.php を編集して、カスタムフィールドのキーと値を表示する
single.php を編集します。
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<?php the_content(); ?>
</div>
</div>
</div>
</article>
この中に、データ定義リストを入れます。
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<?php the_content(); ?>
<dl>
<dt>価格</dt>
<dd>1500円</dd>
<dt>発売日</dt>
<dd>2020年9月9日</dd>
</dl>
</div>
</div>
</div>
</article>
<dt>価格</dt>
<dd>1500円</dd>
<dt>発売日</dt>
<dd>2020年9月9日</dd>を反映して、
投稿画面に、価格と発売日が表示されています。
カスタムフィールドの値を変更できるようにする
single.php にｐｈｐ関数を書き込みます。
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<?php the_content(); ?>
<dl>
<dt>価格</dt>
<?php
$price = get_post_meta(get_the_ID(), '価格', true); ?>
<dd><?php echo $price; ?>円</dd>
<dt>発売日</dt>
<dd>2020年9月9日</dd>
</dl>
</div>
</div>
</div>
</article>
関数を定義して、再読み込みして、表示させると、価格1500円と、管理画面のカスタムフィールドの値を表示できています。
発売日の関数も設定してみましょう。
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<?php the_content(); ?>
<dl>
<dt>価格</dt>
<?php
$price = get_post_meta(get_the_ID(),'価格',true);
?>
<dd><?php echo $price; ?>円</dd>
<dt>発売日</dt>
<dd><?php
$published = get_post_meta(get_the_ID(),'発売日',true);
?></dd>
</dl>
</div>
</div>
</div>
</article>
発売日の値が表示されていません。コードを書き間違えていました。
⬇ 書き直しました。
-
<!-- Post Content --> <article> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <?php the_content(); ?> <dl> <dt>価格</dt> <?php $price = get_post_meta(get_the_ID(),'価格',true); ?> <dd><?php echo $price; ?>円</dd> <dt>発売日</dt> <?php $published = get_post_meta(get_the_ID(),'発売日',true); ?> <dd><?php echo $published; ?></dd> </dl> </div> </div> </div> </article>
今度は、表示されました。
カスタムフィールドに入れた 2020/09/09 が表示されています。
決まったフォーマッタに、データを入れたいといった場合に、使うことができます。
ワードプレスの標準のカスタムフィールドは、使いにくい所があります。
プラグインを入れてあげるとよいです。
プラグイン〜新規追加〜検索窓で、acf〜Advanced Costom Fieldを選びます。
詳しくカスタムフィールドを作り込むことができます。
このプラグインを使うと、single.phpのコードを簡単にすることができます。