WordPress初心者からの脱出!
カスタムなんとかを
ちゃんと理解する
2013.1.5
WordBench神戸 上村崇
@uemera

自己紹介
@uemera uemura
• 上村崇 ( うえむらたかし )
• フリーランスのシステムエンジニア
• プログラミングやサーバ構築を含むWebシステム
構築が主な仕事。
• 最近はFuelPHPを使っています。
• IT 業界のキャリア 10 年ちょっと
• 西宮在住

最近のオレ
XOOPS
勉強会準備
WordBench,
サーバ関係 PHPフレームワーク
JavaScript
FuelPHP、CodeIgniter
jQuery
WordPress
主に技術サポート
SoyCMS
ネットショップのメンテ
サーバインフラ Excel VBA
VPS構築 経理ソフト

本日のおしながき
カスタムと名のつく機能を整理します。
・カスタムフィールド
・カスタム投稿タイプ
・カスタムタクソノミー
・カスタムメニュー、カスタムリンク

なぜ「カスタム系機能」が必要か?
• 標準機能ではもの足りないから。
つまりカスタム○○は、
「足りないもの」を補うための機能。
• 「カスタム」というキーワードから分かる
ように、カスタム○○は自分自身が自由に
カスタマイズできる「オレオレ機能」。

つまりこういうこと。
オレオレ投稿タイプ
オレオレフィールド
オレオレタクソノミー
オレオレメニュー

カスタムフィールド

タイトル
記事
管理画面にログインして標準の記事投稿を見ると、
タイトルとブログ記事を書くところしかありません。
つまり「タイトルフィールド」と「記事フィールド」しかありません。
「カスタムフィールド」を使うと、これ以外に入力できるフィールドを増
やせます。

例: おすすめ飲食店情報のブログ
このように
お店に関する情報を入れたい。
・住所
・電話番号
・座席数
・星の数で評価

いったん、
(カスタムフィールドを使わずに)
記事投稿欄に書いてみます。
・住所
・電話番号
・座席数
・評価

カスタムフィールドを使わずに、記事投稿欄だけで
お店の情報を表示できました。
ただ記事を表示するだけならこれで問題ないです。
しかし、記事の数が増えてきた時に
・座席数の多い順に記事を並び替えて表示したい
・評価が高い順に記事を並び替えて表示したい
と思うかも知れません。
そんなときに、カスタムフィールドが役に立ちます。

カスタムフィールド機能の使い方(1)
1. 表示オプションを開きます。

カスタムフィールド機能の使い方(2)
2. 「カスタムフィールド」に
チェックをつけます。

カスタムフィールド機能の使い方(3)
3. 投稿入力画面にカスタムフィー
ルドの入力欄が出現するので、ここ
にデータを追加します。

しかし、カスタムフィールドで入力
したデータはそのままでは表示され
ません。
表示させるためには、テーマのテン
プレートファイルを改造する必要が
あります。
カスタムフィールドデータを入
れたのに表示されていない!

twentytwelveテーマフォルダの中に存在する
テンプレートファイル content.phpを編集します。
(wp-content/themes/twentytwelve/content.php)
content.phpの
the_content がある行の下に
<?php the_meta(); ?> ?>
<?php the_meta();
を追加。

カスタムフィールドに入力した値が
表示されました。

しかし、ただカスタムフィールドの値を記事に表示させるだけの使い方な
ら、カスタムフィールドをわざわざ使う必要はありません。
カスタムフィールドは
データを表示するときではなく、データを利用するときに真価を発揮しま
す。
カスタムフィールドに入力した値が
表示されました。

カスタムフィールド利用の例
デフォルトの記事の表示順は でも「 席数の降順 」
投稿日時の降順になっています。 に出るようにしたい。
記事3 (1月3日投稿)
席数 98 席数 102
アベーテ
記事2 (1月2日投稿)
席数 58 席数 98
リストランテ マキャベリ
記事1 (1月1日投稿)
席数 102 席数 58
コルティブォーノ
「投稿日付で並び替え」や「タイトルで並び替え」はカスタムフィールドを使わなくても
実現できますが、ユーザが独自に作った「席数」での並び替えはカスタムフィールドを使
わないと実現できません。

index.phpに、
席数の降順で記事を表示するためのロジックを追加します。
index.php の have_posts() の前に追加します。
meta_key: カスタムフィールドのキー
orderby: 並び替える対象。カスタムフィールドの
値を数値で比較し並び替える場合に
meta_value_num を使います。
※参考: 文字列比較する場合は meta_value で。
order: 並びかえの方向。
DESC は降順。 ASC は昇順。
詳しくは「query_posts」で検索しよう。

席数の降順で
うまく並び変わりました。

