「HTMLサイトをWordPressに移行する」とは？ 最低限の知識だけシンプルに解説します

こんにちは。カトー（@hisayosky）です。

HTMLサイトをWordPress化するには、

• HTMLファイルをPHPファイルにする
• HTMLを切り分ける

ざっくりこの２つの工程が必要なのですが、ぼくはこれで混乱しました。

HTML切り分けたら動かなくなるじゃん！

PHPってどうやってファイル作るのよ！

そもそもなんでPHPファイルが必要なんだー！！

いちおうググったんですけどね。ここまでわからない人はめずらしいかもしれません。

ここがすんなり理解できるとワードプレスの仕組みがわかり、その後の作業が飲み込みやすくなります。

そこで今回は「HTMLサイトをワードプレスに移行する最低限の知識」をワードプレス化の手順にそって解説してみます。

わかる人にとっては「え？そこからですか！？」という内容ですが、ご容赦くださいm(_ _)m

なお前提としまして、

ということで進めさせていただきます。

ではいってみましょう。

スポンサードサーチ

ステップ０「HTMLサイトのファイル構成を確認する」

こちらのHTMLサイトをワードプレス化していきます。

ファイル構成は「sample_pageフォルダ」のなかに「index.html」「style.css」「imgフォルダ」が入っているというものです。

imgフォルダの中には「noimage.jpg」という画像ファイルが入っています。

以上で準備は完了です。

ワードプレス化って複雑そうですが、やることは４つです。

今回は「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ファイルにコメントを追加する

コメントとはこれです。

/*
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(); ?> はテーマのディレクトリ（つまりフォルダ）までの場所を呼び出してくれる命令でした。

テンプレートタグは他にもたくさんありますが、出てきたものを理解できればいいと思います。

ぼくが勉強に使った本をいちおう挙げておきます。

最初は本当にわかりませんでしたが、おかげでなんとなくわかってきました。

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版

posted with カエレバ

プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-21

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第2版]

posted with カエレバ

水野 史土 エムディエヌコーポレーション 2017-03-28

「HTMLを切り分ける」ところはまた次回解説しますね。

まとめ：HTMLのワードプレスに移行するなら、index.phpを作ったのちテンプレートタグでCSSと画像を読み込ませればOK

• PHPファイルにするとWordPressがファイルを認識してくれる
• PHPファイルは名前を「.php」にするだけでできる
• CSSは書き換えない。冒頭にコメントを追加するだけ
• テンプレートタグは「よく使う命令」

▼最後まで読んでくれたあなたにおすすめの記事
【WordPressテーマの作り方】PHP苦手なぼくでも理解できた勉強法を紹介します