WordPress個別サポート

WordPressの便利さを見たり聞いたりしているうちに、ホームページ作成ソフトで制作したHTMLベースのWebサイトをWordPressに取り込みたくなった方もいるかと思います。

HTMLベースのWebサイトをWordPressにインポート

HTMLベースのWebサイトをWordPressにインポート

そんなときに役立つのがHTML Import 2プラグインです。

ホームページ作成ソフトなどで作成したHTMLベースのWebサイトを一括で、または1ページずつWordPressにインポートすることができます。

インポートしたHTMLは、固定ページまたは投稿として編集することができます。

インポートするWebサイトの物理パス

インポートするWebサイトの物理パス

プラグインのインストール後、「設定」-「HTML import」メニューから設定画面にアクセスします。インポートするWebサイトの物理パスを設定し、「Save settings」をクリックして設定を保存、「Import files」をクリックして、インポート画面に進みます。

インポートの実行(サイト一括またはファイル単位)

インポートの実行(サイト一括またはファイル単位)

Webサイトは単体ファイルまたはサイト一括でインポート可能です。「Submit」をクリックすると、インポートが実行されます。

インポートするHTMLファイルがShift_JISの場合は文字化けする可能性があります。ファイルの文字コードをUTF-8にすれば、文字化けしなくなります。
文字コードの変換には、次のような文字コード一括変換ソフトが役立ちます。

【文字コード変換】KanjiTranslator

デフォルトの設定では、HTMLファイル全体が固定ページ(または投稿)の入力枠に取り込まれます。つまり、<html>から</html>までがインポートされます。これでも大きな問題はありませんが、できれば、ヘッダーなどは切り落としてbodyタグの内側のコンテンツ部分のみをインポートできれば便利です。

その場合、「Content」タブから、取り込む部分を絞ることができます。たとえば、「HTML tag」を選択して、特定のdivタグを指定すれば、その間のコンテンツのみがインポートされます。

ホームページビルダーなどは、bodyタグの内側にコンテンツ部分を示すdivタグが定義されている(例:<div id="hpb-main">)ので、その規則性を活かして必要な部分のみを取り込むことができます。

hpb-mainのdiv領域のみをインポートする

hpb-mainのdiv領域のみをインポートする設定

実行すると、指定領域のみがインポートされます。

必要な領域のみをインポートする

必要な領域のみをインポートする

インポートされるページのタイトルは、そのページのtitleタグの内容になりますが、「ページ名 - サイト名」のような構成になっているのが典型的です。この場合、「Title」タブから、インポートするページのタイトルから取り除くフレーズを指定すると良いでしょう。ページタイトルから「 - サイト名」を削除することができます。

「Content」タブでは、画像のインポート(1)や内部リンクの書き換え(2)なども設定することができます。このあたりは一発で成功させるというより、何度か試行錯誤して特徴をつかむくらいのスタンスで作業しましょう。

「Content」タブのオプション

「Content」タブのオプション

このような感じで、HTML Import 2プラグインを使うと既存のHTMLベースのWebサイトをWordPressにインポートすることができます。実際に完成したWebサイトがある方で、WordPressへの移行を検討している方は、何度か試行錯誤しながら、チャレンジしてみてはいかがでしょうか。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート