HTMLサイトをWordPressに移行する手順のまとめーその１

2015年6月23日2023年12月4日

この記事では、HTMLサイトをWordpressに移行する手順についてまとめています。

一口に「HTMLからWordPressに」といっても、元のサイトのコンテンツや、サイト構成も様々、WordPressサイトに移行するにもやり方は色々。

この記事とまとめーその２では、ごく一般的なコーポレートサイトにあるようなHTMLサイトをベースに、そのデザインをそのまま引き継いでWordPressのオリジナルテーマをつくり、WordPressサイト化する手順をご紹介しています。

この記事でわかること

HTMLサイトからWordPressテーマを作成する

まず最初に、元のHTMLサイトのコードをベースにWordPressのオリジナルテーマを作成していきます。

HTMLサイトのコピーをローカルに作成

サーバーからローカルPCにHTMLサイトのすべてのファイルをダウンロードします。バックアップ用にzipファイル化しておくと万が一の時に解凍して使えるので便利です。

HTMLファイルを整理する

HTMLファイルの中で同じような構成のページ（内容が違うだけ）のものは一つを残し、あとは別フォルダに移動します。（あとで使うファイルやフォルダもあるので削除はしないでおきましょう。）

例えば、

トップページ
会社概要
お問い合わせ
製品一覧ページ
- 製品情報ページ1
- 製品情報ページ2
- 製品情報ページ3
ブログ記事一覧
- ブログ記事1
- ブログ記事2
- ブログ記事3

というような構成のサイトの場合、製品情報ページ1～3やブログ記事1～3は内容が違うだけでHTMLの構成はほぼ同じはずなので、製品情報ページ1のhtmlファイルのみを残します。ブログ記事も同様にブログ記事1のhtmlファイルのみを残します。

HTMLファイルとWordpressテンプレートとの対応を考える

WordPressテンプレート階層を参考に、HTMLサイトのページがそれぞれ、どのWordpressテンプレートで対応できるかを考えます。

例えば、前述の例の場合、

トップページ　⇒　フロントページ（front-page.php）
会社概要　⇒　固定ページ（page.php）
問い合わせ　⇒　固定ページ（page.php）
製品カタログ　⇒　カスタムテンプレートファイル　または　archive-カスタム投稿タイプ.php
製品情報　⇒　固定ページ（page.php）または single-カスタム投稿タイプ.php
ブログ　⇒　インデックス（index.php）
ブログ個別記事　⇒　個別投稿記事（single.php）

というふうに対応させられます。

注意点1：トップページに使うのはhome.phpかfront-page.phpか

WordPressでブログではなくサイトを作成する場合、トップページはindex.phpにならないのでhome.phpかfront-page.phpを用意する必要があります。個人的にはフロントページをいつも使用。index.phpとhome.php、front-page.phpの違いや使い分けについては以下のサイトで確認。
WordPressで困惑しがちなindex.phpとhome.phpとfront-page.phpの違い

注意点2：　製品カタログ（製品一覧）と製品情報のページの作り方

幾つか考えられる方法があるので、サイトに適したものを選びます。

製品カタログと製品情報ページを両方固定ページで作成

カスタム投稿タイプの作成がいらないのでその分、簡単。製品の数が少ない場合はこれで十分いけそうです。

ただし、この場合、カタログ（一覧）ページは、通常の固定ページで作るとなると、新しい製品を追加したり、古い情報を削除するたびに、カタログの内容を手動で編集しなくてはいけないのが面倒です。これは専用にテンプレート（カスタムテンプレートファイル）を作成することで解決できします。

具体的には、

製品カタログ（親ページ）
- 製品情報１（製品カタログの子ページ）
- 製品情報2（製品カタログの子ページ）
- 製品情報3（製品カタログの子ページ）

という風に固定ページの親子関係を指定しておき、製品カタログ用に、子ページの一覧を取得して表示するテンプレートを作成。こうすれば、子ページが増えたり減ったりしても、カタログを編集することなく最新の情報で表示できます。

