WordPressのテーマの作り方について、何回かに分けて連載していきたいと思います。タイトルにある通り、ゼロの状態から最低限のファイルを作成し、Wordpressの動作を確認しながら、機能を追加していくというスタイルで進めます。どうぞ宜しくお願いいたします。

WordPressのテーマ作成準備

テーマ作成を始める前に、テーマ開発の準備について少し触れます。（※既にテーマ作成の環境が整っている方は、この項目をSkipしてください。）Wordpressのテーマを作成する上で必要なものが、大きく分けて２つあります。１つはWordpressを動かすための環境、もう１つはテーマを記述するためのエディタです。

用意するもの
  1. WordPressを動かすための環境（サーバソフト＋データベース＋PHP＋Wordpress）
  2. テーマを記述するためのエディタ

1. WordPressを動かすための環境

まずWordpressを動かすための環境を用意します。Wordpressは、「PHP」というプログラミング言語で書かれたプログラムを使ってサーバー上で動作し、htmlを動的に生成するツールです。そのため、作成したテーマの動作を確認するためには、PHPが動作するサーバ環境が必要になります。

またテーマ開発中は、自分のローカルマシン上でWordpressを動かして動作確認したいものです。そのため、ローカルマシン上でWordpressが動作する環境をつくる必要があります。導入方法は色々ありますが、簡単な方法として、

  • XAMPP
  • BitNami
  • MAMP

などのパッケージを利用する方法があります。私自身はBitNamiをmacに入れて利用しています。これは、Apache（サーバ）とMySQL（データベース）とPHPとWordpressを一気にインストールすることができます。なおBitNamiのインストール方法は、こちらのサイトが詳しいです。

テーマ開発の上で、必要になるかもしれないBitNamiの構成＆操作方法を、こちらに書いておきます。Wordpressのインストールが終わりましたら、ダッシュボードを開いて、サイトの設定を変えてみたり、投稿してみたりするなど、Wordpressに触ってみてくださいね。

 

2. エディタを用意する

次にテーマを編集するエディタを用意します。エディタは、UTF-8を扱えるエディタなら基本的に何でも良いのです。過去にWordpress.orgのフォーラムで話題になっているので（こちら）、決める上で参考になるかもしれません。なお、私自身はテキストエディタではなく、AdobeのDreamweaverを使っています。

最初のWordPressテーマ作成

お好きなディレクトリに、フォルダを１つ作成します。今日はファイルを３つだけ作成します。

作成するファイル
  • index.php
  • style.css
  • screenshot.jpg

ファイル名は大切です。このままの名前でファイルを作成してください。

 

index.php

htmlを生成する基本ファイルになります。

style.css

基本のスタイルシートです。全てコメントアウト（/*〜*/）してありますが、これらはWordpressにテーマを登録するときに必要な情報です。style.cssファイルの先頭に書かれている必要があります。

各行のコロン（：）の右側に、テーマ名や、テーマの説明、作成者などの情報を記載します。なお、ここでは未だスタイル指定しておりません。

screenshot.jpg

WordPressのダッシュボード上で、外観＞テーマを表示したときに表示される画像です。画像の大きさは（W880 x H660ピクセル）で作成すると、そのままの大きさで表示されます。※2014/6/15修正 画像サイズの値を現状仕様に変更しました

３つのファイルが用意できたら、そのフォルダをZIP形式で圧縮してください。これで、最初のテーマは完成です。

 

自作テーマをWordpressに適用する

作成したテーマをWordpressにアップロードします。アップロードの方法は【こちら】などのサイトに詳しく書いてあります。アップロード出来たら、そのテーマを有効化してください。

まずは、Wordpressの外観＞テーマで、今アップロードしたテーマを確認してみましょう。サムネイルの写真はscreenshot.jpgとして指定した画像が表示されていますよね。そして、テーマ名や説明文の欄に、cssファイルで記載した内容が表示されています。

次に、「サイトを表示」でサイトを見てみましょう。下のような画面が出てくるはずです。ブラウザのタイトルバーに、あなたがWordpressの設定メニューで指定した「サイト名」が表示されているでしょうか？またページ内に、index.php内で記載した「Hello, welcome to WordPress!」というメッセージが表示されていれば、実験成功です。

screenshot_wordpress001

また、ブラウザの「ソースを表示」を使って、ソースコードを確認してみます。

サイトのソース

 

ソースコードを理解する

今回作成したテーマは、「index.php」と「Wordpressダッシュボードでの設定情報」の２つから、先ほどのサイトが出来上がっています。「index.php」と「サイトのソース」を比べてみると、その内容はかなり似通ったものになっています。違うところは、Wordpress関数を挿入した所と、PHPコードを挿入した所です。index.phpのファイルの中で、関数を挿入した箇所を、上から順に見て行きましょう。

<meta charset="<?php bloginfo('charset'); ?>" />

このうち、<?php bloginfo(‘charset’); ?>がWordpress関数を利用している箇所です。まず覚えるべき決まり事として、Wordpress関数はPHPブロック（<?php 〜 ?>）の中に書きます。ここでは、Wordpressのダッシュボードで指定している文字のエンコード情報を、bloginfo(‘charset’)関数でソースコードに出力しています。Wordpressのダッシュボード＞設定＞表示設定＞ページとフィードの文字コードを確認してみてください。それがあなたのサイトソースに反映されているはずです。

<title><?php bloginfo('name'); ?></title>

ここでは、ページのタイトルをWordpressのダッシュボードで指定した「サイト名」を出力する関数bloginfo(‘name’)を使っています。このテーマを実行すると、<?php bloginfo(‘name’); ?>の部分がサイト名に置換されたhtmlが出力されます。

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

このテーマのスタイルシート（style.css）のURLを出力する関数bloginfo(‘stylesheet_url’);を使って、スタイルシートをインポートするコードを出力します。実行すると、PHPブロックの箇所がスタイルシートのURLに置き換わります。

<?php echo 'Hello, welcome to WordPress!'; ?>

bodyの中に、PHPのecho文で”Hello, welcome to WordPress!”というテキストを出力しています。WordpressはPHPを使って動作するので、Wordpress関数だけでなく、PHPの関数も同じファイルに混在させることができます。

ここで利用しているWordpress関数は、全てbloginfo()です。これはサイトの色々な情報を出力してくれる関数です。引数によって、どの情報を出力するかを制御することができます。WordPressの公式リファレンスに引数リストがあります。その他のWordpress関数も、公式リファレンスに掲載されているので、必要に応じて確認しましょう。

 

テーマ作成のまとめ

最後に、今回のテーマ作成のポイントをまとめます。

  • WordPress関数は、PHPブロック<?php ?>内に記載する。
  • bloginfo()はサイトの情報を出力する関数。どの情報を出力するかを、引数で制御する。
  • PHP関数とWordpress関数は、htmlコードの中に混在できる。

次回は、投稿した記事を出力できるように、テーマをカスタマイズする方法を書きたいと思います。

 

「WordPressテーマ講座：旧版」の記事