基礎知識 2024.12.17 2024.12.17
静的HTMLサイトをWordPress化する方法を解説
この記事を書いた人
土井 純也
WordPressスペシャリスト・エンジニア/株式会社e2e 取締役 / CTO
1985年北海道生まれ。
200社以上の大手上場企業のWordPressサイトの制作、保守・セキュリティをサポートしている。
【 展開しているサービス一覧 】
■WordPress開発サービス「wp.make」
■WordPress保守/運用サービス「wp.support」
■WordPressハッキング/緊急復旧対応サービス「wp.rescue」
■WordPressバージョンアップ代行サービス「wp.versionup」
静的HTMLサイトを運用していると、サイト更新の手間がかかる、複数人での作業がやりにくい、HTMLやCSSの専門知識が必要、といった課題が生じることがあります。
これらの課題を解決する手段として有効なのが静的サイトをWordPress化することです。元のデザインをそのまま生かせるため、外観を変更したくない場合にも適しています。
本記事では、静的HTMLサイトをWordPress化する方法を、図を交えながらコンパクトに解説します。
目次
静的HTMLサイトをWordPress化するメリット
WordPress化とは、静的HTMLサイトを基にしてWordPressのテーマを開発することを指します。これに似た概念として「WordPress移行」がありますが、こちらはゼロからWordPressでサイトを構築し、コンテンツを移設することを意味します。一方、WordPress化は、元のHTMLサイトをベースにして、外観をできるだけ再現することを目指します。
静的HTMLサイトをWordPress化することには、多くのメリットがあります。
- コンテンツ管理が容易になる
- 複数ユーザーで管理できる
- 動的な機能が活用できる
WordPressサイトへ変更することで、コンテンツ管理の手間が大幅に削減されます。HTMLサイトの場合、更新したファイルや画像を都度サーバーへアップロードする必要があり、手間がかかるだけでなく作業ミスが生じるリスクもあります。また作業にはHTMLやCSSの知識も求められます。
一方、WordPressではブラウザ上の管理画面から直感的にコンテンツを編集でき、すぐに更新内容が反映されます。専門知識も不要です。さらに各種テーマやプラグインを導入することで、簡単にデザインや機能を追加・変更できます。
権限を分けたユーザーを追加するのも容易で、複数のユーザーで企業サイトやブログを運営する際にも便利です。
また、投稿に合わせて最新の記事一覧を表示したり、サイト内検索を設置するなど、動的な機能を組み込める点も大きなメリットと言えるでしょう。
静的HTMLサイトをWordPress化したほうが良いケース
静的HTMLサイトをWordPress化した方が良いのは、以下のようなケースです。
- コンテンツ更新にリソースが多くかかっている場合
- エンジニア以外のメンバーが頻繁にコンテンツを更新する場合
- 社外のメンバーがコンテンツを更新する場合
コンテンツ更新にリソースが多くかかっている場合
自社サイトの更新を外注している場合、原稿を用意してメールなどで依頼し、作業完了の連絡を受け取った後に検収作業を行う必要があります。そのため、簡単なテキスト修正でも手間と時間、費用がかかります。
静的HTMLサイトをWordPress化することで、外注に頼らず、社内の担当者がページ更新作業を行えるようになります。
また、自社のエンジニアが更新作業を行っている場合も、WordPress化によりエンジニア以外の担当者でもページを更新できるようになるため、エンジニアはより専門的な業務に専念できるようになります。
エンジニア以外のメンバーが頻繁にコンテンツを更新する場合
コーポレートサイトや企業ブログでは、広報担当者やマーケティング担当者、事業担当者などがマニュアルを参照しながら直接ページを更新するケースも多く見られます。更新頻度が高い場合は担当者の作業負担が大きくなり、ヒューマンエラーも発生しやすくなります。繁忙期には更新作業自体が後回しにされる可能性もあります。
WordPressの更新にはHTML/CSSの専門知識は不要なため、静的HTMLサイトをWordPress化することで、更新担当者の作業負担を軽減できます。容易に操作できるためエラーも発生しにくくなります。
社外メンバーがコンテンツを更新する場合
Webサイト運営において、外部のライターや委託しているSEO会社がいる場合でも、静的HTMLサイトのWordPress化は効果的です。
WordPressでは作業ユーザーに対して必要な権限だけを付与できます。適切な権限を限定したユーザーアカウントを提供することで、重要なコンテンツの誤削除や設定変更などの事故を防止できます。
静的HTMLサイトをWordPress化する手順
静的HTMLサイトをWordPress化する手順を説明します。
例えば、以下のようなHTMLサイトをWordPress化することを考えてみます。
作業手順は、以下のとおりです。10のステップに分かれていて複雑に見えますが、ひとつひとつの難易度はそれほど高くないため安心してください。
- ローカル環境にWordPressをインストールする
- 元のHTMLサイトをコピーする
- WordPressのテンプレートを作成する
- 作成したテンプレートを管理画面から適用する
- パスを置き換える
- index.phpから3つのパートを切り出す
- wp_headとwp_footerを追加する
- 必要に応じて他のテンプレートも作成する
- WordPressにコンテンツを移設する
- ローカル環境から本番環境にアップロードする
ローカル環境にWordPressをインストールする【STEP1】
まず、作業用としてWordPressローカル環境を構築します。これを使用して、HTMLからWordPressの形式に変換する作業などを行います。
手軽にローカル環境を構築できる「Local」などのサービスを利用すると効率的です。以下の記事を参考にLocalの設定作業を行ってください。
→【図解】Local（旧Local by Flywheel）でWordPressローカル環境を手軽に構築
https://wpmake.jp/contents/knowledge/construct/about_local/
元のHTMLサイトをコピーする【STEP2】
静的HTMLサイトのファイルを1つにまとめてローカル環境のフォルダに保存します。保存したフォルダは、テーマ名となる名前をつけます。このフォルダをベースに、WordPressのテーマを自作していきます。
作成したフォルダは、LocalのWordPressファイルが保存されているディレクトリ内にある「wp-content」→「themes」の下に保存します。
WordPressのテンプレートを作成する【STEP3】
WordPressでテーマを自作する場合、最小構成として必要となる以下のファイルを準備します。
- index.php
- style.css
前のステップで用意したフォルダにはどちらのファイルも含まれていないため、新規に作成する必要があります。
index.phpを作成する
まず、index.htmlをコピーして、index.phpという名称に変更します。その際に、拡張子を変更するタイミングで以下の確認メッセージが表示されたら「はい」をクリックしてください。
元のindex.htmlは、外観を確認する際に使用するため、念のためコピーしてバックアップを残しておくことをおすすめします。不要な場合は削除して構いません。
styles.cssを作成する
次に、空の状態でstyle.cssファイルを作成します。ファイルを開き、以下の宣言を記述します。
|
1 2 3 |
/* Theme Name: test_theme (テーマ名) */ |
WordPressのテーマでは、style.css内でテーマ名を宣言することで有効化します。
次に、パスを書き換えます。
元の静的HTMLサイトでCSSファイルやJSファイルがある場合は、そのまま再利用します。
サイトの共通部分で使用するロゴ画像などは、テーマファイル内に保存します。
作成したテンプレートを管理画面から適用する【STEP4】
テーマに必要なファイルが準備できたので、WordPress管理画面からテーマを有効化します。
WordPress管理画面から、「外観」→「テーマ」を選択し、作成したテーマ名を探して有効化します。Webサイトの表示が崩れていても、エラーが起きなければOKです。
パスを置き換える【STEP5】
静的HTMLファイルでは、通常HTMLファイル内にCSSやJavaScriptのパスを記述しています。しかし、WordPressでは、基本となるパスを関数で表現する必要があるため、パスを書き換えてWordPresの方式に対応するようにします。
HTMLでの記述（CSS）
|
1 |
<link rel="stylesheet" href="/css/main.css"> |
書き換えた後の記述（CSS）
|
1 |
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/main.css"> |
JavaScript、画像のパスもCSSと同様に書き換えます。
HTMLでの記述（JavaScript）
|
1 |
<link rel="stylesheet" href="/js/scripts.js"> |
書き換えた後の記述（JavaScript）
|
1 |
<script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script> |
HTMLでの記述（画像）
|
1 |
<img src="/images/main.jpg" alt=""> |
書き換えた後の記述（画像）
|
1 |
<img src="<?php echo get_template_directory_uri(); ?>/images/top.jpg" alt=""> |
「」という部分は、テーマのパスを出力する記述です。
| 関数名 | 内容 |
|---|---|
| get_template_directory_uri() | テーマのパスを出力する |
index.phpから3つのパートを切り出す【STEP6】
index.phpを、ヘッダー部分、フッター部分、サイドバー部分の3つのパートを切り出します。これによりヘッダー、フッター、サイドバー部分を共通化でき、効率的に管理できます。
header.php、footer.php、sidebar.phpという名前の空ファイルを作成します。
index.phpからヘッダー部分となる部分を切り取り、header.phpに貼り付けます。同様に、フッター部分、サイド部分も同じように切り取り、それぞれfooter.php、sidebar.phpに貼り付けます。
ヘッダー、フッター、サイドバーは、特定のタグを切り取るのではなく、Webサイトで「ヘッダー（またはフッター、サイドバー）として共通化したい」部分を切り取ります。自社サイトのコードを確認しながら、切り取る部分を決定してください。
切り取った後、index.phpにはメイン部分のみが残ります。ページを表示する際にヘッダー、フッター、サイドバーを表示するよう、切り取った位置に「」「」「」を追記します。
| 関数名 | 内容 |
|---|---|
| get_header() | header.phpを読み込む |
| get_footer() | footer.phpを読み込む |
| get_sidebar() | sidebar.phpを読み込む |
完成したら、実際にトップページを表示して、Webサイトが正しく表示されるかを確認してみてください。
wp_headとwp_footerを追加する【STEP7】
WordPressでは、各ページを読み込み時に必要な処理をため、先ほど作成したheader.phpに「wp_head()」、footer.phpに「wp_footer()」という関数を記述する必要があります。
挿入位置は、
「」はheader.phpの終了タグの直前、
「」はfooter.phpの
