カテゴリー : WordPress

WordPress 3.0 カスタム投稿タイプの試用でカスタムメニューと子テーマも理解

WordPress は、3.0 になって新たに公開された豊富な機能により、利用が一段と面白くなってきた。それらの機能は、今まで築き上げたサイト構築の手法の変更を迫っているようにも感じる。制作者側は大変だろうが、今後 WordPress 3.0 ならではのサイトが出現してくると思われるので楽しみだ。

さて、WordPress で扱う記事(ページの内容)は、それまでは静的な記事は「ページ」、動的な記事は「投稿」というような使い分けが専らだったと思う。ブログとして使うのであれば、話題によりカテゴリーで分類できる。タグもキーワードとして利用できる。

では、産業界で商品や製品を分類して WordPress で扱うにはどうしたらいいだろうか?

あるいは、記事によって文や画像のレイアウトを変えて表現するにはどうしたらいいだろうか?

それぞれ自前の解決方法を構築していると思うが、新しい機能「カスタム投稿タイプ」は、上手く利用すれば今までよりも効率的に開発を進める事ができる機能、ではないかと思う。

子テーマ

実践での利用シーンは思い付いていないが、テーマに少し手を加えて使ってみたいとき、今回のように動作を試してみたい時、「これは便利だ!」と感心した。

それは、テーマに含まれているテンプレートなどのオリジナルファイルに手を加えることなく、追加したり変更したい部分だけを抽出してやればいいからである。

使い方は簡単、子テーマのディレクトリ「wp-content/themes/子テーマ名」を作成し、「style.css」のテーマ情報ヘッダ部分で、「Template」項目に親テーマ名を書き加えて保存すればよい。スタイル本体は親テーマから import する。

@charset "utf-8";
/*
Theme Name: kid2010
Description: WordPress のデフォルトテーマ twentyten の子テーマ。
Author: オレ
Template: twentyten
*/

@import url('../twentyten/style.css');

#site-title a {
	color: #009900;
}

後は管理画面の「外観-テーマ」で、子テーマを選択すればよい。ページを表示したとき変更が分かるように、タイトルを緑色にしている。

参考ページ:子テーマ

カスタム投稿タイプ

WordPress に保存される記事は、post_type としてブログの「post」以外に「page」、それらの書替え履歴となる「revision」、画像などのメディアに関する情報を持つ「attachment」、そしてカスタムメニューに関する情報を持つ「nav_menu_item」がシステムで用意されたものである。

カスタム投稿タイプは、これらに独自のタイプを追加して利用する機能である。保存できる情報は投稿やページと同様であるが、項目をタイトルと内容のみというように、極小まで絞る事ができる。

さて、実際に独自の投稿タイプを使えるようにするため、テーマの「functions.php」にフックを利用して登録する。ここで先ほどの子テーマを利用して、子テーマディレクトリに以下の登録とフック関数を「functions.php」に用意する。

<?php
add_action('init', 'mobile_custom_init');
function mobile_custom_init() {
	$labels = array(
		'name' => _x('Mobiles', 'post type general name'),
		'singular_name' => _x('Mobile', 'post type singular name'),
		'add_new' => _x('Add New', 'mobile'),
		'add_new_item' => __('Add New Mobile'),
	);

	$args = array(
		'labels' => $labels,
		'public' => true,
		'supports' => array('title', 'editor', 'author', 'thumbnail'),
		'rewrite' => array('slug' => 'mob'),
	);
	register_post_type('mobile', $args);
}
?>

「register_post_type()」によって、「mobile」という独自のタイプを追加した。管理画面を開いて左側のメニューを見ると、追加した「mobile」に関するメニューが追加される。「Add New」で記事を登録してみよう。

上のパラメータの「rewrite」であるが、この記事を表示するパーマリンクにおいて「http://example.com/mob/スラッグ名」とするための指定だ。「rewrite」の指定が無いと「タイプ名/スラッグ名」となる。

参考ページ:Custom Post Types

さて、独自タイプで入力した記事の表示である。Twentyten のテンプレートそのままでは表示できない。テーマを作る際、テンプレートにループなどいろいろ指定するが、独自タイプの記事を表示するにも同様に指定しなければならない。

そこで簡単に表示するため、メニューから表示するようにして見よう。

カスタムメニューの表示

サイト上でフレキシブルなメニュー構成が作れるため、この機能は大変ありがたい。そのメニュー構成を作るには、「管理画面-外観」でメニューを選択すればよい。

Twentyten では、「main」というメニューが1つあり、ホーム、紹介、が既に登録されている。この後ろに、独自タイプで登録した記事のタイトル「モバイルページ」を追加してみる。

メニューを選択すると、カスタム投稿で登録したページが選択できる小窓が表示されているので、追加したい記事のタイトルにあるチェックボックスをチェックして「メニューに追加」すればよい。

