WordPressのオリジナルテーマを作るためのファーストステップ

Posted under - WordPress

7

WordPressをカスタマイズするにはちょっと予備知識が必要です。HTML、CSS、PHPなどの知識はもちろんある程度必要ですが、それ以外にも WordPressならではの "テーマ" に関する知識が必要です。初めて WordPress のテーマをカスタマイズするときの手順をご紹介します。

WordPress Customize

WordPress を使えば、オリジナルデザインの自分だけのブログを作ることができます。でも WordPress で作られたブログをカスタマイズするためには、何をどうすればいいのでしょう?今回は WordPress のカスタマイズするための基礎知識、“テーマ” について見ていきながら、WordPress ブログのオリジナルテーマの作り方の手順を見ていきます。

まず、インストールしたばかりの状態の WordPress では、デフォルトのテーマが選択されていて、すぐにでもブログを書いて公開することができますよね。例えば下記は、デフォルトの Twenty Eleven というテーマで、ひとつ記事を書いてみた例です。

WordPress のデフォルトのテーマ – TwentyEleven

Twenty Eleven

左がトップページ、右がブログの記事ページです。ヘッダー画像が違いますが、これはテーマがランダムに表示している画像です。

このテーマを自分の好きなデザインに変更するのが今回の記事の目的です。それではテーマとは何でしょうか?テンプレートと言った方が分かりやすいかもしれませんが、WordPress では、いくつかの PHPファイルとスタイルシートをセットにしたものを “テーマ” と呼んでいます。それではもう少しテーマについて詳しく見てみましょう。

1. WordPressのテーマとは?

ダウンロードしたばかりの WordPress のフォルダ(前の記事では myblog と名前を変えましたね!)の中を見てみると、wp-content というフォルダがあるはずです。さらに wp-content フォルダの中には themesフォルダがあり、その中にいくつかのテーマが格納されているはず。

ダウンロードしたままの状態では、このフォルダの中にいくつかのテーマがあるはずです。例えば WordPress Ver3.2(2012年 2月現在)では、TwenntyTenTwentyEleven というふたつのテーマがあります。そしてそれぞれのフォルダの中には、いくつかの PHPファイルと style.css というスタイルシート、screenshot.png という画像ファイルがあるはずです。

wp-contentフォルダ

wp-content

それではここで一度、WordPress の管理画面を見てみましょう。左側メニューの 外観 → テーマ を見てみると、現在使用できるテーマ(インストール済みのテーマ)が表示されます。

インストール済みのテーマ

どうですか?ここに Twenty ElevenTwenty Ten いうテーマがあるのが分かると思います。これがさっき見た themesフォルダの中にあったふたつのテーマです。でも …

「デザインが違うだけならスタイルシートだけでいいんじゃないの?」
「どうしてPHPファイルまで別々なの?」

という声が聞こえてきそうですねー。どうしてスタイルルシートだけじゃないいんでしょう?

まず WordPressは PHPというプログラム言語で書かれています。例えばブログの記事だけでなく、普通の独立したページを作ってポートフォリオやプロフィールを表示したいとか、トップページは写真ギャラリーにしたいとか …。WordPress では、そんな風に色んな構造のページを作ることができるんです。これは見た目だけでなく、もちろん HTMLの構造まで変更しないとできませんよね!

そういう訳で WordPress のテーマでは、スタイルシートだけでなく PHPファイルとセットになっていて、この PHPファイルをカスタマイズすれば、HTMLの構造なども変更することができるんです。そしてこれらをまとめたひとつのテンプレートを、WordPress では テーマ と呼んでいるんです。

WordPress をカスタマイズするには PHP の知識もある程度必要になりますが、デザインだけでなく機能の部分もカスタマイズできるのが魅力のひとつ。カスタマイズ次第でオリジナルのテーマが自由自在に作れるので、とっても楽しいブログツールなんですね!

2. WordPressブログの構造を見てみよう

それではさっきも紹介したデフォルトのテーマ Twenty Eleven を使って、WordPressブログ(実際に表示されるページ)の構造をみてみましょう。WordPressでは基本的に、ひとつのページを表示するために、複数の PHPファイル(WordPressではテンプレートファイルと呼んでいます)を組み合わせて使っています。

例えばトップページなどを表示する index.php では header.phpsidebar.phpfooter.php が使われていますし、ブログの個別の記事ページを表示する single.php では header.phpfooter.phpcomments.php が使われているといった具合です。

index.php

index.php

トップページなどを表示する index.php では、header.php などの複数のファイルが読み込まれています!

今度は実際にブラウザで表示されたもので見てみましょう。

WordPressブログの構造

index.php, single.php

左がトップページとなる index.php、左がブログの個別記事となる single.php の構造です。

こんな風にひとつのページを表示するのに、いくつかのテンプレートファイルを使って構成されています。ヘッダー部分は header.php、サイドバーは sidebar.php、フッターは footer.php といった具合です。

3. オリジナルテーマを作成してみよう

それでは実際にオリジナルテーマを作成するステップを見てみましょう。作成といっても初めての場合は一から作成するのではなく、シンプルなテーマをカスタマイズしていった方が効率もよく簡単です。

そこで無料配布されているシンプルなテーマをひとつダウンロードしておきましょう。おすすめなのは N.Design Studio の無料配布テーマ、GlossyBlue です。

GlossyBlue は無料で利用できますが、N.Design Studio へのリンクをサイト内に貼ることが求められています。

ダウンロードしたファイルを解凍してみると、フォルダの中には WordPress のテーマファイルの他に、glossyblue – html files フォルダがあると思います。こちらは PHPコードの無いスタティックな HTML + CSS で、ページのデザインをカスタマイズするのに使います。index.html はトップページ、single.html は記事ページ、page.html は個別ページになっていて、style.css がスタイルシートになります。

