【まずはこれを覚えよう！】WordPressテンプレートの作成方法

上記のようなことでお困りではありませんか？

WordPressには、PHPを使用したWordPress特有のタグが多くあります。

この記事では、上記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」をクリックすると、上図のような画面が表示されます。
※Shellとは、コマンド（命令）を送ることで色々なことができるツールです。
以下の順に入力し、Enterキーで進んでいきます。

上記順序中の「your_password」の部分を設定したいパスワードに書き換えて、「Enterキー」を押します。
これで、パスワードの設定が完了しました。

次に、もう一度「MySQLのAdmin」をクリックして、「MySQLの管理画面」にアクセスします。

「MySQLの管理画面」にアクセスすると、上図のような画面になります。
これは、パスワードの設定が正常にできているということなのでご安心ください。
※この画面を確認したら、XAMPPのコントロールパネルのApacheとMySQLを「Stop」しておきます。

MySQLの管理画面にログインするために、以下の手順でログインの認証方法を変更します。

XAMPPをインストールしたフォルダ\phpMyAdmin\config.inc.phpをテキストエディタで開く

これで上書き保存をして、再度、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.php・header.php・footer.phpを作る

まずは、index,htmlファイルの拡張子をphpに変更します。
拡張子の変更は、ファイル名の変更にて行ってください。 この時、「ファイルが使えなくなる可能性があります」という警告ダイアログが表示されますが「はい」をクリックして進みます。

次に、ヘッダー・フッターを共通化するためにindex.phpをテキストエディタで開き、index.php内のヘッダー部分・フッター部分を別ファイルに分けます。

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

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

現在のファイル構造は、上図のようになっています。 WordPressテーマの最小限のテンプレートはこの４つです。

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で自作テンプレートをテーマとして利用できるようになります。
ある程度の仕組みが理解できれば、既存テンプレートのカスタマイズの際にも分かりやすくなります。
自作テンプレートはもちろん、既存テンプレートもより使いやすくカスタマイズしてみてくださいね。