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

前回はHTMLサイトをWordpressに移行するための作業の前半部分、既存のHTMLファイルからベースとなるWordpressテーマを作るところまでの流れをざっと書きました。

ここからは肝心な作り込みに入っていきます。

大まかな流れ

HTMLサイトを公開状態にしたまま、裏でWordPress版のサイトを作成していきます。サーバーにWordpressをインストールし、前回の作業で作成したテーマをアップロード。サーバー上で作り込み＆デバッグ作業をガンガン進めていきます。そしてWordPress版が完成したところでHTMLサイトからの切り替え作業を行い、WordPress版のサイトを公開します。

前提条件としては、以下のような環境で移行作業を進めます。

• 独自ドメイン（or 独自ドメインのサブドメイン）でHTMLサイトを運営
• WordPressインストールが可能なサーバーを利用している

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

HTMLサイトを運営しているサーバーにWordpressをインストール。

このとき、HTMLサイトのファイル類が置かれているディレクトリ直下ではなく、サブディレクトリを作成してインストールするのがポイント。

例）abc.comというサイトの直ディレクトリがabcの場合、abcディレクトリ直下にはHTMLサイトのファイル類やフォルダ類が保存されている。このabcディレクトリの中にサブディレクトリ（wp）を作成し、その中にWordpressをインストールする。

www
∟abc
∟ index.html
∟about.html
∟contact.html
∟ ….html
∟cssフォルダ
∟jsフォルダ
∟imagesフォルダ
∟wpフォルダ (←ここにWordpressをインストールする）

インストールが完了したら、独自ドメイン/wp/にアクセスして、Wordpressの初期テーマでのトップページが表示されることを確認する。

今後は
独自ドメイン/wp/　（例：　http://abc.com/wp/ ）
からWordpressのサイトを参照しつつ、作り込みを進めて行く。

wp-config.phpをデバッグモードにする

ここからの作業では何らかのエラーが発生することが多々あるが、この時に原因がつかめないと先に進めません。

デフォルトの状態ではデバッグモードがオフになっていて、エラーが発生すると、作成中のWordpressサイトにアクセスしても真っ白なページが表示されるだけ、ということがしょっちゅうあるので、デバッグモードをオンにします。

そうすると、エラーの原因とエラーが発生しているテンプレートファイル（と行番号）を教えてくれるので解決しやすくなります。

WordPressをインストールしたフォルダ（この記事ではwpフォルダとする）にFTPでアクセスし、wpフォルダ直下のwp-config.phpを見つけてローカルにダウンロードする。

ファイルを開くと以下のような場所があるので、falseをtrueに変更し、ファイルを再アップロード。

define('WP_DEBUG', false);

↓

define('WP_DEBUG', true);

WordPressテーマのアップロード

前回の作業で作っておいたWordpressテーマをアップロードします。

ダッシュボードから　外観＞テーマ　にアクセスし、ファイルのアップロード画面からzipファイル形式でアップロード。

サイトを作る場合は固定フロントページの設定を

デフォルトではindex.phpがトップページとして表示されるようになっている。ブログの場合はこれでOKだが、サイトの場合は、front-page.phpがトップページとして読み込まれるように設定したい。

この場合は、以下のように固定フロントページの設定を行う。

1. トップページとブログページ用にダミーの固定ページを作成する（空ページでOK。タイトルも適当に）
2. ダッシュボードから 設定＞表示設定 の「フロントページの表示」の設定で、固定ページを選択し、フロントページ、投稿ページそれぞれに１で作成しておいた固定ページを選択する。

これでトップページの表示にはfront-page.phpが読み込まれるはずです。

テンプレートの修正と未作成のテンプレートの作成

ここからは、基本のテンプレートファイルの修正や、まだ作成していなかったアーカイブページのテンプレートの作成などを進めていきます。

PHPファイル（テンプレートファイル）の記述の誤りを修正していく

まずは基本となる以下のファイルの作り込みを完了させることが先決です。

• front-page.php
• index.php
• single.php

そして上記のファイルで読み込む以下のテンプレートファイルも確認＆修正をしていきます。

• header.php
• footer.php
• sidebar.php

※header.phpやfooter.phpではcssやjsファイルの読み込み設定があるが、そのファイルのパスがちゃんと通っているかなども確認。

※サイトのトップページ（front-page.php）は、画像スライダーがあったり、新着情報の表示欄があったりと、少しカスタマイズが必要なことが多いので、まずはindex.phpとsingle.phpの方から手を付けるのがおススメ。

index.phpとsingle.phpは基本となるループが正しく書けていれば、あとはそんなに難しくない。記事のタイトルやリンク、サムネイル画像、コンテンツを動的に読み込むための関数に誤りがないかの確認（＆修正）や、レイアウトの調整などをここで進めて行く。

この辺りはWordpressのテーマを自作したことがある人は楽々だが、そうでない場合は、まずテーマの自作方法を解説している以下の記事を参考にしながら作り上げるのが良い。
WordPress オリジナルテーマの作り方
HTMLからWPテーマを作成する
テーマの作成

※前回のテーマを作る段階でも、同じような手順がありましたが、ここでは表示を確認しながらミスなく作り上げていきます。

フロントページについて

フロントページは、新着記事の表示など、動的に読み込む必要があるところは、サブループ（WP_Query()）と呼ばれるループを使います。このあたりについては以下の記事を参考に。

WordPress ループの基本
WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット
ちょいちょい忘れる『WP_Query』の使い方

フロントページの静的な部分は、ウィジェットであとから内容を変えられるように切り分けてもいいし、今後そうそう変更する予定もない、という場合は、リンク部分だけ以下のように変更しておけば取りあえずＯＫ。

<a href="<?php get_template_url() ?>/images/a.png">Aへのリンク</a>

CSSの調整もここで同時に進めて見た目を整えていきましょう。

残りのテンプレートファイル（page.php、archive.phpなどの作成）

index.phpとsingle.phpが出来上がったら、これらをベースにpage.phpやarchive.phpなど、必要なテンプレートファイルを作っていきます。

index.phpをベースに作成するとよいテンプレート

• archive.php
• taxonomy.php
• category.php
• search.php

など。

single.phpをベースに作成するテンプレート

• page.php
• 404.php

など。

テンプレート階層を参照し、自分のサイトに必要になるものを作成します。

パーマリンク設定

ここはHTMLサイトから移行する場合、結構大事なところなのでよく考えて設定する必要があります。

HTMLサイトからWordpressサイトになると、URLが変わってしまう可能性がある。301リダイレクトで旧URLから新URLへアクセスを転送することはできるが、URLが変わるのを最小限に抑えたい場合は以下の方法がおすすめです。

１.ページや投稿のスラッグをもとのHTMLサイトのスラッグと合わせる

例えば、http://abc.com/contact.html　という問い合わせページがあったとしたら、Wordpressでも固定ページで問い合わせページを作る際にcontactというスラッグにする。

2.パーマリンク設定で、URLの最後に.htmlが付くようにする

ダッシュボードの設定＞パーマリンク設定で、カスタム構造を選択し、入力欄に「/%postname%.html」と入力する。

ただし、固定ページは別途functions.phpのほうで以下のコードを記述しないと.htmlが付かないので注意。

// 固定ページのURLに.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 );
}
}

