WordPressのテーマを作る　その2

Date
2008-06-03 (火)
Category
Web , WordPress
Tags
, ,

WordPressのテーマを作る　その2。
『WordPress のテーマを作る　その1』からの続きになります。

ページを分割する

ウェブページが正常に表示されることを確認し、大きく手直しすることろがなければ、index.php のページ分割をします。構成にもよりますが、以下のように分割します。

  • メインインデックスのテンプレート (index.php)
  • ヘッダー (header.php)
  • フッター (footer.php)
  • サイドバー (sidebar.php)
  • コメント (commepnts.php)

コメント (comments.php)についてはすでに作成してありますので、「分割する」とはいえませんね。ここではコメント以外のテンプレートについて触れることにします。

パーツテンプレート

分割されたヘッダー、フッター、サイドバー、コメントは、メインインデックステンプレートを構成する「パーツテンプレート」になります。HTML タグをすべて書かずともそれに該当するパーツテンプレートのタグを記述すれば、ブラウザで表示した際に HTML ソースとして出力される仕組みです。パーツ化（MT でいうモジュール化と同じことかな？）することにより、メインインデックステンプレート以外のテンプレートを作る際に自由にデザイン構成を変えることが可能です。たとえば、サイドバーを例にとるとするなら、トップページではコンテンツ部分との左右2カラム構成にして、単一記事ではエントリの下部にサイドバーに相当するソースを読み込ませ、上下の表示にする、とか。やり方はいろいろありますね。

各パーツテンプレートを index.php に読み込ませるには、以下のテンプレートタグを記述します。

  • ヘッダー (header.php) を読み込む ･･･ <?php get_header(); ?>
  • フッター (footer.php)を読み込む ･･･ <?php get_footer(); ?>
  • サイドバー (sidebar.php)を読み込む ･･･ <?php get_sidebar(); ?>
  • コメント (comments.php)を読み込む ･･･ <?php comments_template(); ?>

ヘッダー

ここで私が迷ったのが、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 で分割しました。

ほかのテンプレートを作る

さて、ここまでで出来上がっているテンプレートは、

  • ヘッダーやフッターなどを含むウェブページ全体を表示する index.php
  • ヘッダー (header.php)
  • フッター (footer.php)
  • サイドバー (sidebar.php)
  • コメント、トラックバックの受け付けと表示をする comments.php
  • それらを装飾するスタイルシート

です。そして、これらのほかに私が作ったテンプレートは以下になります。

  • 単一記事 (single.php)
  • アーカイブ (archive.php)
  • カテゴリーテンプレート (category.php)
  • ページテンプレート (page.php)
  • 404 テンプレート (404.php)
  • 検索結果 (search.php)
  • tag.php (tag.php)

単一記事 (single.php)テンプレート

各エントリを個別に表示する際には、2カラムの構成にしたメインインデックステンプレートを使うのではなく、1カラムで表示させたかったので、single.php の HTML のマークアップのしかたを変え、マークアップの変更にあわせて single.php 用のスタイルシートを用意しました。
comments.php は、single.php のみで使用しています。

そのほかのテンプレート

ここまでくれば、あとはわりとかんたんです。

  • アーカイブテンプレート
  • カテゴリーテンプレート
  • ページテンプレート
  • tag.php

は single.php と同じデザインにしたかったので、single.php をもとに出力させたい内容に該当するテンプレートタグに入れ替えて作成しました。
アーカイブテンプレート、カテゴリーテンプレートでは、エントリタイトルだけでなくエントリ本文の抜粋も表示させるようにし、該当カテゴリへのリンクもつけておきました。

404 テンプレート、検索結果テンプレート

404 テンプレート、検索結果テンプレートについては、メインインデックステンプレートのデザインを使用しています。

検索フォームについて

バージョン 2.5 以前の WordPress では、検索フォームで複数の単語で検索するとき、単語同士を半角スペースで区切った場合にはきちんと検索結果が表示されるのですが、全角スペースで区切ると検索結果がうまく表示されませんでした。2.5 からは全角スペースでも検索可能です。

エントリ本文だけでなく、ほかのページからも検索させるプラグイン

検索する際には、デフォルトではエントリ本文のみが検索対象になります。それでも十分なような気もしますが、検索対象を広げるためのプラグイン「Search Everything」を導入しました。

ソースを見ると、ページ、タグ、コメント、カテゴリからなど、その対象になる単語すべてをヒットさせる作りになっています。このサイトではまだエントリ数が少ないので、あまり実感がないのですが…今後に期待。