このあたりのやり方は以下のサイトが参考になりそうです。
WordPressで親ページに子ページの一覧を表示する方法

製品情報をカスタム投稿で作る

より本格的なのがこっち。クライアントさんのほうで情報を追加・更新したいなどの要望がある場合は、カスタム投稿タイプを使って他の固定ページやブログ投稿と分けてあげるほうが分かりやすいです。

例えば、製品情報（product）というカスタム投稿タイプを作成する場合、single-product.phpというテンプレートを用意すると、製品情報ページの表示の際にこのテンプレートを読み込んでくれます。（single-product.phpがない場合はsingle.phpで代用されます）

この場合、カタログ（製品一覧）は、専用のアーカイブページ（archive-product.php）を用意してもいいし、archive.phpやindex.phpので代用してもOK。あるいは、固定ページで、カスタム投稿タイプ一覧を取得して表示する専用のテンプレート（カスタムテンプレート）を用意するのもありです。

カスタム投稿タイプの具体的な使い方については以下のサイトが参考になっています。

カスタム投稿タイプの一覧ページ作成で参考になるサイト：
カスタム投稿タイプの一覧ページの作成
 カスタム投稿タイプのアーカイブページを作成する

カスタム投稿タイプを一から設定するのに参考になるサイト：
WordPressのカスタム投稿（ポスト）タイプを作成するまでの手順リスト

カスタム投稿タイプとカスタムタクソノミーを初めて使う時に参考にしたいサイト：
カスタム投稿タイプとカスタムタクソノミーまとめ

WordPressテーマの基本的なファイルを作成

いよいよWordpressのテーマファイルにhtml内のコードを移行していきます。

まず、Wordpressテーマ用のフォルダをローカルPCに作成します。フォルダ名はテーマ名に合わせます。

例えばsimplywebというテーマ名にする場合は、simplywebという名前のフォルダに。なんでもOKですが自分で覚えやすく、サイトに適切なものがいいかと思います。

いちばん基本的な以下のphpファイルとスタイルシートをフォルダ内に作成します。空ファイルでOKなので、以下に挙げる通りのファイル名で一通りファイルを作成しましょう！

１．共通部分のパーツファイル

header.php　：ヘッダー部分
footer.php　：フッター部分
sidebar.php　：サイドバー部分

HTMLサイトでは基本、ヘッダーからフッターまで一つのファイルに記述していたものが、Wordpressでは幾つかのパーツごとにファイルを分けてコードを記述できます。

ヘッダーやフッター、サイドバーのコードがそれぞれパーツ化されることで、メンテナンスもグッとしやすくなるのはありがたいですね^^

２．基本となるテンプレートファイル

index.php　：ブログ投稿の一覧を表示させるテンプレート
front-page.php　：サイトのトップページのテンプレート
single.php　：個別投稿記事のテンプレート

これらのファイルに、header.php、footer.php、sidebar.phpを読み込む設定をし、それ以外のコンテンツ部分のコードを記述します。

ちなみに、index.php、single.phpをある程度作り込んでからarchive.phpやpage.phpなどを作る方がラクなので、まずは上記のテンプレートファイルだけ作成していけばOK。

３．Wordpressテーマに必須の二つのファイル

functions.php　：関数を定義
style.css　：スタイルを定義

functions.phpには、もともとのWordpressの設定を変更したり、拡張したりするための関数を記述するファイル。何も書かなくてもいいけど、このファイル自体が存在しないとWordpressテーマとして認識してもらえないのでファイルは必要です。絶対何か記述する必要はでてきますけど^^;

style.cssにはCSSを記述し、他のphpファイルと同じ階層に配置しておきます。（cssフォルダ内とかに配置するのはNG）

ちょっと寄り道

実はWordpressテーマには、index.phpとfunctions.php、style.cssさえあればテーマとしては成り立ちます。なので例えば一枚モノのサイトを作るときは最低限の三つのファイルだけでもいいわけですよね。でもたいていの場合は、パーツを共通化したほうが便利だったり、ページによってレイアウトやデザインを変えたいはずです。私もまだまだですが、テンプレート階層をちゃんと意識して、必要なところは切り分けたり、別のテンプレートを使ったりと、サイトの構成に合わせてテンプレートファイルを用意していくのが良さそうですね。テンプレート階層

