MENU
ホームぺージ制作・WEBサイト制作・Wordpress制作ならエムトラッド
  1. ホーム
  2. 未分類
  3. 初心者でも迷わない！HTMLサイトをWordPressに移す手順とチェックポイント

初心者でも迷わない！HTMLサイトをWordPressに移す手順とチェックポイント

未分類

HTMLで作ったサイトをWordPressに移してみたいけど、どこから始めたらいいのか分からない。
そんなふうに感じたことはありませんか？

WordPressにすれば、コードが書けなくても記事やページを追加できて、サイトの更新がずっと楽になります。
固定ページと投稿ページを使い分けることで、情報を整理しながら運用していくことも可能です。

この記事では、初心者でも取り組めるHTMLサイトのWordPress化の基本的な流れを紹介します！

目次

なぜWordPress化するのか

WordPress化する理由は、これらのメリットを実現するためにあります。

  • 更新作業を誰でもできるようにすること

  • 運用・管理の効率を高めること

  • 将来的な拡張や改善にも対応しやすくすること

HTMLだけで作られたサイトは、デザインの自由度が高くて表示も軽快ですが、更新や修正のたびにコーディングの知識が必要になります。

例えば「お知らせを1件追加したい」「採用情報を少し修正したい」といった作業でも、HTMLファイルを開いてコードを編集し、再アップロードしなければなりません。

そのため、クライアント企業内の担当者や広報スタッフが自分で情報を更新するのは難しく、どうしても制作会社に依頼する必要が出てきます。
結果として、ちょっとした更新にも時間やコストがかかってしまうのが大きな課題です。

そこで役立つのがWordPressです。

WordPressを使えば、管理画面からブログ記事を書くようにページを追加・更新できるようになり、誰でも簡単に情報を発信できる仕組みを持たせることができます。

また、世界的に利用されているCMS（コンテンツ管理システム）なので、テーマやプラグインを活用すれば、SEO対策・セキュリティ対策・フォーム設置など、運用に必要な機能を手軽に追加できます。

さらに、「固定ページ」と「投稿ページ」を使い分けられるのも大きな特徴です。

  • 固定ページ → 会社概要やお問い合わせページなど、あまり更新の必要がないページ

  • 投稿ページ → お知らせやブログ記事など、頻繁に追加・更新していくページ

この2つを組み合わせることで、情報を整理しながら運用できるWebサイトに変えることができます。

WordPress化に入る前の前提準備

ベーシック認証設定

ベーシック認証とは？

開発中のサイトは、URLを知っていれば誰でもアクセスできてしまいます。検索エンジンに拾われてしまうリスクもあるので、「パスワードを知っている人だけが見られるようにする仕組み」を入れておく必要があります。それが「ベーシック認証」です。

仕組みとしては2つのファイルを使います。

.htaccess … サイト全体の設定を書き込むファイル

.htpasswd … 認証に使うIDとパスワードを保存するファイル

手順

  1. プロジェクトフォルダの直下に .htaccess と .htpasswd の2つを配置する。

  2. .htaccess に「このサイトはパスワード認証が必要」と書き込む。

    • その際、対象のプロジェクト用フォルダのパスを自分の環境に合わせて設定する。

  3. .htpasswd にIDと暗号化したパスワードを記述する。

    • 暗号化パスワードは専用のジェネレーターサイトで作れる。

    • IDは固定、パスワードはプロジェクト名などにして管理すると分かりやすい。

  4. FileZillaなどのFTPソフトを使って、ローカルの .htaccess / .htpasswd をサーバーのプロジェクトフォルダ直下にアップロードする。

※コツ：同じサーバー内で別のプロジェクトがすでに認証設定されているなら、そのファイルをコピーして「プロジェクト名」だけ書き換えると早い。

サーバー接続とテスト環境準備

なぜ必要か？

WordPressをいきなり本番環境に入れると、設定ミスやコードエラーがあったときにサイトが止まってしまいます。
そこで本番とほぼ同じ構成のテスト環境サーバーで動かし、移行時のトラブルを最小限にするのが基本です。

 

