記事一覧

自作テーマの設置方法

 posted by suzu
テンプレート作成のススメ

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

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

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

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

Theme Name: テーマ名
Theme URI: テーマURL
Author: 作成者
Author URI: 作成者URL
Description: 説明
Version: バージョン
License: ライセンス
License URI: ライセンスURL
Tags: タグ

といったものを記述します。
別にこのコメントがなくても動きはしますが、
こういった ファイルコメントや 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記録用に最適化された3カラムレイアウトのWordPressテーマです。カテゴリで階層化された記事メニューや外部リンクを利用すると、簡単にマニュアルサイトが作成できます。SEO対策をちょっとだけ意識したタグ構成で、すっきりと読みやすいスタイルシートが特徴です。HTMLやプログラムのソースを読みやすく掲載するSyntaxHighlighter(標準で HTML, XML, CSS, JavaScript, PHP, Perl, C/C++, C#, VB, Java, SQL のライブラリをロード)が利用できます。アクセス解析用のコード(Google Analytics等)を全てのページに自動的に挿入することができ、また、左右のサイドバー上下、コンテンツエリア上中下と計7箇所に広告コードのタグを挿入することができますので、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本体のソース対比も織り交ぜながら
解説していきたいと思ってます。

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

関連記事

eyecatch_template

home.php を作成する

今回は、ブログ投稿インデックス (一覧) ページである home.php を作成...

記事を読む

eyecatch_template

フィードリンクを追加する

色々紆余曲折 (詳細は後日記事にします) あって少し時間が空いてしまいましたが、...

記事を読む

eyecatch_template

コピーライトを表示する

今回は footer 領域にコピーライトを表示してみます。 特にどうっていうこと...

記事を読む

カレンダー

2024年10月
« 7月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
PAGE TOP ↑