Re:Creator’s Kansai

こんにちは、TRANSのあらたです。

さて、今回からWordPress as CMSということで、どんなコードでWPをCMSっぽく使うのかについて書いていきたいと思います。第1回目はいきなり英語ブログのエントリー紹介から始めます。

エントリーは、みんな大好きWebDesign WallからBuilding Custom WordPress Themeです。

Building Custom WordPress Theme

1. WordPressのデフォルトテーマの構造がどのようになっているのかをよく観察する（ヘッダー、記事タイトル、サイト内検索など）。
2. デフォルトテーマで基本的なことが分かったらPhotoshopでモックアップを作る。
3. モックアップをベースに各ページごとに静的なHTMLとCSSを作る。
4. デフォルトテーマのフォルダをよく見てみて、WordPressのテーマがどのように動作しているのかを分析する（テンプレート入門やテンプレート階層を参考のこと）。
5. 作ったHTMLとCSSが入ったフォルダをwp-content/themesにコピーする。デフォルトテーマのフォルダのcomments.phpとsearchform.phpも一緒にコピーする。
6. デフォルトテーマのCSSファイルのコメント部分（冒頭の9行ほど）を新しいテーマのCSSファイルにコピーする。
7. HTMLファイルをいくつかのPHPファイル（header.php、sidebar.php、footer.php）に分割する。
8. HTMLのヘッダー部分をheader.phpとして保存し、デフォルトテーマを参考にしながら、title要素やmeta要素、グローバルナビなどをテンプレートタグに置き換える。
9. HTMLのサイドバー部分をsidebar.phpとして保存する。カテゴリやサイト内検索、アーカイブなどをテンプレートタグに置き換える。
10. HTMLのフッター部分をfooter.phpとして保存し、必要に応じてテンプレートタグに置き換える。
11. HTMLファイルの残り部分はコンテンツのみになったので、get_headerなどで各PHPファイルを読み込ませ、構造を作る。
12. ループを理解する。ループは単純にいうと、記事がブログ内にあればそれを表示し、なければ見あたりませんと表示する命令のことだ。
13. デフォルトテーマから<div id=content>..</div>までをコピーし、HTMLファイルに貼り付ける。また、投稿日時や記事タイトル、カテゴリ、前後の記事へのリンクなどをテンプレートタグに置き換える。
14. プレビューでテーマを確認する。
15. single.phpというファイル名で同じような作業を行う。
16. page.phpでも同じことをする。ただし、こちらにはコメントや投稿日時などは必要なければ消しておくこと。
17. あとは新しいテーマのフォルダからHTMLファイルを削除すれば完成だ。あとはsearch.phpや404.phpなども作ればよい。

WP as CMSのために

基本的なサイトの作り方は僕もこの流れとほとんど一緒です。特に、まずモックアップからHTMLファイルを作って、各パーツにバラバラにしていき、それからテンプレートタグというのは全く一緒ですね。ただ、CMS化するのであれば、コメントを必要とされることがあまりないから、そのへんは飛ばしますかね。

かなり雑な訳ですが、原文の方はスクリーンショットもついていますし、サンプルデザインもダウンロードできますので、英語だとあまり引いちゃわずにぜひとも試してみてください。