motoraji design のウェブサイト(つまりここ)をリリースしてしばらく経ちます。

作った時にいろいろとカスタマイズした部分や、ハマったところがあって、忘れないうちにメモしておきたかったので、まとめてみました。

内容としては、このサイトのポートフォリオ部分を構築する作業が中心です。


もくじ

長いっ!

サイトの構造

まず、サイト全体の構造を説明します。

軸となるコンテンツは「ポートフォリオ(Portfolio)」と「ブログ(Blog)」。
そして、今のところ活動準備中なので影が薄いですが、本格的に仕事を始めたら重要になる「プロフィールページ(About)」を、拡張性を考慮した形でを用意しています。

ポートフォリオ

ポートフォリオは、WordPressの「カスタム投稿タイプ」と「カスタムタクソノミー」
機能を使ってブログとの切り分けをしています。このあたりの実装が今回の最も大きなポイントでした。

ブログ

これは、標準の投稿機能をそのまま使っています。
ただし、パーマリンクを階層構造にするため、設定を変えています。

プロフィールページ

ページ機能をそのまま使っただけなので、今回はとくに解説してません。

使用テーマ

僕は、テーマをいちから作れるほどスキルがないので、既存のものを改造しています。
今回使用したのはWordPress3.0標準のTwentyTenです。

簡単に改造する場合は、デザインの近いものを選ぶのですが、今回はデザインをコーディングから丸ごと組み立てたかったのと、WordPressの各機能の使い方や関数の書き方を勉強しながら作りたかったので、このテーマを選びました。

というわけで、中身はほぼ丸ごと書き換えているため、原型をとどめていません(笑)

WordPress設定パネルの2つの設定

「フロントページの表示」

ブログっぽくなく、トップページはちゃんと固定ページにしたいので設定しました。

いきなり丸投げですがw、ここらへんを読んでもらったり、検索して調べたほうが、僕がだらだら説明するより分かりやすいと思います。

「パーマリンク設定」

このサイトは、なるべく分かりやすい階層構造になるように設定しています。

普通に設定画面から変更すればいいのですが、現時点では「カスタム投稿タイプ」の記事には、設定が反映されないようなので、Custom Post Permalinksというプラグインで別に設定してあげる必要があります。

Custom Post Permalinksは、配布終了してしまったようですが、代わりのプラグインを見つけましたので、紹介します。

Custom Post Type Permalinks

使用方法

名前はそっくりですが、日本のToro_Unitさんが開発した全く別のプラグインです。公式ディレクトリに登録もされていますし、日本の方が開発しているので、安心して利用できます。

ちなみに、このサイトでは最初は上手く動かなかったのですが、連絡したところすぐに対応していただき、無事使用できるようになりました。ありがたい!

ブログ用の設定

/blog/%category%/%post_id%/

Custom Post Permalinksの設定

/%post_type%/%post_id%/

Custom Post Type Permalinksの設定

/%post_id%/

参考:パーマリンクの使い方

あと、上のように設定した時に、ブログ記事だけでなく、カスタム投稿タイプのURLにも/blogがついて

http://motoraji.com/blog/portfolio/

という、意図したものとは違うURLになってしまう問題がありますが、次の「カスタム投稿タイプ」と「カスタムタクソノミー」の設定で解決できます。

「ポートフォリオ」の為にfunctions.phpに追加した4つのコード

カスタム投稿タイプの追加

「Portfolio」という投稿タイプを追加します。

 ‘has_archive’ => trueにすることで、http://motoraji.com/portfolio/のようなURLのアーカイブページを表示できます。

‘with_front’ => falseの部分は、前述のパーマリンク設定で書いた問題の解決策。
フォーラムで教えてもらいました。感謝!

register_post_type('portfolio', array(
	'public' => true,
	'hierarchical' => false,
	'rewrite' => array('slug' => '','with_front' => false,),
	'has_archive' => true,
	'menu_position' => 5,
	'supports' => array('title','editor','thumbnail',),
	'exclude_from_search' => false,
	'labels' => array (
		'name' => 'Portfolio',
	),
));

参考:関数リファレンス/register post type – WordPress Codex 日本語版

カスタムタクソノミーの追加

投稿タイプ「Portfolio」用のカテゴリーを追加します。

register_taxonomy(
    'portfolio_category',
    'portfolio',
    array(
        'hierarchical' => true,
        'label' => 'カテゴリー',
        'query_var' => true,
        'rewrite' => array('slug' => 'portfolio','with_front' => false,),
        'labels' => array (
	    	'name' => 'カテゴリー',
    ),
));

参考:関数リファレンス/register taxonomy – WordPress Codex 日本語版

アイキャッチ画像を使う

トップページの大きな写真や、アーカイブのサムネイルを設定するために、アイキャッチ画像を有効にします。

add_theme_support( 'post-thumbnails' );

参考:関数リファレンス/add theme support – WordPress Codex 日本語版

カスタム画像サイズの追加

いろんなサイズのサムネイルを使うので、標準では足りないものを追加。

add_image_size( 'portfolio_small', 80, 50, true );
add_image_size( 'portfolio_medium', 160, 100, true );
add_image_size( 'portfolio_large', 820, 510, true );

参考:Function Reference/add image size « WordPress Codex

ポートフォリオの作品ページをパーツごとに解説

このページは、サイトの中で一番特殊な部分なので、特に詳しくまとめておきます。
基本的な構造は、Portfoliumというテーマが近かったので参考にしています。

1.フォトパネル

「細かい説明は作品に興味を持ってくれた人しか読まない」と考えて、まずは作品の写真を見てもらえるように、大きな画像と分かりやすいUIで構成。

Portfoliumと同じ方法です。
wp_get_attachment_imageというテンプレートタグで、投稿に関連付けられた写真を取得しています。また、「アイキャッチ画像」の機能で指定した画像が、トップページやアーカイブのサムネイルで使われます。

あとはjQueryで、ギャラリー化して出来上がり。

2.作品データ

作品のデータと言っても、いろんなジャンルの作品があり、しかも「展示会」などの形のないものもあるので、上手くまとめるのが大変でした。
実際この情報を必要とする人はあまりいないと思うので、あくまでも補足として、洋服のタグのような位置づけです。

こういうメタデータ系は、WordPressだと「カスタムフィールド」という機能が最適なのですが、標準だと登録しづらいのでプラグインをいくつか試しました。
結果、標準のカスタムフィールドではないのですが、同等+αの機能を追加してくれるCustom Field Matrix(Advanced Custom Fieldsという名前に変わったのかな?)というプラグインを使っています。

標準のカスタムフィールドや入力補助プラグインと何が違うのかというと。

  • 配列形式のデータが入力できる
  • データ入力・入力欄の作成の方法が直感的で簡単
  • 入力欄の数を追加することができる

など。言葉で書いてもさっぱりかもですが、普通のカスタムフィールドだとできない(と思われる)ことが出来るので、気になる方は試してみるといいと思います。

3.作品の解説

ここは、投稿の本文をそのまま使っているので、普通のブログと同じ。
あら、素っ気ない。

まとめ

僕は、WordPressをいじっているうちにちょっと使えるようになった程度の人なので、もっと良いやり方があるのかもしれません。
とりあえず、自分のアイデアは実現できて、作品のまとめもうまくやっていけそうなので個人的には満足しています。

WordPressの「カスタム投稿タイプ」と「カスタムタクソノミー」を使うと、いろんなコンテンツをまとめて管理するCMSっぽい運用も案外簡単にできます。
同じ様なサイトを考えている方は、参考に(なるかな…)してみてください。