実際に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で特定の画像名だとアップされない

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

記事を読む

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

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

記事を読む

PHPのランダムを任意の数だけ表示させる方法

PHPのランダムを使い方をもう少し調べたらこんな使い方ができました はじめに PHPでランダムの

記事を読む

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

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

記事を読む

お名前ドットコム

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

お名前.comでドメインを取得した人は気を付けてくださいね。 情弱な人ほど騙されやすいのでしっかり

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

サクラサーバーで503が出たと思ったら原因が凄かった件

ホームページを制作したクライアントのホームページが急に503になってしまいました。 はじめに あ

記事を読む

no image

検索結果に表示されるノートンのアイコンを削除したい

簡単な設定で検索結果上に表示されているノートンのうっとおしいアイコンを削除する事が出来ました。 は

記事を読む

Message

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

現在の総記事数: 323件

さくらサーバーでワードプレスの無料SSLを導入してみたよ

さすがにそろそろSSL化しないといけないのでやってみたよ はじめに

EC-CUBE特定の商品ステータスのみを特定の箇所に表示させる

代引きが出来ない商品やメール便が対応できない商品を目立たせたい時などに

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参

【画像あり】XAMPPを使ってPHPの動作確認方法

PHPの動作確認をするのにXAMPPは絶対に必要です。 はじめに

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインスト

→もっと見る

PAGE TOP ↑