【挫折前に読んでほしい】静的HTMLサイトをWordPress化する方法

  • 静的なHTMLサイトをWordPress化したいけど手順がわからない。
  • プログラミングとかよくわからないけどWordPress化ってできるの?

私がこの記事を書こうと思ったのは、私自身が過去に静的サイトをWordPress化しようとして、誰よりも悩んだことがあるからです。

この記事を読んで「WordPress化は思ったより難しくない」ということを知ってほしいです。

目次

静的HTMLサイトをWordPress化する方法

この記事では静的HTMLサイトをWordPress化するための大まかな流れについて書いていきます。

はじめは「難しそう」と感じるかもしれませんが、やることは案外シンプルです。

WordPress化する手順

早速ですが、静的HTMLサイトをWordPress化する手順についてです。

STEP
HTML、CSS、JavaScriptなどで作った静的サイトを用意する。

まずはHTMLファイルで静的サイトを制作します。

※静的サイトの制作についてはこの記事では触れません。

STEP
WordPressをインストールする。

ワードプレスの公式サイトから最新版をダウンロードしましょう。

STEP
PHPファイルに置き換えていく。

HTMLファイルをPHPファイルに置き換えていきます。

STEP
ヘッダーやメニューなどの共通部分を共通ファイルにまとめる。

管理しやすいように共通するコードをまとめていきます。

青山

やることは結構シンプルです。

始めに静的HTMLサイトを作らずに、WordPress化と並行して作っていく方法もありますが、ある程度慣れている人向けの作り方です。

WordPressをインストールする

WordPressを使うには、
WordPressのインストールが必要です。

WordPressは無料で使えるオープンソースのプログラムなので、ダウンロードすれば誰でも使えます。公式サイトからダウンロードしましょう。

WordPressをダウンロードしたら、サーバーの「htdocs」というフォルダの中にダウンロードしたWordPressフォルダ一式を入れましょう。

WordPressはPHPでできている

静的HTMLサイトをWordPress化する過程で、HTMLファイルをPHPファイルに置き換える工程がありますが、PHPファイルに書き換えるのはWordPressがPHPでできているためです。

WordPressのテーマの中身を見てみると、「index.php」や「header.php」というファイルが見つかると思います。拡張子がphpとなっていますね。

PHPと聞くと、「え〜プログラミング?難しそう」と思う方もいるかもしれません。

たしかにWordPressを隅々まで使おうと思ったら、PHPのプログラミング知識は必須です。ですが単に静的HTMLサイトをWordPress化する場合には、PHPプログラミングの知識やスキルはあまり使いません。

WordPressで自作の関数(プログラム)を作ることも可能です。自作の関数を作る場合には、PHPプログラミングの知識やスキルが必須です。

WordPress特有のコードを知っておけばOK

静的HTMLサイトをWordPress化するにあたって知っておく必要があるのは、WordPress特有のコードです。

静的HTMLサイトをPHPファイルに置き換える工程の中で、HTMLベースで書かれたコードをWordPressが用意したコードに置き換えていきます。

【WordPressのコード一例】

  • <?php the_title(); ?>→記事のタイトルを表示するためのコード
  • <?php the_content(); ?>→記事のコンテンツを表示するためのコード
  • <?php get_header(); ?>→header.phpを読み込むためのコード

テーマの中身を見ると気が遠くなるが、実は必須なファイルは少ない

WordPress化するにあたって必要なファイル構成について考えてみましょう。

WordPressには必須のファイルと必要に応じて必要になるファイルがあります。

必須のファイルは、
用意しておかないとWordPressのテーマとして認識されません。

