カスタム投稿の中のカスタムフィールドを管理画面内の一覧表示に吐き出してみる

ワードプレスデフォルトの管理画面内記事一覧表示にカラム追加

ここの項目を変えたい！そんなお話です。

カスタム投稿＆カスタムフィールドはだいたいプラグインを使ってしまいます。

まず、
カスタム投稿ってなんだ？カスタムフィールドってなんだ？
という方に簡単な説明を。

カスタム投稿とは

ワードプレスをいじったことがある方であればわかると思いますが、ワードプレスは「固定ページ」と「投稿ページ」に分かれていますね。
基本的にはこの2つを使い分けてサイト構築をしていくと思います。

一般的なワードプレスサイト構築の場合、日々更新していくインフォメーションとかは「投稿」。
対してあまり変わらない「会社概要」みたいなものは「固定ページ」みたいなイメージでしょうか。
最近ではワードプレスの公式テーマではなく、配布されているテーマをインストールすると初期状態で「お知らせ」みたいな投稿画面が付いているテーマもあります。

これがカスタム投稿です。
「投稿」とは別軸で更新できるコンテンツを作ってあげることになります。

「Custom Post Type UI」を使って独自の投稿軸を作る

だいたい使うのは「Custom Post Type UI（CPT UI）」というプラグインですね。
プラグインの使い方に関しては説明を省きますが、使い方を大変丁寧に説明してくれているブログがいっぱいあるのでご安心ください。

参考1：https://techacademy.jp/magazine/4532
参考2：http://kotori-blog.com/wordpress/custom_post_type_ui/

で新たに「今日の朝食」という投稿軸を追加してみます。
すると新たにダッシュボードの左メニューに「今日の朝食（スラッグ：breakfast）」という項目が追加されます。
※わかりやすいようにタクソノミーとかカテゴリはつけていません。

で幾つか更新してみるとこうなります。

独自の記入欄・カスタムフィールドを設置

カスタムフィールドというのは、投稿画面に独自の値を入れる部分ですね。
通常投稿画面は「タイトル」と「本文」が記入できるスペース、それに加えて「カテゴリー」や「タグ」「アイキャッチ」を設定できますね。

ここにさらに独自に必要な値を入れるスペースを作ってあげる。

「Advanced Custom Fields」を使ってカスタムフィールドを作る

カスタムフィールドを作るのもプラグインを使っています。
カスタム投稿もカスタムフィールドも特にプラグインを使わずにfunction.phpへの記述で対応できますが、プラグインは極力使わない私もここの設定に関しては使いやすさの観点からプラグインを利用しています。
Advanced Custom Fieldsの使い方も検索すれば山のように使い方が出てくる・大変有名なプラグインですね。

さて、早速作ってみましょう。
先ほどカスタム投稿で作った「今日の朝食」に「場所（フィールド名：shop）」というカスタムフィールドを追加します。

で、追加すると

のように投稿画面に新たに「場所」を入力するスペースが生まれます。
※実際の記事への出力コードもここでは省略。

一旦すでに追加してある「今日の朝食」にそれぞれ「場所」を入力。
ただ、入力したからといって一覧画面に変化があるわけではありません。

で、ここからが本題。
一覧画面に今それぞれの記事に入力した「場所」の値を出力したい。
ここではいじるのはfunction.phpです。

function.phpにカスタムフィールドの値を一覧のカラムへ追加する記述

ここで、たまに記述の仕方を間違えるとワードプレスが真っ白になってしまう大変怖い「function.php」に追記します。
私はfunction.phpをいじる際は必ずバックアップをとります。

カスタム投稿タイプ：今日の朝食（スラッグ：breakfast）

カスタムフィールド：場所（フィールド名：shop）

の場合の記述

すると、無事に一覧表示にカスタムフィールドの値が表示され、大変見やすくなっちゃいます。

ボリュームの大きいホームページになればなるほど管理が大変

どんどんホームページが成長していくと、どうしてもぶつかる記事の管理という問題。
今回の方法で少しでも管理がしやすくなれば幸いです！

当然通常の投稿や固定ページにも応用できるやり方ですのでご自身のホームページに合わせてうまく利用してください。

Tweet