linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

とってだし自分用メモ「WordPress3.0の新機能とCMSへの応用」セミナー

wp.jpg

火曜/金曜担当の@cremaです。

本日は、麹町のKDDIウェブコミュニケーションズさんにて無料で行われた「8日間連続CMS無料セミナー開催」の5日目、「WordPress3.0の新機能とCMSへの応用」に参加してきました。

講師は、キャンプフォーの高山一登さん(@kaznoko)さん。実は、高山さんと私とは、講師業・書籍執筆・飲み会とあらゆる面でニアミスしてまして。「一度はお会いしたい人のひとり」リストに入っていたのですが、いまだお会いできたことがなく、今日は嬉しい初対面となりました:-)

今日の記事は、その高山さんのセミナーの箇条書きメモ(95%自分用)を、無咀嚼で置いておきます。人に読ませる前提で書いていなくて読みにくいと思うので、あらかじめごめんなさい。

高山さんのセミナーはライブコーディングが多く、実際のサイトにおけるカスタマイズの流れが掴みやすくて、ぜひまた受講してみたくなったことを申し添えておきます。

それでは、以下メモ。

WordPress3.0の特徴

  • phpとして機能する柔軟なテンプレーとタグ
  • 安全かつ簡単に拡張できるプラグインシステム
  • 画像の一括アップロード可能
  • 管理画面上で画像の回転やトリミングができ、サムネイルも独自に編集できる
  • ユーザーの役割に講じた権限システム(デフォルトではそこまで出来ないので、無料のプラグインを使用)

3.0の新機能

  • カスタムポストタイプ
  • カスタムタクソノミー
  • メニュー
  • ポストサムネール
  • カスタムヘッダー
  • カスタム背景
  • マルチサイト

ひとつめのサンプルサイト(フォトギャラリー)の実装デモ

写真の投稿について。記事内に複数の画像があっても、記事を代表する画像=「アイキャッチ画像」を設定可能(WordPress 2.9から追加)

/themes/以下に、新規テーマのディレクトリを作成。
その中に、以下3ファイルを置く。


  • screenshot.png -- テーマを識別させるための画像

  • index.php

  • style.css -- テーマ直下に置くCSS冒頭には、そのテーマに関する情報を書く。

管理画面の[設定>メディア]で、画像のトリミングなどの数値を設定。
管理画面の[設定>パーマリンク設定]で、「カスタム構造」を選択し、ファイルの生成規則を指定する。右上の「利用可能なタグは沢山あります」のリンクより、指定の詳細が確認可能。

/themes/以下に、functions.phpを置く。このテーマのシステム的な設定を記述するファイル。
add_theme_supportとadd_custom_background(コールバック関数を使い、管理画面から背景画像を変更できるようにする。)を指定。

header.phpとfooter.phpの中身を記述し、複数のテンプレート内で利用する。

<body <?php body_class(); ?>>と記述。ページによって、class属性の値を変えさせる。

トップページを生成するindex.phpに、get_header、get_footerを記述。メッセージループ(<?php if(have_post()) : while (have_posts()) : the_post(); ?>)などを記述し、投稿された記事のリストを出すようにする。
管理画面より、カスタム背景のアップロード。場所や繰り返しの指定を、管理画面より行う。

次は個別ページを生成するsingle.phpを記述。サムネイルを生成するthe_post_thumnailタグの中でrand関数を使い、CSS3のrotateの値がランダムに生成されるようにする=サムネイルがリロードされるたびに、違う角度になる。

次は、自分独自のテンプレートphotos-list.phpを作成する(複数のテンプレートで使用するモジュールとして)。
query_posts();→記事のリストアップをする際の記事の並び順やカテゴリの指定に使う。

index.phpとsingle.phpにget_template_part() を書いて、モジュールかしたテンプレートを読み込む。

ふたつめのサンプルサイト(カフェのサイト)の実装デモ

また/themes/以下に、screenshot.png、index.php、style.cssを置く。
次にfunctions.phpの中にadd_theme_support( 'post-thumbnails' ); 、
add_theme_support( 'post-thumbnails' ); 、add_custom_image_headerを記述する。

続いて、functions.php内に、カスタムポストタイプの設定。管理画面に「投稿」だけでなく、そのサイト独自の投稿画面を設置する。
※カスタムポストタイプを設定するプラグインも、昨日が少し狭いながらもあるらしい。

さらに、カスタムタクソノミーの設定。register_taxonomyを使う。hierarchialをtrueにすると階層として使える。falseにすると、タグのように使える。

function drink_meta_boxと記述して、カスタムフィールドを設定。

カスタムメニューの編集と追加デモ。カテゴリ、カスタムタクソノミー、記事など、階層構造を気にせずに、必要なものをメニューに追加可能。
【参考記事】 Wordpress 3.0 カスタムメニュー作成編集機能とwp_nav_menu() | Yama's Memorandum

次に、header.phpとfooter.phpを作成。index.phpからこのふたつを読み込む。

<?php header_image(); ?>を使って、カスタムイメージ画像を表示

query_posts('post_type=Drink');で、リストアップする記事条件を指定する。
【参考記事】スゴク便利な万能タグ「query_posts」ただし...【WordPressカスタマイズメモ】

get_post_custom_values('plice'); などと書くことによって、カスタムフィールドの値を表示。

マルチサイト機能の設定。wp-config.phpにdefine('WP_ALLOW_MULTISITE', true);を書く。次に管理画面から、マルチサイトの設定。管理画面の指示により、必要なディレクトリを作成して、書き込み権限を与える。.htaccessの設定も必要。

マルチサイト設定が上手くできると、管理画面左上に「特権管理者」というプルダウンメニューが表示される。その中の「サイト」を使って新規サイトを作成する。テーマやプラグインは、サイトごとに設定が必要。サイトごとに権限のあるユーザーを設定することができる。

マルチサイト機能は、まだちょっと安定していないので、すぐ仕事で使う感じではないかもしれない。もしかしたら、マルチサイトを使うとカスタムタクソノミーが動かなくなるかも?(未調査)

テーマとプラグイン

ECサイトを作りたい
Welcart Home ショッピングカート for Wordpress

コミュニティサイトを作りたい
BuddyPress.org | Home

リアルタイムに更新するサイトを作りたい
WordPress ? P2 ? Free WordPress Themes

多言語サイトを作りたい
WPML - The WordPress Multilingual Plugin

携帯サイトを作りたい
WordPress ? Ktai Style ? WordPress Plugins

iPhoneサイトを作りたい
WPtouch 2.0 Pro - The mobile theme solution for WordPress - optimized for iPhone, iPod Touch, Blackberry Storm, Android and More ? BraveNewCode Inc.