HTMLウェブサイトをWordPress無料に変換する方法は？ガイド

公開: 2015-05-18

当初、すべてのWebサイトはテキストと静的HTMLで作成されていました。 WordPressはなく、HTMLWebサイトをWordPressまたはその他のCMSシステムに変換する必要がありました。

多くの企業は、オンラインでの存在感をシンプルなHTMLWebサイトに依存しています。これらのHTMLサイトは通常、本質的に静的です。これは、ウェブサイトの細部の変更でさえ、コーディングファイルを編集することによって行われることを意味します。

20年以上経った今、ウェブは大きく異なる場所になっています。 Webの25％以上に電力を供給しているワードプレスは、平均的なユーザーに選ばれるコンテンツ管理システム（CMS）になりつつあります。

Webサイトははるかに複雑です。これらは、サイトの作成者と訪問者の両方に、より豊かで楽しい体験を提供します。 WordPressに移行するということは、現在のWebサイトに費やされている時間、エネルギー、お金を最初からやり直して失うことを意味しますか？

HTMLWebサイト
- 静的HTMLサイトからWordPressの事前手順への移行
HTMLウェブサイトをWordPressチュートリアルに変換する方法
- 方法1
- 方法2
- 既存のWordPressテーマを使用してHTMLサイトを変換する（最も簡単な方法）
- 4テーママッチャーを使用してHTMLをWordPressに変換する
- 5HTMLからWordPressへのコンバーターサービス
移行後に何をする必要がありますか？
WordPressとHTML–長所と短所
HTMLをWordPressの概要に変換する方法

HTMLWebサイト

サイトがどのようにコーディングされていても、訪問者がサイトにページをロードすると、ブラウザはすべての断片（サーバーサイドインクルード、別のディレクトリからの画像など）を取得し、それらをすべて最終的な静的HTMLにまとめます。ページ。

ページ上の一部の要素がまだ動的である場合でも、コード自体は1つの場所にまとめられており、引き続き機能するWordPressページに移動できます。それにはいくつかの例外があるかもしれませんが、そこにあるほとんどのサイトにとって、それは本当でしょう。

サイトがheader.incという名前のファイルを呼び出すsomepage.phpとfooter.phpという名前のファイルで構成されている場合でも、ユーザーがブラウザでsomepage.phpを表示すると、結果のソースコードはすべて1か所にあります。静的なHTMLページとして手作業でコーディングされました。

これは、サイトをWordPressに変換するために必要なコードの種類です。 WordPressをインストールし、適切なテーマ/プラグインを持っている人なら誰でも、高度なデザインと機能を備えた最新のWebサイトを持つことができます。

静的HTMLサイトからWordPressの事前手順への移行

WordPressに切り替える準備ができている場合は、以下の4つの手順を考慮に入れる必要があります。

1.既存のHTMLサイトを分析します

無関係または古いコンテンツがないかサイトを確認し、見つかった場合はクリーンアップします。現在のナビゲーションシステムを調べて、どのように改善できるかを考えてください。 HTMLサイト分析を行うと、WordPressに移行する必要のあるコンテンツ、機能、および機能を決定するのに役立ちます。

これにより、WordPressプラットフォームで同じ機能を取得するためにインストールする必要のあるプラグインについて明確なアイデアが得られます。

2.WordPressを知る

WordPressのインストールは非常に簡単なプロセスです。ほとんどのウェブホストはワンクリックインストールを提供します。慣れていない場合は、サイトで作業する新しいプラットフォームを読んで通知することをお勧めします。

3.HTMLサイトのバックアップを実行します

移行中にデータが失われるリスクを回避するために、静的サイトの完全なバックアップを取ることを強くお勧めします。

4. HTMLWebサイトをWordPressに変換します

コーディングに関する十分な知識があり、サイトが小さい場合、目の前で可能な最善のオプションは、既存のHTMLコードを4つのセクション（ヘッダー、フッター、サイドバー、コンテンツ）に分割し、各セクションのコンテンツをにコピーすることです。それぞれのPHPファイル。

