実際にAdvanced Custom Fieldsを使った

公開日: : 最終更新日:2016/08/09 ちょっとした紹介やニュース ,

カスタムフィールドは実際に使わないとわからないと思いますので、今回はプラグインを使ってホームページを制作した時の情報を公開致します。

はじめに

ワードプレスでカスタムフィールドを使ってみようと思い、簡単に導入出来るプラグインAdvanced Custom Fieldsの存在は知っているもののどうやって使えば良いのかがわからないと言う方向けに私が制作したホームページの実例を挙げてご説明させて頂きます。

注意事項

Advanced Custom Fieldsについてはカスタムフィールドを簡単に導入出来るAdvanced Custom Fieldsをご覧ください。

まずはどういった項目を出したいのかを考える

私の場合は特定の商品を取り扱うと言う形でしたのでカスタムフィールドを使用する項目として大きくわけると

  • 商品名
  • 商品価格
  • 購入サイトへのリンク
  • 送料について
  • メーカー
  • お勧めポイント

となりました。メーカー名をクリックするとそのメーカー一覧ページへのリンクなども必要だなと思いました。

この中で商品名、商品価格、購入サイトへのリンクは商品によって内容が変わりますので入力系のカスタムフィールドを使用します。

送料については無料のものとそうでないものと2種類になるので選択系のカスタムフィールドを使用します。

メーカーに関しても数ある中から1種類を選ぶので同じく選択系のカスタムフィールドを使用になりますね。

そして、お勧めポイントは11つある中からその商品に合うものを複数選ぶタイプのカスタムフィールドとなります。

入力系のカスタムフィールドを使ってみる

cstmf2

入力系のカスタムフィールドが一番簡単です。上記の画像はAmazonの価格を表示させるカスタムフィールドとなり、基本的に入力系は全てフィールドタイプはテキストとなります。

ちなみに入力画面は

cstmf2-1

このような形となります。

選択系のカスタムフィールドを使ってみる

送料込みなのか、送料別なのか2項目のみの選択をする場合はこういった設定をしました。

cstmf2-2

フィールドタイプはセレクトボックスを選びました。

選択肢と書かれている部分に

Amazonは送料無料 : Amazonは送料無料
送料別 : 送料別

と記入する事で選択項目を付ける事が可能となります。ちなみに入力画面では

cstmf2-3

このようになっております。

条件をうまく使う

メーカーに関してはAと言うメーカーを選んだ際にAの一覧を取得する為のURLも同時に取得したい場合には条件をうまく使う事で簡単に設定する事が可能です。

デザイン

cstmf2-4

このように表示させるのが目標です。まずはパナソニックと文字を出す為にカスタムフィールドを制作致します。

まずはメーカー名を出す為のカスタムフィールドを作成致します。

cstmf2-5

これは先ほどの選択系のカスタムフィールドと同様で選択肢に各メーカー名を追加致しました。

URLを組み合わせる場合

選択肢とURLを組み合わせる場合は条件を使用する事で簡単に組み合わせる事が出来ます。まずは組み合わせる以前のURLを表示する為のカスタムフィールドを作成致します。

cstmf2-6

フィールドタイプはテキストにしておき、デフォルト値はメーカー名を選んだ時に表示させたいURLを記入し、フォーマットに関しては必ずConvert HTML into tagsを選択しましょう。

条件判定

cstmf2-7

条件判定に先ほどのメーカー名、そして次に等しい、最後に組み合わせる為の選択肢を入れます。

管理画面上では

cstmf2-8

メーカー名のパナソニックを選択するとその下が自動的にpamasonicURLが表示されます。ちなみに別のメーカーを選択すると

cstmf2-9

このように自動的に変化します。

複数選ぶタイプのカスタムフィールドを作ろう

そして最後は複数選択出来るタイプの制作をいたします。私が作った物は先ほどの条件判定を使用するのですがまずはどういった形で表示をしたいのか見てください。

cstmf2-10

その商品が各条件に当てはまるかどうかを見て当てはまるものにチェックを入れるようなカスタムフィールドを制作致します。

cstmf2-11

