今回はHTMLサイトをWordPress化する際の手順をまとめてみようと思います。
なお前提としてすでに静的にコーディングされたHTML / CSS / JS などは
作成済みの状態を想定しています。
おおまかな流れとしては以下のようになります。
- WordPressにテーマとして認識させる。
- CSS / JS / 画像のパスを修正する。
- wp_head(); / wp_footer(); を追加。(管理ツールバーが表示される)
- ヘッダー、フッター、サイドバーをパーツ化 & 読み込み。
ではそれぞれもう少し詳しくみていきましょう。
手順1：WordPressにテーマとして認識させる
作ったサイトをテーマとして認識させるために以下を行います。
- 作ったサイトのフォルダをWordPressのフォルダに入れる。
- index.htmlの拡張子を変更してindex.phpにする。
- style.cssにテーマの情報をコメントで記載する。
環境にWordPressをインストールした状態で、
下記フォルダに作ったHTMLサイトのフォルダを入れます。
WordPressフォルダ > wp-content > themes > ここ
HTMLサイトのフォルダのindex.htmlの拡張子を変更して、index.phpにします。
テーマとして認識させるには、最低限index.phpとstyle.cssが必要です。
またstyle.cssにはテーマ情報をコメントで記載します。
この情報は管理画面 > 外観 > テーマで表示され、反映されます。
/*
Theme Name: ○○○○○
Description: ○○○○○○○○○○
Version: ○○
Author: ○○○○○
*/その他、必要に応じてテーマ情報を記載します。
自分のテーマが表示されたら、マウスオーバーし「有効化」をクリックします。
手順2：CSS / JS / 画像のパスを修正する
これで自分のテーマを有効化できましたが、
サイトを表示すると画像やCSSが適用されていない状態になっています。
理由はHTMLファイルのCSSや画像へのパスが、
WordPressにしたことで合わなくなってしまったからです。
そのパスを修正していきますが、方法が2つあります。
なお、2つ目のfunctions.phpのアクションフックで読み込む方法が推奨されています。
方法1：<?php echo get_template_directory_uri(); ?>に置き換える
1つ目の方法はパスを「<?php echo get_template_directory_uri(); ?>/パスの続き」
のように置き換える方法です。
<?php echo get_template_directory_uri(); ?>は、有効化されているテーマのディレクトリのURIを返してくれるテンプレートタグです。
置き換えの例は下記のようになります。
スラッシュは補完されないので、自分で書く必要があります。
【CSSの場合の例】
- 変更前：<link rel=”stylesheet” href=”css/style.css”>
- 変更後：<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/css/style.css”>
【JSの場合の例】
- 変更前：<script src=”js/main.js”>
- 変更後：<script src=”<?php echo get_template_directory_uri(); ?>/js/main.js”>
【画像の場合の例】
- 変更前：<img src=”img/bg.jpg”>
- 変更後：<img src=”<?php echo get_template_directory_uri(); ?>/img/bg.jpg”>
方法2：アクションフックでfunctions.phpから読み込ませる
方法の2つ目は、functions.phpにアクションフック(wp_enqueue_scripts)
を作って読み込ませる方法です。
この場合は、header.phpでの読み込みは削除します。
functions.phpはWordPressの機能を有効化させたり、
フックなどを記載するためのファイルです。
読み込ませるための書き方は下記のようになります。
なおfunctions.phpで読み込ませる場合には、次の手順3の<?php wp_head(); ?>と
<?php wp_footer(); ?>を入れてからでないと動作しません。
function 任意の名前の関数名() {
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', '任意の名前の関数名');手順3：wp_head(); / wp_footer(); を追加する
WordPressでログインした状態で表示される
管理ツールバーなどを出力してくれるテンプレートタグを追加します。
// headの閉じタグの直前に追加
<?php wp_head(); ?>// bodyの閉じタグの直前に追加
<?php wp_footer(); ?>
手順4：ヘッダー、フッター、サイドバーをパーツ化 & 読み込み
WordPressでは何度も繰り返し出てくるものはパーツ化させて使いまわします。
そのため、ヘッダー、フッター、
ある場合はサイドバーを切り出して読み込ませる作業をします。
1：共通部分のパーツ化
パーツ化する作業は下記のようなかんじで行います。
【ヘッダー】
- <DOCTYPE! html>からヘッダー部分までを切り取る。
- 切り取った部分をheader.phpファイルに貼り付ける。
【フッター】
- フッターから</html>部分までを切り取る。
- 切り取った部分をfooter.phpファイルに貼り付ける。
【サイドバー】
- サイドバー部分を切り取る。
- 切り取った部分をsidebar.phpに貼り付ける。
2：パーツ化部分を読み込ませる
パーツ化した部分は別のファイルに移動させてしまったので、
読み込ませるための作業が発生します。
パーツ化した部分は、下記のテンプレートタグを使って埋め込むことができます。
// ヘッダーを読み込む場合：
<?php get_header(); ?>// フッターを読み込む場合：
<?php get_footer(); ?>
HTMLサイトをWordPress化する際によく使うテンプレートタグなどは
こちらの記事にまとめているのでよろしければご覧ください。
以上、HTMLサイトをWordPress化する方法でした。
