【第1回】WordPressのテーマ作成準備をしよう【WPテーマ作成】

ブログや企業のホームページ等でよく使用されているWordPress。

今ご覧頂いているこのブログも、もちろんWordPressを利用している。

こんな記事をご覧頂いているということは、一度は使った事がある、あるいは今現在使っているという状況だろう。

そんな方であれば常識だと思うが、WordPressにはテーマというものが存在する。

ページのコンテンツがある状態で、それをどう表示するか、という部分の設定だ。

基本的にはすでに多くのテーマが公開されており、無料ながら非常に便利なものも多数ある。

このブログは、某有名な無料テーマを使用させていただいている…のだが。

これまで勉強した内容を使って、テーマを自作してみたいと思い始めた。

というわけで、これからWordPressテーマ作成シリーズとして、勉強がてらその内容をまとめていくことにした。

作るテーマは個人ブログ向けのもので、うまく作れればそれをそのまま使って新しいサイトを運用しようと考えている。

勉強しながらなので、基本的な情報はもちろん、どこが詰まったかや気を付けた方が良さそうな点などもリアルタイムでお伝えできるだろう。

これからテーマ作成を行う方の手助けになれば幸いだ。

今回は、下準備としてテーマ作成用の環境を作ろうと思う。

想定は、レンタルサーバのXserverを利用していて、すでにメインのWordPressがある状態。

そのサブディレクトリに新しい開発用サイトを開き、それに作成するテーマを適用するという感じだ。

とりあえずテーマの枠を作り、適用するところまで今回進めてみよう。

なお、開発用サイトの作成部分はレンタルサーバによって異なり、それを全て網羅するのは困難。

そのため、他の環境の方はご自身の環境に合わせて読み替えるか、各自で調べて欲しい。

サブディレクトリでWordPressを作る
テーマの枠を作る
おわりに

サブディレクトリでWordPressを作る

では、早速取り掛かろう。

…と、あたかも私が自力でやったように書き出しているが、実は以下のサイト様を参考にしている。

ブログ用テスト環境が欲しい【サブディレクトリの作り方】Gitとか難しいこと不要で好きなだけカスタマイズ試せます

ブロガーはテスト環境があると本当に便利です。バックアップ環境にもなります。デザインやレイアウトを好きなだけ実験できる、テスト環境を作りました。

基本はこちらをご覧いただければいいのだが、簡単に手順だけ書き出しておこう。

Xserverのサーバパネルを開く
サブディレクトリを作成したいドメインに設定しておく
「WordPress」→「WordPress簡単インストール」をクリックする
「WordPressインストール」タブを開く
必要情報を記入し、「確認画面へ進む」ボタンをクリックする
このとき、サイトURLでインストールする先のディレクトリ名を指定する
※ユーザー名、パスワードは忘れないよう注意
※ディレクトリで補足あり
情報を確認し、問題なければ「インストールする」をクリック
※MySQLに関する3項目の内容をメモしておく
※ここで2～3分程度時間がかかる
インストールが完了した旨が表示されることを確認する
※ここでもユーザー名、パスワード、MySQL関係の情報は確認可
試しにサイトURLへアクセスして表示されること、管理画面へログインできることを確認する

ちなみに、MySQLの情報は後でも確認できるので、ここで確認し忘れても問題ない。

さて、ちょっと気を付けた方が良さそうな点があったので補足。

項目5で、作る対象のサブディレクトリを指定する…のだが、ここは何でもいいわけではない。

というのも、この時の画面の注意書きにも出ている通りで、ここで元々存在するディレクトリを指定してしまうと、その中身が上書きされてしまう可能性がある。

実際に作成されるディレクトリは、/サイトドメイン/public_htmlの下だ。

例えば、私の環境の場合サイトドメインはshinoarchive.com、そしてtheme-createというサブディレクトリを指定したので、/shinoarchive.com/public_html/theme-createというディレクトリが自動生成され、その中に新たなWordPressが作られる。

ところが、もし元々このディレクトリがあると、この中にどんどん上書きされていってしまう。

そのため、存在しないディレクトリを指定しよう、ということだ。

以上で、新たなサイトの開設が完了…なのだが、このままでは色々とやりづらい点があると思う。

そのあたり、個別に設定していこう。

これも上で貼らせていただいたサイト様に書かれているので、ちょっと具体的な手順は省略してしまう。

やる内容自体は以下の通り。

(公開したくない場合は)非公開にする
Googleにインデックス登録されないようにする
(必要な場合は)記事を追加する

私がやったのは二つ目だけだ。

そもそも上のサイト様は全般の検証用環境の作成手順で、まあ今回も該当すると言えばするのだが…一つ目はサンプルをお見せするために公開にしておくし、三つ目は適宜記事内容を追加していくつもり。

通常であれば、一つ目と二つ目は行った方がいいだろう。

三つ目は新規のサイト制作であればどちらでもいいが、今あるサイトのテーマを作りたい場合はやっておくことを推奨する。

その他、個人的に二つ作業を追加した。

一つ目は管理画面の色を変更すること。

このメインブログの管理画面とぱっと見で区別がつくようにするためだ。

管理画面メニューの「ユーザー」→「プロフィール」→「管理画面の配色」で設定が可能。

間違えてメインの環境を変更した、なんて事態を避けるために是非やっておいてほしい。

もちろん、色はお好みで問題ない。

二つ目は、常時SSLの設定。

これは、私のように開発環境を公開する場合でなければする必要はない。

ただ、httpsでないと嫌だという方はやっておこう、くらいの内容。