上の方法で合わせられない部分が出てくる場合は301リダイレクトの設定をする（後述）。

サイトの作り込みを進める

このあたりは作業が前後するかもしれません。ページの作成（コンテンツの流し込み）やメニューの作成、サイドバーのウィジェットの作成なども順次行っていきます。

コンテンツの作成・メニューやウィジェットなど

HTMLサイトから必要なテキストや画像素材などをWordPressサイトのほうに移していく感覚で。

• 各ページのコンテンツ⇒固定ページで作成
• ナビゲーションメニュー⇒メニューで作成
• サイドバーやフッターのコンテンツ⇒ウィジェットで作成

基本的なプラグインの導入

ここまでくると元のHTMLサイトと同じものがWordPressでほぼできあがっているはず。なので、必要なプラグインの設定などを進めておきます。

全体的な動作確認

変な動きをしたりしないか、色んなページにアクセスしたり、リンクをクリックしたりして確認します。

モバイルでの表示チェックも忘れずに。

wp-config.phpをデバッグモードをオフに

動作確認が終わったらデバッグモードをオフにします。wp-config.phpの以下の一行をfalseに戻せばOK。

 define('WP_DEBUG', false); 

トップページをhtmlからWordPressに切り替える作業

いよいよ切り替え作業。一応メンテナンスモードにして、アクセスが少なくなる時間帯に切り替え作業を行うのがベター。

「工事中」「準備中」「メンテナンス中」呼び方は色々ですが、ページの公開を一時的に中止したいときに便利なプラグイン WP Maintenance Mode

これまでは独自ドメイン/wp/へのアクセスでWordpressのサイトが表示されていたが、独自ドメインのみでWordPressサイトが表示されるように設定を変更します。やり方は以下の記事を参考に。

WordPressでサブディレクトリに配置したサイトURLに独自ドメインだけを表示する方法

HTMLサイトのファイル・フォルダ類はひとまず削除せず、適当なフォルダを作って移動させる。（移行後少し経つまでは削除しないほうが何かの時に困らないかも？）

無事Wordpress版のサイトが表示されればOK！

リダイレクト設定（必要な場合）

プラグインSimple 301 Redirecsを使用すると便利です。
Simple 301 Redirectsプラグインの使い方

最後までご覧くださりありがとうございました！
何かのヒントになれば嬉しいです。