【WordPress化】HTMLファイルをWordPress化する手順

WordPress化のアイキャッチ
2021年03月11日
こばゆた
こばゆた

手順は多いですが順番にやるだけなので簡単です！

スポンサーリンク

1.HTMLファイルを用意する

すでに自作サイトがある方はそれを、ないとか「面倒だ！」という方はテンプレートサイトを配布しているようなところでWebサイトを用意してください。

今回は以下のサイト様のテンプレートを利用させていただきました。

《無料》ホームページテンプレート.com | 商用可能なホームページテンプレート・レスポンシブWordPressテーマが完全無料
商用利用可能な無料ホームページテンプレート・WordPressテーマ | スマートフォン（iPhone、Android）・タブレット端末（iPadなど）対応のレスポンシブウェブデザインWordPressテーマ・HTMLテンプレートが無料でダウンロードできます。
f-tpl.com
今回WP化するサイト

そのままダウンロードをしてフォルダの名前を変更します。

今回は「wp練習用」と名前をつけました。

スポンサーリンク

2.テーマ用のフォルダーを作成してテーマに入れる

Localを開いてユーザー名の下をにある矢印マークをクリックします。

Localのインストールがまだの方はこちらの記事から↓

【WordPress化】ローカル環境でWordPressの編集をする準備のやり方【Local】
HTMLで作ったサイトをWordPress化したい、Word Press化の勉強をしたい方はまずお使いのパソコンに制作環境を作っての練習をおすすめします。その方が手直しなども楽にでき安全です。
kbyt-programming.com
2021年10月03日
localでのファイルの開き方_1

すると以下のようなファイル選択画面になります。

localでのファイルの開き方_2

WordPressのテーマは「app」→「public」→「wp-content」→「theme」の中に入りますので、用意しておいたフォルダをまとめてドラッグしてやりましょう。

localでのファイルの開き方_3

これだけだとまだ開けないので最低限必要なファイルを作って行きます。

3.phpファイルを作成する

ここからはお使いのテキストエディターまたは「ダッシュボード」→「外観」→「テーマエディター」からコードを書いてphpファイルを作成していきます。

こばゆた
こばゆた

記事ではVS codeで書いていきますが、どちらで書くかはお好みでどうぞ！

phpファイルの作り方
  • STEP1
    phpファイルを作成する
    phpファイルですので拡張子は”.php”で作成します。
    今回はindex.phpという名前で作成します。phpファイルの作成
    また作成する階層に気をつけます。
  • STEP2
    index.htmlからindex.phpへコピーする

    ⌘+aで全選択(Windowsの場合はCtrl+a) → ⌘+cでコピー(Ctrl+c) → 画面を切り替えて⌘+vで貼り付け(Ctrl+v)できます。

こばゆた
こばゆた

htmlファイルの名前を”index.html”から”index.php”としてもできますが、何かあった時の保険や確認のために取っておく方が良いと思うので別ファイルを作成しています。

4.CSSファイルを作成する

style.cssという名前でWordPressのテーマ情報用のスタイルシートを作成します。

またhtmlをスタイリングしたcssファイルとは異なるので注意です！

今回の例だとすでに同名のスタイリング用CSSファイルが先にあるので、このような場合はCSSフォルダを作成してそちらに入れておきます。

このファイルの中身は後からでも変えられるのでとりあえず作成だけしておきます。

style.cssの作成
こばゆた
こばゆた

stylesとしないように注意します。

ここまで作成したらlocalを起動して実際に見てみましょう。

テーマの確認と変更方法

  • STEP1
    ログインをする

    localでのログイン

    ユーザー名とパスワードを入れてログインします。

  • STEP2
    「外観」→「テーマ」を選択

    テーマの変更方法その１

    ログインをするとダッシュボード画面に入れるので「外観」→「テーマ」を選択します。

  • STEP3
    テーマの有効化をする

    テーマの変更方法その2

  • STEP4
    完成

    テーマの有効化成功

    このメッセージが出ていれば有効化ができています。

こばゆた
こばゆた

最低限index.phpとstyle.cssがあればWordPressは動きます

ちなみに「テーマの詳細」を見てみると、ここで作成したものが出てきていると思いますがまだ何も記入していないのでデフォルトのままです。

テーマの詳細

ここでは多少省略していますがこのような情報が入ります。

style.cssに書くもの

@charset "UTF-8";

