WordPress テーマ 自作のススメ

前回の記事 「作成するテンプレートを整理する」 で
作成すべきテンプレートを拾い出しました。

これから実際にPHPでテンプレートファイルを作成していくようになりますが、
自作テーマは WordPress にどのように設置 / 適用していけばよいのでしょう？

簡単です。
/[WordPressインストールディレクトリ]/wp-content/themes に
テーマを示す名前を付けたディレクトリを作成し、
その中に作成したファイルを置いていくだけです。
ここに配置したものがテーマとして認知され、
管理画面の [外観 - テーマ] から選択できるようになります。
「/wp-content/themes 配下に、ディレクトリごと配置しなさい」
ということですね。

WordPress テーマ のお作法として、スタイルシート style.css を外部ファイルとして
作成するのですが、このファイルのコメントで

といったものを記述します。
別にこのコメントがなくても動きはしますが、
こういった ファイルコメントや functionコメント はきちんと書いていた方がいいですよね
プログラマでも Webデザイナでも・・・

これらが 管理画面 [外観 - テーマ] で、テーマ詳細を開いた場合に
表示されるようになっています。
WordPress 3.8 や 3.9 のデフォルトテーマである、
TwentyFourteen や TwentyThirteen を参考にするとよいでしょう。
SmartStyle では、以下のようにしています。

/*
Theme Name: Smart Style
Theme URI: http://wordpress.windows-style.info/smartstyle
Author: suzu
Author URI: http://wordpress.windows-style.info/
Description: マニュアルやTips記録用に最適化された３カラムレイアウトのWordPressテーマです。カテゴリで階層化された記事メニューや外部リンクを利用すると、簡単にマニュアルサイトが作成できます。SEO対策をちょっとだけ意識したタグ構成で、すっきりと読みやすいスタイルシートが特徴です。HTMLやプログラムのソースを読みやすく掲載するSyntaxHighlighter(標準で HTML, XML, CSS, JavaScript, PHP, Perl, C/C++, C#, VB, Java, SQL のライブラリをロード)が利用できます。アクセス解析用のコード(Google Analytics等)を全てのページに自動的に挿入することができ、また、左右のサイドバー上下、コンテンツエリア上中下と計７箇所に広告コードのタグを挿入することができますので、GoogleAdSense や Amazonアソシエイト等のアフェリエイトを運営するのにも便利です。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: シンプル, 白, グレー, ライトカラー, ダークカラー, 3列, 左サイドバー, 右サイドバー, 固定レイアウト, カスタム背景, カスタムヘッダー, カスタムメニュー, エディタースタイル, テーマオプション
*/

また、テーマディレクトリ内に screenshot.png を配置すると、
これが 管理画面 [外観 - テーマ] で表示されるスクリーンショットとして
表示されます。
WordPress 3.8 以降向けにテーマを作成するのであれば、
縦横比 4 : 3 、解像度は 880px * 660px で作成しましょう。

さて、いよいよ次回から実際のテンプレートファイルの作成について解説する予定です。
はじめはベースで作った HTML や CSS を WordPressテンプレート として
使用できるよう修正していくといった簡単なところから入りますが、
最終的にはオリジナルウィジェット(PHP) の作り方や
WordPress のビジュアルエディタである
TinyMCE のプラグイン(JavaScript) の作り方といった
プログラマ的にもコアなところまで
WordPress本体のソース対比も織り交ぜながら
解説していきたいと思ってます。

なかなかそこまで突っ込んだ情報を(日本語で)公開しているサイトは少ないので、
沢山の人に見てもらえるといいなぁ・・・