Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

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

更新日:2021年9月11日
  • 初めてテンプレートを作成するけど何から覚えたら良いか分からない
  • テンプレートのカスタマイズはやったことあるけど、0から作成は初めてで不安

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

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

解説内容
  1. WordPress運用に必要なテンプレートの種類
  2. HTMLで制作済みのサイトをテンプレート化する際のルール

この記事では、上記2点について詳しく解説します。

「WordPressのオリジナルテンプレートでコーポレートサイトを作りたい!」という方は、ぜひ参考にしてみてください。

目次

  • 1 下準備
    • 1.1 ローカル環境の構築
    • 1.2 FTPソフト
  • 2 htmlファイルをphpにする
    • 2.1 index.php・header.php・footer.phpを作る
    • 2.2 Wordpressタグを挿入する
  • 3 WordPressをインストールする
    • 3.1 WordPressインストール
    • 3.2 テーマを適用する

下準備

まずは、下準備が必要です。

ローカル環境で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キーで進んでいきます。

順序
  1. cd mysql\bin→「Enter」
  2. mysql -u root→「Enter」
  3. 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.php・header.php・footer.phpを作る

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

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 下準備
    • 1.1 ローカル環境の構築
    • 1.2 FTPソフト
  • 2 htmlファイルをphpにする
    • 2.1 index.php・header.php・footer.phpを作る
    • 2.2 Wordpressタグを挿入する
  • 3 WordPressをインストールする
    • 3.1 WordPressインストール
    • 3.2 テーマを適用する
© 2023 さきどりふぁくとり~