【まずはこれを覚えよう!】WordPressテンプレートの作成方法
- 初めてテンプレートを作成するけど何から覚えたら良いか分からない
- テンプレートのカスタマイズはやったことあるけど、0から作成は初めてで不安
上記のようなことでお困りではありませんか?
WordPressには、PHPを使用したWordPress特有のタグが多くあります。
- WordPress運用に必要なテンプレートの種類
- HTMLで制作済みのサイトをテンプレート化する際のルール
この記事では、上記2点について詳しく解説します。
「WordPressのオリジナルテンプレートでコーポレートサイトを作りたい!」という方は、ぜひ参考にしてみてください。
目次
下準備
まずは、下準備が必要です。
ローカル環境でWordPressを動作させたり、公開サーバーでWordPressサイトを公開させるための下準備は、WordPressでのサイト制作には欠かせません。
※Visual Studio Codeなどコーディングするためのテキストエディタがあると便利です。
ローカル環境の構築
Wordressは、Webサーバー環境が必要なため、PCのローカル環境では動作しません。しかし、XAMPP等のフリーソフトを使って開発環境を構築することで、ローカル環境でもWordPressが動作するようになります。
フリーソフトなので、導入時にコストはかかりませんし、インストーラーを使用して簡単にインストールが可能です。
今回は、XAMPPでのローカル環境構築手順を解説します。
XAMPPのインストール
XAMPP公式サイトにアクセスし、ご使用のOS向けのXAMPPをダウンロードしてください。

ボタンをクリックすると、すぐに画面遷移とともにダウンロードされるので、ダウンロードされたファイルをダブルクリックで開きます。

表示された警告ダイアログは「OK」をクリックしてそのまま進めてください。

警告ダイアログを「OK」して進むと、XAMPPのセットアップ画面になるので、「Next >」を押して進んでください。

次にインストールするコンポーネントを選びます。
上図の通り、「MySQL」「PHP」「phpMyAdmin」にチェックが入っていれば、WordPressを動作させることができます。
最低限、この3つにチェックが付いていることを確認してください。その後、「Next >」をクリックして次に進みます。

次に保存先を選ぶ画面です。
ここはデフォルトのままで大丈夫なので、このまま「Next >」をクリックして次に進みます。

次にBitnamiを使用するか選ぶ画面になりました。
Bitnamiとは、様々なブログシステムが簡単にインストールできるツールです。
これを有効にするとWordPressの管理画面が英語になってしまうので、ここではチェックを外して「Next >」をクリックします。
インストールの準備ができたという内容が表示されるので、「Next >」をクリックします。

上図は、インストール中の画面です。
インストールが終わるまで待ちます。
インストールが完了すると「Windowsセキュリティの重要な警告」という画面が表示される(Windowsの場合)ので「アクセスを許可する」をクリックします。

上図のような画面が表示されたら、インストールは正常に完了しています。
チェックボックスにチェックを入れた状態で「Finish」をクリックすると、そのままXAMPPのコントロールパネルが立ち上がるので、チェックを入れた状態にして「Finish」をクリックします。

上図の画面がXAMPPのコントロールパネルです。
ここで、WordPressをインストールするために「Apache」と「MySQL」の二つを起動させる必要があります。
まずは、XAMPPのコントロールパネル内のApacheの「Start」をクリックします。

上図のような画面になれば起動成功です。
次に、同じようにMySQLの「Start」をクリックします。
Apacheと同様に「Windowsセキュリティの重要な警告」というセキュリティダイアログが表示されるので、「アクセスを許可する」をクリックします。

上図のような画面になればMySQLも起動成功です。
次に、MySQLの管理画面が正常に表示されるかを確認します。MySQLの「Admin」をクリックして、「MySQLの管理画面」を開きます。

上図のような画面が表示されれば、MySQLの管理画面も問題なく動作することがわかります。
XAMPPのMySQLはこの時点で、デフォルトのユーザー名「root」が充てられていますが、パスワードは未設定です。
このままでは、誰でもこの管理画面にログインしてデータベースの書き換えが可能になってしまうので、最初にコマンドモードでパスワードの設定が必要です。

