HTMLサイトを運営しつつ、裏で新しくWordPressブログを作り、
サイトをリニューアルする方法を紹介します。

今までHTMLでサイトを作っていたけど、規模が大きくなったのでWordPressにお引越しする!とか、
今後も更新するサイトだから何かと便利なWordPressに作り変えたい!といった時があるかもしれません。

すべてのHTMLサイトがこの方法で出来るよ!というワケではありませんが…、
何かの参考になれば幸いです!( ・`д・´)キリッ

そもそもなんで作り変えようとしたの?

実はワタクシ、今まで「AXIS」というツールを使ってHTMLサイトを作っていました。

現在AXISは販売停止になっていますが、あの有名な「SIRIUS」と並んで、
第二のサイト作成ツールとして一時名を馳せていました。

動作もサクサクだし、デザインもカッコイイし、
なにより最初からレスポンシブデザイン対応だったのでかな~りお気に入りのツールだったのですが…。

2016年正月から突然使えなくなってしまいました!Σ( ゚д゚)

システムにログインすることができないので
記事やサイトを更新することができなくなってしまったのです。

もちろん、パスワード等は変えていません!

こりゃ大変だ!と公式ユーザーサイトに行こうと思ったら…、
ユーザーサイトのドメイン期限が切れたのかドメインパーキング状態になってまして…w

新しくサイトを立ち上げることも出来なくなってしまったし、
とりあえず今あるHTMLサイトを更新できるよう
WordPressに作り変えようと決意した次第でございます。(´・ω・`)

ちょっと長くなってしまいましたがそんな理由があったんです…。
それではHTMLサイトをWordPressに作り変える手順を紹介しましょう!

HTMLサイトをWordPressに作り変える手順

まずはHTMLサイトの現状を確認

作業を始める前に現在のHTMLサイトのデータを保存し、
サイトの状態がどうなっているのか確認しましょう。

  • サイトの規模、ページ数は?
  • デザインは?今後変えるのか変えないのか?
  • 記事以外に必要なものは?(例:お問い合わせページ、サイトマップなど)
  • アフィリエイトリンクなどはどうするのか?

これらを確認してどんなWordPressブログにすればいいのかを考えましょう。

今回作り変える作業をするHTMLサイトはこちらです。

SSG(HTML)

とある有名ゲームシリーズの新作を紹介するアフィリエイトサイトですね。
私このシリーズのゲーム大大大好きで、も~13年振りの最新作って聞いて
居ても立っても居られなくてすぐドメイン取ってサイト作って…(^ω^*)

おっと話がそれました…。えっとこのHTMLサイトは先程も紹介したAXISで作成しています。
ページ数は約20前後、デザインはなるべく維持する方向で作りなおそうと思います。

WordPressを別のディレクトリにインストール

どんなブログに作り変えるのかが決まったら早速WordPressをインストールしましょう。

HTMLサイトのデータがあるディレクトリ、ではなく別のディレクトリへインストールしてください。

私のサイトの場合ですと…一番上のディレクトリ直下にHTMLサイトのデータが入っているので
新しく「/wp」というディレクトリを作ってWordPressをインストールします。

sr01

ディレクトリを分けることでHTMLサイトの現状を維持しつつ、
裏で新しくWordPressブログが作れるようになります。

使用サーバーがロリポップなので簡単インストール機能を使ってます。便利ですよね~!

 

sr02

インストールが完了しました! 「http://サイトURL/wp/wp-adim/」に接続して
WordPressブログを立ち上げましょう!

WordPressブログに記事をインポートする

新しく作ったWordPressブログにHTMLサイトの記事をインポートしましょう。

小さなサイトなら元の記事をコピー&ペーストしてもイイのですが…。
20記事以上の規模となるのかな~り面倒なのでインポートしたほうが早いです。

サイト作成ツールにインポート機能があればそちらを利用してくださいね!

私の場合はAXISのシステムそのものが使い物にならなくなっているので…w
プラグインを使って記事をインポートしたいと思います。

 

sr04

プラグインの新規追加を選んで、「HTML Import 2」というプラグインを検索してください。
このプラグインはHTMLサイトの記事をインポートしてくれる便利なプラグインです。

 

sr05

ありました!今すぐインストールをクリックし、ダウンロードが終わったら有効化します。

「HTML Import 2」の設定をする

「HTML Import 2」を使う前にちょっとややこしい設定がいくつかあります。

  • HTMLサイトまでの物理パスの設定
  • 記事の保存形式の指定
  • インポートした記事は固定or投稿で保存する

一番ややこしい上ふたつが曲者です。ひとつずつ解説していきます。

 

え~と…まず物理パスっていうものは少々難しくて…。
簡単に説明すると「そのHTMLサイトまでの道筋」といったところでしょうか。

よく分からん!という方はpath.phpを作って中に以下のソースを書いて
FTPでディレクトリにぶち込んで接続して見てください!

<?php echo FILE; ?>

実際に接続してみると、あなたのサイトの物理パスが表示されます。

sr06

 

調べた物理パスを「HTML Import 2」の「Dlrectory to import」に入力します。
入力が終わったら「Save Setitngs」をクリックして設定を保存してください。

sr07

これで物理パスはおkです。次は記事の保存形式の指定ですね。

 

「File extensions to include」という項目がありますね。

sr08

