WordPressのテーマを作る その2。
『WordPress のテーマを作る その1』からの続きになります。
ウェブページが正常に表示されることを確認し、大きく手直しすることろがなければ、index.php のページ分割をします。構成にもよりますが、以下のように分割します。
コメント (comments.php)についてはすでに作成してありますので、「分割する」とはいえませんね。ここではコメント以外のテンプレートについて触れることにします。
分割されたヘッダー、フッター、サイドバー、コメントは、メインインデックステンプレートを構成する「パーツテンプレート」になります。HTML タグをすべて書かずともそれに該当するパーツテンプレートのタグを記述すれば、ブラウザで表示した際に HTML ソースとして出力される仕組みです。パーツ化(MT でいうモジュール化と同じことかな?)することにより、メインインデックステンプレート以外のテンプレートを作る際に自由にデザイン構成を変えることが可能です。たとえば、サイドバーを例にとるとするなら、トップページではコンテンツ部分との左右2カラム構成にして、単一記事ではエントリの下部にサイドバーに相当するソースを読み込ませ、上下の表示にする、とか。やり方はいろいろありますね。
各パーツテンプレートを index.php に読み込ませるには、以下のテンプレートタグを記述します。
ここで私が迷ったのが、index.php のどの部分までをヘッダー(header.php) にするか?でした。
いろんなテーマを見ましたが、<head>
の中で区切られているものもあれば、サイトタイトル部分が入るボックス id header で区切られているもの、本文が入るボックスの最初の部分までヘッダーとして区切られているものもあり、まちまちです。
ヘッダーはすべてのテンプレートで使いまわすので、ヘッダーに続くメインインデックスのテンプレートとの兼ね合いや、スタイルシートでのデザインのしかたの違いを考えて、問題のない箇所で分割しましょうってことなのですが…
私は <title>
部分の表示をページごとに変えたかったので、<titile>
を <head>
内のいちばん下に記述して、そこで分割することにしました。
<!-- ↑ここから上のソースがヘッダー部分 -->
<?php get_header(); ?>
<title><?php bloginfo('name'); ?></title>
</head>
<body>
<!-- ↑ここから上のソースがヘッダー部分 -->
<?php get_header(); ?>
<title><?php the_title(); ?> - <?php bloginfo('name'); ?></title>
</head>
<body>
コンディショナルタグを使えば、サイトタイトル(<h1>
)、サイト説明に該当する description を入れたボックス id header までのソースを header.php に当てはめられるはず、です。また、ページごとのマークアップのしかたの変更も可能。コンディショナルタグについては、もうちょっと自分の中で整理して、そのうちに触れたいと思います。
フッター (footer.php) は考えなくても、ボックス id footer で分割すればよいですし、サイドバー (side.php) も同様の考え方で、ボックス id side で分割しました。
さて、ここまでで出来上がっているテンプレートは、
です。そして、これらのほかに私が作ったテンプレートは以下になります。
各エントリを個別に表示する際には、2カラムの構成にしたメインインデックステンプレートを使うのではなく、1カラムで表示させたかったので、single.php の HTML のマークアップのしかたを変え、マークアップの変更にあわせて single.php 用のスタイルシートを用意しました。
comments.php は、single.php のみで使用しています。
ここまでくれば、あとはわりとかんたんです。
は single.php と同じデザインにしたかったので、single.php をもとに出力させたい内容に該当するテンプレートタグに入れ替えて作成しました。
アーカイブテンプレート、カテゴリーテンプレートでは、エントリタイトルだけでなくエントリ本文の抜粋も表示させるようにし、該当カテゴリへのリンクもつけておきました。
404 テンプレート、検索結果テンプレートについては、メインインデックステンプレートのデザインを使用しています。
バージョン 2.5 以前の WordPress では、検索フォームで複数の単語で検索するとき、単語同士を半角スペースで区切った場合にはきちんと検索結果が表示されるのですが、全角スペースで区切ると検索結果がうまく表示されませんでした。2.5 からは全角スペースでも検索可能です。
検索する際には、デフォルトではエントリ本文のみが検索対象になります。それでも十分なような気もしますが、検索対象を広げるためのプラグイン「Search Everything」を導入しました。
ソースを見ると、ページ、タグ、コメント、カテゴリからなど、その対象になる単語すべてをヒットさせる作りになっています。このサイトではまだエントリ数が少ないので、あまり実感がないのですが…今後に期待。
tag.php は、独自に作成したテンプレートです。各エントリをタグでも情報の整理・分類をさせる目的に作りました。こちらもアーカイブページやカテゴリーページなどと同じように、single.php をもとに構成してあります。
さて、これでひととおり完成しました。
すべてのテンプレートファイル、画像を入れたフォルダ、作成したテーマのスクリーンショットがあれば、それらをテーマ名をつけたフォルダに入れて、サーバ上の wp-content / themes / フォルダ内にアップロードします。
WordPress 管理画面「デザイン」にアクセスし、作ったテーマを選択してサイトが正しく表示されればオッケイ。今後、管理画面で修正したい場合には、各ファイルのパーミッションを「書き込み可能」にしておいてください。
管理画面「設定」から、一般設定、投稿設定、表示設定、ディスカッション、プライバシー、パーマリンクの設定などの確認をします。特に投稿設定、ディスカッション、プライバシー、パーマリンクの設定は、きちんとチェックしておいた方がよいです。
私は右も左もわからない状態から始めたので、WordPress の構造やテンプレートの用途を整理して理解するのに時間を費やしました。ページ分割する、という意味がよくわかってなかったのですね…なぜ分割する必要があるのかと。
ページを分割し、それぞれをパーツ化することで、ウェブサイトの各ページ構成を自由に変化させることができる。従来のウェブサイトの作り方ですと、それらをページごとにいちいち作っていかなければなりません。最初はちょっと面倒な気もしますが、いったん作ってしまえば、それを使いまわすことができて、なおかつ変数を用いることでさらに変化をつけることができる。
私の場合はたいしたことはぜんぜんしていないので、その便利さや多機能さを十分に発揮しているとはとてもいえません。WordPress の場合は、HTML や CSS のことだけでなく、PHP もわからないと突っ込んだことができないので、それがもう今後の課題だなぁと…終わりはない。と書くと、なんか大変そ~とか思っちゃうんですが、まだまだ勉強できる余地があるということなので、がんばらないかんな、と。
最初から理解している人にとってはなんてことないことでも、私のようにわからない人から見たら、ちんぷんかんぷんなことがたくさんありました。解説サイトや本を読んで調べたりすることでかなり解決しますけれど、それでもやはり、手取り足取りというわけにはいきません。
その穴埋めになるかどうかはわからないのですが、わからない人が初めてやってみた手順をこうしてメモにして残しておこうと。今後もちょっとずつ手直しをしていきたいですし、別のテーマを作る際には、もう一歩踏み込んで作れたらいいなとも思っています。
流れとか、言い回しとかの違いや、これ抜けてんじゃん的なものもあるかもしれないけども…なにかのお役に立てれば幸い。立てなかったらごめんなさい。
間違っているところがあったり、もっとよい方法がありましたら、ご指摘もしくはアドバイスをいただけたらと思います。
Trackback URL:
Comment by ちろん — 2010-04-01 (木) 11:26 AM
初めてコメントいたします。
仕事で必要で、Wordpressの勉強をしていたのですが
おそらくスキルレベル的にmaakoさんと近く、とても参考になりました。
文章もとても分かりやすくまとめておられて大変助かりました。
ありがとうございます^^
Comment by mieepo — 2010-05-04 (火) 12:39 AM
私はこのプロセスで悩んで、何度も挫折しています。
CMSは右脳の頭だと理解しにくいので、困り果てていました。
ワードプレスで一番大事なプロセス(と思います)を
かなり丁寧に解説してありとても参考になりました。
感謝です。
Comment by せいじ — 2010-11-14 (日) 1:38 AM
すごくわかりやすい!!
どのサイトよりわかりやすいです。
maakoさんの優しい人柄がわかる丁寧な文章に
救われました。
今美容室のサイトをつくっているのですが
ブログがなぜか表示されすになやんでいました。
single.phpをつくってなかったからなのでしょうか??
またTOPページをだけデザインが少しちがくて
下層のページの構成はブログ以外ほぼ構成は一緒というとき
index.phpは下層のデザインを書き込んで
TOPページはhome.php
にしたほうがよいのでしょうか??
Comment by maako — 2010-11-23 (火) 10:15 PM
コメントありがとうございます。
>せいじさん
ブログが表示されなかったのは、single.phpのせいではないとおもいます。
もっと根本的なとこで間違った設置方法をしたり、タグの記述ミスをしていたり、さまざまな要因が考えられます。
なので、ここでは特定はできないですねえ。
また、TOPページについての疑問は、その解釈でOKだとおもいます。
home.phpを読み込ませる設定方法があったはずなので(WordPressのバージョンによって違うかもしれませんが…)、
それはちょっとググってみてください、スミマセン(笑)
ピンバック by WordPressのテーマを作る その1 | sui — 2011-03-22 (火) 12:43 PM
[…] →『WordPress のテーマを作る その2』を読む […]
Sorry, the comment form is closed at this time.
Comment by ちろん — 2010-04-01 (木) 11:26 AM
初めてコメントいたします。
仕事で必要で、Wordpressの勉強をしていたのですが
おそらくスキルレベル的にmaakoさんと近く、とても参考になりました。
文章もとても分かりやすくまとめておられて大変助かりました。
ありがとうございます^^
Comment by mieepo — 2010-05-04 (火) 12:39 AM
私はこのプロセスで悩んで、何度も挫折しています。
CMSは右脳の頭だと理解しにくいので、困り果てていました。
ワードプレスで一番大事なプロセス(と思います)を
かなり丁寧に解説してありとても参考になりました。
感謝です。
Comment by せいじ — 2010-11-14 (日) 1:38 AM
すごくわかりやすい!!
どのサイトよりわかりやすいです。
maakoさんの優しい人柄がわかる丁寧な文章に
救われました。
今美容室のサイトをつくっているのですが
ブログがなぜか表示されすになやんでいました。
single.phpをつくってなかったからなのでしょうか??
またTOPページをだけデザインが少しちがくて
下層のページの構成はブログ以外ほぼ構成は一緒というとき
index.phpは下層のデザインを書き込んで
TOPページはhome.php
にしたほうがよいのでしょうか??
Comment by maako — 2010-11-23 (火) 10:15 PM
コメントありがとうございます。
>せいじさん
ブログが表示されなかったのは、single.phpのせいではないとおもいます。
もっと根本的なとこで間違った設置方法をしたり、タグの記述ミスをしていたり、さまざまな要因が考えられます。
なので、ここでは特定はできないですねえ。
また、TOPページについての疑問は、その解釈でOKだとおもいます。
home.phpを読み込ませる設定方法があったはずなので(WordPressのバージョンによって違うかもしれませんが…)、
それはちょっとググってみてください、スミマセン(笑)
ピンバック by WordPressのテーマを作る その1 | sui — 2011-03-22 (火) 12:43 PM
[…] →『WordPress のテーマを作る その2』を読む […]