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

アイキャッチ
SPONSORED LINK

 

こんにちは。カトー(@hisayosky)です。

 

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

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

 

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

 

リトルカトー

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

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

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

 

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

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

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

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

 

なお前提としまして、

  • HTMLとCSSはわかっている
  • PHPなんとなくわかっている(わからないところ多し)
  • ワードプレス化するHTMLサイトはすでにできている
  • ローカル環境でMAMPを使っている
  • ワードプレスはダウンロード済み
  • OSはMac OS

 

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

ではいってみましょう。

 

SPONSORED LINK

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

サンプルページ

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

 

ファイル構成

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

 

imgフォルダ

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

以上で準備は完了です。

 

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

  • HTMLサイトのフォルダをアップロード
  • HTMLファイルのPHP化
  • CSSと画像を読み込めるようにする
  • HTMLファイルを切り分けてつなげる

 

今回は「CSSと画像を読み込めるようにする」までです。順番に見ていきましょう。

 

ステップ1「sample_pageフォルダをアップロードする」

まずsample_pageフォルダをワードプレス内に入れます。所定のフォルダにコピペすればOKです。

所定のフォルダの場所ですが、

フォルダ内、mampの場所

Macの場合「Finder」の「アプリケーション」から

「MAMP」>「htdocs」>「wordpress」>「wp-content」>「themes」

 

Themeフォルダ内

で「themes」の中にsample_pageフォルダをペーストするだけです。

 

これでワードプレスの管理画面から「外観」>「テーマ」を見てみると、

壊れたテーマ

画面の下のところで「壊れているテーマ」として認識されています(名前が「dotinstall」になってますが本来は「sample_page」となります)。

HTMLファイルはテーマとして認識してもらえないのです。

そこでHTMLをPHPファイルに作り変えます。

 

ステップ2「HTMLファイルをPHPファイルにする」

PHPファイルに作り変えるといっても名前を変えるだけです。

フォルダ内

「index.html」の「.html」を「.php」に変える

これだけでPHPファイルができます。

 

再び管理画面からテーマを見てみましょう。

認識されたテーマ

今度は「sample_page」がテーマとして認識されています。

アイキャッチ画像はまだ設定していないのでグレーになっています。

 

このテーマがどんなふうに表示されるか「ライブプレビュー」で見てみますと、

 

css反映されていないサイト

テキストが並んでいるだけです。CSSが反映されていないからです。

そこで次はCSSを反映させる作業です。

 

ステップ3「index.phpにCSSと画像を反映させる」

ここではすること3つがあります。

  • 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」もとりあえず「1.0.0」にしときましょう。

 

これをCSSの一番上のところにペーストします。

CSSコメント

上書き保存してください。CSSに関してはこれで終わりです。

 

index.phpにCSSを読み込ませる

今度はindex.phpを1文だけ書き換えます。

書き換えるのはここです。

index.php

CSSを読み込んでいる箇所ですね。

この「style.css」を「<?php echo get_stylesheet_uri(); ?>」に変えます。

これでCSSが読み込めるはずなので、管理画面でチェックします。

 

元のHTMLサイトとほぼ同じになっています。CSSが反映されていますね。

ただ本文左側にあるはずの画像だけ見えていません。これも読み込めるようにします。

 

index.phpに画像を読み込ませる

これもCSSと同様に1文書き換えるだけです。

画像のリンクがある文を見つけたら、「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苦手なぼくでも理解できた勉強法を紹介します

 




当サイトは「STORK」を使用しています

関連記事



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です