Web制作・プログラミング関連のおすすめレビュー記事はこちら

静的サイトをWordPress化する手順①(ファイルの準備)

Web制作

今回はHTMLでコーディングしたサイトをWordPress化する手順について詳しく解説していきます。

静的サイトのWordPress化の手順がよくわからない...

こんな人向けに解説します。

今回は既にローカル環境にWordPressをダウンロード済みである前提でお話します。

想定するコーディングファイルの構成は以下の通りとします。

  • index.html   トップページ用にコーディングしたファイル
  • about.html   会社概要ページ用にコーディングしたファイル
  • news.html   ブログ記事などの一覧ページ用にコーディングしたファイル
  • news-show.html 記事の詳細ページ用にコーディングしたファイル
  • entry.html   フォームなどを設置するページ用にコーディングしたファイル
  • imgフォルダ  画像が入ったフォルダ
  • cssフォルダ  style.cssが入ったフォルダ

ファイル構成は人によって違うはずなので、ご自身のファイル構成と照らし合わせつつ、読み進めていただけるとわかりやすいかと思います。

テンプレートファイル構成などのやり方はいくつもあり、必ずしもここで紹介されている方法が正解ではありません。

僕がわかりやすいと思ったやり方を紹介しているので、少しでも参考になったら幸いです。

WordPress化するってどういうこと?

WordPress化とは静的サイトをWordPressの管理画面使って更新できるサイトにするということを指します。

こうすることでHTMLやCSSの知識がない人でも管理画面から簡単にサイトを更新することができるようになります。

静的サイトをWordPress化するためには、コーディングデータをオリジナルのWordPressテーマとして読み込ませる必要があります。

つまり 静的サイトをWordPess化する=オリジナルテーマを作成する ということになりますね。

WordPressのファイル構造の確認

まずはWordPressのファイル構造から確認しましょう。

WordPressをダウンロードしたファイルから中身を確認してみると以下の様にたくさんのファイルが確認できるかと思います。

今回使うのは wordpress(ここは任意の名前でも問題ないです)/ wp-content / themes フォルダのみです。

wordpressファイルのファイル構成
wordpress / wp-contentのファイル構成

このwordpress / wp-content / themesの中にコーディングデータを入れることでオリジナルテーマとして読み込ませていくことになります。

※これ以外のファイルはWordPress本体に影響を及ぼす可能性があるので、むやみに編集したり、削除したりしないように気をつけましょう。

テーマフォルダの作成

wordpress / wp-content / themes内にオリジナルのテーマフォルダを作成し、 その中にコーディングデータを追加したり、必要なファイルを作成していくことでテーマとして認識される様になります。

先ほど確認したthemesフォルダ内に好きな名前でフォルダを作成しましょう。

(既存のテーマ以外の名前にしましょう。)

index.phpとstyle.cssを作成

まずは自分のテーマフォルダ内にindex.phpとstyle.cssを作成します。

これらはWordPressにテーマとして認識させるための必要最低限のファイルなので必ず作成しましょう。

index.phpに関しては現時点では中身は空で大丈夫です。

index.phpについて

HTMLでのコーディングではindex.html = ホームページ(トップページ)用のファイルという慣習がありますが、

WordPressテーマにおけるindex.phpは、必ずしもホームページに使われるファイルではない。

ということです。

WordPressではページの種類によって優先して適用されるファイルが決まっています。

そのためWordPressテーマでのindex.phpは他に優先して適用すべきファイルがない場合に使われるファイルという役割になりますので混同しない様にしましょう。

なので一般的にはindex.phpファイルを作成し、その後で必要に応じた優先度の高いファイルを作成していくという流れになります。(詳しくは後述します。)

次はstyle.cssについてです。

style.cssもテーマとしての認識に必須のファイルです。

ここにはテーマに関する説明をコメント形式で入力します。

下の画像が例ですが、とりあえずテーマとして認識させたいだけであれば、Theme Nameのみの記述でも問題ありません。

style.css内の記述

コーディングしたフォルダの中身をコピー

ここからコーディングデータをWordPressに移す作業に入ります。

自分でコーディングした静的サイトのフォルダの中身をすべてテーマフォルダ内にコピーしましょう。

ここまでの作業でとりあえずテーマとして認識される段階まで来ました。

