blog

wordpressでカスタムフィールドを表示させる設定方法を解説

blog

カスタムフィールドとはwordpressの標準機能の一つで、使いこなすことで見出しや記事とは別に、アレンジした様々な形式の項目を追加することが出来ます。

また、記事編集だけでなく、noindexやcanonicalも設定出来るため、SEO対策としても重要な機能となります。

メリット

  • 要素を使い回せる
  • ショッピングサイトのような定型フォームを作る事が可能
  • noindexやcanonicalが設定出来るのでSEO対策に有効
この記事の内容
  • カスタムフィールドの設定方法の解説(プラグインなし)
  • プラグインを使ったカスタムフィールドの設定方法の解説
  • 細かい設定が不要な有料テーマの紹介
スポンサーリンク

wordpressでカスタムフィールドを設定する方法

初期設定ではカスタムフィールドは表示されません。

なのでカスタムフィールドを利用するための設定を行います。

クラシックエディタでカスタムフィールドを設定する場合

投稿画面右上の表示オプションをクリックします。

カスタムフィールドの設定画面

カスタムフィールドにチェックを入れます。

カスタムフィールドの設定画面

すると投稿画面の下にカスタムフィールド欄が出現します。

カスタムフィールドの設定画面

細かい設定を行いたい場合は有料テーマがおすすめです。

ブロックエディタ(gutenberg)でカスタムフィールドを設定する場合

投稿画面右上のオプションをクリックします。

カスタムフィールドの設定画面
カスタムフィールドの設定画面

設定をクリック

カスタムフィールドの設定画面

パネルを選択して、カスタムフィールドをオンにします。

カスタムフィールドの設定画面

ブロックエディタの使い方に関しては、こちらの記事で詳しく解説しています。

関連記事>>WordPressブロックエディタ(Gutenberg)の使い方 画像付き


カスタムフィールドの使い方

noindexとcanonicalの設定

noindex は、記事をインデックス登録 (検索エンジンに登録すること) しないようにクローラーに伝える仕組みのことを言います。

内容が重複する記事がある場合、Googleなどの検索エンジンからの評価が下がり、検索順位に影響が出る場合があります。

特にブログで収益化を考えている人にとっては大きな打撃となります。

そうならないためにも、インデックス登録したくない記事は noindex を設定する必要性があることを覚えておきましょう。

canonicalもSEO対策をする上では重要な仕組みで、評価してほしいパーマリンクをクローラーに伝える仕組みになります。

例えばブログを複数運営している場合、Aのブログの記事にBのブログの記事を掲載して、リダイレクト(指定のURLに飛ばす仕組み)できるようにしたとしましょう。

クローラーからすると、AとBの別々のパーマリンクが存在しているにも関わらず、同じ記事が掲載されていると判断してしまうため、どちらかのブログの評価が下がってしまいます。

それを防ぐのがcanonicalです。

どちらも設定は簡単なので、実際にやってみましょう。

先程設定したカスタムフィールドを確認します。

カスタムフィールドの設定画面

noindexを設定したい場合は数値を1に変更します。

noindexの設定画面

canonical はURLを入力します。

canonicalの設定画面

設定が完了したら更新ボタンをそれぞれクリックします。

上手くいくと一瞬黄色になります。

noindexの設定画面
⚠注意

入力内容が反映されない場合があるので、カスタムフィールドの更新ボタンを押したら、投稿編集は更新せずにそのままページを離れてください。

心配であれば、また投稿画面を確認し、数値や文字が元に戻っていないか確認しましょう。

プラグイン

Advanced Custom Fields

「フィールドグループ」の中にカスタムフィールドを作っていくプラグインです。

phpファイルに指定のコードを入力することで、投稿の項目をカスタマイズすることが出来ます。

さっそく設定しましょう。

インストール後有効化が完了したら、ダッシュボードの「カスタムフィールド」で「新規追加」を選択します。

カスタムフィールドのプラグイン
カスタムフィールドのプラグイン

タイトル名は自分が分かりやすいものであれば何でも構いません。

カスタムフィールドのプラグイン

ルールはどの記事タイプに反映させるかを決めます。

今回は「投稿タイプ」にしておきます。

主な入力項目は以下の4つです。今回はオンラインショップを仮定した情報を入力してみました。

カスタムフィールドのプラグイン
①フィールドラベル投稿編集する際のラベルになります。
②フィールド名phpファイルなどのテンプレートで呼び出す時に使われる値になります。
③フィールドタイプテキスト以外にも、画像やチェックボックスを設定することが出来ます。
④説明