/*
Theme Name: テーマ名
Description:テーマの説明
Version: バージョン
Author: 作者名
*/

記入例

style.css記入例
style.cssを反映したもの

このように反映されます。

5.index.phpをパーツごとに分割する

チャッピー
チャッピー

なぜパーツごとに分けるの？

こばゆた
こばゆた

パーツごとに分けておくことで、他のページでも同じパーツを使い回すことができて便利だし修正も楽だからだよ

パーツ分けの手順
  • STEP1
    index.phpをパーツごとに分ける
    先程作成したindex.phpをパーツごとに分けます。
    今回の構成だと大きくヘッダー、メインコンテンツ、サイドバー、フッターに分けられます。

    HTMLをパーツ分けしたもの

    他にももっと細かくパーツ化することもできますが基本的なものはこの辺りでOKです。

  • STEP2
    STEP1で分けたものからphpファイルをそれぞれ作成する
    次は実際にそれぞれのPHPファイルを作成していきます。パーツ分けしたものファイル名はheader.php, footer.php, sidebar.phpとして作成します。
    またメインコンテンツはindex.phpとして残すので新しく作成する必要はありません。

4つのパーツ(ファイル)に分け終えれば完成です。

6.パーツ化したPHPファイルを作る

いよいよここからPHPが出てきます。

が、PHPの学習をするのが目的ではないのでとりあえずここではこういうコードを使うんだ程度で良いと思います。

こばゆた
こばゆた

ではそれぞれのPHPファイルを作っていきましょう

6-1.header.php

header.phpの作り方
  1. index.phpからヘッダー部分に当たる部分を切り取る
  2. header.phpへペースト
  3. wp関数を埋め込む

ちなみに最後のwp関数というものを書かないとWord Pressやプラグインと呼ばれるものががうまく動かなかったりするので書きましょう。

  • STEP1
    index.phpからヘッダー部分に当たる部分を切り取る
    index.phpからヘッダーに当たるものを分けていきます。
    今回の例ですとドキュメント宣言からheadタグを含んで、メインビジュアルまでを切り離します。

    <!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>

~~~~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~~~~~~~~

<div id="mainImg">
	<img src="images/banners/mainImg.jpg">
</div>

  • STEP2
    header.phpへペースト
    そのまま先程作成したheader.phpへ貼り付けます。
  • STEP3
    wp関数を埋め込む
    header.phpのヘッドタグの閉じタグの直前に以下のwp関数と呼ばれるものを埋め込みます。

    <?php wp_head(); ?>
    header.phpにwp関数を埋め込む

6-2.footer.php

header.phpとやり方は同じです。

footer.phpの作り方
  1. index.phpからフッター部分に当たる部分を切り取る
  2. footer.phpへペースト
  3. wp関数を埋め込む
  • STEP1
    index.phpからフッター部分に当たる部分を切り取る
    footerタグから最後のhtmlの閉じタグまでを切り離します。

    <footer id="footer">
	<p id="copyright">Copyright © Sample Company All rights Reserved. Design by <a href="http://f-tpl.com" target="_blank" rel="nofollow">http://f-tpl.com</a>
</footer>
<!-- / footer -->

</body>
</html>

  • STEP2
    footer.phpへペースト
    こちらもfooter.phpへ貼り付けます。
  • STEP3
    wp関数を埋め込む
    footer.phpのボディタグの閉じタグの直前に以下のwp関数を加えます。

    <?php wp_footer(); ?>
    footer.phpにwp関数を埋め込む

6-3.sidebar.php

ヘッダーやフッター同様にサイドバーに当たるところをindex.phpからsidebar.phpへ切り取ってペーストします。

<aside id="sidebar">
  <section class="widgetInfo">
    <div class="newsTitle">
      <h3 class="title"><span>お知らせ</span></h3>
      <p><a href="subpage.html">一覧</a>
    </div>

~~~~~~~~~~~~~~~~~~~~~略~~~~~~~~~~~~~~~~~~~~~~~
	
  </section>
</aside>

ちなみにこちらには埋め込むwp関数はありません。

6-4.index.php

index.phpにはヘッダーやフッターが元あった場所に以下のコードをそれぞれ埋め込みます。
ちなみにこの時使うタグをインクルードタグと呼びます。

ヘッダーのあった場所へ

<?php get_header(); ?>

フッターのあった場所へ

<?php get_footer(); ?>

サイドバーのあった場所へ

<?php get_sidebar(); ?>