元のHTMLファイルをパーツ化しWordpressテンプレートファイルに移行

WordPressに必要な基本ファイルが用意できたところで、HTMLファイルの内容を各phpファイルに移していきます。

まずは何も編集せず、htmlファイルからphpファイルに該当する部分をコピペするだけでOK。

例えば、以下のようなhtmlの場合には、次に示すように、パーツごとにコピペしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
...
</head>
<body>
   <header>
       /* ヘッダータイトル、ナビゲーションメニューなど ...*/
   </header>
   <section id="content">
       <div class="main">
       　　/* メインコンテンツ */
       </div>
       <div class="sidebar">
            /* サイドバー */
       </div>
    </section>
    <footer>
         /* フッター */
    </footer>
</body>
</html>

header.php

DOCTYPE宣言から始まって、<head></head>の部分、そしてサイトのヘッダータイトル、ナビゲーションメニュー部分までをこのheader.php内にコピペします。

上の例で言うと

<!DOCTYPE html>
<html lang="ja">
<head>
...
</head>
<body>
   <header>
       /* ヘッダータイトル、ナビゲーションメニューなど ...*/
   </header>

の部分です。

footer.php

サイトのフッター部分から最後の</body></html>までをコピペします。

    <footer>
         /* フッター */
    </footer>
</body>
</html>

sidebar.php

コンテンツのサイドバー部分。上の例だと、section#content内のsidebarのdivをコピペ。

       <div class="sidebar">
            /* サイドバー */
       </div>

残りの部分

ここまででヘッダーとフッター、サイドバーを個別のページのコンテンツから切り離して、パーツ化できました。

HTMLの残った部分は、トップページのhtmlならfront-page.phpにコピペ、記事のhtmlならsingle.phpにコピペします。

そして、HTMLでヘッダー、フッター、サイドバーがあったところを、以下のようなコードに置き換えます。

<?php get_header() ?>  /* ←ヘッダー部分 */
    <section id="content">
       <div class="main">
       　　/* メインコンテンツ */
       </div>
       /* ↓サイドバー部分 */
       <?php get_sidebar() ?>
    </section>
<?php get_footer() ?> /*　←フッター部分　*/

htmlの一部をphpコードに置き換える

htmlではサイトのタイトル名や読み込むcssやjavascriptのファイルの場所を直に書いていますが、Wordpressの場合は、phpで動的に取得します。

一例をあげると、ヘッダー部分はこんな感じ。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <!-- css files -->
    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<?php wp_head(); ?>
</head>

<? php … ?>のコードに置き換わっている部分が、ウェブページ表示時にWordPressの管理画面で設定された内容などで置き換わって表示されます。

header.php、footer.php、sidebar.php、index.php、single.phpのコードの置き換えには、以下のサイトの解説が非常に分かりやすいです。
WordPressオリジナルテーマの作り方

オリジナルテーマを作る手順の解説ですが、ベースとなるhtmlを作成してからそれをwordpress化するという方法で解説されているので、ループの部分なども含めて見ながらやるとラクです！

※front-page.phpの解説は上のサイトにはありませんがひとまずコンテンツ部分は編集しなくてもOKです。

style.cssとfunctions.php

style.cssの始めには必ずテーマの名前を設定する必要があります。まずは以下のコードをstyle.cssにコピペしてください。Theme Nameは必ず指定します（前の作業で作成したWordPress用のフォルダと同じものにします）。他は必要な部分の情報を設定しましょう。

/*
Theme Name: simplyweb
Theme URI:
Description:
Version: 1.1
Author: yuna
Author URI:
*/

functions.phpによく使うコード。必要な部分があればコピペしてお使いください。

<?php

