HTML Web サイトを WordPress テーマに変換する理由

公開: 2021-08-24

まだ古い HTML Web サイトを使用していますか? HTML Web サイトを WordPress Web サイトに変換し、この人気のあるコンテンツ管理システムが提供する多数の機能を活用するときが来ました。 WordPress に切り替える必要がある理由と、それを実現する方法に焦点を当てます。

序章

純粋なバニラ HTML は、長い間 Web サイト開発のゴールデン スタンダードでした。 しかし、往年の Web サイトは骨の折れるものであり、精巧な付加機能はなく、当時はこれらのサイトに HTML を使用することは理にかなっていました。

現在の市場の傾向とニーズにより、HTML を WordPress に変換し、コンテンツ管理システムを活用して、コードを記述する代わりに Web サイトを実行できるようになりました。 WordPress 開発をより広く理解するには、続きをお読みください。

変換する理由-html-websites-to-wordpress

HTML Web サイトを WordPress にアップロードまたは変換する理由

以下は、静的 HTML Web サイトから WordPress Web サイトへの移行が理想的なステップである主な理由の一部です。

  1. WordPress は、Web サイト デザイン用の静的な HTML テンプレートでは簡単に実現できない独自のユーザー インターフェイスを作成およびキュレートするための優れたツールです。
  2. WordPress には、サイトを支援し、新規参入者の過去の課題を案内できる開発者の強力なコミュニティがあります。
  3. レイアウトをすばやくカスタマイズしたい場合、プレーンな HTML レイアウトでは同じことはできません。 WordPress のページ ビルダー機能により、ユーザーは外出先で Web サイトのレイアウトとルック アンド フィールをカスタマイズできます。
  4. 既存の HTML ファイルを使用したくない場合は、利用可能な何千ものテーマから選択できます。 HTML のルック アンド フィールに非常によく似たテーマが見つかる可能性は非常に高いです。 そうすれば、既存の HTML レイアウトを WordPress に変換し、既製のテンプレートを活用するためのコストと労力を節約できます。
  5. WordPress はこの期間にわたって進化してきました。その進化の過程で、WordPress コミュニティは SEO フレンドリーであることを確認してきました。 素晴らしい SEO ブースト プラグインがいくつかあります。そのようなプラグインの 1 つが、WordPress の SEO 管理のゴールド スタンダードである YOAST SEO です。 これは、ビジネス Web サイトを構築する最終的な目標である、より高い検索エンジンのランキングを達成するのに役立ちます。
html ウェブサイトをワードプレスに変換する方法

HTML Web サイトを WordPress に変換するさまざまな方法

HTML を WordPress に変換することが推奨される理由を説明した後、それを達成する方法を理解するために飛び込みます.

利用可能な3つのオプションがあります

  • ゼロからすべてを構築する必要がある手動の方法。
  • 子テーマの方法では、基本的な WordPress テーマを使用して、仕様に合わせてカスタマイズします。
  • プラグインテクニック。

選択する方法は、コーディングの知識、このプロジェクトに費やす予定の時間、および好みによって異なります。

html-websites-to-wordpress-using-manual-method への変換手順

HTML Web サイトから WordPress への手動変換

現在のサイトの HTML コードは、手動で変換するための参照ポイントになる可能性があります。 専門家は、この翻訳手順を試みる前に、十分なコーディングの知識があることをお勧めします。 特に、HTML、CSS、および PHP に精通している必要があります。

HTML を WordPress に手動で変換する方法は次のとおりです。

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

PC に新しいファイルを作成して、テーマ ファイルを保存します。 このカテゴリには自由に名前を付けることができます (属性の名前として機能します)。 適切なファイルを作成し、好みのコーディング エディターで開いたままにします。

  1. スタイル.css
  2. インデックス.php
  3. ヘッダー.php
  4. サイドバー.php

ステップ 2: CSS コードを新しいスタイルシートにコピーする

ファイルを作成したら、CSS コードを再コピーできます。 サイトを複製して WordPress に移動したい場合は、以前の場所から 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 */

ステップ 3: 現在の HTML コードを分離する

まず、index.html ファイルを開きます。

生成された WordPress ファイルからコードをコピーし、次の領域に貼り付けます。

  1. Header.php — このファイルには、HTML コードの紹介から主要なコンテンツ領域までのすべてが含まれています。 </head> セクションの直前に<?php wp_head();?>をコピーして貼り付ける必要があります。
  2. Sidebar.php — <aside> セクションのすべてのコードをここに挿入します。
  3. Footer.php — この部分は、サイドバーの下部からファイルの上部まで続きます。 <?php wp_footer();?> の呼び出しを </body> で終了する前に追加します。

ステップ 4: WordPress の Header.php と Index.php を変更する

次に、header.php と index.php を変更して、WordPress の形式に準拠させます。

 <?php if (have_posts()) : ?> <?php while have_posts()) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"X?php the_time( 'My'); ?X/div> <h2><a href="<?php the permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>"X?php the_title(); ?X/ax/h2> <div class="author"X?php the_author(); ?></div> </divx!--end post header--> <div class="entry clear"> <?php if ( Eunction_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?X/div> <!--end entry--> <div class="post-Footer"> <div class="comments"X?php comments_popup_link( 'Leave a Comment', '1 Comment', '? Comments! ); ?X/div> </divX!--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_post_link( 'Older Entries'); ? X/div> <div class="alignright"X?php previous_posts_link( 'Newer Entries' ); ?></div> </divx<!--end navigation--> <?php else : ?> <?php endif; ?>