それぞれ入れるとこんな感じになります。

index.phpにテンプレートタグを埋め込む

だいぶスッキリしましたね！これでパーツ分けは完了です！

こばゆた
こばゆた

ここまできたらあと一息です！

適度に休憩してくださいね

7.CSSを読み込む

一度WordPressの画面で確認してみるとまだCSSが反映されていなかったり、画像が読み込まれていないので以下のような形になっていると思います。

cssを読み込む前

ここで以下のタグをheader.phpのheadタグ内に埋め込みます。

<?php echo get_template_directory_uri(); ?>

cssを読み込んでいるhref属性の中に/(スラッシュ)とともに書きます。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css" type="text/css" media="screen">

再読み込みすると画像が反映されていませんが、CSSは反映されるようになりました。

css適用後
もし反映されていない場合は…
  • どこかスペルが間違っている
  • <?php ?>で囲われていない
  • <?php wp_head(); ?>や<?php wp_footer(); ?>の入る位置がおかしい
  • <?php get_header(); ?>などのタグをindex.phpに入れていない

などを確認してみましょう

8.画像とリンクを読み込む

画像やリンクを読み込むのも先程のコードを同じように記入します。

<?php echo get_template_directory_uri(); ?>

画像の場合は以下のようにsrc属性内の画像urlの手前に埋め込みます。

<img src="<?php echo get_template_directory_uri(); ?>/images/mainImg.jpg" alt="">
こばゆた
こばゆた

こちらも/(スラッシュ)を忘れると反映されないので注意です

画像を読み込んだ後

再読み込みをすると画像が反映されています。

リンクも同じようにやればOKです。

<a href="<?php echo get_template_directory_uri(); ?>/subpage.html"><strong>当社の経営理念</strong><span>Concept</span></a>

簡単ですね。

これで表面上はWordPressにすることができました。

9.functions.phpを作成する

きなこ
きなこ

functions.phpってなに？

こばゆた
こばゆた

機能拡張や設定などのファイルだと思っておけばOKだよ

functions.phpの作り方
  • STEP1
    functions.phpファイルを作成する
    functions.phpの作成
    sを忘れないように！
  • STEP2
    中身を書いていく
    functions.phpの書き方
    このファイルにはphpしか書いていかないので書き出しのみ書いて、閉じタグは書か無くても構いません。
  • STEP3
    必要なコードを記入する
    functions.php書き方の記入例

とりあえずここまでで今は大丈夫です。

10.まとめ

WordPress化まとめ
  • STEP1
    WordPress化したいHTMLファイル、スタイルシート、JavaScriptファイル、画像フォルダーなどを一つのテーマフォルダーにまとめて各々の環境(サーバー上かローカル環境か)で作成できる様にする。
  • STEP2
    index.phpとstyle.css(先に同名のスタイリング用のスタイルシートがある場合はcssフォルダーを作成し、そちらを入れておく)を用意する

    style.cssに記入するもの(一部)

    @charset "UTF-8";

/*
Theme Name: テーマ名
Description:テーマの説明
Version: バージョン
Author: 作者名
*/

    こちらはテーマの情報などが入る

  • STEP3
    index.phpにindex.htmlをコピーしてheader.php, footer.php, sidebar.php(サイドバーがあれば)を用意し、分ける
  • STEP4
    分割したファイルに決められたタグを埋め込む(インクルードタグなど)

    ①headタグの閉じタグの前に記入

    <?php wp_head(); ?>

    ②bodyタグの閉じタグの前に記入

    <?php wp_footer(); ?>

    ③index.phpのheaderがあったところに記入

    <?php get_header(); ?>

    ④index.phpのfooterがあったところに記入

    <?php get_footer(); ?>

    ⑤index.phpのsidebarがあったところに記入(こちらはサイドバーがある場合のみ)

    <?php get_sidebar(); ?>

  • STEP5
    cssを読み込む
    header.phpでスタイルシートを読み込んでいるところへ記入。
    後ろに/(スラッシュ)を忘れない。

    <?php echo get_template_directory_uri();?>

  • STEP6
    画像とリンクを埋め込む
    画像の場合はsrc属性のところへ、リンクの場合はhref属性のところへ記入。
    こちらも後ろに/(スラッシュ)を忘れない。

    <?php echo get_template_directory_uri(); ?>

  • STEP7
    functions.phpを作成する
    functions.phpの書き方

スポンサーリンク

コメント