有料版ではここに
ウィジェットを設置可能

カスタムフィールドの設置

2019 10/24
有料版ではここに
ウィジェットを設置可能

カスタムフィールド設置するために、プラグイン「Advanced Custom Fields」を入れました。

目次

やりたいこと

  • カスタム投稿タイプによって、表示されるフィールドを切り替える。
    (→後に廃止)
  • 全ての投稿に対し、カテゴリーA・Bの選択によって表示されるフィールドを切り替える
  • 全ての投稿に対し、別のカテゴリーa・bの選択によって表示されるフィールドを切り替える

フィールドグループを作る

表示させたい内容をグループ化して置くことができます。
コンテンツごとにちまちまと設定しなくていいので楽ですね。

私は最初、投稿画面で各コンテンツを横並びで表示されるようにしたかったので、1つのフィールドのフィールドタイプを「グループ」にし、レイアウトを「表」にすることで横並びにしていました。
そして、その子フィールドの中でさらに孫フィールドを作るという入れ子入れ子状態。

しかし、これだと各フィールドに入力した値を出力する際にめんどくさいというか、なにがなんだかわからなくなってしまったのです。。

出力する時のことを考えてフィールドを作る

投稿画面での見やすさ(レイアウト)ももちろん大事ですが、出力時を考えてフィールドを組み立てていくことが大事だなと痛感しました。

各コンテンツを横並びにするには、レイアウトを「ブロック」、ラッパーの属性の「width」を設定するとこで左づめでフローされていきます。

また、ラベルの配置を「上揃え」にするか、「左揃え」にするかでもレイアウトできる幅が変わってきます。

この辺はいろいろと触ってできることを確かめながら設定していくのが良さそうです。

フィールドでのポイント・注意点 メモ

  • フィールドタイプ「select」の選択肢入力欄は、「値 : ラベル」と書く。
    この時、コロンの両端に半角スペースを入れること。
    スペースがないと、セレクト時にテキストとしてそのまま全て表示される。

タブでさらにスッキリ!

今回は使いませんでしたが、タブを使うことで、さらに使いやすくできそうです。

BLOG AND DESTROY
カスタムフィールドをタブで整理【Advanced Custom Fieldsの使い方】
カスタムフィールドをタブで整理【Advanced Custom Fieldsの使い方】WordPressでカスタムフィールドを管理するために、プラグインAdvanced Custom Fields(ACF)を使用している場合があると思います。 そのACFで、フィールドグループにカスタ...

表示させる場所は細かく設定できる

位置 > ルール > このフィールドグループを表示する条件
という箇所で、グループフィールドを表示させる場所を設定できます。

  • 全ての投稿に対し、カテゴリーA・Bの選択によって表示されるフィールドを切り替える
  • 全ての投稿に対し、別のカテゴリーa・bの選択によって表示されるフィールドを切り替える

というやりたいことに対し、本当は投稿ページにラジオボタンをつけ、その選択によって切り替えることができたらよかったのですが、やり方がわからず。

ここにあまり時間を割いていられないので、今回は選択肢カテゴリーによって表示/非表示を切り替えることにしました。

で、異なるタイプのカテゴリーグループが必要だったため、カスタムタクソノミーを追加して対応しました。

かちびと.net
複数の異なるカスタム投稿タイプに共通のカスタムタクソノミーを与える
複数の異なるカスタム投稿タイプに共通のカスタムタクソノミーを与える

出力

出力もちょっと手こずりましたが、いろんなサイトを見てなんとか。