手順

  1. FTPソフト（例：FileZilla）でサーバーに接続する。

  2. ローカル（自分のPC）のデスクトップなどに新しいフォルダを作り、テスト環境用のコードを保存する。

    他の人が既にコーディングしている場合は、そのフォルダをサーバーからコピーしてくる。

  3. サーバー上の該当フォルダを丸ごとダウンロードし、ローカルに複製しておく。

    「自分用の作業コピー」を持っておくことで、安心して編集や調整ができる。

 

XServerでデータベースを作成

データベースとは？

WordPressは記事やページの内容、ユーザー情報などをデータベースに保存しています。
HTMLサイトにはなかった仕組みなので、WordPressを動かすには必ず専用のデータベースを用意する必要があります。

 

手順

  1. XServerの管理画面にログインする。

  2. メニューから 「MySQL設定」 を開き、「MySQL追加」 をクリック。

  3. 新しく作成するデータベース名を入力する。

    命名ルールは「共通部分 + プロジェクト名」など、後から見て分かるように。

  4. 任意でメモ（例：「◯◯プロジェクト テストサイト」）を残しておくと便利。

  5. 「MySQL一覧」から作成したデータベースが追加されているか確認。

  6. アクセス権限の設定で「ユーザー」をデータベースに関連付ける。

    最初は空欄だが、必要なユーザー（管理者用アカウント）を選んで追加すればOK。

 

まとめ

  • ベーシック認証でアクセス制限をかけ、開発中のサイトを外部に見られないようにする

  • サーバー接続とテスト環境で、本番と同じ条件下で動作確認できるようにする

  • データベース作成で、WordPressを動かすための土台を用意する

これらを押さえておくと、WordPress化の作業がスムーズに進み、後から新しく入った人でも迷わず同じ環境を再現できます。

WordPress化の流れ

HTMLサイトの準備が整ったら、次はサーバーにWordPressをインストールしていきます。
ここでは「簡単インストール機能」を使う方法を紹介します。

WordPressをサーバーにインストール

  1. 簡単インストールを選択する
    サーバー管理画面のメニューから 「WordPress簡単インストール」 を選びます。

  2. ドメインを選択する

    インストール先のドメインを選びます。 sample.com
    例：sample.com

    もしすでにHTMLで構築したフォルダがある場合は、そのフォルダの階層にWordPressを入れるようにします。

  3. インストール情報を入力する

    「WordPressインストール」画面で以下を入力します。

    • サイトURL
      ドメインを選択した後ろに、テスト環境用のフォルダを指定します。
      例：http://sample.com/test_project/wp

    • ブログ名
      「プロジェクト名 テストサイト」など、後から見て分かりやすい名前にしておきましょう。

    • ユーザー名
      管理画面にログインするときのユーザー名。共通ルールがあればそれに従います。

    • パスワード
      強力なパスワードを設定します。パスワード生成サイトなどを利用すると便利です。

    • メールアドレス
      運用で利用する連絡先を入力します。

    • データベース
      「作成済みのデータベースを利用する」を選択し、前のステップで作成したデータベース名を指定します。
      例：sampledb_project

  4. 確認画面 → インストール

    入力が終わったら確認画面へ進み、問題がなければ「インストール」をクリック。

    インストールが完了すると、サーバー上のプロジェクトフォルダにwpフォルダが作成されます。
    例：http://sample.com/test_project/wp

    FileZillaなどのFTPソフトでリモートサイトを確認すると、wpフォルダが追加されているはずです。

  5. 管理画面にログイン

    インストール後に表示される管理画面URLを必ずメモしておきましょう。

    URLを開き、設定したユーザー名とパスワードでログインすると、WordPressのダッシュボードに入れます。

  6. インデックスを無効にする（重要）

    開発中のサイトは検索エンジンに表示されないようにする必要があります。

    管理画面の左メニューから 「設定」 → 「表示設定」 を開き、
    「検索エンジンがサイトをインデックスしないようにする」にチェックを入れて保存しておきましょう。