//---------------------------------------------------------------------------
//　jQueryを使えるようにする
//---------------------------------------------------------------------------
function add_jquery_scripts() {
    if(is_admin()) return;
    wp_deregister_script( 'jquery');
    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-1.11.2.min.js', array(), false, false);
    wp_enqueue_script( 'jquery-mig', get_template_directory_uri() . '/js/jquery-migrate-1.2.1.min.js', array(), false, false);
}
add_action('wp_enqueue_scripts', 'add_jquery_scripts');


//---------------------------------------------------------------------------
//　サムネイルを使えるようにする
//---------------------------------------------------------------------------
add_theme_support('post-thumbnails');
/* サムネイルのサイズを指定（追加）する */
add_image_size( 'archive_thumbnail', 250, 200, false );


//---------------------------------------------------------------------------
//　固定ページのパーマリンクの最後に.htmlを付ける
//---------------------------------------------------------------------------
add_action( 'init', 'edit_page_url' );
if ( ! function_exists( 'edit_page_url' ) ) {
function edit_page_url() {
global $wp_rewrite;
$wp_rewrite->use_trailing_slashes = false;
$wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';
// flush_rewrite_rules( false );
}
}


//---------------------------------------------------------------------------
//　カスタムメニューの設定
//---------------------------------------------------------------------------
add_theme_support( 'menus' );
register_nav_menu( 'primary', 'Header navigation menu' );
register_nav_menu( 'footer-navi', 'Footer navigation menu' );


//---------------------------------------------------------------------------
//　サイドバーの設定
//　nameとidを変更すれば幾つでも登録できる。
//　ダッシュボードの外観>ウィジェットから中身を設定可能。
//---------------------------------------------------------------------------
register_sidebar( array(
	'name' => 'Sidebar-1',
	'id' => 'sidebar-1',
	'description' => 'Widget area of sidebar',
	'before_widget' => '<div id="%1$s" class="widget %2$s sidebar">',
	'after_widget' => '</div>',
	'before_title'  => '<h4 class="text-center widgettitle">',
	'after_title'   => '</h4>'
) );


//---------------------------------------------------------------------------
//　外部ファイルの読み込み
// 例えば、カスタム投稿タイプを作成する関数を記述したcustom-post-type.php
//---------------------------------------------------------------------------
include_once(TEMPLATEPATH ."/custom-post-type.php");