デフォルトだと「html」や「htm」と入力されています。
この項目は指定した拡張子のデータをインポートしますよ~という意味です。

デフォルトの状態だと「データの名前.html」や
「データの名前.htm」などのデータをインポートする、となります。

普通はデフォルトのままで良いと思いますが…AXISは曲者だった…!

AXISの記事データの保存形式って「データの名前.fd」なんですよ!
初めてインポート作業する時になかなか上手く出来なくって設定にものすごく時間かかりました…。

ちなみに例で見せているこのサイトは2度目なので完璧でしたよ!
ほう、経験が生きたな。ジュースをおごってやろう

設定が終わったら忘れずに「Save Setitngs」で保存をしてください。
さぁ!あとちょっとで設定が終わりますよ!

 

次はインポートした記事を投稿か固定のどちらで保存するのか?の設定です。

ちなみにデフォルトだと固定ページで保存するようになっているので、
固定でイイという方はそのまま、投稿がイイという方は設定を変えましょう。

上タブの「Titel &Metadata」をクリックしてください。

「Inport files as」という項目がありますね?
この項目を「投稿」か「固定」を選択すると選んだ方の形式で記事が保存されます。
これはお好みで選んでくださいね。

sr09

忘れずに「Save Setitngs」をクリックして設定を保存!
これですべての設定が完了しました!いざインポート開始です!

実際にインポートをしてみましょう

設定が終わってインポートする場合は、「Import files」をクリックしてください!
インポートが完了するとドバーっとインポートした記事が表示されます。

sr10

実際に保存された記事を見てみましょう! おぉ!キチンと投稿一覧に保存されていますね!(・∀・)
投稿した日付のデータもしっかり残っています!

sr11

sr12

あとはWordPressの方で細かい設定や画像の修正、それからアフィリエイトリンクなどの…。
 おっとその前にやることがありました!パーマリンクの設定です!

パーマリンク設定を元のサイトに合わせる!

WordPressのパーマリンク設定をしましょう。パーマリンクとはURLの設定のことですね。

私のサイトの場合だと…「http://サイトの名前/カテゴリ/記事の名前.html」となっています。
このパーマリンク設定が元のサイトと同じになるように設定しましょう!

WordPressの「設定→パーマリンク設定」から変更できます。

sr13

カスタム構造という項目を選択して、「/%category%/%postname%.html」と入力しました。
これでURLは元のサイトと同じ「http://サイトの名前/カテゴリ/記事の名前.html」になります。

あとはカテゴリの設定と記事の名前を元のサイトに合わせれば、
後々、元のHTMLサイトのページに、WordPressでインポートした同じ記事が表示されるようになります。

HTMLサイトを完成したWordPressブログに切り替える!

細かい記事の修正やアフィリエイトリンクの貼り直しをし、WordPressに作り変えたサイトが完成しました!

sr14

 

記事の修正は2日ほどで完了しましたね~。 前に行ったサイトは規模が大きくて10日ほどかかりましたが…。
まぁそんな話は置いといて…早速、元のHTMLサイトから新しく作ったWordPressブログに切り替えましょう!

今の状態で「http://サイトURL」に接続しても、元あったHTMLサイトが表示されます。

今回作ったWordPressブログは別のディレクトリで作ったので
「http://サイトURL/wp」に接続しないと見ることができません。

その辺りの設定をサクッと行って「http://サイトURL」でWordPressブログが表示できるようにしましょう!

サイトアドレスを変更しましょう

WordPressの「設定→一般」からサイトアドレスを変更しましょう!

sr15

デフォルトの状態だと「WordPressアドレス(URL)」も「サイトアドレス(URL)」も
同じ「http://サイトURL/wp」になっていると思います。

この「サイトアドレス」の方を今HTMLサイトが表示されている「http://サイトURL」に変更します。

sr16

変更が終わったらFTPツールを使って自分のサイトに接続し、
WordPressのデータが入っているディレクトリを開きましょう。

 

中身を見ると「.htaccess」と「index.php」があります。
この2つのファイルをデスクトップなどに保存しましょう。

sr17

そして「index.php」をテキストエディタで開きます。

sr18

一番したの行に「’/wp-blog-header.php’」と書かれていますね。
これを「’/wp/wp-blog-heder.php’」に変更します。

sr19

保存したら…「.htaccess」と「index.php」をHTMLサイトの置いてある場所、
一番上のディレクトリ直下に保存します!

さぁこれで「http://サイトURL」でWordPressブログが表示されるようになります!

どうだ!

sr20

sr21

おおお!キチンとWordPressブログが表示されてますね~!!
これでHTMLサイトからWordPressブログにリニューアルできました!お疲れ様でした~!

まとめ

途中何度かつまずきやすい部分がありますが、一度慣れてしまえば簡単な作業です!

せっかく力を入れて作ったHTMLサイトですから、システムが壊れちゃって
更新出来ないからそこでオシマイじゃもったいないですよね~。

あ、あとブログに切り替えてからはアクセス解析や
ウェブマスターツールなどの再設定を忘れずに行ってくださいね。

The following two tabs change content below.
うたと
2014年11月から本格的にアフィリエイトを開始、Lureaで基礎を学ぶ。 初月で○万突破!という感じではなく、地道に少しずつコツコツと稼げるようになったタイプ。現在の月収はほったらかしでも約12,000~16,000ほどのクソザコ。 さらなる飛躍を求めてこのブログを立ち上げます。