サイトが大きい場合は、HTML Import 2などのHTMLからWordPressへのプラグインを利用するか、誰かを雇ってHTMLをWordPressに変換することができます。

HTMLウェブサイトをWordPressチュートリアルに変換する方法

静的HTMLサイトをWordPressサイトに変換する方法は、間違いなく、個人的な好み、希望する時間/金銭的投資、およびコードのスキルレベルによって異なります。

方法1

HTML WebサイトをWordPressに変換するこの方法を使用すると、サイトのデザインと外観を同じに保つことができます。

1.現在のホストからHTMLページをダウンロードします。これを行うには、WinHTTrackを使用します。それは非常に使いやすい素晴らしい無料のツールです。画像フォルダも（または古いサイトの画像がある場所ならどこでも）取得するようにしてください。

2.新しいWebホストにWordPressをインストールします。

パーマリンク構造を「投稿名」（/％postname％/）に設定します
「検索エンジンがこのサイトのインデックスを作成しないようにする」チェックボックスをオンにします（すべてが完了するまで）
メンテナンスモードプラグインをインストールして（必要に応じて）、他の誰もが新しいWordPressにアクセスできないようにします。
無料のWordPressプラグインHTMLインポート2をインストールします。これを使用して、古いサイトを新しいサイトに「アップロード」します。 HTMLページのディレクトリ全体をインポートするためのユーザーガイド。

3.手順1でダウンロードしたコンテンツを新しいWebホストファイル構造にアップロードします。たとえば、「html-files-to-import」というフォルダに入れます。新しいサイトのWordPressのメディアライブラリにすべての古い画像をアップロードします。

4.インポートを実行します

5.DOSコマンドプロンプトとExcelを準備します

DOSプロンプトで、HTMLファイルを配置した場所に移動します（「yourwebsite」という名前のフォルダーにファイルを配置し、そのフォルダーをC：\ドライブに配置するのが最も簡単です）。次に、次のコマンドを開始します。 dir> files.txt
Excelでfiles.txtファイルを開きます。
今度はExcelへ。基本的に、HTMLファイルに配置する「正規の」コードをレンダリングするための「連結」を含むいくつかのExcel関数を使用します。
対応する正規コードを各HTMLファイルに配置します。これを行うか、アウトソーシング業者に雇うか、誰かを雇ってこれを自動的に行うPHPコードを書くことができます。

6.HTMLファイルをWebホストにアップロードします。それらを新しいWebサイトのROOT（つまり、最上位）フォルダーに配置します。画像フォルダもROOTにアップロードすることを忘れないでください。

7.新しいサイトですべてが引き続き機能することを確認します。

8.ステップ2– 「検索エンジンによるこのサイトのインデックス作成を禁止する」のチェックボックスをオフにし、HTML Import2プラグインを無効にします。

9.レジストラでDNSを変更します。

10.サイトのURLが正しいIP（古いIPではなく新しいIP）に解決され、すべてのページが正しく読み込まれることを確認します。ネームサーバーが更新されるまで、数時間待たなければならない場合があります。

11.しばらくすると、古いHTMLページを削除できますが、削除する必要はありません。正規の参照がそれを処理するため、「重複コンテンツ」のペナルティに見舞われることはありません。

古い「.htmlページ」を新しいWordPressページにポイントするリダイレクトを.htaccessファイルに追加することをお勧めします。

方法2

静的なHTMLサイトからWordPressにコンテンツを取り込むだけでなく、現在のデザインを複製することが目標である場合、これはカスタムテーマを作成する必要があることを意味します。

いくつかのフォルダとファイルを作成し、少しコピーして貼り付けてから、結果をアップロードするだけです。 SublimeやNotepad ++などのコードエディタと、HTMLサイトのディレクトリと新しいWordPressインストールのディレクトリの両方へのアクセスが必要になります。

1.新しいテーマフォルダと必要なファイルを作成します。デスクトップに、テーマファイルを保持するための新しいフォルダーを作成します。テーマを識別したい名前を付けてください。

次に、コードエディタでいくつかのファイル（すべて新しいテーマフォルダにあります）を作成します。

Style.css
Index.php
header.php
sidebar.php
footer.php

2.既存のCSSを新しいスタイルシートにコピーするデザインを複製しようとしている場合、これはおそらく、保存したいCSSが少なくともいくつかあることを意味します。したがって、編集する最初のファイルはStyle.cssファイルです。

まず、ファイルの先頭に以下を追加します。

 / *
 テーマ名：テーマの名前に置き換えます。
 テーマURI：テーマのURI
 説明：簡単な説明。
 バージョン：1.0
 著者：あなた
 著者URI：あなたのウェブサイトのアドレス。
 * /

このセクションの後、既存のCSSのみを下に貼り付けてください。ファイルを保存して閉じます。

3.現在のHTMLを分離します

これが、既存のコードの一部を切り取って、作成したさまざまなファイルに貼り付けるプロセスです。

まず、現在のサイトのindex.htmlファイルを開きます。ファイルの先頭から開始divclass =” main”タグまですべてを強調表示します。このセクションをコピーしてheader.phpファイルに貼り付け、保存して閉じます。
index.htmlファイルに戻ります。 aside class =” sidebar”要素とその中のすべてを強調表示します。このセクションをコピーしてsidebar.phpファイルに貼り付け、保存して閉じます。
index.htmlで、サイドバーの後のすべてを選択し、それをコピーしてfooter.phpファイルに貼り付け、保存して閉じます。
index.htmlファイルで、残っているものをすべて選択し（これがメインのコンテンツセクションになるはずです）、 index.phpファイルに貼り付けます。保存しますが、まだ閉じません。ただし、ここでindex.htmlファイルを閉じて、最後の手順に進むことができます。ほぼ完了しました！

4.Index.phpファイルを完成させます

新しいテーマのindex.phpファイルを完成させるには、作成した他のファイルに格納されている他のセクション（メインコンテンツ以外）を呼び出すことができることを確認する必要があります。

index.phpファイルの一番上に、次のphp行を配置します。

<?php get_header(); ?>

次に、index.phpファイルの一番下に、これらのphp行を配置します。

 <?php get_sidebar(); ?>
<?php get_footer(); ?>

これで「TheLoop」ができました。これは、WordPressが投稿コンテンツを訪問者に表示するために使用するphpの主要な部分です。したがって、新しいテーマのindex.phpファイルを作成する最後のステップは、コンテンツセクション内に以下のコードを追加することです。

 <?php if ( have_posts() ) : ?>
 <?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?> 
  <div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>> 
    <div class = "post-header" > 
       <div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div> 
       <h2><a href= "<?php the_permalink(); ?>" rel= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> 
       <div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div> 
    </div><!-- post header--> end post header--> 
    <div class = "entry clear" > 
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) the_post_thumbnail(); ?> 
       <?php the_content(); ?> 
       <?php edit_post_link(); ?> 
       <?php wp_link_pages(); ?> </div> 
    <!-- entry--> end entry--> 
    <div class = "post-footer" > 
       <div class = "comments" ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' ); ?></div> ); ?></div> 
    </div><!-- post footer--> end post footer--> 
    </div><!-- post--> end post-->
 <?php endwhile ; /* rewind or continue if all posts have been fetched */ ?> 
    <div class = "navigation index" > 
       <div class = "alignleft" ><?php next_posts_link( 'Older Entries' ); ?></div> ); ?></div> 
       <div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div> 
    </div><!-- navigation--> end navigation-->
 <?php else : ?>
 <?php endif ; ?> ; ?>

index.phpを保存して閉じます。テーマが完成しました！あとはWordPressのウェブサイトにアップロードするだけです。

5.新しいテーマをアップロードします

次に、作成したテーマファイルを新しいテーマフォルダに保存します。 WordPressをインストールします。

新しいテーマフォルダを/ wp-content / themes /内に配置します。 WP Admin> Appearance> Themesに移動すると、新しく作成されたテーマが表示されます。アクティベート！この時点であとは、新しいWordPressWebサイトに古いサイトのコンテンツを入力するだけです。

