HTMLサイトからWordPressサイトへの変換

公開: 2018-10-05

（Webの）最初は、すべてのWebサイトはテキストと静的HTMLだけで作成されていました。しかし今では、20年以上経った今、ウェブは大きく異なる場所になっています。ウェブサイトははるかに複雑です。これらは、サイトの作成者と訪問者の両方に、より豊かで楽しい体験を提供します。

これは主に、WordPressのようなオープンソースプロジェクトのおかげです。これは、過去10年ほどにわたって、オンラインパブリッシングを民主化するという中核的な使命に成功しました（そしてその過程でさらに多くのことを行います）。これにより、WordPressをインストールし、適切なテーマ/プラグインを持っている人なら誰でも、高度なデザインの最新のWebサイトを利用できます。と機能。コーディングは不要で、HTMLも必要ありません。

これが、私のようなWordPressユーザーを熱心に扱う理由であり、2018年に誰かがテーマとプラグインを備えたWordPressWebサイトではなく静的HTMLWebサイトを運営している可能性があるとはほとんど信じられません。しかし、実際には、まだかなりの量のアクティブなHTMLのみのサイトがあります。（または、CSSを少し含むHTML。）

確かに、これらのサイト所有者には、アップグレードや変換を行わない正当な理由がある可能性があります。たぶん、彼らのサイトのコンテンツは決して変わらず、すでに配置されている単純なフォーマットとデザインは実用的ですか？それとも、WordPressサイトを最新の状態に保つことを心配するよりも面倒ではないでしょうか？どちらも（とりわけ）正当な理由です。「壊れていないものを直さないでください」の代表的な例。

しかし、これらが一部（おそらく多く）が飛躍しなかった主な理由ではないかもしれないと私は感じています。最も明白なのは、HTMLサイトをWordPressサイトに変換する方法がわからないということです。特に、コンテンツを失ったり、ページごとに過度のフォーマットを行う必要はありません。

ありがたいことに、WordPressでよくあることですが、この問題を解決するにはいくつかの方法があります。以下にいくつかのオプションをまとめました。

私たちのYoutubeチャンネルを購読する

静的HTMLサイトをWordPressサイトに変換するためのオプション

静的HTMLサイトをWordPressサイトに変換する方法は、個人的な好み、希望する時間/金銭的投資、およびコードのスキルレベルに依存することは間違いありません。あなたはあなたに最適なものを決定する人でなければなりませんが、以下の要約であなたは素早く決定し、あなたの特定の状況のためにこの投稿の最も関連性のある情報に直接スキップすることができるはずです。

3つの主なオプションがあります。

1.現在の静的HTMLサイトに基づいてWordPressテーマを手動で作成します。

これには、コードに入る必要があります。 FTP経由で現在のサイトディレクトリにアクセスし、既存のコードを開始点として使用する必要があります。そこから、WordPressテーマに必要なファイルを作成し、WordPressコーデックスからコードのビットをコピーする必要があります。 HTML、CSS、および少しのPHPの経験がある場合、これはかなり単純で簡単です。

2.事前に作成されたテーマをインストールし、コンテンツを移行するだけです。

これは、単純さと価値の交差点でおそらく最良のオプションです。あなたがすでにあなたの現在のウェブサイトのホスティングを持っていると仮定すると、あなたがプレミアムテーマを購入することを選択した場合にのみお金を使う必要があります。コンテンツのインポートに使用するプラグインは、公式のWordPressプラグインリポジトリから無料で入手できます。

3.HTMLからWordPressへの変換サービスを利用してサイトを再作成します。

これは、何もする必要がないため、最も簡単なソリューションです。ただし、WordPressに慣れるためにはあまり効果がなく、費用は誰を雇うかによって異なります。以下のセクションでは、このオプションについては説明しません。これが関心のあるルートである場合は、サービスプロバイダーをすばやく検索するだけで、残りはサービスプロバイダーが処理するためです。

HTMLからWordPressへの変換の準備

以下のルートに関係なく、ダイビングする前にやりたいことがいくつかあります。

1つ目は、ホスティングプランの選択です。そこにあるオプションを調べて、ニーズに最適なパッケージを決定する必要があります。または、代わりにローカルのWordPressインストールを作成したいですか？後でいつでもホスティングサービスに移行できます。

選択したら、WordPressをインストールしてWPAdminにログインする必要があります。これは、2つの可能なパスが分かれるポイントです。

静的HTMLサイトをWordPressに手動で変換する

静的なHTMLサイトからWordPressにコンテンツを取り込むだけでなく、現在のデザインを複製することが目標である場合、これは、独自のカスタムテーマを作成する必要があることを意味します。ありがたいことに、それは最初に聞こえるかもしれないほど怖いものではありません。いくつかのフォルダとファイルを作成し、少しコピーして貼り付けてから、結果をアップロードするだけです。

