最近wordpressにてサイトを構築中なのだが、改めて使ってみると結構便利でホームページの管理システム(CMS)としての機能が十分備わっているツールだと再確認。

最近のweb構築に関して言うと、運営や管理が楽に出来ないと、それだけに時間を費やしてしまいがち。肝心の中身をどんどん更新していかないといけないのに、あるページを追加しようとするとデザインを考えたり、リンク先を考えたり、アクセス解析を仕込んだりと結構大変。仕事でサイト管理を外注してたりすると、お金まで取られる始末。しかもメールやりとりでの確認作業とかどうしてもスピードが犠牲になる。じゃあ更新の楽なブログを使えって話ですが、ブログっぽい見せ方は個性が出せず、なんかイヤだ。

そういう時はカスタマイズという手があります。要は、ブログのようなレイアウトじゃなくて、普通のホームページのような感じに見せることが出来ます。けど、更新はブログの管理画面で。つまりブログを更新する感覚でそのサイトを更新できる感じです。

例えばこんなサイトとかが例です。
FREEPAPER [f-dex:エフデックス]

フリーペーパーのサイトですが、全てwordpressにて構築されています。ブログ・・・じゃないですよね。ここまでいくと。

こういうサイトを構築するためにはwordpressのテンプレートのカスタマイズが必要です。wordpressのテンプレートとはすなわちtheme(テーマ)の事です。

と言う事で、現在自分も構築していると言う事でメモ代わりにこれから書いていくことにします。

WordPressのテーマの仕組み

wordpressのテーマは管理画面でワンクリックで変更、再構築もいらないという優れものですが、まずその中身はこんな感じでできています。

第一階層のphpファイルがテンプレートファイルです。第二階層でいくつか順番に並んでいるのは、もし第一階層のファイルがない場合、第二階層のテンプレートファイルが上から優先順位順で適用されると言う意味です。index.phpというのが最終的には適用されるので、災厄index.phpとスタイルシートさえあればwordpressのテーマを作る事ができます。

ページテンプレート

wp-content/themes/hogehoge
├ home.php  [トップページのみ]
│ └ index.php  [共通テンプレート]
│
├ single.php  [シングルページ　URL：/?p=記事のID]
│ └ index.php  [共通テンプレート]
│
├ page.php  [ページテンプレート　URL：/?page=記事のID]
│ └ index.php  [共通テンプレート]
│
├ category-num.php  [カテゴリページ(numはカテゴリID)　URL：/?cat=カテゴリのID]
│ ├category.php [共通カテゴリページ]
│ ├archive.php [アーカイブページ]
│ └ index.php  [共通テンプレート]
│
├ date.php  [カテゴリページ(numはカテゴリID)　URL：/?m=200812]
│ ├archive.php [アーカイブページ]
│ └ index.php  [共通テンプレート]
│
├ tag-slug.php  [タグテンプレート(slugはタグスラッグ)　URL：/?tag=タグスラッグ]
│ ├tag.php [共通タグページ]
│ ├archive.php [アーカイブページ]
│ └ index.php  [共通テンプレート]
│
├ author.php  [ユーザーテンプレート　URL：/?author=ユーザーID]
│ ├archive.php [アーカイブページ]
│ └ index.php  [共通テンプレート]
│
├ search.php  [検索結果テンプレート　URL：/?s=検索キーワード]
│ └ index.php  [共通テンプレート]
│
├ taxonomy.php  [タクソノミーテンプレート　URL：/?taxonomy=タクソノミースラッグ&タームスラッグ]
│ └ index.php  [共通テンプレート]
│
├ 404.php  [404テンプレート]
│ └ index.php  [共通テンプレート]
│
├ images/ 【名称は自由、画像はここでなくても良い】
│
├ screenshot.png 【テーマのサムネイル画像。管理画面で表示される。w300 h225が適当】
│
└ style.css  [スタイルシート]

これらページテンプレート全てに共通で使う部分などがあります。例えばヘッダー・フッターなどです。そういうのはパーツテンプレートとして呼び出すことが可能です。またfunction.phpには様々な関数を記述しておき、それらを使いたいときに呼び出すことの出来るテンプレートです。あらかじめテーマで用意されているパーツテンプレートは以下の通り。

パーツテンプレート

wp-content/themes/hogehoge
├ header.php  [<?php get_header();?>で呼び出す]
│
├ footer.php  [<?php get_footer();?>で呼び出す]
│
├ sidebar.php  [<?php get_sidebar();?>で呼び出す]
│
├ comments.php  [<?php comments_template();?>で呼び出す]
│
├ function.php  [特に記述しなくても読み込まれているので適宜関数名指定で呼び出す]
│
└ ***.php  [<?php include(TEMPLATEPATH.'/***.php');?>で呼び出す]

このような仕組みでテーマが仕上がっています。function.phpでは管理画面上でサイドバー要素を自由に入れ替えたり順序を変えたりしたりすることの出来るダイナミックサイドバーを使用するためにregister_sidebar();という関数を記述したりします。詳しくは後ほど。

スタイルシート

スタイルシートでは文頭に以下のようなのをコメントアウトで表記すると、テーマとして認識されます。

/*
Theme Name: テーマ名
Theme URI: 配布先URL
Description: ディスクリプション
Version: バージョン
Author: 著作者名
Author URI: 著作者のHPのURL
*/

そしてscreenshot.pngという画像ファイルを入れると、テーマのサムネイル画像として管理画面で表示されます。横幅300px 縦幅225pxが適当です。

基本、構造はこんなところです。じゃあ、次は実際にindex.phpを作成してページの基本となるデザインを決めて、header.php、footer.phpなどを切り分けて表示できるようにカスタマイズしてみます。

今日はここまで！