次にこのメニュー構成をサイトで表示するため、「header.php」を書き換える。Twentyten のディレクトリから、子ディレクトリにコピーし、73行目の「wp_nav_menu()」に「main」というメニューを使うように、「’menu’=>’main’」パラメータを追加すればよい。

	<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
	<?php wp_nav_menu( array('menu' => 'main', 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

これでメニューを設定できた。サイトを表示してメニューを選択すれば、登録したカスタム投稿の記事を表示する事ができる。

メニューのリンク URI を見ると、「rewrite」で指定したスラグが使われて「mob/スラグ名」となっているのが確認できる。

サイトにおけるメニューは、ヘッダー部やフッター部、そしてサイドバーなどあらゆるところにナビゲーションを置く事が多い。なので WordPress 3.0 のメニュー機能は、サイト構築者に大変便利な機能を提供してくれたと思う。

参考ページ:テンプレートタグ/wp_nav_menu

どの機能も簡単に試してみる事ができ、体感を得る事ができた。カスタム投稿タイプの利用は、大きな広がりがあるように思う。そして実際に利用するには、WordPress の CMS としての機能をもっと理解し、充実した作りにしないといけない事も確かであろう。

カスタムポストタイプの参考:WordPress3.0beta1でカスタム投稿タイプを具体的に使う

WordPress Ver. 3.0.1

WordPress で jQuery と UI を簡単に組み込む方法

プラグインを作っていて気が付いた事の備忘録。

プラグインで利用する jQuery と jQuery UI を利用した JavaScript ソース「test.js」がプラグインディレクトリにあるとき、「wp_enqueue_script()」を利用して次のように記述すれば、WordPress にバンドルされた jQuery の各ソースと共にHTMLヘッダ部にscriptタグで組み込まれる。

wp_enqueue_script('test-js', plugin_dir_url(__FILE__) . 'test.js', array('jquery', 'jquery-ui-core', 'jquery-ui-dialog'));

WordPress にバンドルされている JavaScript ライブラリとハンドル名の一覧は、wp_enqueue_script リファレンスに掲載されている。

WordPress インストールの際 wp-config.php に設定したいパラメータ

この内容は自分用です。

wp-setteings.php を読み込む前に設定する。

レビジョンデータによる wp_posts 肥大の抑制
define(‘WP_POST_REVISIONS’, false’);
オートセーブによる wp_posts 肥大の抑制
define(‘AUTOSAVE_INTERVAL’, 600);

オートセーブが有効だと完全には抑制できないようだ。時間を 24×60×60=86400 秒とか設定するのも手かも。

ただし、編集中に誤ってブラウザを終了させてしまったりした時など復元ができるので、利用の仕方に合わせて時間を設定するのが良いと思う。
(2.9.2)

WordPress カスタムフィールド名の先頭文字「_」の意味

カスタムフィールド名の先頭文字を「_(アンダーバー)」にして登録したところ、いつものように追加フィールドが表示されるかと思ったら表示されなかった。ん?登録できなかったのかな?と思い、もう1度登録したがやはり表示されなかった。

そこで、今度は「_」を先頭に付けないで登録したところ、追加したフィールドが表示された。確認のため wp_postmeta テーブルを見ると、先ほど登録したデータも、今登録したデータもしっかりと登録されていた。

なるほど、プラグインの制作などで利用者から隠ぺいしたい場合に利用できる訳だ。

なおカスタムフィールド名は、名前が同じであっても登録される。取得したとき配列になっているのは、そのためのようだ。

(WordPress 2.9.2)

WordPress edit.phpは迷宮のようだ

WordPress を使って企業サイトを構築しようと考えたとき、WordPress の入力エディタを利用するのは少々苦しい。例えば企業の事例紹介を考えると、画像や内容もさることながら見栄えも綺麗に整える必要があるのだが、それを WordPress のエディタだけで入力しなければならないとすると、WordPress を知るデザイナーの方しかできないように思う。

そこで、入力用の定型フォームを用意し、フォームに従った入力をするだけで事例紹介が1件追加される、ような流れにすれば誰でも使えるようになるのではないだろうか。

で、管理画面の「投稿」ナビに新しく定型フォーム用のメニューを加えて、そこから特定カテゴリの投稿を定型フォームで入力・編集しようかと考えた。投稿データの一覧やデータ入力編集は、実際に edit.php が処理しているので、真似をしようかと覗いてみたら、これがもうタイトルのごとし。一筋縄では行かない事が分かりました … orz

それでも確認した内容だけメモしておこう。

edit.php における一覧表示とページ切り替え

一覧は、「edit-post-rows.php」をインクルードして、そこから「wp-admin/includes/template.php」の「post_rows()」で行なわれる。

「post_rows()」では、「$wp_query->posts」として読み込まれたデータを使い、繰り返し「_post_row()」で表示処理する。

データの読み込まれるタイミングは、edit.php の「wp-admin/includes/post.phpのwp_edit_posts_query()」の呼び出しで行なわれる。当該関数は、edit.php の一覧画面からの特別な読み出しパラメータをセットした後、グローバルwp()関数から WP クラス(wp-includes/classes.php)の wp->main() を呼び出して、$this->query_posts() でページ指定も含めてデータを読み込むようにしている。

うーん、あっちこっちたらい回しになってる。