DAINASHI YESTERDAY

2016.12.10

WordPressテーマを作る下準備

前回、WordPressにて運営するウェブサイトを、まずはHTMLで制作するというところまでお話ししました。今回は、前回制作したHTMLを元にWordPressテーマを制作するための下準備をしていきたいと思います。

WordPressテーマに必要なファイル

WordPressテーマには、最低限必要なファイルが4つ※あります。

  • style.css
  • index.php
  • functions.php
  • screenshot.png

お使いのパソコンのデスクトップなどに、これから作るWordPressテーマの名前(半角英数字)をつけた新規フォルダを作成します。そのフォルダの中に下図のようになるように上記4つのファイルを配置していきます。

WordPressテーマ制作の下準備

※functions.phpはなくても動作します。しかしWordPressテーマには必ずと言っていいほど使うファイルですので、今のうちに作成しておきます。

style.css

style.cssは、WordPressテーマのスタイルを指定するためのスタイルシートです。

HTMLで作成したウェブサイトと同様に、このstyle.cssにCSSを記述すれば大丈夫です。ですので、前回HTMLで制作したウェブサイトのCSSをそのままコピペすればいいでしょう。

しかしWordPressテーマのstyle.cssには、一つだけ大事な約束事があります。それは、下記のようなテーマに関する情報を冒頭部分に記述しておくことです。

WordPressはstyle.cssに書かれたこの情報によってテーマを識別しています。そのため、一つのWordPressに下記情報が同一のテーマがあると不具合の原因になります。必ず固有の情報を記載しておきましょう。

/*----------------------------------------------------------------------------------------------------
* 
* Theme Name: BENJAMIN 3
* Theme URI: http://studio-freetown.com/benjamin/
* Author: Takeshi Shibata
* Author URI: http://dainashiyesterday.com/
* Description: シンプルで高機能を目指したWordPressテーマ『BENJAMIN 3』です。
* Version: 3.4.1
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: benjamin
* 
*--------------------------------------------------------------------------------------------------*/

各項目の内容は以下の通りです。

Theme Name
テーマの名前
Theme URI
テーマのデモページや配布ページなどのURI
Author
テーマ制作者の名前
Author URI
テーマ制作者のサイトやブログなどのURI
Description
テーマに関する詳細な説明
Version
バージョン情報
License
ライセンス情報
License URI
ライセンスの情報が記載されたURI
Text Domain
テーマフォルダ名

サンプルソース

上記を踏まえ、style.cssは下記のようになります。

@charset "UTF-8";
/*----------------------------------------------------------------------------------------------------
* 
* Theme Name: BENJAMIN 3
* Theme URI: http://studio-freetown.com/benjamin/
* Author: Takeshi Shibata
* Author URI: http://dainashiyesterday.com/
* Description: シンプルで高機能を目指したWordPressテーマ『BENJAMIN 3』です。
* Version: 3.4.1
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: benjamin
* 
*--------------------------------------------------------------------------------------------------*/
/* ↓これ以下にCSSを記述します。↓ */

index.php

index.phpには、今の段階では前回制作したHTMLソースのindex.htmlの内容をそのままコピペしておきましょう。

テキストエディターを立ち上げ、index.htmlのソースを張り付けたらファイル名を「index」、ファイルの種類で「PHPファイル」を選択して保存します。なお文字コードは「UTF-8(ボムなし)」で保存してください。

おすすめのテキストエディターはウェブサイトを作るための言語について知ろうで紹介していますので、自分の使いやすいものを探してみてください。

screenshot.png

screenshot.pngは、WordPressダッシュボードの「外観」→「テーマ」にて表示されるテーマのサムネイル画像として使用されます。

インストール済みのWordPressテーマ一覧

画像のサイズは300px×225pxで、ファイル形式はPNG(.png)にしてください。

functions.php

functions.phpは、WordPressテーマに機能を追加するためのファイルです。

このファイルによって、WordPressにてアイキャッチ(サムネイル)画像やカスタムヘッダー、ウィジェットなどの機能を有効化したり、独自の機能を追加することができます。

今の段階では何も記述する必要はありません。テキストエディターを立ち上げて何も入力していない状態で保存(UTF-8ボムなし※)しておいてください。

※functions.phpとindex.phpに限らず、WordPressテーマ内のファイルは文字コードをUTF-8(ボムなし)で保存するようにしましょう。

WordPressにテーマをインストールする

上記4つのファイル作成とテーマフォルダへの配置ができたら、次はテーマフォルダをWordPressにインストールします。

FTP接続でテーマをアップロードする方法

WordPressのファイルは下図のような配置になっています。「wp-content」内にある「themes」というフォルダの中にアップロードします。

WordPressテーマをアップロードするディレクトリ

サーバーへのFTP接続にはFTPソフトを使用します。おすすめのFTPソフトはウェブサイトを公開するためのドメインとサーバーの準備にてご紹介していますので、使いやすいものを選んでください。

できればローカル環境で構築しよう

上記ではサーバー上にあるWordPressにてテーマを構築する前提で話していますが、構築途中にPHPの記述ミスなどによりサーバーに過度な負荷を掛けてしまう恐れもあります。

そのような事故を避けるため、できればローカル(あなたのPC)にPHPの開発環境を構築して、そこにWordPressをインストールして作業するようにしましょう。

ローカルでの開発環境の構築にはXAMPPがおすすめです。XAMPPはウェブ開発に必要なソフトウェアをパッケージにしたもので、これによりローカルにApacheやMySQLといったWordPressテーマの開発に必要な環境を構築することができます。

ダッシュボードからテーマをアップロードする方法

WordPressのダッシュボードからテーマをインストールするために、まずはインストールしたいテーマのフォルダを圧縮してzip形式にしておきます。テーマフォルダをzip形式にできたら、以下の手順でインストールを行います。

「外観」→「テーマ」へと進み、「新規追加」をクリックします。

WordPressテーマのアップロード手順1

「テーマのアップロード」をクリックします。

WordPressテーマのアップロード手順2

「ファイルを選択」をクリックします。

WordPressテーマのアップロード手順3

テーマフォルダのzipファイルを選択します。

WordPressテーマのアップロード手順4

「今すぐインストール」をクリックします。

WordPressテーマのアップロード手順5

テーマを有効化する

上記いずれかの方法でWordPressにテーマをインストールできたら、「外観」→「テーマ」よりインストールしたテーマを有効化しておきましょう。

WordPressテーマの有効化

まとめ

以上で、WordPressテーマを制作する準備が整いました。style.cssの冒頭部分の記述がないとテーマ認識されなかったり、テーマ内ファイルの文字コードがUTF-8(ボムなし)でないと文字化けの原因になったりしますので、その辺は特に注意して作業しましょう。

また、サーバー上にアップロードするファイルやフォルダの名前には、日本語は使わず半角英数字を使うようにしてください。日本語で名前を付けたファイルは、サーバーによっては削除できなくなったりと思わぬトラブルの原因になります。

WordPressテーマに限らずですが、サーバー上に上げるフォルダやファイルには常に半角英数字で名前を付けるよう習慣にしておきましょう。

投稿者: