- 静的なHTMLサイトをWordPress化したいけど手順がわからない。
- プログラミングとかよくわからないけどWordPress化ってできるの？
私がこの記事を書こうと思ったのは、私自身が過去に静的サイトをWordPress化しようとして悩みまくったことがあるからです。
この記事を読んで「WordPress化は思ったより難しくない」ということを知ってほしいです。
静的HTMLサイトをWordPress化する方法
この記事では静的HTMLサイトをWordPress化するための大まかな流れについて書いていきます。
はじめは「難しそう」と感じるかもしれませんが、やることは案外シンプルです。
静的サイトと動的サイトの違い
まずは静的サイトと動的サイトの違いについてです。
大きな違いは、データベースからページの中身を持ってきているかどうかです。
【静的サイト】
ページごとにHTMLファイルをサーバーに保管
【動的サイト】
空のテンプレートファイルを用意しておき、中身はデータベースの中に保管。ユーザーのリクエストに応じて、テンプレートファイルに対応する内容をデータベースから引っ張ってきて表示。
静的サイトの場合、ページを増やす＝サーバーに保管するHTMLファイルを増やすということになります。
ですが動的サイトの場合は、ページが増えてもサーバーの中に保管ファイルが増えるわけではなく、データベースの中にコンテンツの内容を記録し、リクエストされる度に、テンプレートファイルにデータベースの内容を反映させて表示しています。
WordPress化する手順
静的HTMLサイトをWordPress化する手順についてです。
まずはHTMLファイルで静的サイトを制作します。
静的サイトの制作についてはこの記事では触れません。
HTMLファイルをPHPファイルに変更していきます。
管理しやすいように共通するコードをまとめていきます。
青山やることは結構シンプルです。
始めに静的HTMLサイトを作らずに、WordPress化と並行して作っていく方法もありますが、ある程度慣れている人向けの作り方です。
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です。
「静的サイトと動的サイトの違いについて」のところで、WordPressはテンプレートファイルにデータベースの内容を反映させてページを表示させている、と書きましたが、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万円とかでも購入必須の内容です。
WordPress化まとめ
長くなりましたが以上です。
全てを細かくは書けていませんが、大まかな流れを理解していただければと思います。そして「案外簡単なんだな」と思ってもらえたら幸いです。
WordPressについては相談も受け付けているので、何かありましたらご相談いただければと思います。