XAMPPのコントロールパネルの右側にある「Shell」をクリックします。

※Shellとは、コマンド(命令)を送ることで色々なことができるツールです。
以下の順に入力し、Enterキーで進んでいきます。
- cd mysql\bin→「Enter」
- mysql -u root→「Enter」
- set password=password(‘your_password’);
上記順序中の「your_password」の部分を設定したいパスワードに書き換えて、「Enterキー」を押します。
これで、パスワードの設定が完了しました。
次に、もう一度「MySQLのAdmin」をクリックして、「MySQLの管理画面」にアクセスします。

「MySQLの管理画面」にアクセスすると、上図のような画面になります。
これは、パスワードの設定が正常にできているということなのでご安心ください。
※この画面を確認したら、XAMPPのコントロールパネルのApacheとMySQLを「Stop」しておきます。
MySQLの管理画面にログインするために、以下の手順でログインの認証方法を変更します。
XAMPPをインストールしたフォルダ\phpMyAdmin\config.inc.phpをテキストエディタで開く

- 19行目($cfg[‘Servers’][$i][‘auth_type’] = ‘config’;)の「config」→「cookie」に変更
- 20行目($cfg[‘Servers’][$i][‘user’] = ‘root’;)の「root」を削除(セキュリティ上)
これで上書き保存をして、再度、MySQLの管理画面を開きます。

上図のようなログイン画面がでてくるので、ユーザー名に「root」、パスワードに先ほど設定したパスワードを入力して「実行」ボタンをクリックしてログインします。
これで、XAMPPの設定は完了です。
FTPソフト
XAMPP等のローカル環境でWordPressサイトを構築する際には、サーバーへのアップロードが必要ないので、FTPソフトも必要ありません。
しかし、公開サーバーにファイルをアップロードする際には、FTPソフトが必要になるので下準備として先にFTPソフトも準備しておきましょう。
無料のFTPソフトもいくつか種類がありますが、どのソフトを使用してもできることは同じなので問題ありません。
FTPソフト(今回はFilezillaを使用)のインストール手順
まず、Filezillaのダウンロードサイトへアクセスしてダウンロードします

ダウンロードしたファイルをダブルクリックしてインストーラーを起動

ライセンスアグリーメントのメッセージが表示されるので、「I Agree(同意)」をクリックします

通常は、この状態で「Next >」をクリックします。
ログインしているユーザーのみで利用する場合には「Only for me」を選択します。

デスクトップにアイコンを表示したい場合は「Desktop Icon」にもチェックを入れて「Next >」をクリックします。

ここでは、Filezillaをインストールするフォルダを指定して「Next >」をクリックします。
※特に指定がなければ、このままでOKです。

スタートメニューにFilezillaアイコンを表示する場合は、そのまま「Next >」をクリック、登録しない場合は「Do not create shortcuts」にチェックを入れて「Next >」をクリックします。

「Finish」をクリックしてインストール完了です。

使用するときには、左上の「サイトマネージャー」もしくは、「ファイル>サイトマネージャー」からサイトのサーバー情報を登録し、サーバーへ接続します。

サーバーのFTPアカウントのホスト・ユーザー・ログオンタイプ(通常)・パスワードを入力して、「詳細」タブを開きます。

デフォルトのローカル(PC側)ディレクトリ・デフォルトのリモート(サーバー側)ディレクトリ(基本的にWordPressのテンプレートが入っているルートディレクトリへのパス)を入力して、画面右下の「接続」をクリックするとサーバーへ接続できます。
htmlファイルをphpにする
WordPressのテンプレートは、「.php」という拡張子のファイルで構成されています。
最初は、「.html」という拡張子でコーディングファイルを作成しますので、それらをphpファイルにする必要があります。
また、WordPressのテンプレートには特有のタグがあるので、最小限のテンプレートと一緒に、WordPressタグについてもご紹介します。
まずは、index,htmlファイルの拡張子をphpに変更します。
拡張子の変更は、ファイル名の変更にて行ってください。
この時、「ファイルが使えなくなる可能性があります」という警告ダイアログが表示されますが「はい」をクリックして進みます。
次に、ヘッダー・フッターを共通化するためにindex.phpをテキストエディタで開き、index.php内のヘッダー部分・フッター部分を別ファイルに分けます。