まとめ

  • ドメインとフォルダの指定を間違えないこと

  • 管理画面のログイン情報（URL / ユーザー名 / パスワード）は必ずメモ

  • 開発中はインデックスを止めて、公開前に外す

これでWordPressがサーバーにインストールされ、管理画面から作業を始められる状態になります。

WordPressのプラグインを導入

WordPressは「プラグイン」を追加することで機能を拡張できます。
ここでは基本的に入れておきたいプラグインをまとめました。初心者でも理解しやすいように、役割ごとに整理しています。

  1. セキュリティ関連
    SiteGuard WP Plugin
    ログイン画面に画像認証を追加したり、管理画面のURLを変更できるプラグイン。
    不正アクセス対策として必ず入れておきたい定番です。
    https://ja.wordpress.org/plugins/siteguard/User Activity Log誰がログインしたのか、どんな操作をしたのかを記録してくれるプラグイン。
    チームで作業するときに便利です。
    https://ja.wordpress.org/plugins/siteguard/
  2. SEO関連
    All In One SEO
    ページごとにタイトル・ディスクリプション・キーワードを設定できるSEOプラグイン。
    https://ja.wordpress.org/plugins/all-in-one-seo-pack/SEO SIMPLE PACK
    シンプルなSEO設定ができるプラグイン。初心者でも扱いやすいのが特徴。
    ★xml sitemapとセットで使う
    https://ja.wordpress.org/plugins/seo-simple-pack/XML Sitemaps
    サイトマップを自動生成するプラグイン。★SEO SIMPLE PACKとセットで使うと効果的。
    https://ja.wordpress.org/plugins/google-sitemap-generator/
  3. 投稿・ページ管理
    Yoast Duplicate Post
    投稿や固定ページをコピーして複製できるプラグイン。
    似たページを作るときに便利です。
    https://ja.wordpress.org/plugins/duplicate-post/Public Post Preview下書き中のページをログインしていない人にも共有できるプラグイン。
    クライアントに確認してもらうときに活躍します。
    https://ja.wordpress.org/plugins/public-post-preview/Show Current Template
    今見ているページがどのテンプレートファイルで表示されているか確認できるプラグイン。
    テーマを編集するときに役立ちます。
    https://ja.wordpress.org/plugins/show-current-template/
  4. エディタ関連
    Advanced Editor Tools (旧 TinyMCE Advanced)
    投稿画面に文字装飾ボタンや表組みなどを追加できるプラグイン。
    https://ja.wordpress.org/plugins/tinymce-advanced/Classic Editor
    以前のシンプルなエディタを使いたいときに導入するプラグイン。
    https://ja.wordpress.org/plugins/classic-editor/
  5. フォーム関連
    MW WP FORM
    お問い合わせフォームを設置できるプラグイン。
    https://ja.wordpress.org/plugins/mw-wp-form/
  6. バックアップ・移行
    All-in-One WP Migration
    WordPressサイトをバックアップしたり移行するときに使うプラグイン。
    https://ja.wordpress.org/plugins/all-in-one-wp-migration/all-in-one-wp-migration-unlimited-extension
    上記プラグインの拡張版。有料ですが、大容量のサイトを移行するときに便利です。
    https://servmask.com/extensions/unlimited-extensionBackWPup
    定期的に自動バックアップを取れるプラグイン。バックアップは必ず入れておくべきです。
    https://ja.wordpress.org/plugins/backwpup/

まとめ

  • セキュリティ・バックアップは必須（SiteGuard / BackWPup など）

  • SEOはどちらかシンプルなものを選んで導入（All In One SEO または SEO SIMPLE PACK）

  • 作業効率化プラグインを必要に応じて追加（Duplicate Post / Show Current Template など）

プラグインは入れすぎるとサイトが重くなったり不具合の原因になるので、必要なものだけ導入するのがポイントです。

WordPressオリジナルテーマを作成

まずはWordPressで使う「オリジナルテーマ」を作ります。

  1. FileZillaなどのFTPソフトでサーバーに接続。

  2. wp-content/themes/フォルダを開き、新しいディレクトリを作成。フォルダ名はプロジェクト名にします。
    例：themes/sample_project

  3. フォルダの中に以下のファイルを入れます。

    • index.php

    • page.php

    • style.css

