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

WordPressにはタイトルや本文以外に、任意のフィールドを設定して情報を追加する機能があります。

これが、「カスタムフィールド」です。

カスタムフィールドはWordPressのデフォルト機能とプラグインのどちらを使用することで、機能を追加することができます。

この記事では、デフォルト機能とプラグインを使ったカスタムフィールドの使い方について解説をします。

カスタムフィールドの概要

カスタムフィールドは、WordPressに標準装備されている編集機能の一つです。

ウェブサイトの特定の部分だけを編集するためのフィールドをテンプレートファイルに作成し、投稿ページのカスタムフィールド枠で名前(キー)と値を設定することで、表示することができます。

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

カスタムフィールドは、投稿ページや固定ページなどで特定のテンプレートデザインを使いまわしたいときに使用します。

使用用途は、主にショッピングサイトの「商品名」や「価格」、商品の詳細など決まった項目の入力のデータを扱うときに、データを扱いやすいようにするために利用します。

カスタムフィールドを使うメリット

カスタムフィールド使うメリットは、デザインの崩れる心配のないことです。

固定ページや投稿ページごとに入力データを差し込んでいくと、ふとミスでデザインが崩れることもあります。

WordPressのCMS機能を利用したカスタムフィールドを使うと、完全なデザインテンプレートが完成するため、コーディングの間違いにより崩れなどが発生することがなくなります。

また、カスタムフィールド内に入力したデータは、文字列ではなくデータとして処理されるため、昇順や降順といった並び替えや抽出といったことができるようにもなります。

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

WordPressのデフォルト機能を利用したカスタムフィールドの設置は、非常に簡単です。

投稿ページや固定ページの下部にある「カスタムフィールド」の「名前」と「値」を入力して保存します。

その後、テンプレートファイルにカスタムフィールドを設置するためのPHPタグを記述します。

カスタムテンプレートを取得する関数には、get_post_meta()を使用します。

入力例

<?php echo get_post_meta($post -> ID(),'key',true); ?>

get_post_meta()には、3つのパラメータがあり、左からカスタムフィールドで取得したいIDを入力し、名前の項目に入力したキー、文字列を返す「true」を記述します。

get_post_meta()は情報を取得してくる関数で、投稿のキーに関する文字列を取得してくれます。

get_post_meta()は取得の関数であるため、これ単体ではWebページでは表示できないため、get_post_meta()の前にechoを記述して、ウェブサイトに取得した文字列を出力するように命令しています。

カスタムフィールで画像などを挿入したい場合は、デフォルトのカスタムフィールドで対応することができません。

そういった高機能なカスタムフィールを使いたい場合は、プラグインを使用して表示を制御します。

プラグインを使った設置方法

カスタムフィールドを利用できるプラグインは数多くありますが、ここでは「custom field suite」について紹介をします。

WordPressにインストールしていない人は、管理画面のプラグインから「custom field suite」と入力して、プラグインをインストールしてください。

custom field suiteをインストールすると管理画面の「設定」にcustom field suiteが表示されます。

新規追加から「グループの名前」を入力し、名前=キーとラベル=タイトル名を入力し、フィールドタイプを選択します。

このフィールドタイプの選択で、画像などさまざまなカスタムフィールを作れるようになります。

カスタムフィールドのキーなどを作成した後は、作成したカスタムフィールドを投稿ページなどに割り当てを行います。

個別ページごとに設定するには、page-{slug}.phpなどの固定ページのPHPに

/*
Template name:名前
*/

とページの上部に入力し、更新をクリックします。

その後、固定ページのページ属性のテンプレートに表示される「Template name」を選択し、再度プラグインで固定ページのテンプレートを適応します。

固定ページに「値」を入力し、最後にPHPのテンプレートファイルにカスタムフィールドを出力するための関数を入力します。

入力例

<?php echo CFS()->get('key’); ?>

こうすることで、リッチなカスタムフィールドを任意の場所に挿入することができるようになります。