どうもnakattyです。
WordPressで記事を書いている時にタイトルと本文以外にも入力項目が欲しいと思うことはないでしょうか。
私はあります！！
本業の方でお店をインタビューしてそれを記事にしているのですが、お店の概要とかの部分を簡単に入力項目としてできないかなと思っていました。
そこで便利な機能を見つけたのですが、それが「カスタムフィールド」という機能です。
項目の追加となると難しそうなイメージですがプラグインで簡単に実装できるので、その方法をご紹介しようと思います。
カスタムフィールドとは
WordPressの「投稿」で記事を作成する時、画面には「タイトル」と「本文」があると思います。
カスタムフィールドとは、なんとここに更に自分のオリジナルの入力項目を追加できる機能のことなんです。
プラグインを使う
カスタムフィールドはWordPressに標準で備わっているのですが文字しか入力できないので、画像とか色々使いたい場合は、プラグインを使った方が色々と便利です。
なので今回はプラグインを使ったやり方をご紹介します。
プラグインをインストールする
まずはプラグイン「Advanced Custom Fields」をインストールします。
WordPressのダッシュボードにある「プラグイン」項目の「新規追加」をクリック。
プラグインの検索バーに「Advanced Custom Fields」と入力して検索をしてください。
インストールが完了し「有効化」をするとダッシュボードメニューに「カスタムフィールド」という項目が追加されています。
「カスタムフィールド」という項目が追加されていればインストールはバッチリです！
single.phpをコピーする
カスタムフィールドを表示させる様の投稿ページのテンプレートを作ろうと思います。
FFFTP等のソフトを使って、使っているテーマの親テーマから「single.php」をダウンロードします。
ダウンロードした「single.php」は「single-○○.php」など、わかりやすい様に名前を変えておくと良いと思います。
この後、single-○○.phpをFFFTPソフトを使って、使用中のテーマにアップロードするのですが、その前にカスタムフィールド用のテンプレートとわかる様にテンプレートに名前をつけようと思います。
single-○○.phpファイルを開き、一番上に↓の画像の様に書き込みをします。
|
1 2 3 4 5 6 |
<?php /* * Template Name: テンプレート名 * Template Post Type: post//使用するポストタイプ */ ?> |
Template Nameにはテンプレートの名前をつけてください。
Template Post Typeは投稿で使いたい場合は「post」、固定ページで使いたい場合は「page」を入力。
テンプレート名をつけたらFFFTPソフトを使ってテーマ内にアップロードします。
アップロードできたら↓のような感じになっています。
フィールドグループを作る
WordPressのダッシュボードメニューにある「カスタムフィールド」から「フィールドグループ」を選択します。
「新規追加」をクリックしてフィールドグループを作って行きます。
タイトル部分はわかり易いようにつけてください。
「+フィールドを追加」をクリックするとフィールド登録用の項目が出てきます。
| フィールドラベル | 編集画面で表示される。 |
|---|---|
| フィールド名 | 半角英数のみ使用可能。フィールドの値を出力する時に使用する。 |
| フィールドタイプ | テキストや画像、URL等、フィールドのタイプを指定できる。 |
フィールドタイプは色んな種類があり、色々と試してみてください。
私はインタビューしたお店の概要をカスタムフィールドで表示したかったので、以下の様に設定しました。
これをFFFTPソフトでアップロードしたテンプレートで使える様に表示させるテンプレートを指定します。
「+フィールドを追加」項目から少し下にスクロールすると「位置」の項目がありますのでここで↓の画像の様に指定します。
これで保存すればフィールドグループの作成は完了です。
テンプレートファイルにコードを追記する
先ほどアップロードしたテーマに、カスタムフィールドを出力させるためのコードを貼り付けます。
アップロードした「single-○○.php（私の場合はsingle-interview.phpです）」を開き、表示したい場所に以下の様なコードを記入していきます。
|
1 |
<?php the_field('フィールド名'); ?> |
今回はお店の概要を表示したかったので下の様な感じで表にしてみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table> <caption><?php the_field('name'); ?>さん店舗情報</caption> <tr> <th>どんなお店</th> <td><?php the_field('contents'); ?></td> </tr> <tr> <th>住所</th> <td><?php the_field('address'); ?></td> </tr> <tr> <th>営業時間</th> <td><?php the_field('open'); ?>〜<?php the_field('close'); ?></td> </tr> </table> |
これでテンプレートファイルへの書き込みはバッチリです。
投稿ページで使う
ここまでで、おそらく上手く表示されると思います。
「投稿」→「新規追加」で新しく投稿します。
投稿ページの右側の項目にある「ページ属性」の項目から、追加したテンプレートを選択します。
すると、本文の入力項目の下の方にカスタムフィールドが表示されてると思います。
この項目を入力していくと実際に表示される場所では↓の様になってます。
本文の上の方に表示されてます。
まとめ
なんとかカスタムフィールドを表示させることができました。
後はHTMLとCSSを駆使して、デザイン面を整えていけば、結構良い感じになりそうです。