HTML テンプレートを WordPress テーマに変換する

Web テクノロジーは長い道のりを歩んできましたが、HTML だけで作成された Web サイトがまだあります。 それらのいずれかを所有している場合、HTML テンプレートを WordPress テーマに変換する方法を疑問に思うかもしれません.

幸いなことに、これらの HTML ファイルを WordPress に変換したい場合は、自由に使えるオプションがいくつかあります。 利用可能な技術は、実践的な手動変換から、すべての困難な作業を処理できる専門家との提携にまで及びます。

この記事では、HTML テンプレートを変換するための 4 つの異なるアプローチについて説明します。 それぞれについて、HTML ベースの Web サイトを WordPress フォールドに組み込むのに役立つ手順とリソースを提供します。 カバーすることがたくさんあるので、すぐに飛び込みましょう！

HTML を手動で変換する

変換に関しては、最初のオプションは手動のアプローチです。 これは非常に実践的なプロセスであるため、元の Web サイトと新しい Web サイトの両方のファイルにアクセスできることを確認する必要があります。

通常、この目的には Secure File Transfer Protocol (SFTP) アプリケーションを使用します。 Web サイトにアクセスしたら、次の手順に進むことができます。

ステップ 1: テーマ フォルダーを作成する

最初に、新しいテーマ ファイルを保持するフォルダーを作成し、新しいテーマの名前でラベルを付ける必要があります。 コード エディターを使用して、次の 5 つの特定のファイルを作成できます。

• スタイル.css
• index.php
• header.php
• フッター.php
• サイドバー.php

ここでは、これらのファイルを空白のままにして、作成したフォルダーに保存します。

ステップ 2: 既存の CSS をコピーして貼り付ける

次の優先事項は、Cascading Style Sheet (CSS) ファイルをカスタマイズすることです。 ここで、サイトのさまざまなスタイル要素の概要を説明します。

上部に、ファイルに関する情報を追加することをお勧めします。 実際、WordPress に関しては、テーマがテーマ ディレクトリに掲載されるために必要な要素がいくつかあります。

その情報の下に、元の Web サイトから新しいテーマに引き継ぐ既存の CSS スタイルを貼り付けます。

ステップ 3: 既存の HTML を分離する

元の Web サイトでは、ヘッダー、フッター、サイドバー、およびメイン コンテンツ領域を指定する HTML コードはすべて、 index.htmlファイルにある可能性があります。 次に、これらの各要素を、WordPress テーマ用に作成した新しいファイルに分割する必要があります。

たとえば、元の Web サイトのindex.htmlファイルで、クラスが「main」の最初の<div>タグを見つけることができます。 このタグの前にあるものはすべてコピーして、新しいheader.phpファイルに貼り付けることができます。

次に、「サイドバー」タグと「フッター」タグについてこのプロセスを繰り返します。 これらの各要素に含まれるコードをコピーし、それぞれの PHP ファイルに貼り付けます。

これで、 index.htmlファイルの主要部分が残ります。 これは、HTML ベースの Web サイトのメイン コンテンツ レイアウトを構成するものです。 この残りのコードをコピーして、新しいindex.phpファイルに貼り付ける必要があります。

ステップ 4: Index.php ファイルを構成する

次のステップは、新しいインデックス ファイルが、サイトの構造とスタイルをテーマで表示できるようにするために必要なファイルを見つけられるようにすることです。 これを実現するには、WordPress テンプレート タグを使用します。 これらは、ヘッダー、フッター、およびサイドバー ファイルを取得するようにテーマに指示するために使用されます。

たとえば、次のタグを使用して、作成したヘッダー ファイルをテンプレートに表示させることができます。

get_header();

これをindex.phpテンプレート ファイル、またはヘッダーを表示する後続のページに配置します。 同じことがフッターにも当てはまります。

新しいテンプレートには、理解する必要がある重要な部分がもう 1 つあります。 これは WordPress ループと呼ばれ、テンプレートに投稿を取り込むように指示する PHP コードのスニペットです。 また、表示される投稿の数を制御するようにカスタマイズすることもできます.

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

新しいテーマを実行する準備が整ったので、そのフォルダーを Web サイトのwp-themes/content/ディレクトリに配置する必要があります。

ファイルをアップロードしたら、WordPress ダッシュボードにログインして、 [外観] > [テーマ] に移動できます。 ここに、新しいテーマが一覧表示され、 [有効化]をクリックして使用を開始できるはずです。