GlossyBlue

Glossy Blue

左が index.html、右が single.html です。

3.1. HTML + CSS でデザインを先に作る

Web Designer Wall の著者 Nick La 氏は、まずスタティックな HTML でデザインを作って、その後テンプレートタグと呼ばれる WordPressの PHP関数をコピー & ペーストする方法を勧めています。

私もまずは静的な HTML + CSS の段階でデザインのレイアウト崩れなどをチェックして、あとからゆっくり WordPress のテーマ化をすすめています。index.htmlsingle.html、(個別ページを作るなら page.html)のデザインをこの段階で作成してしましょう。(初めての方はこの段階でデザインが完成することはないと思います。なぜならこれから WordPress をもっと知るたびに色々やりたい事がでてくるはずですからー!)

3.2. デザイン完成後、WordPress のテーマ化

デザインが完成したら WordPress の動的部分、PHP で書かれた部分をコピー & ペーストしていきます。テンプレートタグを HTMLファイルにペーストして .php という拡張子にして保存します。

テンプレートタグのコピー & ペーストについては、参考サイト Web Designer Wall に詳しく書いてある他、Webクリエイターボックス さんがとても分かりやすく翻訳してくれました。

こんな手順でシンプルなテーマ – GlossyBlue を基本にしてカスタマイズしていく訳ですが、GlossyBlue のテーマは実は未完成なんです。このままだと検索フォームとコメントフォームが使えないので デフォルトでインストールされているテーマなどから、comments.phpsearchform.php を glossyblue フォルダにコピーしておきましょう。

ちなみに私は WordPress 2.9 の頃のデフォルトのテーマだった、Default というテーマから comments.php と searchform.php をコピーしました。

comments.phpとsearchform.phpをコピー

3.3. テーマの名前を変更

今度はこのテーマ “glossyblue” を、カスタマイズベースとしてフォルダごとをコピー(index.html などの html ファイルは必要ありません)して mydesign など別名で保存しておきます。そして style.css 内のコメント部分を変更しましょう。

GlossyBlueのstyle.css
/*
Theme Name: GlossyBlue
Theme URI: http://www.ndesign-studio.com
Description: A theme by <a href="http://www.ndesign-studio.com">N.Design Studio</a>.
Version: 1
Author: Nick La
Author URI: http://www.ndesign-studio.com
*/

上記の 2行目 – Theme Name の部分を書き換えないと WordPress で GlossyBlue と別のテーマだという事を認識してくれないので、下記のように MyDesign などに変更しておきましょう。ついでにデザインができたらスクリーンショットを撮って screenshot.png という名前でフォルダ内に格納すれば、管理画面の 外観 → テーマ でスクリーンショットが表示されるようになります。

  • 2. Thema Name: MyDesign(via GlossyBlue)

4. テンプレートファイルをもっと詳しく見てみよう

WordPress のテンプレートファイル(PHPファイル群)についてもうちょっと触れておきましょう。ここで紹介するテンプレートファイルは、WordPress で使われるテンプレートファイルのほんの一部ですが、どんなサイトを作る時にも必ず使う基本的なファイルです!

index.php

まずは WordPress で絶対に必要なファイルがこの index.php です。これはブログのトップページで使われる他にもいろいろな所で使われます。例えばカテゴリーをクリックしたときや、タグをクリックしたとき、検索結果を表示するときなどにもこの index.php が使われます。テーマには絶対に必要な基本となるテンプレートファイルです。

single.php

single.phpは、ブログの個別の記事を表示するときに使われるテンプレートファイルです。ひとつの記事を冒頭から最後まで表示し、コメントがあればコメント、その下にコメントフォームを表示します。コメント以降の部分は別のテンプレートファイル comments.php(さっきコピーしましたね!)を読み込んで表示するのが一般的です。

page.php

WordPress では、ブログとは別に独立した固定ページをいくつも作る事ができます。このブログでも、自己紹介のための About というページと、お問い合わせ用の Contant という固定ページを作っています。管理画面にはブログの投稿とは別に、固定ページ というメニューがありますが、ここで作ったページが独立した固定ページになります。

固定ページの作成・編集画面
固定ページの作成・編集画面

管理画面のメニュー → 固定ページ から、ブログの投稿とは別に固定ページを作ることができます。また、固定ページでは画面右がわの “テンプレート” で、使用するテンプレートを選ぶことができます。

この固定ページを作るデフォルトのテンプレートファイルが page.php なんです。でも、固定ページのレイアウトも複数用意したいところです。固定ページ用のテンプレートファイルはいくつも作る事ができるので、自由にカスタマイズしてオリジナルのテーマを作り上げる事ができますね!

4.1. 固定ページ用のテンプレートの作り方

それではどうやって複数の固定ページ用のテンプレートを作ればいいのでしょう?やりかたはとっても簡単です。テンプレートファイルの冒頭に、以下のようなコメントを書けばいいだけなんです。

/*
Template Name: About
*/

コメントの Template Name の部分に好きな名前をつければ、固定ページの新規追加画面で、このテンプレートが使えるようになります。なのでまずは page.php をコピーして、上記のようにコメントをいれてから about.php などの名前で保存してみてください。そうすれば固定ページの作成画面で、About というテンプレートが利用できるようになります。あとはこの about.php の中をカスタマイズして、レイアウトなどを変更すれば OKです!

ちょっと駆け足気味でしたが、WordPress のカスタマイズするための基本的なことをまとめてみました。

Comments

Thank you for the comment.