この必要性についてはすでに運用されている方であれば理解しているはずなので、ここでは何をしたかだけ書いておこう。

WordPressの管理画面、「設定」→「一般」の中、WordPressアドレスとサイトアドレスのhttpをhttpsに変更
今回インストールしたWordPressディレクトリ直下、.htaccessにコードを追加
※私の場合のファイルパスは/shinoarchive.com/public_html/theme-create/.htaccess
※隠しファイルなので、ツール側でその表示設定が必要
※！！！重要なファイルなので、必ず先にバックアップを取ること！！！

.htaccessは、ファイルの一番後ろに以下の行を追記した。

# START HTTP to HTTPS

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# END HTTP to HTTPS

この内容はXserverのヘルプに載っていた内容だ。

ただ、Xserverの管理画面から編集できるのはメイン側の.htaccessのみなので、直接変更するようにしよう。

もちろん、補足に書いた通り非常に重要なファイルなので、事前のファイルバックアップも忘れずに。

この変更後、http://...でアクセスしてもhttps://...で表示されればOKだ。

テーマの枠を作る

さて、ここまでで新しい開発用のWordPress環境が作れた。

ここからテーマを作っていくのだが、今回は最低限の枠だけ作って適用してみよう。

やることは以下の通り。

必要なディレクトリとファイルを作成し、必要情報を記述してテーマを新規作成する
管理画面から1で作ったテーマを適用する

詳細を見ていこう。

必要なファイル等の作成・記述

まず、WordPressのテーマは一つのディレクトリの下に色々なファイルを入れていく。

それぞれのファイルの意味などは次回解説するとして、とりあえず今回はテーマとして認識される必要最小限だけを用意しよう。

手順は以下の通り。

今回作ったディレクトリの中のwp-contentディレクトリの下、themesディレクトリに移動する
今回作成するテーマのディレクトリを作る
名前は一意に分かるものをつける
※ここがテーマ名になるわけではない
二つのファイル「index.php」、「style.css」を作成し、後述する内容を書き込む

一旦これだけ。

WordPressでは、最低限この二つのファイルだけでテーマを構成することができる。

この時点でのディレクトリ構造は以下のようになっている。

サイトドメイン名
- public_html
  ※ここにもwp-contentディレクトリがあるので要注意！！
  - 今回作ったディレクトリ
    - wp-content
      - themes
        作成するテーマディレクトリ(新規追加)
        index.php(新規追加)
        style.css(新規追加)

二つのファイルに記載する内容は以下の通りだ。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>てーま</title>
    </head>
    <body>
        <h1>テーマ適用OK！！</h1>
    </body>
</html>

@charset "UTF-8";

/*
Theme Name: (テーマ名)
*/

ここで重要なのはCSS側、軽く補足を。

テーマのディレクトリ内にあるstyle.css、その中のコメントでテーマ名などの情報を指定していく。

今回はとりあえずテーマとして認識されてほしいだけなので、必須のテーマ名だけを指定している。

ここにどんな情報を書けるかは、次回以降の中で解説していこう。

また、PHP側はテーマが適用されたことを確認したいだけなので、その旨が表示されるだけの記載だ。

テーマの適用と確認

あとは、通常のテーマ適用と同じ手順になる。

WordPressの管理画面メニューから、「外観」→「テーマ」と進んでもらうと、今作ったテーマが新たに表示されているはず。

もし表示されていない場合、上の手順で作ったディレクトリの場所が間違っているか、あるいは記述内容が間違っているかだろう。

メイン側で確認して表示されていたら場所を間違えているので、もう一度確認してみてほしい。

そちらにも表示されていなければ、ファイルの中身やファイル名もチェックだ。

それでも表示されない場合は、後述するパーミッションが絡んでいる可能性もあるので、先にそちらを見てほしい。

問題なく検証環境側に表示されていれば、これを有効化してページを表示してみよう。

上の例のまま入力した場合、以下のように「テーマ適用OK！！」とだけ大きく表示されれば成功だ。

ファイルのパーミッション設定

さて、実は一つスルーした内容がある。

ファイルやディレクトリの作成時、それらに持たせるパーミッションの設定だ。

このパーミッションとは、そのファイルを使おうとしているユーザーに対し、そのユーザーの種類によってどんなことができるかの許可を設定するもの。

で、ここを突っ込んでいくとちょっと話が難しくなってしまうので、今回は決め打ちで以下のように設定する。

ディレクトリ：755(rwx r-x r-x)
ファイル：644(rw- r-- r--)

これらは、私の環境でデフォルトで入っているテーマに設定されていたものだ。

ちょっとまだどの程度まで制限していいか分からないので、すでにあるものを参考にした。

今後調べて何か分かれば、別で解説する。

数字や後ろの記号列の意味、設定方法などが分からない方は、以下の手順で設定しよう。

なお、以下はWinSCPを使った場合の手順なので、他のツールを使用している場合はその設定方法を確認してほしい。

今回作ったディレクトリ、ファイルそれぞれで2以降を行う
対象を右クリック→「プロパティ」をクリック
「パーミッション」項目で、以下のチェックをつけて「OK」をクリック
※これら以外はチェックをつけない
- ディレクトリ：
  所有者→R、W、Xにチェック
  グループ→R、Xにチェック
  その他→R、Xにチェック
- ファイル：
  所有者→R、Wにチェック
  グループ→Rにチェック
  その他→Rにチェック

これで、ディレクトリやファイルのパーミッション項目が上の通りになっていればOKだ。