ヘッダー部分を記したファイルはファイル名を「header.php」にして保存

フッター部分を記したファイルはファイル名を「footer.php」にして保存します。

現在のファイル構造は、上図のようになっています。 WordPressテーマの最小限のテンプレートはこの4つです。
Wordpressタグを挿入する
index.phpの中身はメインコンテンツ部分のみになっています。

ここにheader.phpとfooter.phpを読み込むことで、トップページのテンプレートになります。
Header.phpを読み込むタグ
<!--?php get_header(); ?-->Footer.phpを読み込むタグ
<!--?php get_footer(); ?-->

これらのタグを読み込みたい場所に挿入します。

次にheader.phpの</head>の直前に下記ソースコードを挿入
<!--?php wp_head(); ?-->

そして、Footer.phpの</body>の直前に下記ソースコードを挿入します。
<!--?php wp_footer(); ?-->
上記は、各プラグイン用のタグやmetaタグの自動生成のために必要です。

また、stylesheetを読み込んでいるlinkタグのファイル名の前に下記ソースコードを挿入します。
<!--?php echo get_stylesheet_directory_uri(); ?-->/
このタグによってWordPressにスタイルシートへのパスを認識させます。
このタグを挿入しないと、テンプレートにcssが反映されないので必ず挿入するようにしましょう。
WordPressをインストールする
テンプレートの準備ができたら、WordPressをインストールしましょう。
WordPressインストール

WordPressの配布サイトからWordPressをダウンロードします。
(zipファイルを解凍して)XAMPP(C\xampp\htdocs\)にフォルダ(今回はwp)を作成して、wordpressフォルダの中身をすべて移動します。
次にXAMPPのコントロールパネルからMySQLの管理画面を起動し、データベースを作成します。

データベースタブからデータベースを作成します。
データベース名(半角英数)を入力し、照合順序を「utf8_general_ci」にして「作成」をクリックするとデータベースが作成できます。
データベースを作成したら、wordpressフォルダ下の「wp-config-sample.php」ファイル(複製したものでも可)のファイル名を「wp-config.php」に変更(-sampleを取る)します。

wp-config.phpファイル内にデータベース情報を入力
(データベース名・ユーザー名・パスワード・ホスト名)
ホスト名は、XAMPPの場合は「localhost」のままで大丈夫です。
インストール先URLにアクセス(今回の場合は「http://localhost/wp(WordPressのインストール先ディレクトリ)」)

WordPressのインストール画面が表示されたら成功です。
サイト名等、画面にある入力箇所に情報を入力
※この時に、設定したユーザー名・パスワードは記録しておきましょう。
画面下のインストールボタンをクリックすると、WordPressのログイン画面が表示されます。
先程のインストール画面で設定したユーザー名・パスワードを入力してログインします。
テーマを適用する
C:\xampp\htdocs\wp\wp-content\themesにWordPressのテーマが格納されているため、ここに新しいフォルダ(今回はwp_theme)を作成します。
設定したフォルダ名(今回は「wp_theme」)がテーマ名になります。

先程、テンプレート化したファイル(header.php・index.php・footer.php・style.css)を作成したフォルダに入れます。
次にWordPressの管理画面から外観>テーマを選択します。

すると、先ほど作成したテーマが表示されるのでwp_themeを有効化します。

これで、自作テンプレートをテーマとして適用することができました。
HTML・CSSを知っているだけでは、WordPressのテーマとしては使用できません。
しかし、段階を踏んで「WordPressテーマ化」することにより、WordPressで自作テンプレートをテーマとして利用できるようになります。
ある程度の仕組みが理解できれば、既存テンプレートのカスタマイズの際にも分かりやすくなります。
自作テンプレートはもちろん、既存テンプレートもより使いやすくカスタマイズしてみてくださいね。