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

ここからは肝心な作り込みに入っていきます。今回も自分の覚書風に書いていくので分かりにくいところがあるかと思います。もしあまりに意味不明だったり、間違ってるよ?というところがあったらコメントあるいはお問い合わせからご連絡いただけると嬉しいです。

では早速、後半の作業に入っていきます!

sponsored link

大まかな流れ

ここからはHTMLサイトを公開状態にしたまま、裏でWordpress版のサイトを作成していく。そしてWordpress版が完成したところで切り替え作業を行い、Wordpress版のサイトを公開する。

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

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

サーバーにWordpressをインストールし、前回の作業で作成したテーマをアップロード。サーバー上で作り込み&デバッグ作業をガンガン進めていく。

 

ローカルで作り込んでからサーバーにアップしたい場合は、以下の作業のX~Xまでをローカル環境に構築したWordpressで行い、最後にサーバーにアップする。

ローカル環境の作成やサーバーへのアップまでのフローで参考になるサイトはこちら

XAMPPでローカル環境構築 インストールからWordPressの設置までやってみる。

XAMPPを使ってローカル環境に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をインストールする)

 

WordPressのレンタルサーバへのインストール方法

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

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

※厳密には独自ドメイン/wp/のURLを直打ちすれば一般の人もアクセスできてしまうが、個人レベルのサイトやブログではその可能性は限りなく0に近いという前提で進める。もし完全に外から見られないようにしたい場合は、ローカルで作り込むか、.htaccessでアクセス制限をする必要がある。

 

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

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

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

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

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

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

define(‘WP_DEBUG’, false);

define(‘WP_DEBUG’, true);

 

テーマをアップロードする

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

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

 

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

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

この場合は、以下のように固定フロントページの設定を行う。
1.トップページとブログページ用にダミーの固定ページを作成する(空ページでOK。タイトルも適当に)
2.ダッシュボードから 設定>表示設定 の「フロントページの表示」の設定で、固定ページを選択し、フロントページ、投稿ページそれぞれに1で作成しておいた固定ページを選択する。

これでトップページの表示には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』の使い方

 

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

 

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が変わるのを最小限に抑えたい場合は以下の方法を取る。

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

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

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

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

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

 

上の方法で合わせられない部分も出てくると思うが、その場合は301リダイレクトの設定をする(後述)。

 

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

このあたりは作業が前後するかもしれないが、ページの作成やメニューの作成、サイドバーのウィジェットの作成なども順次行っていく。
HTMLサイトから必要なテキストや画像素材などをWordpressサイトのほうに移していく感覚で。

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

 

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

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

導入プラグインのおススメリストはコチラ

 

全体的な動作確認

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

 

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

動作確認が終わったらデバッグモードをオフにする

 

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

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

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

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

WordPressでサイトのトップページURLにドメインだけが表示されるように設定する方法

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

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

リダイレクト設定(必要な場合)

プラグインSimple 301 Redirecsを使用すると便利。

Simple 301 Redirectsプラグインの使い方

 

 

 

本当に自分にしか分からない覚書風になってますが、最後までご覧くださりありがとうございました!

何かのヒントになれば嬉しいです。ではまた!