@uemera

WordPress初心者からの脱出!

カスタムなんとかをちゃんと理解する

2013.1.5WordBench神戸 上村崇

自己紹介

• 上村崇 ( うえむらたかし ) • フリーランスのシステムエンジニア• プログラミングやサーバ構築を含むWebシステム構築が主な仕事。

• 最近はFuelPHPを使っています。• IT 業界のキャリア 10 年ちょっと• 西宮在住

@uemera uemura

XOOPS勉強会準備

JavaScript

WordPress

サーバインフラ Excel VBA

SoyCMS

PHPフレームワークFuelPHP、CodeIgniter

最近のオレ

VPS構築

jQuery

主に技術サポート

WordBench, サーバ関係

ネットショップのメンテ経理ソフト

本日のおしながき

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

なぜ「カスタム系機能」が必要か?

• 標準機能ではもの足りないから。つまりカスタム○○は、「足りないもの」を補うための機能。

• 「カスタム」というキーワードから分かるように、カスタム○○は自分自身が自由にカスタマイズできる「オレオレ機能」。

つまりこういうこと。

オレオレ投稿タイプ

オレオレフィールド

オレオレタクソノミー

オレオレメニュー

カスタムフィールド

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

タイトル

記事

例: おすすめ飲食店情報のブログ

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

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

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

カスタムフィールド機能の使い方(1)

1. 表示オプションを開きます。

2. 「カスタムフィールド」にチェックをつけます。

カスタムフィールド機能の使い方(2)

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

カスタムフィールド機能の使い方(3)

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

カスタムフィールドデータを入れたのに表示されていない!

content.phpのthe_content がある行の下に

<?php the_meta(); ?>を追加。

twentytwelveテーマフォルダの中に存在するテンプレートファイル content.phpを編集します。(wp-content/themes/twentytwelve/content.php)

<?php the_meta(); ?>

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

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

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

記事3 (1月3日投稿)アベーテ 席数 98

記事2 (1月2日投稿)リストランテ マキャベリ 席数 58

記事1 (1月1日投稿)コルティブォーノ 席数 102

デフォルトの記事の表示順は投稿日時の降順になっています。

席数 102

席数 98

席数 58

でも「 席数の降順 」に出るようにしたい。

「投稿日付で並び替え」や「タイトルで並び替え」はカスタムフィールドを使わなくても実現できますが、ユーザが独自に作った「席数」での並び替えはカスタムフィールドを使わないと実現できません。

カスタムフィールド利用の例

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

index.phpに、席数の降順で記事を表示するためのロジックを追加します。

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

そのほか、カスタムフィールドはこういう使い方ができます。

• 投稿において、「タイトル」のほかに例えば「サブタイトル」のような、すべての記事に決まったフィールドを入力したい場合。どの記事にも必要な追加項目がある場合はカスタムフィールドを作って入力を忘れないようにすると便利です。

• フィールド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)

Typesの”Custom Types及びTaxonomy”で「イタリアン食べ歩き」のポストタイプ編集を開きます。

Taxonomy選択で、「カテゴリー」にチェックして保存します。

ここでは例として、プラグイン「Types」を使用します。Typesはカスタム投稿タイプだけでなく、カスタムタクソノミー、カスタムフィールドの設定もあわせて行うことができます。

カスタムタクソノミーを使う(2)

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

カスタムタクソノミーを使う(3)

ちなみに、Typesの設定画面で、「タグ」にチェックいれた場合は...

カスタムタクソノミーを使う(4)

「イタリアン食べ歩き」のカスタム投稿タイプ編集画面にタグのブロックが出現しました!

カスタムタクソノミーを使う(5)

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

カスタムメニューとはタイトルの下に表示されているメニューを自分の思い通りに変更できる機能です。

デフォルトでは、ホームと固定ページへのリンクが表示されています。

その方法は? →

カスタムメニューの作成 (1)

メニュー

まず、カスタムメニューに名前をつけます。

カスタムメニューの作成 (2)

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

カスタムメニューの作成 (3)

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

自分でカスタマイズしたメニューが表示されました。

カスタムメニューの作成 (4)

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

ここに表示することもできます。

その方法は? →

2. カスタムメニューをサイドバーへドラッグします。

カスタムメニューをサイドバーに表示する方法

1. ウィジェット

3. 表示するメニューを選択します。

以上でカスタムメニューをサイドバーに表示できます。

まとめ

・カスタム○○は標準では足りない機能を補うためのもの。　カスタム○○を知らないと死ぬ、というわけではありません。　「WordPressをより便利に使えるようになる」ということです。

・カスタム○○を知っていると、　「WordPressを使いこなしている」感を得られる。　「標準機能より一歩進んだ使い方ができるオレかっこいい」的な。

・「ブログとしてのWordPress」から、　「CMSとしてのWordPress」にレベルアップできる。　カスタム○○はブログというよりCMS的な機能拡張です。

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