投稿画面などに実際に表示されるテキストになります。

「フィールドの追加」をクリックすることで、複数の項目を増やすことが出来ます。

今回は表示方法を説明したいと思いますので、「アクティブ」が「はい」になっていることを確認したら、公開ボタンをクリックします。

カスタムフィールドのプラグイン

投稿画面を改めて確認すると、「商品情報」のラベルが出現しているのがわかります。

カスタムフィールドのプラグイン

ここに入力した内容が投稿画面に反映されます。

しかし、このままだとテンプレートファイル(○○.php)には何も記載されていないのでテキストは表示されません。

なので、該当ファイルにコードを入力します。

どのファイルかわからない場合は「What The File」というプラグインをインストールしましょう。

テンプレート検索のプラグイン

ブログの右上にアイコンが表示されます。

テンプレート検索のプラグイン

画像を見てわかる通り、トップページは「index.php」であることがわかります。

私のブログの投稿ページは、single.phpなので、FTPソフトでファイルを探します。

ffftp内のファイル
⚠注意

phpファイルを編集する際は必ずバックアップを取ってください。

ファイルに次のコードを入力します。

<?php the_field('information'); ?>

「information」は Advanced Custom Fields で設定したフィールド名です。

任意の場所に入力しましょう。

single.phpの編集画面

実際に投稿を見てみます。

カスタムフィールドの表示画像

きちんと表示されていますね。

設定を応用することでさらに表示を増やすことが出来ます。

コード一覧

フィールド名を使う時<?php the_field(‘フィールド名’); ?>
〃         (カテゴリー)<?php the_field( ‘[フィールド名]’, ‘category_[カテゴリーID]’ ); ?>
〃         (タグ) <?php the_field( ‘[フィールド名]’, ‘post_tag_[タグID]’ ); ?>
〃         (タクソノミー)<?php the_field( ‘[フィールド名]’, ‘[タクソノミー名]_[タームID]’ ); ?>
画像IDから出力する時

<?php $images=wp_get_attachment_image_src($data, ‘full’); echo ‘<img src=”‘.$images[0].'”>’; ?>

キーが不明な時<?php print_r($data); ?>

値がある時に出力

<?php if($data):
echo $data;
endif; ?>

Arrayと表示される時 任意の値を出力<?php Array echo $data[‘キー’]; ?>
複数の値を出力したい時

<?php  foreach($data as $child){ echo ‘<li>’.$child.'</li>’;

キーがある時

<?php $child[‘キー’] } ?>

配列に格納して使用

<?php  $data = get_field(‘フィールド名’); ?>


phpを詳しく学びたい方はTechAcademy [テックアカデミー]PHP/Laravelコースがおすすめです。

Custom Field Template

カスタムフィールドのプラグイン

こちらも同じような機能を持つプラグインですが、 Advanced Custom Fields と違う点は、ショートコードを使うことで任意の場所にカスタムフィールドを挿入することが出来ます。

実際に使ってみましょう。

最低限入力が必要な箇所は二か所だけです。

カスタムフィールドテンプレートオプション

カスタムフィールドのプラグイン

テンプレートタイトルは自由に決めて構いません。

カスタムフィールドについての記事なので、評価のテンプレートを作ることにしました。

カスタムフィールドのプラグイン

「type」は様々な設定が出来ます。

text一行のテキストフィールド
textarea複数行のテキストフィールド
file画像のアップロード
checkbox評価マークの挿入

一通り入力が終わったら、「オプションを更新する」をクリックします。

 cft and  cftsearch  Shortcode Format

htmlの入力、ショートコードの登録を行います。

フォーマットを自由に編集しましょう。

Custom Field Template

入力が終わったら、「PHPを使用する」にチェックを入れ、先程のように 「オプションを更新する」をクリックします。

これで設定は完了です。

投稿画面を見てみるとテンプレートが出現します。

カスタムフィールドのプラグイン

ショートコードは、〔cft format=0〕を好きな場所に挿入しましょう。

今回の設定でこのようになりました。

カスタムフィールドのプラグイン

コードを編集しなくていいのと、好きな場所にカスタムフィールドを挿入できるのはとても便利なので、私的にはCustom Field Templateがおすすめです。



以上がカスタムフィールドの解説となります。

最後までお読みいただきありがとうございました。

スポンサーリンク
スポンサーリンク
ちゃんたらブログ
ページトップに戻る
タイトルとURLをコピーしました