こんにちは!最近、HTMLサイトをWordpressに移行するという作業を何回か行う機会がありました。立て続けに同じような作業を行っていたので、だいぶ流れも覚えられたのですが、ちょっと時間が経ったらきっと色々忘れてしまうだろう・・・ということで、HTMLサイトからWordpressへの移行の手順についてまとめてみました。
自分の備忘録的な感じで書いたので、分かりにくいところも多々あると思いますが、何かのヒントになれば・・・。もし間違っているところや質問などあったらぜひコメント欄からご連絡いただけると嬉しいです!

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: 製品カタログ(製品一覧)と製品情報のページの作り方

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

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

カスタム投稿タイプの作成がいらないのでその分、簡単。製品の数が少ない場合はこれで十分いけそう。この場合、カタログ(一覧)ページは、通常の固定ページで作るとなると、新しい製品を追加したり、古い情報を削除するたびに、カタログの内容を手動で編集しなくてはいけない。が、これは専用にテンプレート(カスタムテンプレートファイル)を作成すればok。
具体的には、
製品カタログ(親ページ)
―製品情報1(製品カタログの子ページ)
―製品情報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テーマ用のフォルダをローカルに作成します。フォルダ名はテーマ名に合わせる(例えばnomadというテーマ名にする場合は、nomadという名前のフォルダに。)
いちばん基本的な以下の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ファイルに該当する部分をコピペするだけ。例えば、以下のような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>の部分、そしてサイトのヘッダータイトル、ナビゲーションメニュー部分まで。
上の例で言うと

<!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ならfront-page.phpにコピペ、記事のhtmlならsingle.phpにコピペする。そして、ヘッダー、フッター、サイドバーがあったところを以下のようなコードに置き換える。

<?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 … ?>のコードに置き換わっている部分が動的に読み込まれる。
header.php、footer.php、sidebar.php、index.php、single.phpのコードの置き換えには、以下のサイトの解説が非常に分かりやすい。オリジナルテーマを作る手順の解説ですが、ベースとなるhtmlを作成してからそれをwordpress化するという方法で解説されているので、ループの部分なども含めて見ながらやるとラク!
WordPressオリジナルテーマの作り方
※front-page.phpの解説は上のサイトにはありませんがひとまずコンテンツ部分は編集しなくてもOKです。
 
 

style.cssとfunctions.php

style.cssの始めには必ずテーマの名前を設定する必要がある。以下のコードをコピペ。Theme Nameは必ず指定すること。他は必要な部分の情報を設定。

/*
Theme Name: nomad
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などのフォルダ類を、この作業の最初の方で別フォルダに取り分けておいたところから移してくる。ただし、imagesフォルダには、サイトのデザインに関係した素材ファイルのみを移動させ、コンテンツに使う写真や画像ファイルなどは含めない。
HTMLサイトのトップページのスクリーンショットを撮って、screenshot.pngという名前でWordpressテーマフォルダ内に保存。
以下のファイルやフォルダ類が揃っていることを確認する。

  • 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にトップページを切り替え

といった作業が残りのタスク。これらについて注意点や参考になるサイトなども含め次回まとめたいと思います。

4 Comments

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

    • YUNA Reply

      K2さん、ご指摘ありがとうございます!おかげさまで修正できました。

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

    • YUNA Reply

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

Write A Comment