SublimeやNotepad ++などのコードエディタと、HTMLサイトのディレクトリと新しいWordPressインストールのディレクトリの両方へのアクセスが必要になります。

ステップ1：新しいテーマフォルダーと必要なファイルを作成する

デスクトップに、テーマファイルを保持するための新しいフォルダーを作成します。テーマに名前を付けたい名前を付けます。

次に、コードエディタでいくつかのファイル（すべて新しいテーマフォルダにあります）を作成します。まだ彼らには何もしないでください。さらに編集するために、それらを開いたままにしておきます。

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

ステップ2：既存のCSSを新しいスタイルシートにコピーする

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

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

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

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

ステップ3：現在のHTMLを分離する

ステップ3に入る前に、WordPressがどのように機能するかについて簡単に説明します。 WordPressは、PHPを使用して、基になるデータベースからデータを呼び出して取得します。この小さなチュートリアルで使用している各ファイルは、サイトコンテンツのどの部分をどこに表示するかをWordPressに指示するように設計されています。

したがって、既存のHTMLを「切り刻む」と言うとき、実際に行っているのは、既存のコードの一部を作成したばかりのさまざまなファイルに切り取って貼り付けるだけです。これにより、WordPressはどこに表示するかを認識できます。彼ら。

どうぞ。

まず、現在のサイトのindex.htmlファイルを開きます。ファイルの先頭から開始divclass =” main”タグまですべてを強調表示します。このセクションをコピーしてheader.phpファイルに貼り付け、保存して閉じます。

次に、 index.htmlファイルに戻ります。 aside class =” sidebar”要素とその中のすべてを強調表示します。このセクションをコピーしてsidebar.phpファイルに貼り付け、保存して閉じます。

3番目に、 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(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--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 class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

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

ステップ5：新しいテーマをアップロードする

テーマファイルを作成し、それらをすべて新しいテーマフォルダーに保存したので、新しいWordPressインストールのディレクトリにアクセスする必要があります。

新しいテーマフォルダを/ wp-content / themes /内に配置します。次に、 [WP管理]> [外観]> [テーマ]に戻り、新しく作成したテーマがそこに表示されます。さあ、アクティベートしてください！

この時点であとは、新しいWordPressWebサイトに古いサイトのコンテンツを入力するだけです。以下のセクション（事前に作成されたテーマの使用に関する部分をスキップ）に従って、それがどのように行われるかを確認してください。

既製のWordPressテーマの使用とHTMLコンテンツのインポート

上記の手順が集中的または時間がかかりすぎると思われる場合は、別の方法がありますのでご安心ください。現在使用しているデザインをWordPressテーマに変換する代わりに、より広範なWordPressマーケットプレイスで利用可能な数千のテーマのいずれかを利用できます。

無料のテーマとプレミアムのテーマがあります。どちらが最適かを判断する前に、ニーズに合わせて設計されたテーマを確認し、ここのエレガントなテーマやその他の場所でテーマのカテゴリ別に参照することをお勧めします。

気に入ったテーマを選択したら（そしてzipファイルパッケージをダウンロードしたら）、 WP Admin> Appearance> Themes> Add Newに戻り、新しいWordPressテーマをインストール/アクティブ化します。

これが完了すると、新しいWordPress Webサイトとテーマが作成されますが、それ以外はほとんどありません。あなたがあなたのサイトをプレビューするとき、それはコンテンツが空であり、おそらく退屈に見えるでしょう。次に、古いサイトのコンテンツをインポートするので、問題ありません。

WP Adminで、[プラグイン]> [新規追加]に移動し、StephanieLearyによるHTMLImport2というプラグインを検索します。 このプラグインをインストールしてアクティブ化したら、その便利なユーザーガイドに従って、HTMLページのディレクトリ全体をインポートします。画像付き！

この後、古いコンテンツはすべてWordPressに保存され、新しいテーマでフォーマットされます。または、上記で独自のテーマを作成した場合、サイトは以前とほぼ同じように表示されます。WordPressで実行するだけです。

結論は

この投稿をWebサイトをWordPressに移行するためのガイドとして使用した場合は、世界最大のオープンソースコミュニティの1つに参加したことになります。いらっしゃいませ！多くの開発者、デザイナー、ブロガー、DIY担当者などがいる楽しい場所です。すべて、WordPressとWordPressのテーマ/プラグインを使用して構築、再生、作成します。

「WordPressのバグを見つけた」場合、WordPress.orgの公式Webサイトには、便利なテーマ、プラグイン、その他のリソースがぎっしり詰まっています。テーマファイルをさらに微調整したい場合は、コーデックスを調べて、一見無限のヒント、トリック、バリエーションを探してください。

そしてもちろん、以下のコメントでチャットを続け、今後さらにブログ投稿を購読していただければ幸いです。

マックスグリボエドフ/shutterstock.com経由の記事サムネイル