//---------------------------------------------------------------------------
//スマホならtrue, タブレット・PCならfalseを返す
//---------------------------------------------------------------------------
function is_mobile(){
    $useragents = array(
		'iPhone',          // iPhone
		'iPod',            // iPod touch
		'Android',         // 1.5+ Android
		'dream',           // Pre 1.5 Android
		'CUPCAKE',         // 1.5+ Android
		'blackberry9500',  // Storm
		'blackberry9530',  // Storm
		'blackberry9520',  // Storm v2
		'blackberry9550',  // Storm v2
		'blackberry9800',  // Torch
		'webOS',           // Palm Pre Experimental
		'incognito',       // Other iPhone browser
		'webmate'          // Other iPhone browser
	);
	$pattern = '/'.implode('|', $useragents).'/i';
	return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

WordPressテーマをzip化し、アップロード

htmlサイトのほうで使っていたcss、js、imagesなどのフォルダ類を、この作業の最初の方（HTMLファイルを整理するのセクション）で別フォルダに取り分けておいたところから、今回のWordPress用フォルダに移します。

ただし、imagesフォルダには、サイトのデザインに関係した素材ファイルのみを移動させ、コンテンツに使う写真や画像ファイルなどは含めないでOK。

HTMLサイトのトップページのスクリーンショットを撮って、screenshot.pngという名前でWordpressテーマフォルダ内に保存（こうするとWordPress管理画面の「テーマ」のところでサムネイルが表示されます。面倒くさければやらなくてもOKです）

以下のファイルやフォルダ類が揃っていることを確認します。

header.php
footer.php
sidebar.php
index.php
front-page.php
single.php
functions.php
style.css
cssフォルダ
jsフォルダ
imagesフォルダ
fontフォルダ（あれば）
screenshot.png

確認できたら、zipファイルに圧縮。ここまででWordpressテーマづくりは一息^^

残りは、phpの処理の記述の間違いなどもあるかもしれない（というか必ずある！）が、そういったものは、テーマをWordPressサイトにインストールしてからデバッグしていきます。

この後の作業をリストアップ

ちょっと長くなってしまったので、Wordpressをインストールしてテーマをアップロードした後の手順は次回の記事にまとめます。残りの作業としては

WordPressのインストール（まだの場合）
テーマのアップロード
wp-config.phpをデバッグモードにする
PHPファイルの記述の誤りを修正していく
残りのテンプレートファイル（page.php、archive.phpなどの作成）
メニューやウィジェットの作成
front-pageの編集
基本的なプラグインの導入
パーマリンク設定
コンテンツの作成
全体的な動作確認
リダイレクト設定（必要な場合）
wp-config.phpをデバッグモードをオフに
htmlからwordpressにトップページを切り替え

といった作業が残りのタスク。

これらについて注意点や参考になるサイトなども含め次回まとめたいと思います。

短時間で確実にサイトをWordpressに移行したいときは、プロの手を借りると安心です。HTMLサイトだけでなく、Wix、Movable type、ホームページビルダー、Jimdo、シリウスなどのシステムからもWordpressに引越ししてくれます。

詳しくはこちらをご覧ください↓
WordPress専門のサーバー移転代行『サイト引越し屋さん』

この記事が役立ったらシェアをお願いします！

URLをコピーしました！

コメント一覧（6件）

yayo より:

2016年2月24日 1:19 PM

YUNAさま
初めまして。私も海外在住です。YUNAさんが詳しくくかいてくださっているにも関わらず、ワードプレス初体験の私には頭が真っ白です。。。そこで質問させて頂きたいのですが、
すでにHTMLと CSSで作ったサイトがあります。バックエンドがわからないのでワードプレスで管理しコンタクトフォームをつけたいと思います。HTMLのページは、index.html, gellery.html, rsvp.htmlの3ページです。これをワードプレスに変換するには全て固定ページにしようと思ってますが、そのやり方がわかりません。ブログ形式ではないシンプルなページなのですが、header.php, footer.php等に分けなければなりませんか？因みに3ページで同じものはフッターのみで、ヘッダー部分にbackground-imageでつけた異なる写真とナビゲーションがはいっています。
どうぞよろしくお願いします。

返信
- YUNA より:
  
  2016年2月28日 3:46 AM
  
  yayoさん、初めまして。お返事が遅くなりました。。
  この記事は覚書的な感じで書いているので分かりにくいところも多いかと思います。。スミマセン。。。
  header.phpに入れるのはhtmlの最初からheaderタグを閉じるところまでの部分（CSSの読み込みやmetaタグの設定をする部分）は共通化できるかと思いますがどうでしょうか。
  Wordpressのテーマにはstyle.cssとfunction.phpは必須ですが、それ以外は必要なファイルだけ用意するのでも大丈夫なはずです。
  ワードプレス初とのことなので、慣れるまで大変だと思いますが、ワードプレスインストール時に入っているテーマ「Twenteen Fifteen」などを参考に、どういう風なファイル構成になっているのか見てみると良いかもしれません。
  もしHTMLサイトのデザインをそのまま引き継がなくてよいなら、わざわざHTMLを移行せずにWordpressのテーマを選んでで作るほうが楽なんですけどね^^;頑張ってください。
  
  返信
K2 より:

2018年4月13日 3:39 PM

function.php → functions.php
『s』が抜けてるところが有りました。

返信
- YUNA より:
  
  2018年4月16日 9:35 PM
  
  K2さん、ご指摘ありがとうございます！おかげさまで修正できました。
  
  返信
環境・移行｜ Web Lab より:

2020年9月12日 1:04 AM

[…] HTMLサイトをWordpressに移行する手順のまとめーその１ – zaharo […]

返信
WordPressテーマオリジナル・環境｜ Web Lab より:

2021年9月15日 7:08 PM

[…] HTMLサイトをWordpressに移行する手順のまとめーその１ – zaharo […]

返信