カスタムフィールド機能。今回はカスタムフィールドの基礎からプラグインを使わずに設定する場合とプラグインを使って設定する場合の2種類をご紹介。通じるところもありますので、「カスタムフィールド」しっかり使いこなしたいですね。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。標準で用意されている編集機能の一つ。項目があるとコンテンツを管理しやすそう。以下にカスタムフィールドがある時とない時をイメージしやすくするために図で比較。状態ではオフになっています。標準で用意されている設定方法を使うパターンとプラグインを使うパターンの2種類。今回は両方のパターンでカスタムフィールドを使ってみたいと思います。カスタムフィールドを使うメリット決まった項目の入力データが扱いやすくなるスタイル(CSS)を管理しやすくなる入力データを値として扱えるようになる。その結果、演算やマッピング、グラフ化などデータの表現性が上がる。商品の情報を管理する場合、入力項目は一定。入力が必要な項目を予め用意することで、データ入力のストレスを大幅に低減できることでしょう。感覚的には「入力のテンプレート」といった感じ。設定することができるから。入力と同時にあらかじめ設定されたスタイルが自動的に適用されます。設定する作業に比べると大幅に簡単化されるでしょう。プログラム処理が可能になります。位置情報を自動的に記事内でマップ表現することが可能に。「Googleマップの埋め込みコード貼付け」に比べると手間が省略できる且つコードミスを防げます。この他にもカスタムフィールドの入力値をグラフ化したり演算処理したりと、データの表現方法は一気に広がると思います。「入力忘れを防げる」は、新規投稿画面で絶対入力が必要な項目をカスタムフィールド設定することで、入力ミスを防げます。本文の項目にテンプレートをコピペしてから文章を編集している場合などは、有効となってくるでしょう。カスタムフィールドの表示設定それではここから実際にカスタムフィールドを使えるよう設定手順をご紹介していきます。動画とテキストを参考にしながら作業を進めてみてください。管理画面に入って、左サイドバーの「投稿」を左クリック。今度は右側のメニューボタンを左クリック。下に表示されている「オプション」を左クリックします。画像クリックで拡大するとオプションメニューが開きますので、一番下の「カスタムフィールド」を左クリック。画像クリックで拡大カスタムフィールドを左クリックすると自動的にページが更新されて、カスタムフィールド欄が登場してきます。バリューを意味し、数字や文字を入力。入力が終わったら「カスタムフィールドを追加」ボタンを左クリック。画像クリックで拡大そして入力した内容が、カスタムフィールドとして追加されます。すると先ほど同様、名前と値の入力が求められますので、必要事項を入力して追加しておきます。画像クリックで拡大カスタムフィールドの設定が完了したら、記事の「公開するボタン」をクリック。表示画面に出力されるカスタムフィールド値の順番とはなりません。ファイルで設定するため。これについては後述説明していきます。残念ながらこれだけの作業では、カスタムフィールドの値をページに表示することができません。カスタムフィールドの値を画面に表示するためには、テンプレートファイルを編集する必要が。試しに日付データを削除して、代わりにカスタムフィールドの値を表示させたいと思います。用いていますが、いったいテンプレートファイルのどこを編集すればいいのか検討がつきませんね。効率よく作業したいもの。今回はブラウザのデベロッパーツールを使って変更したい場所のクラス名を取得。6件の該当がありました(上図参照)。編集すればカスタムフィールドが表示されるか、一度プログラムファイルに文字を入力してチェックしてみます。すると見事お目当てとする所で、文字を表示することができました。?>上記のようにプログラムを追加してブラウザを更新してみると、見事カスタムフィールドに入力した値が表示されました。配列形式でデータを扱うように。表示される”投稿”とこれから扱おうとしているカスタムフィールド値をもつ"投稿”を照合。単一の文字列として値を返してもらえます。