WordPressテーマを作る手順 – WP as CMS

こんにちは、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化するのであれば、コメントを必要とされることがあまりないから、そのへんは飛ばしますかね。

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

WordPress as CMS

えー、この時期はあけましておめでとうございますなのか、それとも単にこんにちはでよいのか、いつも迷うTRANSのあらたです。とりあえず、あけましておめでとうございます。

前回のエントリーの最後で、

次回は年が代わったあたりくらいにまた何か書ければいいですねー。

と言っていたので有言実行(誤字あるのに引用するのってなんだかイヤですけど)。といっても、相も変わらずネタは少ないですが、自分が持ってる数少ないネタの中からWordPressのテーマをどのようにCMSっぽく使っているのかについて書いていこうかなと思っています。

今でもTRANSのWordPressテーマ(テンプレート)カスタマイズのまとめ(日本語訳)などは多くの人に毎日のように来てもらっているわけですしね。

といっても多くのネタを持っているわけでもないので(しつこい)、あんまり長期間書けないかもしれませんが、よろしくどうぞ。

あと、WPのテーマというと、PHPが絡んでくるんですが、はっきりいって僕はPHPがグダグダなレベルなので、突っ込みどころは容赦なく突っ込んでください。

[セミナー情報] Adobe Creative Suite 4 最新機能紹介セミナー

1月16日(金)に梅田の宝塚造形芸術大学 梅田キャンパスでAdobe Creative Suite 4 最新機能紹介セミナーが行われます。

続きを読む

[関西セミナー情報]XHTML+CSS基礎講座(特典あり)

大阪XHTML+CSS講座

昨年大阪で開催されたallwebクリエイター塾のXHTML+CSS基礎講座が1月11日に開催されます。

  • XHTML,CSSを基礎から学びたい方
  • オーサリングソフトに頼ってしまい、ビジュアルのみでサイト構築をしてしまう方。
  • テーブルレイアウトでサイトを構築することに慣れてしまった方。
  • Web標準を勉強されたい方

上記のような方には非常にオススメの講座となっています。
続きを読む

2008年の24waysまとめ

24waysは2005年から続いている、クリスマスまでの24日間海外の著名なWebデベロッパーの皆さんがtipsを公開していくというスペシャルなイベントサイト。
今年の記事を簡単にですがまとめてみました。(超意訳なのでつっこみ大歓迎です。)
続きを読む

ページ 30 of 51« 最初...1020...26272829303132333435...50...最後 »