WordPressのテーマを作る　その1

Date
2008-05-31 (土)
Category
Web , WordPress
Tags
, ,

WordPress のテーマを作ろう、と思いたったはいいですが、さてどこから手をつけたらよいものか…
WordPress のサイトや、解説サイト、本なども参考にしつつ、私がたどった手順をメモしておきます。

が、このエントリでは、WordPress を初めて導入した状態から、テーマを作るための超基本的な手順になりますので、具体的な HTML やスタイルシートの書き方などは、ほとんど記載していません。すぐに使えるようなテーマの作り方を知りたいと思ってここにたどりついた方、ごめんなさい。

構成を理解する

まず、WordPress のテンプレート構成を理解することから始めました。
index.php, single.php, page.php, archive.php… etc
どのテンプレートが、どんな役割をするのか。最低限、どんなテンプレートが必要なのか、名前をみれば、なんとなく想像がつくのですが、ここできっちり理解しておきたいなぁと思ったので。当然のことですが、これがわかってないと、なんもできません。

標準でインストールされているテーマや、Web上で配布されているさまざまなテーマの中身を見たり、人様のサイトを拝見したり、本を読んだりして勉強していきました。

必要なテンプレート

極端な話、ウェブページを表示するメインインデックスのテンプレート (index.php) と、ウェブページをデザインするスタイルシート (style.css) さえあれば問題なく機能します（ウェブページを表示するだけなら、まったく無問題）。テンプレートが index.php しかなければ、すべてにおいて index.php が優先して使用されるので、ページ分割しなくてもよいですし、ほかのテンプレートもいりません。これがいちばんシンプルな構成になります。

ただ、それでは CMS （コンテンツ・マネージメント・システム）をわざわざ使う意味がありません。既存のサイトの作り方で十分です。同じコンテンツを扱うにしても、それぞれのテンプレートを組み合わせてさまざまなかたちでウェブページを構成させるのが CMS の便利なところだと思いますし、目的、最大の機能でもあるからです。
そこで、WordPress のテンプレート構成を確認しながら、実際にどのようなページ構成（ウェブページの見せ方、デザイン）にしようかな？と考えていきました。

実際に作ったテンプレート

結果として、以下のテンプレート、およびスタイルシートを制作しました。

  • メインインデックスのテンプレート (index.php) ･･･ メインページを表示
  • 単一記事の投稿 (single.php) ･･･ エントリごとのページを表示
  • アーカイブ (archive.php) ･･･ 月ごとのエントリを表示
  • カテゴリーテンプレート (category.php) ･･･ カテゴリごとのエントリを表示
  • ページテンプレート (page.php) ･･･ 時系列に依存しない独立したページを表示
  • 404 テンプレート (404.php) ･･･ 404エラー（該当するページがない）になった際のページを表示
  • 検索結果 (search.php) ･･･ 検索結果を表示
  • ヘッダー (header.php) ･･･ ページ分割した際のヘッダー部分
  • フッター (footer.php) ･･･ ページ分割した際のフッター部分
  • サイドバー (sidebar.php) ･･･ ページ分割した際のサイド部分
  • コメント (comments.php) ･･･ 単一記事などで、コメント欄を表示
  • tag.php (tag.php) ･･･ タグごとで分類して表示
  • style.css ･･･ スタイルシート

先にも書いたように、index.php 以外にテンプレートがなければ、index.php が優先して使用されます。
バージョン 2.5 から各エントリに対してタグがつけられるようになり、私はエントリごとにタグで整理できるようにもしたかったので、tag.php を作成しました。

ページ分割する際、最低限必要になるテンプレート

  • メインインデックスのテンプレート (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) ･･･ 各エントリにつけられたタグごとに表示
  • date.php (date.php) ･･･ 日付ごとに表示
  • home.php (home.php) ･･･ ウェブサイトのトップページを表紙的に表示
  • category-○.php (category-○.php) ･･･ 特定のカテゴリを表示。○ にはカテゴリIDを記入
  • archives.php (archives.php) ･･･ アーカイブ、カテゴリなどをまとめて表示
  • author.php (author.php) ･･･ 投稿者が複数いる場合、投稿者ごとに表示

