こんにちは。カトー（@hisayosky）です。
HTMLサイトをWordPress化するには、
- HTMLファイルをPHPファイルにする
- HTMLを切り分ける
ざっくりこの２つの工程が必要なのですが、ぼくはこれで混乱しました。
いちおうググったんですけどね。ここまでわからない人はめずらしいかもしれません。
ここがすんなり理解できるとワードプレスの仕組みがわかり、その後の作業が飲み込みやすくなります。
そこで今回は「HTMLサイトをワードプレスに移行する最低限の知識」をワードプレス化の手順にそって解説してみます。
わかる人にとっては「え？そこからですか！？」という内容ですが、ご容赦くださいm(_ _)m
なお前提としまして、
- HTMLとCSSはわかっている
- PHPなんとなくわかっている（わからないところ多し）
- ワードプレス化するHTMLサイトはすでにできている
- ローカル環境でMAMPを使っている
- ワードプレスはダウンロード済み
- OSはMac OS
ということで進めさせていただきます。
ではいってみましょう。
目次
ステップ０「HTMLサイトのファイル構成を確認する」
こちらのHTMLサイトをワードプレス化していきます。
ファイル構成は「sample_pageフォルダ」のなかに「index.html」「style.css」「imgフォルダ」が入っているというものです。
imgフォルダの中には「noimage.jpg」という画像ファイルが入っています。
以上で準備は完了です。
ワードプレス化って複雑そうですが、やることは４つです。
- HTMLサイトのフォルダをアップロード
- HTMLファイルのPHP化
- CSSと画像を読み込めるようにする
- HTMLファイルを切り分けてつなげる
今回は「CSSと画像を読み込めるようにする」までです。順番に見ていきましょう。
ステップ１「sample_pageフォルダをアップロードする」
まずsample_pageフォルダをワードプレス内に入れます。所定のフォルダにコピペすればOKです。
所定のフォルダの場所ですが、
Macの場合「Finder」の「アプリケーション」から
「MAMP」＞「htdocs」＞「wordpress」>「wp-content」＞「themes」
で「themes」の中にsample_pageフォルダをペーストするだけです。
これでワードプレスの管理画面から「外観」＞「テーマ」を見てみると、
画面の下のところで「壊れているテーマ」として認識されています（名前が「dotinstall」になってますが本来は「sample_page」となります）。
HTMLファイルはテーマとして認識してもらえないのです。
そこでHTMLをPHPファイルに作り変えます。
ステップ２「HTMLファイルをPHPファイルにする」
PHPファイルに作り変えるといっても名前を変えるだけです。
「index.html」の「.html」を「.php」に変える。
これだけでPHPファイルができます。
再び管理画面からテーマを見てみましょう。
今度は「sample_page」がテーマとして認識されています。
アイキャッチ画像はまだ設定していないのでグレーになっています。
このテーマがどんなふうに表示されるか「ライブプレビュー」で見てみますと、
テキストが並んでいるだけです。CSSが反映されていないからです。
そこで次はCSSを反映させる作業です。
ステップ３「index.phpにCSSと画像を反映させる」
ここではすること３つがあります。
- CSSファイルにコメントを追加する
- index.phpにCSSを読み込ませる
- index.phpに画像を読み込ませる
順番に見ていきましょう。
CSSファイルにコメントを追加する
コメントとはこれです。
/*
Theme Name: sample-page
Theme URI: localhost/wordpress/
Description: sample-page
Author: hisayosky
Author URI: localhost/wordpress/
Version: 1.0.0
*/
「Theme Name」と「Description」には自分のテーマの名前を入れておきましょう（本当は「Description」には説明が入る）。
「Theme URI」と「Author URI」はとりあえず「localhost/wordpress/」でよいです。
「Author」は自分の名前。
「Version」もとりあえず「１.０.０」にしときましょう。
これをCSSの一番上のところにペーストします。
上書き保存してください。CSSに関してはこれで終わりです。
index.phpにCSSを読み込ませる
今度はindex.phpを１文だけ書き換えます。
書き換えるのはここです。
CSSを読み込んでいる箇所ですね。
この「style.css」を「<?php echo get_stylesheet_uri(); ?>」に変えます。
これでCSSが読み込めるはずなので、管理画面でチェックします。
元のHTMLサイトとほぼ同じになっています。CSSが反映されていますね。
ただ本文左側にあるはずの画像だけ見えていません。これも読み込めるようにします。
index.phpに画像を読み込ませる
これもCSSと同様に１文書き換えるだけです。
画像のリンクがある文を見つけたら、「img」の前に「<?php echo get_template_directory_uri(); ?>/」を追加します。
最後のスラッシュまで忘れずにつけましょう。
ここまでやると画像もテーマに反映されます。
今回は画像が一つしかありませんでしたが、複数ある場合はすべてのリンクについて同じことをしてください。
最後に「テンプレートタグってなに？」という話
今回CSSや画像の読み込みに使った
- <?php echo get_stylesheet_uri(); ?>
- <?php echo get_template_directory_uri(); ?>
これですが、「テンプレートタグ」というものでした。
テンプレートタグは「ワードプレスでよく使う命令」だと思ってください。よく使うのであらかじめ決まった文が用意されているわけですね。
<?php echo get_stylesheet_uri(); ?> はスタイルシートの場所を呼び出してくれる命令。
<?php echo get_template_directory_uri(); ?> はテーマのディレクトリ（つまりフォルダ）までの場所を呼び出してくれる命令でした。
テンプレートタグは他にもたくさんありますが、出てきたものを理解できればいいと思います。
ぼくが勉強に使った本をいちおう挙げておきます。
最初は本当にわかりませんでしたが、おかげでなんとなくわかってきました。
「HTMLを切り分ける」ところはまた次回解説しますね。
まとめ：HTMLのワードプレスに移行するなら、index.phpを作ったのちテンプレートタグでCSSと画像を読み込ませればOK
- PHPファイルにするとWordPressがファイルを認識してくれる
- PHPファイルは名前を「.php」にするだけでできる
- CSSは書き換えない。冒頭にコメントを追加するだけ
- テンプレートタグは「よく使う命令」
▼最後まで読んでくれたあなたにおすすめの記事
【WordPressテーマの作り方】PHP苦手なぼくでも理解できた勉強法を紹介します
HTML切り分けたら動かなくなるじゃん！
PHPってどうやってファイル作るのよ！
そもそもなんでPHPファイルが必要なんだー！！