#002 wordpressテーマづくり、最初の一歩。

Screenshot

前回、作りたいテーマのHTML構造を考えたので、続いてwordpressのテーマ作りにとりかかります。

先にcssによるデザインまで完成させてからテーマに落とし込んでいくのが正攻法かもしれませんが、今回は(というか僕の場合は)作りながらデザインも手を入れていく感じで進めます。
これは単なる僕の持論ですが、Webというのは“日々トライアル&エラーを繰り返しながら少しづつバージョンアップしていくもの”だと思っているので、先に「完成形」を作りすぎない方が良いと思っています。
なので、デザインや機能も、作りながら改良を重ねていこうと思います。
(だからこそ、ソースが汚くなったり、構造が怪しくなったりすることも多いので、そこだけは気を付けないとね!!)

まずはテーマの最小構成をつくる

wordpressのテーマって、実はindex.phpというファイルと、style.cssの2ファイルがあれば、それでテーマとして認識されます。

というわけで、上記2つのファイルを作成。(ファイルの中身はもちろん中身は空です。)

と、これだけではまだテーマとしては認識されず、style.cssにテーマとして認識させるためのヘッダ情報が必要です。

ヘッダ情報は以下のとおり。

[css]
/*
Theme Name: テーマ名
Theme URI: テーマのURL
Author: テーマの作者名
Author URI: テーマの作者のURL
Description: てーまの説明
Version: バージョン
License: ライセンス
License URI: ライセンスのURL
Tags: タグ情報
Text Domain: テキストドメイン(翻訳のために必要)
*/
[/css]

何やらいろいろ書くことはありますが、必要なのは「Theme Name」のみ。
配布する場合はバージョン情報やライセンス情報なども必要ですが、自分だけが使うのであれば特に考える必要はないでしょう。

さて、これでテーマの最小構成が完成です。
上記の2ファイルを「新規フォルダ(わかりやすくテーマ名をつけておいた方がいいでしょう。)」に格納して、wordpressのwp-content/themesフォルダに移動させます。

すると、、、
wordpressの管理画面の「外観>テーマ」にテーマが出現します!

スクリーンショット 2014 04 14 22 44 19

ただ、、これだとちょっと味気ない。。。
というわけで、テーマ一覧に表示される画像を作成します。

この画像の設定は超簡単で、先ほど移動させたテーマフォルダ内にscreenshot.png(jpgでも可。画像サイズは640px×480px以下が推奨)という名前の画像ファイルを格納するだけ。
文字通り「スクリーンショット」を置くのがいいんでしょうが、まだ未完成なのでスクリーンショットはありません。
また、自分用に使うテーマであれば、ただただ「自分のテンションが上がる画像」を置いたっていいんです!!

ちなみに、僕が今作っているテーマは、当ブログ「ultimate-ez.com」の4代目のテーマ。
つまり「Act.4」!!

ということで、使う画像は、、、これだ!!!

Screenshot
※配布を目的としたテーマつくりの場合は、こういう著作権無視の画像は使っちゃダメよ!

さっそくもう一度管理画面を確認してみると、、、

スクリーンショット 2014 04 14 22 49 34

出た!!

早速テーマを有効化してサイトを表示すると、、、

スクリーンショット 2014 04 14 22 52 20

当然ですが、何も出ません。だって何も書いてませんからね!
ここから各種テンプレートファイルを作成しながら、テーマの完成を目指します。

というわけで、テーマづくりの最初の一歩はこんな感じなのでした。
次は「header.php」の作り込みを始めようと思います!(前回と同じ締め!)

「ultimate-ez.comを支える技術」のまとめ

このレビューの関連アイテム

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です