HTML サイトを WordPress サイトに変換する

（ウェブの）初期には、すべての Web サイトは、テキストと静的な HTML だけで作られていました。しかし、20 年以上経った今、Web は大きく変わりました。 Web サイトははるかに複雑になっています。

これは、WordPress のようなオープンソースプロジェクトのおかげです。 WordPress は、過去 10 年間ほどで、オンライン出版を民主化するという中核的な使命に成功し、WordPress をインストールして適切なテーマ/プラグインを使用すれば、誰でも高度なデザインと機能を備えたモダンなウェブサイトを持つことができるようになりました（その過程でさらに多くのことが行われました）。私のような熱心な WordPress ユーザーにとって、2018 年になっても、テーマとプラグインを備えた WordPress ウェブサイトではなく、静的な HTML ウェブサイトを運営している人がいるかもしれないということは、ほとんど信じがたいことなのです。しかし、実際にはまだ相当数のアクティブなHTMLのみのサイトが存在します。 (または、少しの CSS を含む HTML。)

たしかに、これらのサイトの所有者には、アップグレードや変換を行わない正当な理由があるかもしれません。サイトのコンテンツが変更されることがなく、すでにあるシンプルなフォーマットとデザインが有効であるのかもしれません。あるいは、WordPress サイトを更新し続けることを心配するよりも、その方が面倒がないのでしょうか。どちらも正当な理由です（他の理由もあります）。壊れていないものは直さない」

しかし、いくつかの（おそらく多くの）人が飛躍しなかった主な理由は、これらではないかもしれないと私は感じています。最も明白な理由は、単に HTML サイトを WordPress サイトに変換する方法を知らないということです。特に、コンテンツを失うことなく、また、ページごとに過剰な書式設定を行う必要がないことです。

ありがたいことに、WordPress でよくあるように、この問題を解決するための方法は数多くあります。

Subscribe To Our Youtube Channel

Your Options for Converting a Static HTML site to a WordPress site

How you choose to convert your static HTML site into a WordPress site will no doubt depends upon your personal preference, desired time/monetary investment and skill level with code.

You are some options compiled below. しかし、以下の要約を読めば、すぐに決定でき、特定の状況に対してこの投稿で最も関連性の高い情報に直接飛ぶことができます。

3つの主な選択肢があります。現在の静的な HTML サイトに基づいて WordPress テーマを手動で作成します。

この場合、コードに入る必要があります。 FTP で現在のサイトディレクトリにアクセスし、出発点として既存のコードを使用する必要があります。そこから、WordPress テーマに必要なファイルを作成し、WordPress codex からコードの断片をコピーする必要があります。これは、HTML、CSS、および少々の PHP の経験があれば、かなり簡単でわかりやすい方法です。現在の Web サイトのホスティングをすでに持っていると仮定すると、プレミアムテーマを購入することを選択した場合のみ、お金を費やす必要があります。コンテンツのインポートに使用するプラグインは、公式の WordPress プラグインリポジトリで自由に利用できます。

3. HTML から WordPress への変換サービスにお金を払って、サイトを再作成する。しかし、WordPress に慣れるという点ではあまり意味がなく、費用は依頼する人によって異なります。

Preparing for HTML to WordPress Conversion

以下のどのルートを取ることにしても、飛び込む前にやっておきたいことがいくつかあります。あなたは、そこにあるオプションに目を通し、あなたのニーズに最も適したパッケージを決定したいと思うでしょう。また、ローカルにWordPressのインストールを作成したいと思うかもしれません。

選択したら、WordPressをインストールし、WP Adminにログインする必要があります。

Manually Converting Your Static HTML Site to WordPress

If you goal is not getting your content from your static HTML site to WordPress but duplicate your current design, this means you need to create your own custom theme.The two possible path is divide at the point that you are the point of the two possible paths. ありがたいことに、それは最初に聞こえるかもしれないほど恐ろしいことではありません。 Sublime や Notepad++ などのコードエディタと、HTML サイトのディレクトリと新しい WordPress インストールのディレクトリの両方にアクセスする必要があります。

Step 1: 新しいテーマフォルダと必要なファイルを作成する