まずは上記2つと同様に選択肢を作ります。私の場合は項目がすくないので、この場合はフィールドタイプをチェックボックスにしておきます。

項目を追加しよう

cstmf2-12

フィールドタイプをテキストエリアを選択する事で文字数の多いカスタムフィールドを入力する事が出来ます。htmlを使用する場合はフォーマットも先ほどと同様必ずConvert HTML into tagsにしましょう。

条件判定

先ほどと同様に左側に先ほど作った管理人のおすすめポイント、真ん中に等しい、そして最後に手動式と作成した項目を入れます。

cstmf2-13

管理画面上では

cstmf2-14

このようになり、その商品がその項目に当てはまる場合はチェックを入れる事で表示させる事が出来ます。

テンプレートにタグを入力する時の注意事項

例えばリンク先にカスタムフィールドを使用する時は

<a href="
<?php the_field('リンク先A'); ?>
<?php the_field('リンク先B'); ?>
">リンク先名</a>

と入力するとうまく動かないケースがございます。
なので必ず

<a href="<?php the_field('リンク先A'); ?><?php the_field('リンク先B'); ?>">リンク先名</a>

このように余計な改行やスペースは入れないように作りましょう。

実際に作った鼻毛カッターのホームページはこちら

さいごに

実際に作ってみるのが一番

カスタムフィールドに関しては一度自分でプラグインをインストールし、何かしらを制作するのが一番わかりやすいです。

私自身も色々なサイトを見ながら制作しましたが、作っていくうちにだんだんと使い方がわかってきたので、とりあえず情報収集だけでなくとりあえず自分がやりたい事が出来るのかどうかを確認するだけでも大きなヒントになるかと思います。

私自身も副業用で制作した鼻毛カッターのホームページもそこそこアクセスが集まってきました。

関連記事

WordPressで特定の画像名だとアップされない

画像にバナーサイズを記載してアップする人もいるでしょうが、これアップされない可能性もあります。

記事を読む

川島和正のアフィリエイトは詐欺!?【無料オファー】

あの川島和正のアフィリエイトセンターを利用して一年経過したら詐欺かどうかわかりました 支払いがとに

記事を読む

記事に関するお問合せ時の注意

私が過去に書いている記事についてお問合せをして頂くのは問題ありませんが、自分勝手な内容だと返信できま

記事を読む

no image

鼻毛カッターのランキングサイトを作りました

鼻毛カッターに関するホームページを制作致しました。 鼻毛カッターと言うキーワードで検索した時に

記事を読む

Googleアドセンスから警告がきました

Googleアドセンスを導入している方であれば誰しもがありえるんじゃないかな はじめに

記事を読む

消えたカカオトークを戻す方法

かなり前からカカオトークで重大なエラーが起きているようですね はじめに 友人からカカオトークが消

記事を読む

Google Chromeの右下に表示される通知を消す方法

ある日急に表示されたからびっくりしたわ はじめに Google Chromeって早い

記事を読む

windows10でone driveを無効にする方法

こゆ意図せずに出てこられるのは非常に腹立たしい はじめに one driveの情報が急に出て

記事を読む

無料オファーのページを制作致しました

無料オファーのページを作成致しましたので是非ご覧ください。 無料オファーはこちら

記事を読む

ワードプレスのバグ?スマホで表示がおかしくなる・・・

PCでは確認出来ませんでしたが、スマホで確認するとごくまれに変わった表示になってしまいます。 はじ

記事を読む

Message

現在の総記事数: 316件

ECCUBEの検索に商品IDを追加させる方法

ECCUBEはデフォルトだと検索機能は非常に弱いです。 はじめに

EC-CUBEで各カテゴリーページに情報を表示させる方法

EC-CUBEでカテゴリーページごとに情報を入れる方法をご紹介

windows10のおすすめを非表示にする方法

windows10に変わってからめっちゃうっとおしくなってきましたね

PHPの中にPHPを入れたい人の為のヒント

PHP初心者によくある疑問点PHPの中にPHPを入れる事が出来れば

Contact Form 7のエラー項目を分かりやすく方法

Contact Form 7を利用している方でエラー項目をよりわかりや

→もっと見る

PAGE TOP ↑