6.HTMLサイトからWordPressにコンテンツをコピーします

WP Adminで、[プラグイン]> [新規追加]に移動します。 StephanieLearyによるHTMLImport2というプラグインを検索します。このプラグインをインストールしてアクティブ化したら、そのユーザーガイドに従って、HTMLページのディレクトリ全体をインポートします。この後、WordPressで実行するだけで、サイトは以前と同じように表示されます。

既存のWordPressテーマを使用してHTMLサイトを変換する（最も簡単な方法）

上記の手順が集中的または時間がかかりすぎると思われる場合は、別の方法があります。これが最も簡単な方法です。

既存のHTMLデザインをWordPressで同じように見えるように変換する代わりに、WordPressマーケットプレイスで利用可能な数千のテーマのいずれかを利用できます。

無料のテーマとプレミアムのテーマがあります。気に入ったテーマを選択したら（そしてzipファイルパッケージをダウンロードしたら）、新しいWordPressテーマをインストール/アクティブ化します。

これが完了すると、新しいWordPressWebサイトとテーマが作成されます。サイトをプレビューすると、空になります。コンテンツをインポートし、HTMLWebサイトをWordPressサイトに変換するプロセスを終了します。

WP Adminで、[プラグイン]> [新規追加]に移動し、HTMLインポート2というプラグインを検索します。ユーザーガイドに従って、HTMLページのディレクトリ全体をインポートします。この後、古いコンテンツはすべて新しい外観になります。

4テーママッチャーを使用してHTMLをWordPressに変換する

テーママッチャーを使用することもできます。 HTMLからWordPressへの自動変換を提供します。サイトにアクセスして、適切なエリアを選択するだけです。テーママッチャーは、既存のWebサイトから画像、スタイル、およびレイアウトを取得します。

Convert-HTML-Website-to-WordPress-site-with-theme-matcher

5HTMLからWordPressへのコンバーターサービス

HTML to WordPressは、PHPを1行も記述しなくても、HTMLデザインをWordPressテーマに変換します。

静的HTMLWebサイトをWordPressに変換するサービスプランを選択できます。このオプションは、価格が加算される可能性があります。大幅に安いコンバーターオプションを選択することもできます。

HTMLからWordPressへのコンバーターサービス

変換は完全に自動化されており、「wp-」プレフィックス付きコンバータークラスをHTMLに追加するだけで、テーマの機能を拡張できます。

コンバーターは、HTMLファイルごとにテンプレートを作成し、アセットを参照して、必要なすべてのphp関数を入力します。 Bootstrap、Webflow、Dreamweaver、または既に使い慣れているツール/フレームワークを使用して、Webサイトを作成します。ウェブサイトがHTMLを使用して作成されている限り、テーマに変換できます。

移行後に何をする必要がありますか？

変換が完了したら、WordPressサイトに最後の仕上げをするためにいくつかのことを行う必要があります。

必要なプラグインのインストール– HTMLサイトと同じ機能で新しいWordPressサイトを強化するには、便利なプラグインをインストールします。
壊れたリンクの確認と修正– Webサイトで壊れたリンク（404エラー）がないか確認し、見つかった場合は修正します。
カスタム404エラーページの設定–カスタム404エラーページを追加して、訪問者が存在しないURLにアクセスしようとした場合に備えて、WordPressサイトの関連セクションにアクセスできるようにします。
リダイレクトリンク– Webサイトのコンテンツが新しいWebアドレスに移動されたことを検索エンジンに通知するには、301リダイレクトを設定します。この目的のために、Simple 301Redirectを使用できます。
検索エンジンのインデックス作成を有効にする：WordPressダッシュボードの[設定] –> [読み取り]に移動し、 [検索エンジンにこのサイトのインデックス作成を許可する]をオンにして、検索エンジンによってサイトのインデックスを作成します。
XMLサイトマップの生成と送信：サイトが検索エンジンの結果にできるだけ早く含まれるようにするには、XMLサイトマップを作成してGoogleに送信します。