プラグインを使用して HTML コンテンツをインポートする

このプロセスを処理する別の方法は、プラグインを使用して、古い HTML ベースのサイトからコンテンツを転送することです。 残念ながら、最近のバージョンの WordPress と互換性のあるツールはほとんどありません。 ただし、WP Site Importer の無料試用版をチェックアウトできます。

このプラグインは、Web サイト全体をスキャンし、移動可能なコンテンツをカタログ化できます。 HTML が適切に整理されていて、最初から「クリーン」である場合に最適です。 メニューやリンクなどのコンテンツをインポートすることもできます。

子テーマの使用

HTML サイトを WordPress に移行するもう 1 つの方法は、子テーマを使用することです。 これは、親テーマと同じ基本機能とスタイルを持っていますが、親テーマを更新した場合でも、行った微調整やカスタマイズを保持できます。

ステップ 1: テーマを選択する

WordPress テーマ ディレクトリには、適切に構築された無料のテーマが多数あります。 好きなものを選択したら、それをインストールして、そのファイルが Web サイトのファイル ディレクトリで利用できるようにする必要があります。

ただし、この親テーマを有効にする必要はありません。

ステップ 2: 子テーマ用のフォルダーを作成する

次に、FTP アプリケーションを使用してファイルにアクセスし、 wp-content/themesディレクトリに新しいフォルダーを作成する必要があります。 このファイルは、親テーマと同じ名前で、末尾に「-child」が追加されている必要があります。

たとえば、Twenty Nineteen の子テーマを作成する場合は、 twentynineteen-child というフォルダーを作成できます。

このセットアップは、必要なテーマ ファイルの残りをセットアップすると、子テーマが親テーマから関数とスタイルを自動的にプルできることを意味します。

ステップ 3: スタイル シートを設定する

次のステップは、 style.cssファイルをセットアップすることです。 WordPress では、テーマの親子関係を機能させるために、スタイル シートに特定の情報が必要です。 必要に応じて、元の HTML ファイルから追加のスタイル情報を貼り付けることもできます。

ステップ 4: Function.php ファイルを設定する

基本的に 2 つのテーマで作業しているので、子テーマが親テーマの CSS に依存していることを WordPress に伝える必要があります。 そのために、 wp_enqueue_style() PHP 呼び出しを使用できます。

最初にfunction.phpファイルを作成し、それを子テーマのフォルダーに配置します。 これは、テーマの依存関係と階層を綴るエンキュー関数を実行するファイルです。

ステップ 5: 子テーマをアクティブ化する

これらの新しいファイルを Web サイトのサーバーにアップロードしたら、WordPress ダッシュボードに戻り、 [外観] > [テーマ]に移動できます。 これで、子テーマの準備がすべて整ったことがわかります。

子テーマの[アクティブ化]をクリックして、Web サイトのテーマとして設定します。 これで、HTML Web サイトのコンテンツを新しい WordPress サイトにコピーする準備が整いました。

サイト変換サービスを購入する

自分で変換を行う時間やリソースがない場合は、変換サービスを利用することもできます。 さらに、他の WordPress コンテンツの移行に関するリソースや支援が必要な場合は、ここ WP Engine で、移行と変換のための多くのソリューションとリソースを提供しています。

1.HireWPGeeks

HireWPGeeks はフルサービスの変換オプションです。 それはすべての面倒な作業を処理し、すべてのコンテンツを備えた、柔軟で応答性の高いテーマベースの WordPress Web サイトになります. 見積もりについては会社に連絡する必要がありますが、89ドルからのサービスを計画できます.

2. ファンタステックのソリューション

FantasTech Solutions は、もう 1 つの HTML から WordPress への変換サービスです。 HTML からハイエンドで適切にコード化された WordPress テーマ テンプレートへの高度に専門的な変換を宣伝しています。 費用は 1 ページあたり 297 ドルからであることに注意してください。 追加のページはそれぞれ 147 ドルからで、正確な価格は複雑さに応じて異なります。

WP Engine でサイト体験をカスタマイズ

大変な作業のように思えるかもしれませんが、HTML Web サイトを WordPress に変換すると、他にも多くの機会が開かれます。 この柔軟性と拡張性に優れたプラットフォームにより、俊敏性が向上し、新しいコンテンツを迅速に展開できるようになります。

ここWP Engineでは、適切な開発者リソースがプロジェクトに大きな影響を与えることができると信じています. 革新的なソリューションに加えて、あらゆる予算に対応するプランと価格帯を提供しています!