WordPress オリジナルテーマ作成の準備

  Code Tips minimum Theme

「WordPressのテーマ」をゼロから作成してみます。

 

今までなんとなく(理解しないまま)WordPressのコードを使っているケースも多々あったのですが、それが原因でドハマりしてしまうことも。
そこで、WordPressのテーマの構造や動作の理解を深めることができればと思い、勉強も兼ねてテーマ作りをゼロから始めてみました。

 

ローカル環境にWordPressをインストール

今回作成する「オリジナルテーマ」は公開が目的ではないので、ローカル環境(web開発用PC)にWordPressが動作する環境を作り、動作を見ながら作成してみます。

ローカル環境にWordPressをインストールする方法はこちら

 

WordPress Codex

WordPress  Codex(公式オンラインマニュアル)のドキュメントを参考にしながら、実際に動作を確認して極力シンプルに作成します。

WordPress Codex : WordPress Codex 日本語版について

 

デバッグモードをONにします

テーマファイルを編集する際、コードの記述ミスなどが原因で「エラーが発生して途中で処理が止まってしまう・何も表示されない」などのエラーが発生することがあります。

その時に、デバッグモードをONにしてあるとエラーの原因を探るヒントになるのでWordPressのデバッグモードはONにしておきます。
※公開が目的ではないので、ローカル環境・開発用の設定になります。

WordPress 本体をインストールする時に編集した【wp-config.php】ファイルを編集します。

ファイルの後半部分にある define('WP_DEBUG', false);define('WP_DEBUG', true); に変更します。

/**
 * 開発者へ: WordPress デバッグモード
 *
 * この値を true にすると、開発中に注意 (notice) を表示します。
 * テーマおよびプラグインの開発者には、その開発環境においてこの WP_DEBUG を使用することを強く推奨します。
 */
define('WP_DEBUG', true);

 

WordPress Codex : WordPressでのデバッグ

 

テーマに必要な必要最低限のファイルを用意します

 

1.ディレクトリの準備

{WordPressのディレクトリ}/wp-contents/themes/ にオリジナルテーマ用の新しいディレクトリ(フォルダ)を作成します。(ディレクトリ名は半角英数)

ここでは【ctips-minTheme】としました。

 

2.style.css の作成

「1.」で作成したディレクトリの中にスタイルシートファイルを新たに用意します。
ファイル名は【style.css】です。

用意したらファイルの先頭をコメントアウト /* ~ */ し、テーマの情報を書きます。
Theme Name: テーマの名前 は必ず書かなければなりません。

【style.css】

/*
Theme Name: テーマの名前 (※必須)
Theme URI: テーマのURL
Author: 作成者
Author URI: 作成者のURL
Description: テーマの説明
Version: バージョン 0.0
License: GNU General Public License
Tags: テーマのタグ simple, white
*/

 

style.css は、テーマの「CSS スタイル」情報に加えて、コメントの形式で必ず「テーマ詳細」を記述する必要があります。

WordPress Codex : テーマの作成 > テーマスタイルシート

 

3.index.php の作成

もう一つPHPファイルを作成して【style.css】と同じディレクトリに保存します。
ファイル名は【index.php】です。

中身はブラウザで表示させるための最低限のHTMLを書いておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Simple Theme</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Simple Theme</p>
</body>
</html>

 

4.screenshot.png の作成

【screenshot.png】を用意します。(必須ではありません)

これは管理画面の「外観」メニューからテーマを選択する時に表示される「テーマのサムネール画像」になります。

今の時点で画像は何でも良いので画像サイズ「幅:880px 縦:660px」のpngファイルを作成し、ファイル名を【screenshot.png】として同じディレクトリに保存します。(テーマが完成したらスクリーンショット等の画像に置き換えます。)

 

以上で最低限の準備が完了です。

テーマの「有効化」

最後に、WordPressの管理画面にログインして「外観」>「テーマ」から先ほど作ったテーマを選択して「有効化」します。

ブラウザで http://localhost/{WrodPressのディレクトリ名} にアクセスして「3.index.php の作成」で作成したHTMLが表示されれば完了です。

 

以上でWordPressのオリジナルテーマ作成の準備は完了です。

このままではただの静的HTMLなので、WordPressの管理画面から「新規投稿」しても何も反映されません。
ここからWordPressの動的な機能を加えてオリジナルテーマを作成していきます。

 

Code Tips minimum Theme

【style.css】

/*
Theme Name: ctips-minTheme
*/

 

【index.php】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Simple Theme</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Simple Theme</p>
</body>
</html>