そのほか、
カスタムフィールドはこういう使い方ができます。
• 投稿において、「タイトル」のほかに例えば「サブタイトル」のよう
な、すべての記事に決まったフィールドを入力したい場合。どの記事
にも必要な追加項目がある場合はカスタムフィールドを作って入力を
忘れないようにすると便利です。
• フィールドA(数値)と、フィールドB(数値)の入力欄を用意し、
記事表示にはその計算結果(A✕B)を表示させたい場合。
• WordPressに詳しくない第三者に記事を書かせる場合、記事投稿欄
に入力するやり方よりも、 カスタムフィールドという特別な入力欄
があると記入箇所を誘導しやすいです。

カスタムフィールドを利用するためののプラグイン
プラグインを使用すれば、より表現豊かなカスタムフィールドが
作れます。
・Advanced Custom Fields
UIが使いやすい。テキストの他、セレクトボックス、チェック
ボックス、dateピッカー、カラーピッカーなどが利用可能。
・Custom Field Template
日本人作のプラグイン。設定はGUIではなくコードを書くことに
なるのでとっつきにくい。
・Custom Field GUI Utility
非公式プラグイン。iniファイルの設定が必要なのでカスタマイズが
めんどくさい。

カスタム投稿タイプ

投稿
固定ページ
WordPressでは「投稿」と「固定ページ」が標準で利用できます。
・投稿 ・・・・・ post という投稿タイプ名で管理されます。
・固定ページ・・・ page という投稿タイプ名で管理されます。
これ以外にも、ユーザが第3の投稿形式を新しく作ることができます。
それがカスタム投稿タイプです。

カスタム投稿タイプを使うと、
何が便利なのでしょう?
例: こういう使い方
投稿(標準機能) 日常のブログを書く
固定ページ(標準機能) プロフィールやお問い合わせ
カスタム投稿タイプ イタリアン食べ歩き記事を書く

カスタム投稿タイプを使わず、
カテゴリーで分ければいいじゃん?
カテゴリー
投稿 ブログ 日常のブログを書く
イタリアン食べ歩き イタリアン食べ歩き記事を書く
もちろんこれでも問題ないです。

カスタム投稿タイプだと
もっと便利な使い方ができます。
カテゴリー
投稿 今日の一言
自分の個人ブログ
オレの特技
寒いギャグ
カテゴリー カスタムフィールド
カスタム投稿タイプ 神戸 住所
イタリアン食べ歩き 大阪 席数
京都 評価
カスタム投稿タイプを利用すると、投稿を区別することができるので、
カテゴリーやカスタムフィールドも別々に管理できるメリットがあります。

カスタム投稿タイプを利用した場合のメニューは
こうなります。
投稿
固定ページ
イタリアン食べ歩きの
カスタム投稿タイプ

カスタム投稿タイプを使うと、
「イタリアン食べ歩き」専用の投稿欄ができて、そ
こに記事を書くことができます。
ただし、カスタム投稿タイプは標準では使えるよう
になっていません。
あと、「カスタム投稿タイプ」は
「カスタムポストタイプ」って言うこともあるから
注意な。

カスタム投稿タイプを使うには?
・プラグインを使う
これが手っ取り早いし簡単です。
ただし、プラグインの仕様や制限に依存します。
WordPress本体がバージョンアップしたり、プラグインが開発
中止になったら使えなくなる可能性があります。
メリットとして、使用しているテーマを変更してもプラグインの
設定をしなおす必要がありません。
・functions.phpにコードを書く
カスタム投稿タイプを使えるようにするためのphpコードを書く方法です。
上級者向けですが、
- プラグインの数をむやみに増やさなくて済む。
- 別のサイトにも同じ設定を使い回しやすい。
- WordPress本体のバージョンアップをしてもそのまま使えることが多い。
などのメリットがあります。
デメリットとして、functions.phpはテーマに依存するファイルなの
で、テーマを変更するとカスタム投稿タイプ機能が無効になります。

カスタム投稿タイプを扱えるようにするプラグイン
「Custom Post Type UI」
投稿タイプ名
italian
ラベル
「イタリアン食べ歩き」

最近注目のカスタム投稿タイプ用プラグイン「Types」
カスタム投稿タイプ名を
スラグ(URLの一部になるもの) 書きます。
を記入します。半角英数字で。 「イタリアン食べ歩き」
italian

詳しくTypesを知りたい場合はこちらで。
http://www.slideshare.net/takashihosoya/types-15307132

DBの中はどうなっているのでしょうか?
投稿データを管理するwp_postsテー ブル
を見てみます。
post_typeに投稿タイプ名が記録されています。
投稿記事は post
固定ページ記事は page
カスタム投稿タイプ記事
は italian

