こんばんわ^ ^。
そろそろWordPressのテーマを勉強する気になってきたのでテーマ作成に挑戦しようと思います。テンプレートタグにはどんなものがあるかとか、どういう風に書けばいいのかとかほとんど知識なし。もうゼロからのスタートになります。
しばらくは次のような方向でいきます。
- index.phpテンプレートからはじめる
- テンプレートタグはひとつずつ理解していく
- 調べてもわからないタグはとりあえず無視
- ウィジェットに対応・・・するかは微妙
- 将来的にはテンプレートの雛形になるように
- テーマの名前は単純に「Theme Base」
- デザインは考えていない
- のちのち個人的にコーディングしやすいようにidやclassは随時追加しておく
ブログに基本情報は次のとおり。
- XAMPP1.7をインストールしたローカル環境にWordPressをインストール
- URL：http://localhost/wordpress/
- ブログURLも上と同じ
- ブログタイトル：ゼロから作るWordPressサイト
- ブログの説明：WordPressでゼロからテーマを作る様子をレポートするサイト
ザックリこんな感じです。途中で変わるかもしれませんが・・・。
テーマ作りの基本
参考にするのはもちろん公式マニュアル。
テーマの作成について書かれているページはここ。
英語苦手なので日本語サイトを参考に、最新の情報は英語のサイトで調べていきます。
テーマ作成に最小限必要なテンプレートは
- style.css
- index.php
- screenshot.png
の三つだけです。
style.css
ブログのデザインを決めるためのファイルですね。まだスタイルは無視なので中身はつくりませんが、以下の記述がないとテンプレートディレクトリにアップロードしてもテーマとして認識してくれません。
/* Theme Name: テーマの名前 Theme URI: テーマのホームサイトの URI Description: テーマの説明文 Author: 作者の名前 Author URI: 作者の URI Template: 親テーマの定義（オプション） Version: バージョン番号（オプション） . コメント／利用許諾の記述（あれば） . */
いまのところ公開予定はないのでこのあたりは適当につけて次のようにしました。
- Theme Name: Theme Base
- Theme URI: http://localhost/wordpress/
- Description: これからのテーマの雛形となるようなテーマ
- Author: PAON
- Author URI: http://scianto.net/
- Version: 1.0.0
CSSファイルの中身はこのコメント部分のみで保存しておきます。
index.php
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equi="Content-Style-Type" content="text/css" />
<meta http-equi="Content-Script-Type" content="text/javascript" />
<title><?php bloginfo('name');?></title>
</head>
<body>
<h1><?php bloginfo('name');?></h1>
<p><?php bloginfo('description');?></p>
</body>
</html>
とりあえず上のように超～簡単なテンプレートにします。中で使っているテンプレートタグはbloginfo()のみです。bloginfo(‘name’)はブログのタイトル、blog(‘description’)はブログの説明文を出力します。
とりあえずこれで保存。
では次！。
screenshot.png
管理画面からテーマを選択するときに表示されるスクリーンショット画像です。公式ドキュメント内ではこれに関するページを見つけられなかったので既存のテーマを参考にすると、まず画像のサイズは300×225pxのようです。使えるファイル形式はpng、gif、jpgファイルを扱うことができるようです。
ちなみにscreenshot.png、screenshot.gif、screenshot.jpgという同じ名前のファイルがあるときはpng>gif>jpgの順で読み込みの優先順位がつけられるようです。まあ、そんなことはしないと思います が・・・・。
Fireworksで簡単に画像を作って「screenshot.png」で保存しました。
テーマを選択
作った三つのファイルをthemebaseディレクトリにいれてwp-content/themesにインストール、テーマを有効にします。
ブログにアクセス（http://localhost/wordpress/）すると
タイトルと説明文が表示されました。
とりあえずここまで。
関連する投稿
-
[...] ゼロから作るWPテーマ[WordPressテーマ作成 #1] [...]
-
[...] ゼロから作るWPテーマ[WordPressテーマ作成 #1] | PAOLOG. [...]
-
[...] ゼロから作るWPテーマ[WordPressテーマ作成 #1] | PAOLOG これからテーマをつくるのです。 (tags: wordpress themes) [...]
名前：paon
4 comments
参考になりました。