以前は、default テーマを利用してカスタマイズしながら Blog のテーマを作成していました。
しかし、今回はサイトリニューアルにあたり、Blog 以外のページ（TOPや会社概要のページなど）も WordPressにまとめようということに。
もちろんデザインもやりなおし…。
ってことで、テーマを default からではなく、ゼロから作ることにしました。
せっかくなので、その方法をメモしておきます。
はじめに：サイトの構造について
これから作成するのは、TOPページが静的(固定)ページで、Blogをサブディレクトリに表示させるような構造のサイトです。
各ページのURLのイメージはこんな感じです。
- TOPページ
- … http://giraffy.jp/
- Blogページ
- … http://giraffy.jp/blog/
- その他（静的）ページ
- … http://giraffy.jp/各ページに関する名前/
手順1：サイトのデザインを決めます
当たり前ですが…。
WordPressに組み込むことを意識して、各ページごとにできるだけ共通したデザインにしておきます。
ひとまず、各ページこんな感じでデザインしました。
TOPページのデザインイメージ
Blogページのデザインイメージ
その他ページのデザインイメージ
細かな部分が違ったりしてますが、大筋はどのページも似たような感じです。
Blogについては、全体の記事一覧ページ(Blogのトップページ)、単一記事ページ、カテゴリーの記事一覧ページなどいろんな表示パターンがあるので、その辺りもしっかりとデザイン案を固めておきます。
手順2：コーディングする
デザイン案が固まったら、作成したデザインを元に画像を切り出ししたり、xhtml/css でコーディングします。全ページというよりは、デザインの違うページを各1枚ずつコーディングしておけば良いです。
ジラフィーのサイトは TOPページ・Blogページ・その他のページ(会社概要など)でデザインが異なるので、この3枚をコーディングしました。
また、テーマを作成するときにはヘッダー・本文・フッターはそれぞれ別ファイルになりますので、その辺りも意識しておきます。
- コーディング後(Giraffyの場合)
-
- index.html
- blog.html
- page.html
- style.css —> 全ページ共通css
- css/home.css —> TOPページ用
- css/page.css —> その他ページ用
- css/blog.css —> Blogページ用
- img/ —> 必要なイメージファイルが入ってます
こんな風にファイルを作成しました。
cssファイルは、デザインが異なっている部分だけ分けて作成しておきました。
※注意事項として、style.css の冒頭には必ず「テーマについての詳細」を記述しておく必要があります。
(例)
1 2 3 4 5 6 7 8 9 10 11 12 | /* Theme Name: テーマの名前 Theme URI: テーマのホームサイトの URI Description: テーマについての説明 Author: 作者の名前 Author URI: 作者の URI Template: 親テーマの定義（オプション） Version: バージョン番号（オプション） . コメント／利用許諾の記述（あれば） . */ |
オプション(Template/Version)・コメントについては、なければ行ごと削除しておいても構いません。
手順3：テーマ用フォルダを作成する
ここからようやくWordPressへと作業が移ります。
wp-content/themes/ の下にテーマ用のフォルダを作成します。
ちなみに、ジラフィーでは giraffy という名前のテーマ用フォルダを作成しました。
テーマ用フォルダを作成します
(前回作成したフォルダは、名前を変更して old_giraffy に…)
このとき、先ほど作成した cssファイル や imgファイル を配置しておきます。
- 【ここまでのテーマフォルダの内容】
-
- style.css
- img フォルダ
- css フォルダ
手順4：header.php と footer.php を作成する
さきほどコーディングしたhtmlファイルをもとに、header.php と footer.php を作成します。
header.php
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>株式会社ジラフィー(Giraffy) :: ソフトウェア開発・ウェブデザイン</title> (中略) <?php wp_head(); ?> </head> |
こんな感じで、ヘッダー部に共通する htmlソース を header.php に記述します。
※プラグインを使用する場合は、かならず
1 | <?php wp_head(); ?> |
を読み込ませてください。
footer.php
1 2 3 4 5 6 | <div id="footer"> <p class="copyright">Copyright © 2009, GIRAFFY inc.</p> </div> <?php wp_footer(); ?> </body> </html> |
※プラグインを使用する場合は、かならず
1 | <?php wp_footer(); ?> |
を読み込ませてください。
これで、共通するヘッダー部とフッター部のファイルは作成完了です。
header.php は <?php get_header(); ?> 、footer.php は <?php get_footer(); ?> で読み込むことができます。
- 【ここまでのテーマフォルダの内容】
-
- header.php
- footer.php
- style.css
- img フォルダ
- css フォルダ
手順5：トップページとBlogページのテンプレートファイルを作る
はじめに言ったとおり、ここではTOPページを静的ページにして、Blogはサブディレクトリに表示させたいので、それぞれのテンプレートを用意します。
- top.php
- … サイトのトップページ用ファイル。home.php という名前は使えないのでご注意を。
- blog.php
- … ブログのトップページ用ファイル。
それぞれ、中身は以下のようになります。
top.php
1 2 3 4 5 6 7 8 9 10 | <?php /* Template Name: HOME */ ?> <?php get_header(); ?> ここにさきほどコーディングしたトップページのxhtmlを貼り付けます。 <?php get_footer(); ?> |
blog.php
1 2 3 4 5 6 7 8 | <?php /* Template Name: Blog */ ?> <?php query_posts(‘cat=-0′); load_template( TEMPLATEPATH . ‘/index.php’); ?> |
Blogは、実際はindex.phpをテンプレートとして使用するようになります。
- 【ここまでのテーマフォルダの内容】
-
- blog
- top.php
- header.php
- footer.php
- style.css
- img フォルダ
- css フォルダ
手順6：index.php と page.php を作成する
今回は、TOPページ、Blogページ、その他の固定ページの3種類のデザインのページが存在します。
TOPページは、先ほどテンプレートとして top.php を作成しましたので、TOPページ以外のテンプレートも作成します。
index.php は、Blogページに採用したいので、少し内容が複雑になります。
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <?php get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2> <p class="post_date"><?php the_date(‘Y-m-d’); ?> Posted by <?php the_author(); ?></p> <div class="entry"> <?php the_content(); ?> </div> <div class="cat_tag clearfix"> <p class="cat">カテゴリー: <?php the_category(‘, ‘); ?></p> <p class="tag"><?php the_tags(‘タグ: ‘, ‘, ‘); ?></p> </div> <?php endwhile; ?> <div class="archive_navigation"> <?php posts_nav_link(‘ | ‘,’前のページ’,'次のページ’); ?> </div> <?php else : ?> <div class="entry"> <h2><?php echo "見つかりませんでした"; ?></h2> <p class="caution"><br /><?php echo "お探しの記事、ページは見つかりませんでした。"; ?><br /><br /></p> <p><a href="<?php bloginfo(‘url’); ?>/blog/">Blog Topに戻る</a></p> </div> <?php endif; ?> <?php get_sidebar(); ?> // サイドバーの読み込み(ファイルは未実装ですが…念のため) <?php get_footer(); ?> |
細かな部分の説明は以下の通りです。
投稿記事を（最大表示件数まで）繰り返し表示する
1 2 3 4 5 | <?php if (have_posts()) : while (have_posts()) : the_post(); ?> （中略） <?php endwhile; ?> |
表示する記事があるときは、（if 〜 endwhile までの内容）Blog の記事前文〜この記事の続きを読むリンクまでを繰り返し表示します。
1 | <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2> |
記事のタイトルと、記事へのリンクになります。
1 | <p class="post_date"><?php the_date(‘Y-m-d’); ?> Posted by <?php the_author(); ?></p> |
記事が投稿された日時と、投稿者の名前を表示します。
1 2 3 | <div class="entry"> <?php the_content(); ?> </div> |
記事の本文を表示します。
次ページ、前ページへのリンク
1 2 3 4 5 | <?php endwhile; ?> <div class="archive_navigation"> <?php posts_nav_link(‘ | ‘,’前のページ’,'次のページ’); ?> </div> |
表示する記事がなくなった（または表示件数を超えた）場合、前のページ、次のページへのリンクを表示します。
表示する投稿記事がない場合
1 2 3 4 5 6 7 8 9 10 | <?php else : ?> <div class="entry"> <h2><?php echo "見つかりませんでした"; ?></h2> <p class="caution"><br /><?php echo "お探しの記事、ページは見つかりませんでした。"; ?><br /><br /></p> <p><a href="<?php bloginfo(‘url’); ?>/blog/">Blog Topに戻る</a></p> </div> <?php endif; ?> |
何らかの原因（削除された等で）記事がなかった場合、else より以下の内容を表示します。
検索で該当する記事が見つからなかった場合や、削除された記事へアクセスした場合などに使用されます。
page.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php get_header(); ?> <?php if (!is_front_page()) { ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><?php the_title();?></h2> <?php the_content(); ?> <?php endwhile; endif; ?> <?php } ?> <?php get_footer(); ?> |
1 | <?php if (have_posts()) : while (have_posts()) : the_post(); ?> |
〜
1 | <?php endwhile; endif; ?> |
までがページの内容です。
1 | <?php if (!is_front_page()) { ?> 〜 <?php } ?> |
で囲んでいるのは、TOPページ(フロントページ)にこの内容を適用したくないからです。
上記の場合、
1 | is_front_page() |
の頭に ! が付いているので、意味としては 「フロントページ以外のとき」 ということになります。
条件タグについては、以下を参考にしてください。
WordPress Codex 日本語版:http://wpdocs.sourceforge.jp/Conditional_Tags
- 【ここまでのテーマフォルダの内容】
-
- index.php
- page.php
- blog
- top.php
- header.php
- footer.php
- style.css
- img フォルダ
- css フォルダ
手順7：TOPページ、Blogページ用の「ページ」を作成する
なんだか言い方がややこしいですが…。
ここからはWordPress管理画面での作業になります。
まず、管理画面にログインして、「ページ」の新規追加をクリックします。
TOPページ用にタイトルを入力して、「パーマリンク」を編集して http://giraffy.jp/ になるようにします。
パーマリンクの編集（１）
記事タイトル下にあるパーマリンクの「編集」ボタンをクリックすると、編集モードになります。
パーマリンクの編集（2）
編集し終わったら、「保存」ボタンをクリックします。
パーマリンクの編集（3）
次に、属性の「テンプレート」から先ほど top.php で作成したテンプレート「HOME」を選択します。
HOMEテンプレートを選択
本文の内容は空白でOKです。
同じようにBlogページも作成します。
こちらは、「パーマリンク」が http://giraffy.jp/blog/ になるように編集します。
Blogページのパーマリンク変更
テンプレートは「Blog」を選択します。
Blogのテンプレートを選択
こちらも、TOPページのように本文は未入力のままでOKです。
次に、管理画面の「設定」から「表示設定」を開きます。
「フロントページの表示」の設定を「固定ページ」にチェックします。
「フロントページ」には、先ほど作成したTOPページのタイトルを選択し、「投稿ページ」には「Blog」を選択します。
(ここで表示されているのは、各ページのタイトルになります)
表示設定を編集します
(フロントページの設定がない場合は、home.php → index.php の順にチェックしていきます)
そのため、「フロントページ」に設定したページが必ず始めに表示されるページとなります。
これで、サイトのTOPページが静的ページになり、Blogページはサブフォルダに表示されるようになりました。
そして、最後に「設定」から「パーマリンク設定」を開きます。
ここで、「カスタム構造」にチェックをいれて、/blog/%year%/%monthnum%/%day%/%category%/%post_id%/ と設定しておきます。
冒頭に /blog/ を追加することで、記事のリンクも http://giraffy.jp/blog/ の下に表示されるようになります。
Blogのパーマリンクを変更する
パーマリンクの使い方についてはこちら
WordPress Codex 日本語版:http://wpdocs.sourceforge.jp/Using_Permalinks
今日はここまで。
[...] WordPressのテーマ(テンプレート)をゼロから作成する方法(1) ≫ 株式会社ジラフィー(Giraffy) [...]