memocarilog
WordPressのカスタムフィールドのデータ取得と表示いろいろ
WordPressのカスタムフィールドのデータ取得と表示いろいろ Wordpressのカスタムフィールドに入力したデータを取得する方法と表示する方法です。データを取得するにはいくつか方法がありますので、分かる範囲で書き出してみました。...
No Image
Advanced Custom Fieldsの使い方:全項目の説明 / 出力方法 / 活用事例などを紹介 - UPDATEWordPressのカスタムフィールドを簡単にかつ詳しく作成できるプラグイン「Advanced Custom Fields」の使い方を解説します。Advanced Custom Fieldsで扱える全項目の説明、...
KoToRi Blog【コトリブログ】
Advanced Custom Fieldsの出力
Advanced Custom Fieldsの出力『Advanced Custom Fields』の全フィールドタイプの出力コードを紹介します。コピペ用コードもあります。
ワードプレスなう!wordpressのカ...
【完全保存版】Advanced Custom Fields(アドバンスカスタムフィールド)の出力タグまとめ
【完全保存版】Advanced Custom Fields(アドバンスカスタムフィールド)の出力タグまとめACF テキストフィールド ACF テキストエリア ACF ラジオボタン ラジオボタンによる分岐 ACF 画像 ACF ファイル ここからACF PRO(有料版)です! 私も最近お金を払ってPRO...

サブフィールドの出力

フィールドタイプ「グループ」にした時の子フィールドは、サブフィールドと言うようです。

注文住宅の家づくり&雑記ブログ「...
【WordPress】Advanced Custom FieldsでGroup内のサブフィールドを取得するシンプルな方法
【WordPress】Advanced Custom FieldsでGroup内のサブフィールドを取得するシンプルな方法Advanced Custom Fieldsのフィールドタイプ「Group」を使ったときのサブフィールドの取得方法のみを掲載しているページです。

画像の出力

画像を出力させるのも混乱しました。

print_r($s_image_object); などとして、いちど画像の情報を確認?することで必要なものを引っ張ってくるようです。
(っていう認識であってるのかな??)

エス技研
Advanced Custom Fieldsの全項目解説・公開側表示編集編
Advanced Custom Fieldsの全項目解説・公開側表示編集編Advanced Custom Fieldsは現時点でカスタムフィールドを設定する最高のプラグイン。それで入力した情報を取り出す方法を全て網羅して解説しました。get_fieldで取り出す方...
THIRDPARTY
Advanced Custom Fields で画像を出力する方法
Advanced Custom Fields で画像を出力する方法画像のカスタムフィールドを作った際の備忘録 以前にWordPressのプラグイン「Advanced Custom Fields」を利用したカスタムフィールドの設定を紹介しましたが、画像の設定の...

その他の設定

NxWorld
WordPress:投稿画面のパーマリンク編集部分とクイック編集を非表示にする方法 - NxWorld
WordPress:投稿画面のパーマリンク編集部分とクイック編集を非表示にする方法 - NxWorldWordPressの投稿画面(カスタム投稿や固定ページ含む)で、パーマリンクの編集をできないようにその部分を丸々非表示にする方法です。

Gutenbergもカスタマイズできる!?

WordPress 5.0から導入されたブロックエディターGutenbergのブロックもカスタマイズできるようです。

Qiita
WordPress ブロックエディター(Gutenberg)カスタマイズあれこれ - Qiita
WordPress ブロックエディター(Gutenberg)カスタマイズあれこれ - QiitaWordPress 5.0から導入されたブロックエディター(Gutenberg)のカスタマイズ方法や、関連するオプション、新しく導入された設定について見ていきます。オフィシャルの テー...

これはACFの出力を調べている最中に見つけて、もうほとんど出来上がっていたので触れませんでしたが、もっと早い段階で知っていたらGurengergのカスタマイズをしてみたかったです!

なんか、デフォルトの設定でいろいろできそうじゃないですか。(知らんけど)
投稿画面もスッキリしそうだし。(知らんけど)

それに、今後Gutenbergのブロックカスタマイズが主流になっていきそう。

時間みつけてトライしてみたいと思います。

有料版ではここに
ウィジェットを設置可能
有料版ではここに
CTA用ウィジェットを設置可能

関連記事

コメント

コメントする

目次