WordPressとHTML–長所と短所

ビジネスのウェブサイトを立ち上げることは簡単なプロセスではありません。最大のジレンマの1つは、静的なHTMLサイトを選択するか、WordPressを選択するかです。

WordPress – WordPressはCMS（コンテンツ管理システム）として認識されています。技術者以外のユーザーが自分のWebサイトにコンテンツを追加および変更するための簡略化されたHTMLバージョン。

CMSサイトは通常動的です。つまり、コンテンツを変更する頻度に制限はありません。写真からテキスト全体まですべてを変更できます。

インターフェースは非常にシンプルでユーザーフレンドリーであり、それを学ぶために特別なトレーニングは必要ありません。 CMS市場は非常に競争が激しいですが、WordPressは毎回競争に打ち勝っています。

始める前に覚えておくべきもう1つのことは、WordPress.comとWordPress.orgはオープンソースのCMSであるため、後者とは大きな違いがあるということです。一方、WordPress.comはブログホスティングサービスとして機能します。

WordPressを使用する利点：

それはあなたにそれが欠けている機能をサイトに追加するための何千ものプラグインを提供します。
変更はいつでも可能であり、誰もあなたを制限していません。
HTMLのセットアップと比較して、WordPressのセットアップにかかる時間は大幅に短縮されます。

WordPressを使用するデメリット：

ただ設定して忘れることはできません。それには、フルタイムの注意と、ソフトウェア、プラグイン、およびテーマの絶え間ない更新が必要です。
ハッカーは、保護が不十分で更新されていないWebサイトを攻撃します。更新に追いついていないと、Webサイトがまったく機能しなくなるリスクがあります。
WordPressは簡単ですが、初心者にとってはそれほど簡単ではありません。多くのオンラインチュートリアルと包括的な資料があり、学習曲線を理解するのに役立ちます。

HTML静的Webサイト–テンプレートのようなものがなくなる前は、Webサイトを作成する唯一の方法は、プログラミングの専門家を雇ってそれを行うことでした。

したがって、すべてのWebサイトは静的HTML（ハイパーテキストマークアップ言語）として構築されました。ポイントはウェブサイトを持つことでした。 HTML開発者をもう一度雇わなければならないので、コンテンツやそのレイアウトを変更しないでください。

HTML Webサイトでは、コンテンツは静的ファイルに保存されるため、変更が非常に困難になります。

HTML Webサイトの利点：

Webサイトがオンラインになると、更新したりバックアップしたりする必要はありません。ほとんどの場合、そのWebサイトでは何も変更する必要はありません。
HTML Webサイトは基本的で、セットアップが簡単です。
それらのサイズと、動的サイトよりも使用するリソースが少ないという事実により、動的サイトと比較して速度が大幅に向上し、ロードがはるかに高速になります。

HTML Webサイトの欠点：

マークアップ言語の専門家である必要があります。 そうしないと、Webサイトを大幅に更新できなくなります。あなたのウェブサイトが本当に小さいものであっても、あるいはほんの些細な情報を表示しているとしても、ウェブ開発者を何度も雇うことは費用がかかります。

もう1つの重要な欠点は、プラグインを追加できないことです。つまり、機能の深刻な不足に直面しています。

HTMLをWordPressの概要に変換する方法

サイトからさらに多くのものが必要な場合でも、テンプレートを念頭に置いて新しいサイトを構築する場合でも、変換プロセスは初心者には非常に複雑に見える可能性があります。忍耐と知識により、ある程度の成功を収めるために必要なことを行うことができます。

サイトが公開されると、何か新しいことを行う方法を学び、その知識をWebサイトに適用できたことを誇りに思うことができます。

上記の少なくとも1つの方法が、HTMLWebサイトをWordPressに変換するのに役立つことを願っています。他の方法やチュートリアルがある場合は、私に知らせてください。 HTMLをWordPressに変換したことはありますか？また、それをどのように体験しましたか？

HTMLウェブサイトをWordPress無料に変換する方法は？ ガイド