2021.04.27基礎知識
【超初心者でも丸わかり】カスタムフィールドの使い方を徹底解説します！
この記事を書いた人
土井 純也
WordPressスペシャリスト・エンジニア/株式会社プレートテクノロジー 取締役
1985年北海道生まれ。200社以上のWordPressサイトの制作を担当し、「wp.support」では一部上場企業を含め、様々なサイトのWordPress保守・セキュリティをサポートしている。
この著者の他の記事を見る >>WordPressを使いこなすには、投稿をするときに少し手の込んだものを作ることができます。そこで使用するのが、「カスタムフィールド」です。
そこで今回は「カスタムフィールド」についてわかりやすく解説します。
目次
カスタムフィールドとは何か？
WordPressの「投稿ページ」を使って投稿を行うとページには「タイトル」と「本文」の入力画面があります。
このデフォルトの入力画面に新しく入力する項目を作成することにより簡単に投稿することができます。
例えば、店舗情報を記入する際に、複数の情報を入力する場合などです。
「カスタムフィールド」を使うと必要な項目を追加して、作成できます。
カスタムフィールドを覚えておくと、作業効率が上がり、よりWordPressを触るのが楽しくなるでしょう。
カスタムフィールドの使用方法
カスタムフィールドの使用方法としては3種類あります。
- 投稿画面上にあるタブで実装
- PHPを実際に書いて実装
- プラグインで実装
になります。
リストの上2つは実際にPHPファイルに記述する事が必要となりますので、初心者の方には難しいため避けておくことが無難です。
なので、プラグインを使ってカスタムフィールドを追加する方法を紹介します。
プラグインのACFでカスタムフィールドを実装する。
ACF(Advanced Custom Fields)は無料配布されているプラグインです。
カスタムフィールドを実装するためにプラグインは多くあり、悩んでしまう人も多いと思いますが、今日もっとも使われているプラグインは、現状ではACFです。
そのため、WordPressの使い方がまだ慣れていない初心者の方はACFでカスタムフィールドを実装するようにしましょう
プラグインをダウンロードしよう
管理画面の左のサイドバーにある「プラグイン」に入り「新規追加」をクリックします。
「プラグインを追加」のページの右側にある検索に「Advansed Custom Field」を検索し、インストールした後に必ず有効化にします。
有効化すると下のような画面がでますので出ているかを必ず確認しましょう。
ACFを設定しよう
最初はフィールドグループを設定しなればなりません。
追加画面が出たときに「タイトル」を入力する必要があります。
この場所のタイトルはどこにも表示されないで、自分でわかるタイトルを設定しましょう。
タイトルを入力したら右下にある、「+フィールドを追加」で新規のフィールドを追加しましょう。
カスタムフィールド作成しよう
「+フィールドを追加」で新規フィールドを追加します。
ここで必ず記入しなければならない項目が3つあります。
| フィールドラベル | 編集画面で表示される名前になります。 分かりやすい名前をつけておきましょう。 |
|---|---|
| フィールド名 | フィールドの値を出力する時に代わりの言葉で表示します。 半角英数で入力します。代入に当たることを行います。 |
| フィールドタイプ | カスタムフィールドの種類になります。テキストエリアやチェックボックス等の基本的なパーツから関連やGoogleMap等の『Advanced Custom Fields』ならではのものが沢山あります。 |
フィールドタイプの種類
フィールドタイプには多くの種類があります。
実際の画面作業してみましょう。
カスタムフィールドを実装する
カスタムフィールドを実装するためにコードを埋め込まなければいけません。
ご自身で設定した「カスタムフィールド名」を入力してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<? //テキスト $txt = get_field('txt'); if($txt){ ?><p>テキスト：<? echo $txt; ?></p> <? } //テキストエリア $area = get_field('area'); if($area){ ?><p>テキストエリア：<? echo $area; ?></p> <? } //数値 $num = get_field('num'); if($num){ ?><p>数値：<? echo $num; ?></p> <? } //メール $mail = get_field('mail'); if($mail){ ?><p>メール：<? echo $mail; ?></p><? } //パスワード $passwd = get_field('passwd'); if($passwd){ ?><p>パスワード：<? echo $passwd; ?></p> <? } //Wysiwyg エディタ $editor = get_field('editor'); if($editor){ ?><p>Wysiwyg エディタ：<? echo $editor; ?></p> <? } //画像(返り値は「画像ID」) $img = get_field('img'); $imgurl = wp_get_attachment_image_src($img, 'full'); //サイズは自由に変更してね if($imgurl){ ?><p><img src="<? echo $imgurl[0]; ?>" alt=""></p> <? } //ファイル(返り値は「ファイルURL」) $file = get_field('file'); if($file){ ?><p><a href="<? echo $file; ?>" target="_blank">ファイル</a></p> <? } //セレクトボックス $select = get_field('select'); if($select){ ?><p>セレクトボックス：<? echo $select; ?></p> <? } //チェックボックス $check = get_field('check'); if($check){ foreach((array)$check as $value) { echo "セレクトボックス：".$value; } } //ラジオボタン $radio = get_field('radio'); if($radio){ ?><p>ラジオボタン：<? echo $radio; ?></p> <? } //真/偽 $singi = get_field('singi'); if($singi){ ?><p>真/偽：<? echo $singi; ?></p> <? } //ページリンク $pagelink = get_field('pagelink'); if($pagelink){ foreach((array)$pagelink as $value) { echo "ページリンク：".$value; } } //投稿オブジェクト $object = get_field('object'); if($object){ ?><p>投稿オブジェクト：<? echo $object->post_title; ?></p> <? } //関連(返り値は「Post Objects」) $kanren = get_field('kanren'); if($kanren){ ?> <p>関連：<? foreach((array)$kanren as $value) { echo '<a href="'.get_the_permalink($value->ID).'">'.$value->post_title.'</a>'; if ($value !== end($kanren)) { echo ", "; } } ?></p><? } //タクソノミー(返り値は「Term Object」) $taxo = get_field('taxo'); if($taxo){ ?><p>タクソノミー：<? foreach((array)$taxo as $value) { echo '<a href="<a class="vglnk" href="http://kotori-blog.com/taxonomy/'.$value-" rel="nofollow"><span>http</span><span>://</span><span>kotori</span><span>-</span><span>blog</span><span>.</span><span>com</span><span>/</span><span>taxonomy</span><span>/'.$</span><span>value</span><span>-</span></a>>slug.'">'.$value->name.'</a>'; if ($value !== end($taxo)) { echo ", "; } } ?></p><? } //ユーザー(フィールドタイプは「セレクトボックス」) $user = get_field('user'); if($user){ ?><p>ユーザー：<? echo '<a href="<a class="vglnk" href="http://kotori-blog.com/anthor/'.$user['user_nicename" rel="nofollow"><span>http</span><span>://</span><span>kotori</span><span>-</span><span>blog</span><span>.</span><span>com</span><span>/</span><span>anthor</span><span>/'.$</span><span>user</span><span>['</span><span>user</span><span>_</span><span>nicename</span></a>'].'">'.$user['nickname'].'</a>'; ?></p><? } //ユーザー(フィールドタイプは「Multi Select」) $user = get_field('user'); if($user){ ?><p>ユーザー：<? foreach((array)$user as $value) { echo '<a href="<a class="vglnk" href="http://kotori-blog.com/anthor/'.$value['user_nicename" rel="nofollow"><span>http</span><span>://</span><span>kotori</span><span>-</span><span>blog</span><span>.</span><span>com</span><span>/</span><span>anthor</span><span>/'.$</span><span>value</span><span>['</span><span>user</span><span>_</span><span>nicename</span></a>'].'">'.$value['nickname'].'</a>'; if ($value !== end($user)) { echo ", "; } } ?></p><? } //Google Map $googlemap = get_field('googlemap'); if($googlemap){ ?><p>Google Map：<? echo $googlemap['address']; ?> lat:<? echo $googlemap['lat']; ?> lng:<? echo $googlemap['lng']; ?></p><? } //デイトピッカー $datepicker = get_field('datepicker'); if($datepicker){ ?><p>デイトピッカー：<? echo $datepicker; ?></p> <? } //カラーピッカー $color = get_field('color'); if($color){ ?><p>カラーピッカー：<? echo $color; ?></p> <? } ?> |
まとめ
カスタムフィールドを使用できますと自由に投稿やページが作成できるようになります。
始めは難しいですが慣れた後は簡単になるので、頑張って覚えていきましょう！
