HTMLのWebサイトをWordPress化する方法とは？

WordPressのテーマは、1テーマ毎に1つのフォルダに格納するようになっています。

新しくテーマを作るために、まずはパソコン内の任意の場所に開発用の空のフォルダを作成してフォルダ名をつけましょう。

WordPressのテーマは、システム本体がインストールされているサーバー上のディレクトリから「wp-content」、「themes」の順にたどった場所にあります。

ここには、WordPressにインストールしたすべてのテーマが格納されます。

自作のテーマも最終的にはこの場所に配置するので、フォルダ名は現在インストール中のテーマとかぶらない名前にしてください。

ここからは、必要なファイルをテーマフォルダの中に配置していきます。

WordPressテーマでは、「index.php」と「style.css」の2つのファイルが最低限必要です。

まずは、これらのファイルをテーマフォルダ直下に作成してください。

「index.php」は、HTMLを出力するためのテンプレートのひとつです。

ひとまず、現在のWebサイトにあるHTMLファイルから、共通部分のタグを抜き出したものを記述しましょう。

上の画像は、この時点の「index.php」の例です。

これを開始点として、テンプレートをPHP化していくことになります。

「style.css」は、Webサイト全体に適用するスタイルシートです。

このあとの作業はHTMLタグの構造を維持しながら進めていくので、現在のWebサイトで使用しているメインのCSSファイルと同じ内容にします。

最後に、「functions.php」というファイルも同じ階層に作成しておきましょう。

これはWordPressテーマに必須のファイルではありませんが、このあとの手順で使用します。

現時点では中身は空で構いません。

既存サイトではCSS・JavaScript・画像などのファイルをHTMLから読み込んでいるのが一般的でしょう。

WordPress化の際には、これらのファイルのうちテンプレートの一部として使用するものがあればすべてテーマフォルダに格納します。

CSSは、「style.css」として格納済みのもの以外が対象です。

JavaScriptは、基本的にすべて格納してください。

ただし、静的サイトでもよく利用されるjQueryについては、WordPressに組み込み済みのものを使用するので格納する必要はありません。

画像については、ブランドロゴや背景画像などWebサイト全体で使用するものだけを集めてテーマフォルダに入れます。

各ページの本文内で使用している画像については不要です。

テーマフォルダ内には、サブフォルダを作っても問題ありません。

あとからファイルが増えたときに乱雑な状態にならないように、ファイルの種類ごとにサブフォルダに分けて整理しておくのがおすすめです。

HTMLからCSS・JavaScript・画像などを読み込むときは、HTMLタグでファイルのパスを指定するのが通常です。

しかし、WordPressテーマでは別の方法を使います。

CSSとJavaScriptは「functions.php」から読み込むことになります。

それには、「functions.php」に以下の例のような記述が必要です。

CSSの読み込みには、「wp_enqueue_style()」関数を使用します。

ここでは「get_stylesheet_uri()」関数によって「style.css」が呼び出されるようになっています。

JavaScriptの読み込みに使用するのは、「wp_enqueue_script()」関数です。

ここでは、WordPressに組み込まれているjQueryを指定しています。

画像はCSSから読み込む方法がもっともシンプルです。

テーマフォルダ内の画像ファイルには、「style.css」からの相対パスでたどり着けるので、必要に応じてパスを正しく書き換えましょう。

しかし、どうしても「index.php」内のimgタグから直接読み込みたいケースもあるかもしれません。

その場合は、パス部分を「get_theme_file_uri()」関数で置き換えます。

たとえば、ロゴ画像を読み込むimgタグは、次のように書けるでしょう。

<img src="<?php echo esc_url(get_theme_file_uri('assets/images/logo.png')); ?>" alt="" />

次に、既存サイトのHTMLを3分割してテンプレートを作っていきます。

具体的には、先ほど作成した「index.php」を3つのテンプレートファイルに分けて、WordPressの仕組みに則って動作するようにそれぞれを整形していきます。

上のように、ヘッダー部分を「header.php」、フッター部分を「footer.php」というファイル名にして切り分けましょう。

このようにするのは、テーマフォルダ内にはさまざまなテンプレートを配置できるためです。

もっとも基本となる「index.php」のほかに、たとえば以下のようなテンプレートを作成できます。

これらのテンプレートがテーマフォルダ内に存在する場合は、該当ページを表示する際に「index.php」の代わりに使用されます。

これは、WordPressの「テンプレート階層（Template Hierarchy）」と呼ばれる仕組みです。

しかし、同じようなテンプレートを次々に追加していくことは、メンテナンス上の妨げにもなりかねません。

そこで、どのテンプレートにも共通するヘッダーとフッターの部分を抜き出して、再利用できるようにファイルを分けているのです。

3分割したテンプレートファイルをそれぞれ整形していきましょう。

こちらは、「header.php」の例です。

headタグ内からはCSSやJavaScriptとtitleタグを取り除き、代わりに「wp_head()」関数を配置します。

これにより、「functions.php」で指定したCSSやJavaScriptファイルをはじめとする、さまざまなタグをWordPressが自動的に挿入してくれるようになります。

こちらは、「footer.php」の例です。

bodyタグを閉じる直前の位置に「wp_footer()」関数を配置します。

「index.php」はこのように記述します。

「get_header()」と「get_footer()」の2つの関数は、ヘッダーとフッターを読み込ませるための指定です。

記事部分には、WordPress特有の「ループ」構造を挿入する必要があります。

ループの内側には、記事のURLやタイトル、本文などをWordPressから取得して出力するためのコードを追加します

。

最後はテーマに名前をつける作業です。

このように「style.css」の先頭にコメントを入れ、「Theme Name:」に続けてテーマ名を記述します。 ここで定義したテーマ名は、WordPressの管理画面でテーマを一覧表示したときなどに確認できるものです。

ここまでの手順が正しく完了していれば、作成したテーマを実際に動かしてみることができます。

WordPressが動作しているサーバーにFTPなどでアクセスして「wp-content」「themes」の順にたどり、作成したテーマをフォルダごとアップロードしてください。

アップロードが完了したら、WordPressにログインします。

管理画面の「外観」メニューから「テーマ」を選択して、テーマの一覧を表示させましょう。

新しいテーマが一覧に追加されていることがわかります。

「有効化」ボタンを押下すれば、HTMLからWordPress化したテーマに切り替わります。

あとは、既存サイトのコンテンツを管理画面から入力していけば、WordPress化の作業は完了です。

Webにくわしくない初心者でもたった10分で始められるレンタルサーバー「ConoHa WING」。

とっても簡単だから今すぐ始めちゃいましょう。

また下記の記事では、ConoHa WINGを使ってWordPressを開設する方法を、画像付きでくわしく解説しています。

他社のレンタルサーバーをご利用中で、ConoHa WINGにお乗り換えを検討されている方も安心です！

煩雑なレンタルサーバーの移行もかんたんにお乗換えいただけるよう、いくつかのサポートを用意しています。