tag.php

tag.php は、独自に作成したテンプレートです。各エントリをタグでも情報の整理・分類をさせる目的に作りました。こちらもアーカイブページやカテゴリーページなどと同じように、single.php をもとに構成してあります。

  • タグの名称を呼び出すテンプレートタグ ・・・ <?php signle_tag_title(); ?>

データをサーバにアップロード

さて、これでひととおり完成しました。
すべてのテンプレートファイル、画像を入れたフォルダ、作成したテーマのスクリーンショットがあれば、それらをテーマ名をつけたフォルダに入れて、サーバ上の wp-content / themes / フォルダ内にアップロードします。
WordPress 管理画面「デザイン」にアクセスし、作ったテーマを選択してサイトが正しく表示されればオッケイ。今後、管理画面で修正したい場合には、各ファイルのパーミッションを「書き込み可能」にしておいてください。

ウェブサイトそのものの設定

管理画面「設定」から、一般設定、投稿設定、表示設定、ディスカッション、プライバシー、パーマリンクの設定などの確認をします。特に投稿設定、ディスカッション、プライバシー、パーマリンクの設定は、きちんとチェックしておいた方がよいです。

投稿設定
エントリの表示件数の設定、RSS の配信方法。
「更新情報サービス」で サイトを更新した際に ping を送信するように、各 ping 送信サービスの URL を記入しておきます。Technorati、Bloggers、Feedburner、Yahoo!、Google あたりをおさえておけばよいのではないかと。
ディスカッション
ピングバック、トラックバック、コメントの受付の可否、承認・非承認
プライバシー
サーチエンジンにクロールさせるかどうか？
パーマリンクの設定
5種類から選びますが、選ぶポイントが人それぞれ違うと思います。私は「カスタム構造」を選択し、カテゴリ/ ポストID / ポスト名 で設定してあります。.htaccess の mod_rewrite の再設定もお忘れなく。

テーマを作ってみた感想

私は右も左もわからない状態から始めたので、WordPress の構造やテンプレートの用途を整理して理解するのに時間を費やしました。ページ分割する、という意味がよくわかってなかったのですね…なぜ分割する必要があるのかと。

ページを分割し、それぞれをパーツ化することで、ウェブサイトの各ページ構成を自由に変化させることができる。従来のウェブサイトの作り方ですと、それらをページごとにいちいち作っていかなければなりません。最初はちょっと面倒な気もしますが、いったん作ってしまえば、それを使いまわすことができて、なおかつ変数を用いることでさらに変化をつけることができる。

私の場合はたいしたことはぜんぜんしていないので、その便利さや多機能さを十分に発揮しているとはとてもいえません。WordPress の場合は、HTML や CSS のことだけでなく、PHP もわからないと突っ込んだことができないので、それがもう今後の課題だなぁと…終わりはない。と書くと、なんか大変そ～とか思っちゃうんですが、まだまだ勉強できる余地があるということなので、がんばらないかんな、と。

最初から理解している人にとってはなんてことないことでも、私のようにわからない人から見たら、ちんぷんかんぷんなことがたくさんありました。解説サイトや本を読んで調べたりすることでかなり解決しますけれど、それでもやはり、手取り足取りというわけにはいきません。

その穴埋めになるかどうかはわからないのですが、わからない人が初めてやってみた手順をこうしてメモにして残しておこうと。今後もちょっとずつ手直しをしていきたいですし、別のテーマを作る際には、もう一歩踏み込んで作れたらいいなとも思っています。
流れとか、言い回しとかの違いや、これ抜けてんじゃん的なものもあるかもしれないけども…なにかのお役に立てれば幸い。立てなかったらごめんなさい。
間違っているところがあったり、もっとよい方法がありましたら、ご指摘もしくはアドバイスをいただけたらと思います。

page top

Trackback URL：

5 Replies