【必須ファイル】

  • index.php(静的HTMLサイトのTOPページ部分「index.html」をリネームしましょう。
  • style.css

上記2ファイルがないとWordPressのテーマとして認識されません。

さらに、テーマとして認識されるためには、「style.css」に次の記述をする必要があります。

/*
Theme Name: ABC
Description:オリジナルテーマです
Author: Mr.ABC
Version1.0
*/

※「:」以降は自分で決めた内容を記述します。

あと、必須ではないですが、「screenshot.png」というファイル名の画像を用意すると、テーマ一覧の中で指定した画像が表示されます。

「index.php」と「style.css」を用意し、ダウンロードしてサーバーに入れたWordPressフォルダの下記フォルダに保管すれば、WordPressの管理画面でテーマとして認識されます。

WordPressフォルダ→wp-contentフォルダ→themesフォルダの中に任意のフォルダを用意し「index.php」と「style.css」を保存する。

共通部分をインクルードとして切り出していく

続いて、全ページ共通部分をテンプレートファイルとして切り出していきましょう。

たとえばグローバルメニューなどを全ページで使うと仮定しましょう。

今後サイトを運営していく中で、グローバルメニューを変更する必要があるかもしれません。

その時に、各ページごとにグローバルメニューを変更していたら非常に面倒です。

ですので、複数のページに共通して使われる部分に関しては、共通ファイルとして切り出します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<?php wp_head(); ?>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li>メニュー</li>
        <li>メニュー</li>
        <li>メニュー</li>
        <li>メニュー</li>
        <li>メニュー</li>
      </ul>
    </nav>
  </header>
  <p>コンテンツ</p>
</body>
</html>

<!DOCTYPE html>から</header>までを全ページ共通部分として切り取ります。

新規ファイルを作成し、
切り取ったコードを貼り付けます。

ファイル名は「header.php」です。

その後、元の場所に「header.php」を読み込むためのコードを記載します。

<?php get_header(); ?>
<p>コンテンツ</p>
</body>
</html>

これで、ヘッダー部分が共通ファイルとして管理できるようになりました。

フッターも同じ要領で共通化できます。

<?php get_header(); ?>
<p>コンテンツ</p>

<footer>
  <nav>
    <ul>
      <li> フッターメニュー</li>
      <li> フッターメニュー</li>
      <li> フッターメニュー</li>
    </ul>
  </nav>
  <p>copyright</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

<footer>以降を切り取って、「footer.php」というファイルに貼り付けます。

その後、元の場所に「footer.php」を読み込むためのコードを記載します。

<?php get_header(); ?>
<p>コンテンツ</p>

<?php get_footer(); ?>

補足:WordPress化するにあたって必須のコードがあります。

</head>の直前に<?php wp_head(); ?>を追加しましょう。

</body>の直前に<?php wp_footer(); ?>を追加しましょう。

WordPress化とはテンプレートファイルを用意する作業である

「header.php」と「footer.php」を共通部分として管理することによって、<?php get_header(); ?>のような一行のコードを書くだけで、どのページからでも共通パーツを読み込むことができるようになります。

たとえば、記事ページでヘッダーやフッターを呼び出す際も、同じように一行のコードを書けばOKです。

静的HTMLサイトをWordPress化するとは、簡単に言うと、テンプレートファイルを用意することであるとも言えます。

WordPressには記事ページなら「single.php」というテンプレートファイルを使う、固定ページなら「page.php」というテンプレートファイルを使うといったルールがあります。

役割ファイル名
TOPページfront-page.php
固定ページpage.php
投稿ページsingle.php
カテゴリーページcategory.php
アーカイブページarchive.php

少しややこしい点は、
ファイルには優先順があるという点です。

たとえば上記の表ではTOPページ=「front-page.php」となっていますが、厳密には「home.php」や「index.php」もTOPページのテンプレートファイルになり得ます。

投稿ページや固定ページも同じで、
「index.php」を使うこともできます。

WordPressでは、ユーザーからリクエストがあったタイミングでテンプレートファイルを探すのですが、各役割ごとに優先順位の高いファイルから探し始めます。

たとえばTOPページのリクエストがあった場合は、まず始めに「front-page.php」を探します。

サイト制作者が「front-page.php」を用意していた場合には、「front-page.php」が使用されます。

ですが用意してなかった場合には、「home.php」など、次に優先順位の高いファイルを探します。

それでもなかった場合には、
最終候補として「index.php」を探します。

WordPress化するにあたって必ず用意しなければならないファイルとして「index.php」がありますが、これは「index.php」は全ての役割に対応できる汎用的なファイル、かつ最終候補として表示できるファイルのためです。

必要に応じてプラグインを使用する

WordPressにはプラグインといって、インストールすることで使えるようになるプログラムがたくさん用意されています。

WordPress化の工程の中で、
必要に応じてプラグインを使っていきます。

【よく使用されるプラグイン】

  • お問い合わせフォーム(MW WP Form、Contact Form7)
  • SEO対策(Yoast SEO、All in One SEO)

WordPress化の方法がわからなくて悩みまくった過去の自分

はじめて静的HTMLサイトをWordPress化しようと思った時、過去の私はわけがわからなすぎてものすごく悩みました。

まわりに聞く人がいなくて、本を読んでもネットを見てもよくわからなくて、「すみません、できませんでした」とクライアントに言わなければならないのかと考えて、一人で悩みまくりました。

とくに苦労せずにできる人にはわからないかもしれませんが、そもそも、私は自分が何がわからないのかすらわかっていない状態でした。

今、もしもあの時の自分に何か言えるとしたら何を話すだろう?

そう考えてこの記事を書きました。

あの頃悩みまくっていた自分に必要なのは何だったのだろう?

0から丁寧にWordPress化について書くこともできますが、それでは出来の悪いマニュアル本が一冊増えるだけです。あの頃だって、情報はたくさんありました。

だとすれば何を伝えるべきなのか?

それは「意外に簡単だぜ」ということです。

PHPとかデータベースとか、テンプレートファイル化とか、意味がわからなくなるような言葉もありますが、一つずつゆっくりと理解していけば、意外に簡単にできるようになります。

過去の私と同じような方が「もうやーめた」と投げ出してしまう前に、これを伝えたくて、この記事を書きました。

ひととつずつ理解していけば大丈夫です。たとえば「ヘッダーが共通ファイルとして読み込めた」とか「テーマがちゃんと認識された」とか、こういう階段をひとつずつ登っていけば、ちゃんとWordPressを扱えるようになります。

早く知りたかった本

過去の自分に読ませたい本です。めちゃくちゃショートカットできます。

一冊3,000円くらいですが、
仮に一冊1万円とかでも購入必須の内容です。

created by Rinker
¥2,640 (2024/11/10 08:11:39時点 楽天市場調べ-詳細)
created by Rinker
¥2,838 (2024/11/10 08:11:39時点 楽天市場調べ-詳細)

WordPress化まとめ

長くなりましたが以上です。

全てを細かくは書けていませんが、大まかな流れを理解していただければと思います。そして「案外簡単なんだな」と思ってもらえたら幸いです。

WordPressについては相談も受け付けているので、何かありましたらご相談いただければと思います。

あわせて読みたい
【初心者詰む場所】WordPressオリジナルテーマ作成 WordPressのオリジナルテーマを作ってみたい オリジナルテーマ作成の仕事を依頼された WordPressにはたくさんのテーマが用意されていますが、デザインやレイアウトの都...
もしよろしければシェアお願いいたします。
目次