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

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

WEB開発 コーディング
Illustration by Freepik

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 に「このサイトはパスワード認証が必要」と書き込む。

その際、対象のプロジェクト用フォルダのパス（AuthUserFile）を自分の環境に合わせて設定する。
以下記述方法。

AuthType Basic
AuthName “Input your ID and Password.”
AuthUserFile /path/user/.htpasswd
Require valid-user

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

暗号化パスワードは専用のジェネレーターサイトで作ることを推奨します。

パスワード暗号化ツール
https://www.luft.co.jp/cgi/htpasswd.php

以下記述方法（パスワード暗号化ツールを使用すれば、そのまま生成したものをファイルに保存するだけです）

[ユーザーID]:[暗号化されたパスワード]

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

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

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

なぜ必要か？

WordPressをいきなり本番環境に入れると、設定ミスやコードエラーがあったときにサイトが止まってしまいます。
注意点：カスタム投稿をしっかり組んでいるサイトは本番と同じようなサーバー環境で動かすことで、移行時のトラブルを最小限に防ぐことができます。

 

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

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

新しいサイトを作成し、ホスト／ユーザー／パスワードを入力し接続。
※ログオンタイプは通常にしておきましょう。

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

他の人が既にコーディングしている場合は、該当フォルダを丸ごとサーバーからコピーして複製しておく。
誤ったデータを間違えて上書きしてしまった時のためにもバックアップを保存しておくことを推奨します。

 

XServerでデータベースを作成

データベースとは？

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

 

データベース作成手順

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

https://secure.xserver.ne.jp/xapanel/login/xserver/

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

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

命名ルールは「共通部分 + プロジェクト名」など、後から見て分かるようにしておくと良いです。
任意でメモ（例：「◯◯プロジェクト テストサイト」）を残しておくとより分かりやすいです。

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

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

１つ目は空欄のまま、２つ目のアクセス権未所有ユーザ（管理者用アカウント）を選んで追加すれば問題ありません。

 

まとめ

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

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

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

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

WordPress化の流れ

HTMLサイトの準備が整ったら、次はサーバーにWordPressをインストールしていきます。
ディレクトリーが指定できないサイトは手動でWPをインストール必要があるので必要に応じて方法を変えましょう。

ここでは「簡単インストール機能」を使う方法を紹介します。

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

1. 簡単インストールを選択する

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

2. ドメインを選択する

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

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

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

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

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

注意点：フォルダ名をWPにすると攻撃される可能性があったりするので、できる限りWP以外のフォルダー名を指定してあげるのが良いです。

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

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

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

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

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

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

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

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

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

5. 管理画面にログイン

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

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

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

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

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

まとめ

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

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

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

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

WordPressのプラグインを導入

WordPressは「プラグイン」を追加することで機能を拡張できます。
ここでは基本的に入れておきたいプラグインをまとめました。初心者でも理解しやすいように、役割ごとに整理しています。
注意点：何かしらエラーが起こる可能性があるため、初期に入っているプラグイン、デフォルトのものをすぐに消してからプラグインを導入しましょう。

セキュリティ関連

・SiteGuard WP Plugin
ログイン画面に画像認証を追加したり、管理画面のURLを変更できるプラグイン。
不正アクセス対策として必ず入れておきたい定番です。
注意点：制御が邪魔になったり不具合を起こす可能性があるため、作業中は無効化にしておく必要があります。
https://ja.wordpress.org/plugins/siteguard/

・User Activity Log
誰がログインしたのか、どんな操作をしたのかを記録してくれるプラグイン。
チームで作業するときに便利です。
https://ja.wordpress.org/plugins/siteguard/

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/

投稿・ページ管理

・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/

エディタ関連

・Advanced Editor Tools (旧 TinyMCE Advanced)
投稿画面に文字装飾ボタンや表組みなどを追加できるプラグイン。
https://ja.wordpress.org/plugins/tinymce-advanced/

・Classic Editor
以前のシンプルなエディタを使いたいときに導入するプラグイン。
https://ja.wordpress.org/plugins/classic-editor/

フォーム関連

・MW WP FORM
お問い合わせフォームを設置できるプラグイン。
https://ja.wordpress.org/plugins/mw-wp-form/

バックアップ・移行

・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-extension

・BackWPup
定期的に自動バックアップを取れるプラグイン。バックアップは必ず入れておくべきです。
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/wp-content/themes/フォルダを開き、新しいディレクトリを作成。フォルダ名はプロジェクト名にします。

例：themes/sample_project

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

  • index.php

  • page.php

  • style.css

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

index.phpの記述内容

<?phpget_header(); ?>
　<?phpthe_content(); ?>
<?phpget_footer(); ?>
page.phpの記述内容
<?php
/*
Template Name: デフォルト
*/
?>
<?phpget_header(); ?>
<?phpif (have_posts()) :?>
<?phpwhile (have_posts()) : the_post(); ?>
<?phpthe_content();?>
<?phpendwhile; else: ?>
<?phpendif; ?>
<?phpget_footer(); ?>
style.cssの記述内容：テーマ名や説明をプロジェクト名に合わせて修正
/*
Theme Name: プロジェクト名
Theme URI: サイトURL
Description: プロジェクト名
*/