コメントをポップアップ表示させる際の comments-popup.php（これはいらないと思う）、WordPress をさらにすてきに使うための functions.php などは使いませんでした（functions.php は 100%プログラムなので、私にはもっともっと勉強しないとわかりません…）。
また、さまざまな用途に合わせた、独自のテンプレートを作ることも可能です。

コーディングツール

コーディングには、Dreamweaver を使いました。私は普段から Dreamweaver を使っているので、使い慣れているものがよいだろうという理由なだけです。Firefox ユーザなら、Firebug を使われている方も多いと思います。
もちろん、従来のテキストエディタでもまったく問題ありません（ただし、文字コードの問題がありますので、そこらへんをきちんと管理できるテキストエディタがよいです。WordPress の文字コードは、UTF-8 ですので、Windows のメモ帳とかはダメですよ笑）。ちゃんとした HTML さえ書ければ、コーディングツールはなんでもよいかと。

Windows であれば、秀丸、サクラエディタなど、Mac なら TextMate、codaなど（いずれも有料アプリです）を使うのが吉です。
私はちょっとした修正などは、TextMate を使っています。Zen-cording が注目されていますが、コードヒントや入力補完、スニペットを入れとけば、便利な機能満載ですのでおすすめです。

XAMPPの導入

サーバに WordPress を設置してあったのですが、テーマを作るうえで、サーバ上での編集となると、なにかと面倒ですし、いろいろと危険はつきものです。というか、やりませんよね、ほとんど…最後の最後ぐらいしか。
そこで、WordPress の構築に必要な Apache,PHP,MySQL などを一括インストールできる XAMPP for Windows という便利セットを使い、ローカルにウェブサーバを作り、WordPress をインストールして編集を進めました。（XAMPP については、別エントリで書きます）
まずはローカルでテーマを作り、すべてが出来上がったらサーバにアップロードします。

どのファイルから作り始めるか

さて、テンプレート構成を理解したら、実際にテーマを作っていきます。

  • index.php
  • style.css

まず、ウェブページを表示する「index.php」から。
ほかにもページテンプレートや、単一記事のテンプレートなども、構成のしかたによってはあとあと必要になりますが、なにもかも index.php がベースになっていきますので、まずは index.php の作成をし、同時にスタイルシートでのデザインも進めます。

実際の作り方

メインインデックステンプレート

ファイル名こそ「index.php」ですが、最初はごくごくいたってふつうの HTML で書き込んでいきます。
テンプレートタグの登場はまだです。これはあとで HTML タグと置き換えます。（最初からわかっていれば全然問題ないと思いますが、わからないうちはまず HTML できちんと書いてから、それに該当するエンプレートタグに置き換えた方がわかりやすかと）
デザインに画像が必要なら作って、テキストなども CSS でデザインを整えます。

スタイルシート

CSS ファイルの冒頭には、コメント形式でテーマについての詳細を書いておく必要があります。
どこの誰がこのテーマを作ったか、という名札みたいなものでしょうか。

/*
Theme Name: テーマの名前
Theme URI: テーマのホームサイトの URI
Description: テーマの説明
Author:  制作者の名前
Author URI: 制作者の URI
Version: バージョン番号（任意）
*/

これがないと、WordPress の「デザイン」画面で正しく表示されないので、必ず記入しておきます。
themes フォルダにアップロードするフォルダの中に、作成したテーマのスクリーンショットを入れておくと、デザインの管理画面で表示される仕組みになっています。JPEG形式でオッケイです。（私は面倒なのでやっていませんが、テーマを配布する目的があるなら当然入れておくべきでしょう）

バックアップをとっておく

うっかりものの私は、常にバックアップを取っておくようにこころがけていましたが、ここでさらに、別の場所にもバックアップを取りました。なぜなら、このあとに HTML タグからテンプレートタグに置き換えたり、ページを分割するからです。
ここでうっかり必要なタグを消してしまったり、わけがわからなくなってしまったら元も子もないので…ほとんどの方は大丈夫かもしれませんが、念には念を、です。

HTML タグから、Wordpress のテンプレートタグに置き換える

