WPテーマに必要最低限のファイルを揃える2012年5月24日WordPressのテーマの作り方について、何回かに分けて連載していきたいと思います。タイトルにある通り、ゼロの状態から最低限のファイルを作成し、Wordpressの動作を確認しながら、機能を追加していくというスタイルで進めます。WordPressのテーマ作成準備テーマ作成を始める前に、テーマ開発の準備について少し触れます。(※既にテーマ作成の環境が整っている方は、この項目をSkipしてください。)Wordpressのテーマを作成する上で必要なものが、大きく分けて2つあります。1つはWordpressを動かすための環境、もう1つはテーマを記述するためのエディタです。WordPressを動かすための環境まずWordpressを動かすための環境を用意します。Wordpressは、「PHP」というプログラミング言語で書かれたプログラムを使ってサーバー上で動作し、htmlを動的に生成するツールです。そのため、作成したテーマの動作を確認するためには、PHPが動作するサーバ環境が必要になります。テーマ開発中は、自分のローカルマシン上でWordpressを動かして動作確認したいものです。そのため、ローカルマシン上でWordpressが動作する環境をつくる必要があります。導入方法は色々ありますが、簡単な方法として、XAMPPBitNamiMAMPなどのパッケージを利用する方法があります。私自身はBitNamiをmacに入れて利用しています。これは、Apache(サーバ)とMySQL(データベース)とPHPとWordpressを一気にインストールすることができます。BitNamiのインストール方法は、こちらのサイトが詳しいです。テーマ開発の上で、必要になるかもしれないBitNamiの構成&操作方法を、こちらに書いておきます。Wordpressのインストールが終わりましたら、ダッシュボードを開いて、サイトの設定を変えてみたり、投稿してみたりするなど、Wordpressに触ってみてくださいね。エディタを用意する次にテーマを編集するエディタを用意します。エディタは、UTF-8を扱えるエディタなら基本的に何でも良いのです。過去にWordpress.orgのフォーラムで話題になっているので(こちら)、決める上で参考になるかもしれません。私自身はテキストエディタではなく、AdobeのDreamweaverを使っています。最初のWordPressテーマ作成お好きなディレクトリに、フォルダを1つ作成します。今日はファイルを3つだけ作成します。作成するファイルindex.phpstyle.cssscreenshot.jpgファイル名は大切です。このままの名前でファイルを作成してください。index.phphtmlを生成する基本ファイルになります。?></body>style.css基本のスタイルシートです。全てコメントアウト(/*〜*/)してありますが、これらはWordpressにテーマを登録するときに必要な情報です。style.cssファイルの先頭に書かれている必要があります。1.1*/各行のコロン(:)の右側に、テーマ名や、テーマの説明、作成者などの情報を記載します。ここでは未だスタイル指定しておりません。screenshot.jpgWordPressのダッシュボード上で、外観>テーマを表示したときに表示される画像です。H660ピクセル)で作成すると、そのままの大きさで表示されます。画像サイズの値を現状仕様に変更しました3つのファイルが用意できたら、そのフォルダをZIP形式で圧縮してください。これで、最初のテーマは完成です。自作テーマをWordpressに適用する作成したテーマをWordpressにアップロードします。アップロードの方法は【こちら】などのサイトに詳しく書いてあります。アップロード出来たら、そのテーマを有効化してください。Wordpressの外観>テーマで、今アップロードしたテーマを確認してみましょう。サムネイルの写真はscreenshot.jpgとして指定した画像が表示されていますよね。テーマ名や説明文の欄に、cssファイルで記載した内容が表示されています。次に、「サイトを表示」でサイトを見てみましょう。下のような画面が出てくるはずです。WordPress!」というメッセージが表示されていれば、実験成功です。ブラウザの「ソースを表示」を使って、ソースコードを確認してみます。Wordpress!</body></html>ソースコードを理解する今回作成したテーマは、「index.php」と「Wordpressダッシュボードでの設定情報」の2つから、先ほどのサイトが出来上がっています。「index.php」と「サイトのソース」を比べてみると、その内容はかなり似通ったものになっています。違うところは、Wordpress関数を挿入した所と、PHPコードを挿入した所です。index.phpのファイルの中で、関数を挿入した箇所を、上から順に見て行きましょう。?>がWordpress関数を利用している箇所です。?>)の中に書きます。ここでは、Wordpressのダッシュボードで指定している文字のエンコード情報を、bloginfo(‘charset’)関数でソースコードに出力しています。Wordpressのダッシュボード>設定>表示設定>ページとフィードの文字コードを確認してみてください。それがあなたのサイトソースに反映されているはずです。?></title>ここでは、ページのタイトルをWordpressのダッシュボードで指定した「サイト名」を出力する関数bloginfo(‘name’)を使っています。?>の部分がサイト名に置換されたhtmlが出力されます。/>このテーマのスタイルシート(style.css)のURLを出力する関数bloginfo(‘stylesheet_url’);を使って、スタイルシートをインポートするコードを出力します。実行すると、PHPブロックの箇所がスタイルシートのURLに置き換わります。WordPress!”というテキストを出力しています。WordpressはPHPを使って動作するので、Wordpress関数だけでなく、PHPの関数も同じファイルに混在させることができます。ここで利用しているWordpress関数は、全てbloginfo()です。これはサイトの色々な情報を出力してくれる関数です。引数によって、どの情報を出力するかを制御することができます。WordPressの公式リファレンスに引数リストがあります。その他のWordpress関数も、公式リファレンスに掲載されているので、必要に応じて確認しましょう。テーマ作成のまとめ最後に、今回のテーマ作成のポイントをまとめます。bloginfo()はサイトの情報を出力する関数。どの情報を出力するかを、引数で制御する。PHP関数とWordpress関数は、htmlコードの中に混在できる。次回は、投稿した記事を出力できるように、テーマをカスタマイズする方法を書きたいと思います。2012年5月Authorプログラマー:TaeWordPressのサイト制作を始めて2年になりました。WordPressテーマの作り。