実際に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>

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

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

さいごに

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

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

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

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

広告

関連記事

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

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

記事を読む

無料オファーの始め方ページを制作いたしました。

無料オファーの始め方ページを制作いたしました。 無料オファーを始めたいけど、やり方がわからない

記事を読む

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

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

記事を読む

iPhoneで独自ドメインのメール設定をする方法【さくら】

【さくらサーバー】iPhoneで独自ドメインのメールを送受信できる方法 はじめに さくら

記事を読む

ツイッターの最初に固定した内容を表示させる方法

ツイッターの初めに固定されたツイートと言う内容があると思いますが、これのやり方をご紹介させて頂きます

記事を読む

メルカリで商品購入から評価までの流れ

メルカリで購入したいけど色々不安な人へ はじめに メルカリでは商品を購入後に評価しなければいけな

記事を読む

gmailの裏技発見したったったwww

gmailの裏技発見したったったwww 登録したサイトからのメールの分類がめちゃく

記事を読む

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

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

記事を読む

windows10で画面に[あ]や[A]と大きく出るのを消す方法

windows10で画面にや[A]と大きく出るのを消す方法 windowsってほんまほ

記事を読む

大型らくらくメルカリ便の登録から発送までの流れ

めったにはありませんが、大型メルカリ便を利用してみましたのでその時の流れなどをご紹介いたします。

記事を読む

広告

Message

広告

現在の総記事数: 306件

WordPressが書き換えられた時の対処方

アクセス先のサイトで「不正なソフトウェアを検出しました」と表示されると

さくらインターネットの請求書払い反映されるまで

さくらインターネットで支払い方法を請求書払い(コンビニ払い)にしている

HEIC形式を簡単にjpgにする方法

web上でクッソ簡単にjpgに戻せました はじめに ア

メルカリの売り上げを自分の口座に振込む方法

売り上げが上がるだけだと意味がありません。メルカリから自分の銀行に振り

お名前ドットコム
お名前.comのWhois情報公開代行のご案内が悪質すぎる

お名前.comでドメインを取得した人は気を付けてくださいね。 情弱な

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