おおかたコーディングもデザインもできあがったら、HTML タグから WordPress のテンプレートタグに置き換えられる箇所をピックアップして、置き換えます。

たとえば、サイトタイトルなら、
<title>サイトタイトル</title>
を
<title><?php bloginfo('name'); ?></title>
となります。

テンプレートタグは、別に使う必要もない場合もあったりします。必要な箇所にはプログラムを書いたり、HTML だけでそのままいけたり、なにがなんでもすべてをテンプレートタグに置き換える必要はありません。テンプレートタグを書くことによって、そのつどそれに当てはまるデータをデータベースから呼び出しているわけですから、微々たるものかもしれませんがサーバに余計な負担をかけたくないと思えばそうするべきかと。その見極めは人それぞれですので、柔軟に対応していけばよいと思います。

comments.php を作る

エントリに対してのコメントやトラックバックを受け付けるためのテンプレートを作ります。
私は、標準でインストールされているテーマ 「classic」 のコメントテンプレートをもとに、マークアップのしかたを少し変えたりしてカスタマイズしました。

WordPress 管理画面の「設定」→「ディスカッション」の設定で、「名前とメールアドレスの入力を必須にする」の項目にチェックを入れてある場合には、コメントテンプレートのフォームタグ部分に <?php if ($req) echo ‘(required)’; ?> を記述します。
if ($req) で入力が必須であることを指定し、echo ‘(required)’ で「必須（required）」のテキストを表示させます。

名前の入力フォーム
<p>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></label>
</p>
メールアドレスの入力フォーム
<p>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><?php _e('Mail (will not be published)');?> <?php if ($req) _e('(required)'); ?></label>
</p>

このときに、名前とメールアドレスは入力必須であることを書いておいてあげるとよいかなと思います。「echo ‘(required)’ 」がそれに該当しますので、ひと言添えておいた方がよいでしょう。
また、管理者が承認するまでコメントやトラックバックを表示させない設定にしてあるときには、コメントしてくれた人には自分のコメントを読めるのですが、実は承認されるまでほかの人からは見えない仕組みになっていますので、「承認されるまで表示されませんよ」ということに触れておいてあげるとさらに親切だと思います。

で、次は

さて、次はページを分割します。
…が、思いのほか長くなったので、それは次のエントリにでも。

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

popular posts

page top

Trackback URL：

8 Replies »

Comments

  1. コメント by dazzle07 — 2009-01-13 (火) 4:40 AM

    どーも！
    大変参考になりました。
    ありがとうございますー。

  2. コメント by maako — 2009-01-17 (土) 3:30 PM

    dazzle07さん。
    はじめまして。コメントありがとうございます。
    お役に立てたようで、何よりでしたー。:D

  3. コメント by s — 2011-04-26 (火) 1:15 PM

    わかりやすいです、ありがとうございます。

Trackbacks & Pingbacks

  1. ピンバック by テーマ作成に向けて | Log07 — 2009-01-13 (火) 5:37 AM

    [...] は検索の日々になりそうです。 WordPressのテーマを作る　その1 [...]

  2. ピンバック by WordPress Themes開発参考リンク « ここにブログタイトル — 2009-11-08 (日) 6:18 PM

    [...] WordPressのテーマを作る　その1 [...]

  3. ピンバック by 見つけたっ！　テーマ作成の入門サイト | わからん！ — 2010-04-26 (月) 1:18 AM

    [...] で、sui様のサイトを見て「そういうことだったのか~」と超納得。 WordPressのテーマをつくる　その１ [...]

  4. ピンバック by オリジナルテーマ作成 | WordPressメモ — 2011-02-08 (火) 11:58 PM

    [...] WordPressのテーマを作る　その1 http://suirakukai.com/wordpress/13/wordpress-theme-making-01 カテゴリー: nyamiell   パーマリンク ← サイト制作事例 WPとSEO → [...]

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

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

Leave a comment

  • お名前、メールアドレスの入力は必須ですが、メールアドレスは表示されません。
  • コメントは管理者の承認後に表示されます。ご了承ください。
(required)
(will not be published), (required)
your comments

recent posts

comments

trackbacks

category

archives

tags