カスタム投稿タイプの記事の表示URL
http://xxxx.com/?post_type=italian
カスタム投稿タイプの記事は、トップページURLの後ろに
?post_type=xxxx を付けることで表示できます。
ただし、例えばTypesプラグインだと、カスタム投稿タイプの設
定で
「custom post typeでインデックスページを作成する」
オプションを有効にしておく必要があります。
また、このURLへのリンクはメニューやサイドバーから自動的に
張られる訳ではないので、必要であればメニューからのリンクも
自分で作成しなくてはなりません。

カスタム投稿タイプが利用できるページ
カスタム投稿タイプを作成しても、自動的にカテゴリページや月ごとのアーカイブペー
ジが用意されないので、必要な場合はテンプレートファイルを自作する必要がありま
す。
カスタム投稿タイプ作成時に、すぐに利用できるページ
カスタム投稿
投稿
タイプ
indexページ ○ ○
カテゴリページ ○ ☓(要自作)
月ごとアーカイブページ ○ ☓(要自作)
シングルページ ○ ○

<参考>functions.phpにコードを書いて
カスタム投稿タイプを実装する場合
・カスタム投稿タイプ＆カスタムフィールドを使ってみる webstudio AWD
http://awd-­‐web.com/blog/1805
・カスタム投稿タイプとカスタムタクソノミーをプラグインを使わずに実現する
¦ yusk
http://www.yusk.org/memo/wp/custom-post-type_custom-taxonomy.html

カスタムタクソノミー

タクソノミー
taxonomy = 分類
よって「カスタムタクソノミー」は
「カスタム分類」とも言います。

カスタムタクソノミーは
カスタム投稿タイプとセットで使います。
カスタムタクソノミーで「カテゴリ機能」を実装できます。
カスタム投稿タイプ カスタムタクソノミー
イタリアン食べ歩き 神戸のイタリアン
大阪のイタリアン
京都のイタリアン
カスタム投稿タイプを作っただけでは、記事にカテゴリを設定することは
できません。
そういうわけで、「カスタムタクソノミー」を使ってカテゴリ機能を作ります。

じゃあなんで
「カスタムカテゴリー」て言わないの?
カスタムタクソノミーは「カテゴリー」の他に、「タグ」も付けられるので、
タクソノミー(=分類)という抽象的な表現をしているのだと思います。
投稿 カスタム投稿タイプ
カスタムタクソノミー
カテゴリ機能
・カテゴリ機能
タグ機能 ・タグ機能

カスタムタクソノミーを使う(1)
カスタム投稿タイプを作っただけでは、
カテゴリブロックは表示されていません。

カスタムタクソノミーを使う(2)
ここでは例として、プラグイン「Types」を使用します。
Typesはカスタム投稿タイプだけでなく、
カスタムタクソノミー、カスタムフィールドの設定もあわせて
行うことができます。
Typesの Custom Types及びTaxonomy で
「イタリアン食べ歩き」のポストタイプ編集を開きます。
Taxonomy選択で、「カテゴリー」にチェッ
クして保存します。

カスタムタクソノミーを使う(3)
「イタリアン食べ歩き」のカスタム投稿タイプの
記事編集画面にカテゴリーのブロックが出現しました!

カスタムタクソノミーを使う(4)
ちなみに、Typesの設定画面で、「タグ」にチェック
いれた場合は...

カスタムタクソノミーを使う(5)
「イタリアン食べ歩き」のカスタム投稿タイプ編集
画面にタグのブロックが出現しました!

カスタムメニュー
カスタムリンク

カスタムメニューとは
タイトルの下に表示されているメニューを自分の思
い通りに変更できる機能です。
デフォルトでは、ホームと固定ページへのリンクが
表示されています。
その方法は? →

カスタムメニューの作成 (1)
メニュー
まず、カスタムメニューに名前をつけます。

カスタムメニューの作成 (2)
「カスタムリンク」
「固定ページ」
「カテゴリー」
を自分のすきなようにメニューに追加で
きます。

カスタムメニューの作成 (3)
最後に、メインメニューを先ほど作成した
「メニューテスト1」に設定して保存します。

カスタムメニューの作成 (4)
自分でカスタマイズしたメニューが
表示されました。

ちなみに、
カスタムメニューはサイドバーに表示することもできます。
ここに表示することもできます。
その方法は? →

カスタムメニューをサイドバーに表示する方法
1. ウィジェット
2. カスタムメニューをサイドバーへ
ドラッグします。
3. 表示するメニューを選択します。
以上でカスタムメニューをサイドバーに表示できます。

まとめ
・カスタム○○は標準では足りない機能を補うためのもの。
カスタム○○を知らないと死ぬ、というわけではありません。
「WordPressをより便利に使えるようになる」ということです。
・カスタム○○を知っていると、
「WordPressを使いこなしている」感を得られる。
「標準機能より一歩進んだ使い方ができるオレかっこいい」的な。
・「ブログとしてのWordPress」から、
「CMSとしてのWordPress」にレベルアップできる。
カスタム○○はブログというよりCMS的な機能拡張です。

ありがとうございました。