デスクトップに新しいフォルダを作成して、テーマのファイルを格納します。

次に、コードエディターでいくつかのファイル (これらはすべて新しいテーマフォルダーに入ります) を作成します。まだそれらには何もしないでください。

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

は、今後の編集用に開いておくだけでよい。php

Step 2: 既存の CSS を新しいスタイルシートにコピーする

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

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

Step 3: 現在の HTML を分離する

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

したがって、既存の HTML を「切り刻む」と言った場合、実際に行うのは、既存のコードの一部をカットアンドペーストして、先ほど作成した別のファイルに入れ、WordPress がそれらを表示する場所を認識できるようにするだけです。ファイルの先頭から冒頭の div class=”main” タグまでをすべてハイライト表示します。このセクションをコピーして header.php ファイルに貼り付け、保存して閉じます。

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

3番目に、index.html でサイドバー以降のすべてを選択し、コピーして footer.php ファイルに貼り付け、保存して閉じます。

最後に、index.html で左側をすべて選択して（これはメインコンテンツのセクションでなければなりません）、index.php ファイルに貼り付けます。保存しますが、まだ閉じないでください。

これで index.html ファイルを閉じることができ、最後のステップに進むことができます。ほぼ完了！

Step 4: Index.php ファイルを確定する

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

index.phpファイルの一番上に、php.

<?php get_header(); ?>

そして、index.phpファイルの一番下に、php.

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

そして最後に、ループと呼ばれるものを追加しなければなりません。これは、WordPressが訪問者に記事の内容を表示するために使用する、主要なPHPのビットです。新しいテーマのindex.phpファイルを作成する最後のステップは、コンテンツセクション内に以下のコードを追加することです。

<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?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を保存して閉じます。これでテーマが完成しました!

Step 5: 新しいテーマをアップロードする

さて、テーマファイルを作成し、それらをすべて新しいテーマフォルダに保存したので、新しい WordPress インストールのディレクトリにアクセスする必要があります。その後、WP 管理画面 > 外観 > テーマに戻り、新しく作成したテーマがそこに表示されるはずです。先に進み、それを有効にする！

この時点で行うために残っているすべては、あなたの古いサイトのコンテンツで新しいWordPressのウェブサイトを移入することです。

Using a Pre-Made WordPress Theme and Importing HTML Content

上記の手順があまりにも集中的で時間がかかるようであれば、別の方法がありますので、ご安心ください。現在作業中のデザインを WordPress テーマに変換する代わりに、広範な WordPress マーケットで利用可能な何千ものテーマのいずれかを利用することができるのです。

このように、WordPressを利用することで、より多くの人にWordPressを楽しんでもらうことができます。

好きなテーマを選んだら（そしてそのzipファイルパッケージをダウンロードしたら）、WP Admin > Appearance > Themes > Add Newに戻って、新しいWordPressテーマをインストール/アクティベートしてください。あなたのサイトをプレビューすると、コンテンツは空っぽで、おそらく退屈なものに見えるでしょう。

WP 管理画面のプラグイン > 新規追加で、Stephanie Leary 氏の HTML インポート 2 というプラグインを検索してください。このプラグインをインストールして有効にしたら、その便利なユーザーガイドに従って、HTMLページのディレクトリ全体をインポートします。画像も含めて完全に！

この後、古いコンテンツがすべて WordPress で生き、新しいテーマでフォーマットされることになります。または、上記で独自のテーマを作成した場合、あなたのサイトはほとんど以前のように見えるはずです。

おわりに

この記事を WordPress へのウェブサイト移行のガイドとして使用した場合、あなたは世界最大のオープンソースコミュニティの 1 つに参加したことになります。ようこそ! ここは、多くの開発者、デザイナー、ブロガー、DIYer など、WordPress や WordPress のテーマ/プラグインを使って構築し、遊び、創造する人々が集まる楽しい場所です。

WordPress の「バグ」を見つけたら、公式 WordPress.org ウェブサイトには役立つテーマ、プラグイン、その他のリソースがたくさん詰まっています。テーマファイルをさらに微調整したい場合は、Codex を探索して、無限のヒント、トリック、およびバリエーションを確認してください。