※最初は別のプロジェクトのテーマを複製して使うのが効率的です。

  1. style.cssを開き、テーマ名や説明をプロジェクト名に合わせて修正。

ここまでできたら、WordPress管理画面の「外観 → テーマ」に反映されます。

HTMLをパーツに分割

HTMLで書かれたサイトをWordPressに移すときは、共通部分を切り分けます。

  • header.php
    <html>　から　</header>　までをコピー。最後に　<?php wp_head(); ?>　を　</head>　の直前に追加します。

  • footer.php
    <footer>　から　</html>  までをコピー。最後に　<?php wp_footer(); ?>　を　</body>　の直前に追加します。

※プロジェクトによってはフッター内に問い合わせボタンなどを常時表示するケースもあるので、その場合は該当部分からコピーしましょう。

また、HTMLのパスをWordPress用に書き換える必要があります。

<img src=”<?php echo home_url(); ?>/img/logo.png”>
<a href=”<?php echo home_url(); ?>/about”>会社概要</a>

.html　は削除して、home_url()　を使うのがポイントです。

共通化・最適化

  • ヘッダー・フッター・サイドバーを　get_header()  / get_footer()で共通化

  • 画像・CSS・JSのパスを　home_url()　に置き換え

  • SEO対策：タイトルタグや抜粋を出力する

ページ別テンプレート化

WordPressではページごとに専用のテンプレートを使います。

  • 固定ページ用 ( page.php )
    会社概要やお問い合わせなど、あまり更新しないページに使用します。

  • 投稿ページ用 ( single.php, archive.php)
    ニュースやブログ記事など、追加・更新が頻繁にある情報を扱います。

※投稿（ニュース）の一覧は archive.php、個別記事は single.php を作りましょう。

固定ページにコンテンツ移行

  1. WordPress管理画面の「固定ページ」で不要なデフォルトページを削除。

  2. 新しく固定ページを作成し、HTMLの本文部分をコピペ。

  3. 「設定 → 表示設定」から固定ページをフロントページに指定。

これでWordPressがそのページを「TOPページ」と認識するようになります。

※ここに画像「固定ページの作成画面」を挿入予定

投稿ページにコンテンツ移行

投稿の一覧（archive.php）
以下のようにループ処理を書き、記事一覧を出力します。

投稿の詳細（single.php）
個別記事のレイアウトを作成します。

TOPページにお知らせを読み込む

お問い合わせフォーム作成

これから学ぶ。

まとめ

ここまでの手順で、HTMLサイトをWordPressに移行するための基本的な流れをひと通り確認しました。

  1. サーバー接続とテスト環境準備 で、本番に近い環境を用意し、安心して作業できる状態を作る。

  2. データベースを作成 し、WordPressを動かすための土台を整える。

  3. WordPressをインストール して管理画面にアクセスできるようにする。

  4. プラグインを導入 し、セキュリティ対策やSEO、運用補助の機能を加える。

  5. オリジナルテーマを作成（index.php / page.php / style.css）して、サイト独自のデザイン・構造を反映させる。

  6. HTMLをパーツ分割（header.php / footer.php）し、共通部分を効率的に管理できるようにする。

  7. ページ別テンプレート化（固定ページ・投稿ページ）を行い、WordPressの仕組みに合わせたページ構成を整える。

  8. 固定ページ / 投稿ページにコンテンツを移行 して、実際のサイト内容を反映する。

  9. お知らせ投稿の作成（archive.php / single.php）とTOPへの最新投稿読み込みを設定し、更新しやすい運用体制を実現する。

  10. 共通化・最適化 を進め、パス置換やSEO対策、表示速度改善で使いやすく整える。

 

これで、HTMLサイトを「更新しやすく、運用しやすい」WordPressサイトへ変えるための基本ステップが揃いました。
まずはこの流れを押さえておけば、次に新しい案件やプロジェクトに取り組むときにも役立ちます。
ぜひ活用してみてください！

未分類
  • URLをコピーしました！

関連記事

目次