ここまでできたら、WordPress管理画面の「外観 → テーマ」にカスタマイズとして反映されます。
注意点：初期段階で入っているテーマは１つ残してその他は削除しておきましょう。（全て消してしまうと不具合が起きてしまうため）

HTMLをパーツに分割

HTMLで書かれたサイトをWordPressに移すときは、まずは共通部分を切り分けます。
Visual Studio Codeなどで編集し、ローカルで作業をしてからサーバーにアップしましょう。

  • 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()　に置き換え

ポイント：まずは、ローカル環境で作業を進めてバックアップを取ることを忘れずに、サーバーにアップをしましょう。テスト環境を本番環境と同じディレクタ構成にすることにより本番アップの際にトラブルを最小限に防ぐことができます。

ページ別テンプレート化

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

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

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

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

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

・functions.phpを作成
このファイルはWordPressのテーマの中にあるテーマに機能を追加するためのファイルです。
以下のコード、その他必要に応じてfunctionsにまとめてコードを記述します。

ショートコードを使ったphpファイルの呼び出し方法

ドメイン名を取得し、リンクさせるショートコード

アイキャッチ画像の設定
投稿アーカイブページの作成するコード

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

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

ページのタイトル名とパーマリンクは該当ページに設定をしましょう。

functionsに以下のコードで記述したプロジェクト名_linkを固定ページの全てのパスに
[プロジェクト名_link]/　と記述をしてから本文をコピペしましょう。

ドメイン名を取得し、リンクさせるショートコード
（functions.phpに記述しなければならないもの）

 

add_shortcode(プロジェクト名_link’, ‘shortcode_url’);
function shortcode_url() {
return get_bloginfo(‘url’);
}

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

これでWordPressがそのページを「TOPページ」と認識するようになります。
完了したらローカルファイルのcss、img、js、sassをリモートサイトのwpフォルダと同じ階層にアップしましょう！
ポイント：テスト環境を本番環境と同じディレクタ構成にした方が本番アップの際にトラブルを最小限に防ぐことができます。

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

1. 投稿の一覧（archive.php）

archive.phpを作成し、お知らせの本文をコピペします。
liタグの部分を以下のようにループ処理を書き換えて、記事一覧を出力します。
※それぞれfunctions.phpで投稿アーカイブページの表示設定など必要なコードを記述します。

<ul class=“news_list”>
<?php
$args = array(
‘paged’ => get_query_var( ‘paged’ ) ? intval( get_query_var( ‘paged’ ) ) : 1, //subloopでpagerを動かすのための設定
‘post_type’ => ‘post’, //投稿の種類を指定
‘posts_per_page’ => 10, //表示する個数を指定
‘orderby’ => ‘date’, // 日付でソート
‘order’ => ‘DESC’ // DESCで最新から表示、ASCで最古から表示
);
$wp_query = new WP_Query( $args ); //記事を引っ張ってくる条件
if ( $wp_query->have_posts() ) {
while ( $wp_query->have_posts() ){ //指定した条件で記事を引っ張ってくる
$wp_query->the_post();
?>
<!–loop–>
<li class=“news”>
<?php //リンク設定の有無で切り分け
$linknourl = get_post_meta( $post->ID, ‘linkurl’, true );
if ( !empty( $linknourl ) ) : ?>
<a href=“<?php echo $linknourl; ?>“ class=“news_link”>
<?php else : ?>
<a href=“<?php the_permalink(); ?>“ class=“news_link”>
<?php endif; ?>
<p class=“news_date”><?php the_time(‘Y/m/d’); ?></p>
<div class=“news_ttl_wrap”>
<p class=“news_ttl”><?php the_title(); ?></p>
</div>
</a>
</li>
<?php
}
}
wp_reset_postdata(); // 投稿データのリセット
?>
</ul>
<div class=“pagenav_wrap”>
<?php wp_pagenavi(); ?>
</div>

2. 投稿の詳細（single.php）

single.phpを作成し個別記事のレイアウトを作成します。
以下記述の例です。

<?php get_header(); ?>
<article id=“single__wrapper”>
<section id=“news__kv” class=“page_kv”>
<div class=“page_kv_ttlwrap”>
<div class=“page_ttl_wrap”>
<p class=“title_day sans_en”><?php the_time(‘Y/m/d’); ?></p>
<h2 class=“page_ttl”><?php echo the_title(); ?></h2>
</div>
</div>
<div class=“breadcrumb-area”>
<a href=“<?php echo home_url(”); ?>“>HOME</a>
<a href=“<?php echo home_url(”); ?>/news”>お知らせ</a>
<p><?php echo the_title(); ?></p>
</div>
<div class=“rhombus_box”></div>
</section>
<section id=“news__single”>
<div class=“inner-wide3-wrap”>
<div class=“content_wrap”>
<?php the_content(); ?>
</div>
<a href=“<?php echo home_url(”); ?>/news” class=“main_btn”><span class=“btn_arrow”></span>お知らせ一覧へ戻る</a>
</div>
</section>
</article>
<?php get_footer(); ?>

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

管理画面に追加したTOPページのコードに以下の記述をすることでお知らせを読み込むことができます。
functions.phpにショートコードを使ったphpファイルの呼び出しの記述をしたことで機能しています。

<ul class=”news_list”>
[myphp file = ‘parts/news’]
</ul>

まとめ

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

 

WEB開発 コーディング
  • URLをコピーしました！

関連記事

目次