Comments

    comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>

  1. Comment by ちろん — 2010-04-01 (木) 11:26 AM

    初めてコメントいたします。
    仕事で必要で、Wordpressの勉強をしていたのですが
    おそらくスキルレベル的にmaakoさんと近く、とても参考になりました。
    文章もとても分かりやすくまとめておられて大変助かりました。
    ありがとうございます＾＾

    2. comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>

  2. Comment by mieepo — 2010-05-04 (火) 12:39 AM

    私はこのプロセスで悩んで、何度も挫折しています。
    CMSは右脳の頭だと理解しにくいので、困り果てていました。
    ワードプレスで一番大事なプロセス（と思います）を
    かなり丁寧に解説してありとても参考になりました。
    感謝です。

    3. comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>

  3. Comment by せいじ — 2010-11-14 (日) 1:38 AM

    すごくわかりやすい！！

    どのサイトよりわかりやすいです。

    maakoさんの優しい人柄がわかる丁寧な文章に
    救われました。

    今美容室のサイトをつくっているのですが
    ﾌﾞﾛｸﾞがなぜか表示されすになやんでいました。

    single.phpをつくってなかったからなのでしょうか？？

    またＴＯＰページをだけデザインが少しちがくて
    下層のページの構成はﾌﾞﾛｸﾞ以外ほぼ構成は一緒というとき
    index.phpは下層のデザインを書き込んで
    ＴＯＰページはhome.php
    にしたほうがよいのでしょうか？？

    4. comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>

  4. Comment by maako — 2010-11-23 (火) 10:15 PM

    コメントありがとうございます。

    ＞せいじさん
    ブログが表示されなかったのは、single.phpのせいではないとおもいます。
    もっと根本的なとこで間違った設置方法をしたり、タグの記述ミスをしていたり、さまざまな要因が考えられます。
    なので、ここでは特定はできないですねえ。

    また、TOPページについての疑問は、その解釈でOKだとおもいます。
    home.phpを読み込ませる設定方法があったはずなので（WordPressのバージョンによって違うかもしれませんが…）、
    それはちょっとググってみてください、スミマセン（笑）

    5. comment_type != "trackback" && $comment->comment_type != "pingback" && !ereg("", $comment->comment_content) && !ereg("", $comment->comment_content)) { ?>

  5. ピンバック by WordPressのテーマを作る　その1 | sui — 2011-03-22 (火) 12:43 PM

    […] →『WordPress のテーマを作る　その2』を読む […]

comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

Trackbacks & Pingbacks

  1. Comment by ちろん — 2010-04-01 (木) 11:26 AM

    初めてコメントいたします。
    仕事で必要で、Wordpressの勉強をしていたのですが
    おそらくスキルレベル的にmaakoさんと近く、とても参考になりました。
    文章もとても分かりやすくまとめておられて大変助かりました。
    ありがとうございます＾＾

    2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

    Trackbacks & Pingbacks

    1. Comment by mieepo — 2010-05-04 (火) 12:39 AM

      私はこのプロセスで悩んで、何度も挫折しています。
      CMSは右脳の頭だと理解しにくいので、困り果てていました。
      ワードプレスで一番大事なプロセス（と思います）を
      かなり丁寧に解説してありとても参考になりました。
      感謝です。

      2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

      Trackbacks & Pingbacks

      1. Comment by せいじ — 2010-11-14 (日) 1:38 AM

        すごくわかりやすい！！

        どのサイトよりわかりやすいです。

        maakoさんの優しい人柄がわかる丁寧な文章に
        救われました。

        今美容室のサイトをつくっているのですが
        ﾌﾞﾛｸﾞがなぜか表示されすになやんでいました。

        single.phpをつくってなかったからなのでしょうか？？

        またＴＯＰページをだけデザインが少しちがくて
        下層のページの構成はﾌﾞﾛｸﾞ以外ほぼ構成は一緒というとき
        index.phpは下層のデザインを書き込んで
        ＴＯＰページはhome.php
        にしたほうがよいのでしょうか？？

        2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

        Trackbacks & Pingbacks

        1. Comment by maako — 2010-11-23 (火) 10:15 PM

          コメントありがとうございます。

          ＞せいじさん
          ブログが表示されなかったのは、single.phpのせいではないとおもいます。
          もっと根本的なとこで間違った設置方法をしたり、タグの記述ミスをしていたり、さまざまな要因が考えられます。
          なので、ここでは特定はできないですねえ。

          また、TOPページについての疑問は、その解釈でOKだとおもいます。
          home.phpを読み込ませる設定方法があったはずなので（WordPressのバージョンによって違うかもしれませんが…）、
          それはちょっとググってみてください、スミマセン（笑）

          2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

          Trackbacks & Pingbacks

          1. ピンバック by WordPressのテーマを作る　その1 | sui — 2011-03-22 (火) 12:43 PM

            […] →『WordPress のテーマを作る　その2』を読む […]

          Sorry, the comment form is closed at this time.

recent posts

comments

trackbacks

category

archives

tags