これを行うには、<head> セクションで次のようなリンクを探します。

 <link rel=”stylesheet” href=”style.css”>.

以前の URL を次の URL に置き換えます。

 <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />

ここで、header.php ファイルを保存して終了します。

Web ブラウザで index.php ファイルを開きます。 空いているはずです。

次のように空白を正確に埋めてください。

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

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

テーマ フォルダーが完成したら、それを Web サイトにアップロードし、HTML から WordPress への変換を完了します。 これを行うには、WordPress をダウンロードした場所に移動し、新しく作成したフォルダーを / wp-content / テーマに追加します。

WP-Admin ページ、テーマ、およびテーマの属性のリストをチェックして、属性名が存在するかどうかを確認します。 この場合、すべてが正しく実行され、アクティブ化できるようになりました。

steps-to-convert-html-websites-to-wordpress-using-child-theme-method

WordPress 子テーマを使用して HTML Web サイトを変換する

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

まず、適切な HTML デザイン テーマを選択します。 現在の Web サイトに似たサブテーマを探します。 そこに含まれるパターンが見つかれば、それほどコーディングを求める必要はありません。

基本的なコード行に基づいて構築されるため、開始機能を提供する必要があります。

ステップ 2: 新しいテーマ フォルダーを作成する

最後の方法と同じように、デスクトップに新しいフォルダーを作成します。

フォルダのタイトルは親スタイルと同じですが、末尾に「-child」が追加されている必要があります。 名前にスペースを入れないでください。

ステップ 3: 新しいシート スタイルを作成する

次に、フォルダー内に style.css ファイルを作成し、コード行を追加します。

これは単なる例であることを忘れないでください。 詳細を最初からやり直す必要があります。 プロセスが終了したら、ファイルを保存します。

 Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: John Doe Author URI: http://example.com Template: twentynineteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gp1-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */

ステップ 4: Functions.php を作成する

次に、子テーマ用に functions.php ファイルを作成し、親スタイルをコピーします。

これを行うには、functions.php という名前の新しいファイルを作成します。 まず、<?php. 鬼ごっこ。

ボックスに次のコードを入力します。

 function child_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

このコードは、WordPress に親テーマに移動し、そこで指定されている子テーマのスタイルを使用するように指示します。

ステップ 5: 子のサブジェクトを有効にする

最後に、テーマを構成する必要があります。 フォルダーを WordPress に送信する前に、[外観] メニュー、[テーマ]、[新規追加] を使用してフォルダーを解凍します。 そこから、zip ファイルを取得できます。 別のオプションとして wp-content / theme フォルダーを調べます。

変換する手順 html ウェブサイトからワードプレスへのプラグイン手法

プラグインを使用して HTML Web サイトから WordPress にコンテンツをインポートする

ステップ 1: 新しいサイトを設定する

新しいサイトで好みの WordPress テーマをダウンロードします。 必要なテンプレートであり、すぐに変更できることを確認してください。 自分のアイデンティティに合わせて、外観を更新する必要があります。

ステップ 2: プラグインをインストールする

最初のステップは、HTML Import 2 プラグインをダウンロードしてインストールすることです。 (WordPress プラグインは安全に使用できますか? 続きを読んで詳細を確認してください)。 これを行う最も簡単な方法は、[プラグイン] > [新規追加] に移動し、WordPress 管理パネルでプラグインの名前を入力することです。 画面上で [今すぐインストール] を見つけたら、[今すぐインストール] をクリックします (一番下にある場合があります)。 完了したら、起動します。

ステップ 3: ページをアップロードする

プラグインがインストールされたら、WordPress インストールと同じサーバーにページを公開します。

あなたが記入しなければならない情報：

  • インポートするディレクトリ
  • 旧サイトURL
  • デフォルトファイル
  • 含めるファイル拡張子
  • 除外するディレクトリ
  • ファイル名を保持する

その後、コンテンツ タブに移動し、サイトのコンテンツを運ぶ HTML 要素を構成します。

2 番目のステップは、古い URL から新しい URL へのリダイレクトをセットアップすることです。 この方法で既存の SEO 値を失うことはありません。

オプションを保存し、各タブを確認したら、[ファイルのインポート] をクリックします。

結論

今日の絶え間なく変化する競争の激しい市場では、柔軟な WordPress Web サイトを持つことが、会社が開発するための最も効果的な方法になる可能性があります。

WordPress Web サイトの速度を向上させるための便利なトリックと、WordPress Web サイトを高トラフィック用にスケールアップする方法により、WordPress は、規模の大小を問わず、ビジネスと共に進化することができます。

HTML から WordPress へのコンバーター プラグインは実行可能なソリューションのように見えるかもしれませんが、特に HTML Web サイトを WordPress テーマに変換する場合は、人間のコーディングによって得られた結果と比較することはできません。

静的 HTML サイトから、WordPress プラットフォームなどの確立された機能を備えたより効果的なコンテンツ管理システムに移行することは、特に Wix のような他の同様のプラットフォームと比較した場合に適しています. HTML を WordPress に変換すると、WordPress テーマと使いやすい WordPress 機能により、サイトの管理が容易になります。 他の多くのサービスの中でカスタム WordPress ソリューションについてお問い合わせください。Creole Studios であなたのアイデアを実現してください!