WordBench東京でLT（ライトニングトーク）

普段の栄養は主に煙草で摂取しているショートホープです。

去る2/16にKDDIウェブコミュニケーションズさんのセミナールームをお借りしてWordBench東京が開催された。「カスタム３兄弟ハンズオン＆セッション」と銘打って、カスタム投稿タイプ、カスタム分類、カスタムフィールドについてハンズオン形式で実際にその場で作って確認する趣向。参加なさった皆さん、長丁場お疲れさまでした。

その際に「カスタム投稿タイプに関連したネタ」ということで事前準備なしのぶっつけ本番でLTをしたのだが、スライドも何もなく3分間クッキング形式で流れを実演しただけの内容だったのでその解説も含めて簡単にまとめる。

納品物としての管理画面

最近のWordPressのバージョンアップのペースは非常に早く、3.7が去年の10月リリース、3.8が12月リリースで、3.9は今年の4月予定と言われている。

特に今回の3.8（いま現在は既にマイナーアップデートして3.8.1）は管理画面の見た目が大きく変わったことも大きな変更点の一つ。で、見た目が変わったということは表示方法、つまりその部分のコードの記述もちょいと変わってる、ってこと…。

1.「概要」にカスタム投稿タイプの名前と件数を表示する

僕は制作会社に所属しているので、基本的に制作物はすべてクライアントさんに納品している。そしてWordPressの案件は非常に多い。その際に「管理画面をクライアントさんにわかりやすく」するために少しだけ手を加えたりしている。

具体的には「概要」にカスタム投稿タイプの項目ごとの件数を表示させる、と言うもの。ちなみにココの名前も3.7以前は「現在の状況」となっていた。これは「functions.php」にコードを追記して表示を変更している。

これがもう既に懐かしい感じの3.7.1の管理画面。こんなの

をこんな風

にしていた。

表示した項目は「カスタム投稿タイプ」で追加した「お客様の声」と「商品登録」。ここではデフォルトで出ている「カテゴリー」「タグ」「コメント」は消している。

そしてこちらが3.8以降の管理画面。

全く同じ記述をしてみたが…。

カスタム投稿タイプ自体は追加されているのに「概要」には表示されていない。そこで以下を「functions.php」に記述する。

このように記述すると「概要」にカスタム投稿の記事件数がそれぞれ表示される。

2.ここで一手間、アイコンを揃える

見ると、カスタム投稿のメニューに出ているアイコンがサイドメニューではピンのマークなのに概要ではただの◯。これも揃えておきたいので同じように「functions.php」に追記。cssを書き換えるように

と記述。そうすると

このようにピンのアイコンに統一できる。

3.あと少し、アイコンを各投稿タイプごとに変更

このアイコンは3.8からシステム純正として採用された「アイコンフォント」。「Dashicons」を参照していただければ一覧が見られる。アイコン自体もGithubから最新版をDLすることが出来る。こちらの記事が大変詳しい。

アイコンをそれぞれのカスタム投稿毎に内容をイメージできる違うものにしておけばクライアントさんも分かりやすいはず。

この例では以下のように記述している。

カスタム投稿タイプをクライアントワークで使う場合は、もちろんケースバイケースだが「お客さんが入力しやすいように」追加することが多いと思う。

WordPressに詳しくないクライアントさんでも操作しやすい、わかりやすい管理画面にしたいときにこういう表示になっていたらクライアントさんも操作しやすいかなーと思ってやってるTipsのご紹介でした。

参考記事

ダッシュボードの「概要」にカスタム投稿タイプ件数を表示する｜WordPress私的マニュアル

掲載について快諾いただきました。ありがとうございます。