次からはテンプレートファイルの作成をしていきましょう。

テンプレートファイルの作成

テンプレートファイルとは?

テンプレートファイルとはWordPressで表示する際に使われる.php拡張子のファイルで、ページの種類ごとに適用されるファイルの優先順位が予め決まっています。

これをテンプレート階層と呼びます。これをもとに作成すべきテンプレートファイルを考えていきます。

WordPressのテンプレート階層

クリックで拡大 ↑

※画像は日本語版WordPressCodexより
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

ここからはファイルの名前や中身を編集するので、コーディングデータのバックアップをとっておくことをおすすめします。

また今回は簡単化のためにテンプレート階層で僕が実際にやったやり方でやっていこうと思います。(他にも方法はたくさんあります。)

必要なテンプレートファイルを確認して作成

今回想定しているサイトは冒頭にも載せたとおり、

index.html   トップページ用にコーディングしたファイル
about.html   会社概要ページ用にコーディングしたファイル
news.html   ブログ記事などの一覧ページ用にコーディングしたファイル
news-show.html 記事の詳細ページ用にコーディングしたファイル 
entry.html   フォームなどを設置するページ用にコーディングしたファイル

の5ページで構成されています。

一つづつどんなテンプレートファイルを作成するべきか確認していきましょう。

index.html 

これはホームページ(トップページ)に当たるページなのでテンプレート階層のフロントページ部分をたどってみると、

最優先はfront-page.phpですね。

なのでindex.htmlの名前をfront-page.phpに変え、テンプレートファイル化することで、トップページにfront-page.phpの内容を適用できます。

about.html &  entry.html

これは会社概要ページとフォーム用のページですね。これらは個別ページの固定ページなのでテンプレート階層をたどってみると、

$custom.phpというのが最優先で適用されることがわかります。

$custom.phpとはカスタムテンプレートというもので任意の名前をつけ、ファイル内に決められた記述をすることでテンプレートファイルとして扱うことができるというものです。

あとで詳しく説明するので

ここではとりあえずabout.htmlとentry.htmlをabout.phpentry.phpと変更しておきましょう。

news.html 

これはブログ記事やニュースの一覧ページですね。これはブログ投稿インデックスページという部分をたどってみると、

home.phpが最優先で適用されることがわかります。

したがって、news.htmlからhome.phpに名前を変更します。

(※このあたりは感覚に反する部分なのでしっかりとテンプレート階層をチェックしましょう!)

news-show.html

これはブログ記事を個別に見たときのページですね。なので個別ページの個別投稿ページをたどってみると、

single-post.phpが最優先です。

したがって名前をnews-show.htmlからsingle-post.phpに変更します。


これで今回想定しているサイトのページを表示するテンプレートファイルは準備できました...が

まだ追加すべきファイルがいくつかあります。

例えばいまの状態でWordPressから選択したカテゴリを持つ記事の一覧ページ(カテゴリアーカイブページ)を表示しようとしたらどうなるでしょうか?

タグアーカイブページをたどってみると、現在のファイル構成のままでは、index.phpが適用されてしまいます。(他に優先されるファイルがないため)

アーカイブページ用にはarchive.phpというテンプレートファイルがあるので、それも作成しておきましょう。(まだ中身は空で大丈夫です。)

またWordPressの管理画面から新しい固定ページを増やして、表示しようとすると、この場合もまたindex.phpが適用されてしまいます。

固定ページ共通のテンプレートファイルにはpage.phpがあるのでそれも作っておきましょう。

同じ様に考えると、single.phpもあったほうがいいですね。

これでページの表示に関するテンプレートファイルの作成は終了です。

functions.phpの作成

functions.phpとはテーマのための関数を記述するファイルです。

テーマのカスタマイズやjsの読み込みを行ったりします。

ブログ記事のアイキャッチを有効化できたり、様々な機能をこのファイルで管理します。

これも作成しておきましょう。


これで一旦ファイル関係の作成は終了です。

ちなみに今まで作ってきたファイルはスペルミスをすると正しく動いてくれないのでしっかりとチェックして作っていきましょう!

ここまでで以下のようなファイル構成になっていればOKです。

ファイルの中の記述に関しては次回以降記事にしようと思います。

タイトルとURLをコピーしました