HtmlウェブサイトをWordPressビジネステーマに変換する方法

HtmlウェブサイトをWordPressビジネステーマに変換する方法

多くの企業は、まだオンライ これらのHTML webサイトは通常静的であるため、webサイトの小さな詳細を変更するにはコードを編集する必要があります。 しかし、それを避けるために、HTML webサイトをWordPressに変換することができます。

このチュートリアルでは、HTMLをWordPressのビジネステーマに変換する方法をお教えします。 これにより、すべてのHTML要素がそのまま保持され、任意の要素を簡単にカスタマイズするためのWordPressの柔軟性が得られます。

あなたはHTMLとWordPressの両方に精通している場合は、このチュートリアルはあなたのために良いです。 あなたが初心者の場合は、xamppのようなlocalhost上のダミーのウェブサイトでこれをやってみてください。

• HTMLサイトをWordPressに変換する
• 必要なWordPressファイル
• CSS、JavaScript、および画像の設定
• 機能を追加するためのWordPress機能の追加

HTMLサイトをWordPressテーマに変換

このチュートリアルでは、無料のHTMLビジネステーマをピックアップしましたここから。 任意のビジネステーマを変換しながら、技術は同じままになります。 あなたのビジネステーマに関する質問がある場合は、単にコメントや電子メールをドロップし、私は応答させていただきます。

先に進みましょう。 まず、HTMLテーマを見て、header、main body、footer要素をマークダウンします。

ヘッダー:ヘッダーには上部セクションの部分が含まれます。

本体：長いページなので、スクリーンショットを撮るためにズームアウトしましたが、中央部分全体が本体に含まれています。

フッター:フッターセクションには下部が含まれます。

ステップ1: 前提条件

私はあなたがすでにXamppのようなあなたのlocalhostにWordPressをインストールしていることを願っています（つまり、あなたのコンピュータ）。 そうでない場合は、WordPressをローカルにインストールしてセットアップするのに役立つ詳細なガイドを既にカバーしています。

ステップ2：テーマフォルダを作成する

このチュートリアルでは、XAMPPを使用しており、WordPressサイトはhtdocsフォルダの下にインストールされています。 WordPressテーマを作成するには、themesフォルダにアクセスして新しいフォルダを作成する必要があります。ここで、XAMPPフォルダ>htdocs>WordPressフォルダ（私の場合はテスト中です）>wp-content>themesを開きます。

Themesフォルダには、インストールされているすべてのWordPressテーマが表示されます。 新しいフォルダを作成し、テーマに名前を付けます。

ステップ3：PHPファイルの作成

新しく作成されたテーマフォルダは空であり、機能させるためにいくつかのファイルを作 このためには、コードエディタ（VS Code）を起動し、WordPressテーマフォルダ全体（私の場合はfarhan-wordpress-theme）を開く必要があります。

今、より良いあなたのテーマを整理するために、次の本質的なWordPressのファイルを作成します。

1. スタイル。css（テーマの詳細とCSSファイルを含む）
2. インデックス。php（他のオプションファイルが宣言されていない場合はメインコンテンツを提供します）
3. ヘッダー。php（テーマのヘッダー要素を含む）
4. フッター。php（テーマのフッター要素を含む）
5. 関数。php（ワードプレスのテーマにその上の関数が含まれています)

ステップ4: CSS、Images、JavaScript(JS)フォルダーをコピーするHTMLテーマ(上記でダウンロード)から、assetsフォルダー(CSS、JS、およびimagesフォルダー)を新しいWordPressテーマフォルダーにコピーします。

新しいWordPressテーマフォルダに移動すると、次のようになります:

ステップ5：新しいWordPressテーマを有効にする

今、あなたは任意のwpテーマに必要な重要なフォルダを追加しました。 次に、ブラウザでWordPressサイトを開き、ダッシュボードにログインします。 Appearance>Themesに移動すると、新しいテーマがこのセクションに追加されていることがわかります。

このテーマは空に見えます。 新しく作成されたテーマの情報とバナーを追加するには、スタイルを開きます。cssファイル（以前に作成したもの）を貼り付け、次のコードを貼り付けて保存します（ctrl+s）。

/*Theme Name: Farhan WordPress ThemeAuthor: FarhanDescription: Convert HTML to WordPress theme.Version: 1.0*/

バナーの場合は、新しいテーマフォルダに画像ファイルを追加する必要があります。 画像サイズは800×600で、画像名はScreenshot（png形式）でなければなりません。

スクリーンショットを追加したら。pngファイル、あなたのwp-adminダッシュボードを更新すると、画像バナーが表示されます。

バナーをクリックするとテーマ情報が表示されるようになりました。

次に、単にアクティブ化をクリックしてください。

ステップ6:HTMLコードをヘッダー、インデックス、およびフッターに変換

ヘッダー、フッター、および本体にはHTMLコメントが付いており、WordPress PHPファイルに簡単に追加してコードを変換することができます。

ここで、インデックスからヘッダーコードをコピーします。ダウンロードしたテーマのhtmlをヘッダーに挿入します。WordPressのテーマフォルダに作成したphpファイル。 <からコピーする必要があります！DOCTYPE html>till</header>保存します。

同様に、インデックスからフッターと本体要素の上にコピーします。フッターへのhtml。phpとインデックス。php、それぞれ。フッターの場合は、<footer>（私の場合は、footerタグにクラス名が定義されているので、混乱しないでください）から</html>までフッターにコピーします。phpファイルを保存します。

次に、</header>タグの後、<フッター>の直前のすべてのコードをインデックスにコピーします。phpとそれを保存します。

インデックスの先頭にWordPress関数get_header()を追加し、インデックスの末尾にget_footer()を追加します。phpファイル。

get_header()はヘッダを呼び出す組み込み関数です。phpと同様に、get_footer（）はfooterを呼び出す関数です。php。

インデックスの先頭に次のコードを追加します。phpファイルを保存します。

<?php get_header(); ?>

フッターを呼び出すには、インデックスの最後に次のコードを挿入します。phpコードを保存します。

<?php get_footer(); ?>

今、あなたのサイトを訪問し、あなたはこのようなものが表示されます。

ステップ7：CSSの設定

テーマが奇妙に見えるという事実は、CSSファイルがテーマに適用されていないためです。

HTMLテーマからWordPressテーマフォルダに既にCSSフォルダをコピーしています。 ここで、これらのCSSファイルを呼び出してテーマの外観を完成させる必要があります。

CSSファイルの名前が異なる可能性があることに注意してください—このプロセスを実行する前に再確認してください。

ヘッダーにCSSスタイルシートがあります。phpファイルなので、CTRL+fで”rel=”stylesheet””を検索する必要があります.

その後、Google fontスタイルシートは必要ないため削除します。 ここで、実際のCSSスタイルシート、つまり<link rel=”stylesheet”href=”assets/css/style-starterを登録するだけです。>

WordPressは通常のCSSスタイルシート構造を理解していません。 関数に移動します。phpファイルと次のコードを追加します。

<?phpfunction add_css(){ wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all'); wp_enqueue_style( 'first');}add_action('wp_enqueue_scripts', 'add_css');

wp_register_styleはCSSスタイルシートを登録するのに役立ちます。

get_template_directory_uri()。 ‘/href’は、現在のテンプレートディレクトリパスを取得するために使用されます。 現在のパスをそれぞれのファイルと連結します。 したがって、ここでは、CSSファイル（href）の場所を定義する必要があります。 そのCSSファイルのパスをどのように定義したかを見ることができます：get_template_directory_uri（）。 ‘/assets/css/style-starter.css”です。

これで、ヘッダーからCSSスタイルシートのリンクを削除できます。phpファイルを次のコードに置き換えてファイルを保存します。

<?php wp_head(); ?>

wp_head()は、ヘッダーの<head></head>セクションの下で定義されている必須のWordPressフックです。php。

WordPressサイトにアクセスすると、CSSファイルが実際に新しいWordPressテーマにエンキューされていることがわかりますが、それでもデザインは順 これは、JSスクリプトをまだ設定していないためです。

を追加した後。php、私は一つのCSSスタイルシートを持っており、私は関数でのみそれを登録しました。php。 しかし、複数のスタイルシートがある場合はどうなりますか？ その場合は、各スタイルシートに対してwp_register_style()を定義する必要があります。 心配しないで！ 複数のJSスクリプトがある次のステップの例を取ることができます。 それはあなたのクエリをクリアし、あなたがその仕事をする方法を理解するのに役立ちますので、プロセスは同じです。

ステップ8: JavaScriptの設定

あなたが作業しているHTMLテーマは、JavaScriptを使用しており、フッターにあります。phpファイル、JavaScriptファイルはすでにHTML形式で呼び出されています。 これらのJSファイルを実行するには、前の手順で実行したのと同じ操作を実行するだけです。

フッターを開きます。phpファイルを検索し、「CTRL+f」で「<script src=」を検索します。 これは、あなたが持っているすべてのJSファイルを見つけるのに役立ちます。 私の場合、私は五つを持っており、ここで私はそれらのすべてを登録して尋ねる必要があります。Jsファイルを検索する

次に、関数を開く必要があります。phpファイルと次のコードを貼り付けます:

function add_script(){ wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'js-script'); wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'change'); wp_register_script('popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'popup'); wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'carousel'); wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'bootstrap');}add_action('wp_enqueue_scripts', 'add_script');

コード構造は、CSS構成部分で以前に行ったのと同じであることがわかります。 しかし、ここでは、styleの代わりにwp_register_scriptを使用します。 各JSファイルを同じ関数に登録してエンキューします。

今、あなたはフッターからすべてのJSスクリプトリンク（私は五つを持っている）を削除することができます。phpファイルを開き、コードの最後（</body>タグの上）に次のコード行を貼り付けてファイルを保存します。

<?php wp_footer(); ?>

さて、ブラウザでサイトを開くと、新しいWordPressテーマが正常に動作していることがわかりますが、まだ、いくつかの画像が欠落しています。Jsとcssの後の

ステップ9：画像を設定

このプロセスは簡単であり、ここでは画像のパスを定義する必要があります。

まず、インデックスを開きます。phpファイルを検索し、”CTRL+f”で”<img src=”を検索します。 これは、あなたが持っているすべての画像ファイルを見つけるのに役立ちます。 私の場合、私は8つあり、ここで私はそれらのすべてのためのパスが必要です。

を検索して画像へのパスを指定します。srcタグ内に次のPHPコードを追加してファイルを保存します。

<img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image" />

さて、あなたのテーマはHTMLテーマに似ていて、すべての画像を取得します。

しかし、サイトタイトルやWordPressのナビゲーションメニューの変更など、WordPressの機能が不足します。ステップ10：WordPressでカスタムタイトルを有効にする

WordPress管理パネルに移動してwebサイトのタイトルを変更しても、サイトのタイトルには影響しません。 この機能を有効にするには、ヘッダーのタイトルタグの間にパラメータ”name”を指定してWordPressの組み込み関数bloginfo（）を使用できます。phpファイルとファイルを保存します。

<?php bloginfo( 'name' ); ?>

同様に、ヘッダーのh1タグの間にパラメータ”name”を指定してWordPressの組み込み関数bloginfo()を使用する必要があります。phpファイルとファイルを保存します。

<?php bloginfo( 'name' ); ?>

これで、テーマはWP-adminパネル内のSettings->General->Site Titleで設定したタイトルを取得します。

ステップ11:WordPressナビゲーションメニューをWordPressに追加

サイトのWordPress管理者にアクセスして[外観]に移動すると、メニューのオプションは表示されません。

関数に次のコード行を追加して、最初にMenuを有効にする必要があります。phpファイル。

add_theme_support( 'menus' );

これにより、テーマのメニュー機能が有効になりますが、WPダッシュボードからメニューを管理するにはいくつかの設定が必要です。

まず、あなたのHTMLテーマナビゲーションメニューがどこにあるかを見つけて、WordPressの組み込み関数wp_nav_menu();を使用して置き換えます。

このテーマでは、ヘッダー。phpにはナビゲーションメニューが含まれています。

次のコード行を検索します:

<ul class="navbar-nav mx-lg-auto"><li class="nav-item active"><a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a></li><li class="nav-item @@about__active"><a class="nav-link" href="about.html">About</a></li><li class="nav-item @@contact__active"><a class="nav-link" href="contact.html">Contact</a></li></ul>

上記の行を次のように置き換えます:

<?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

あなたのWordPressのメニューは今、あなたのテーマに表示され、あなたのWordPressのビジネステーマに柔軟性を追加します。

この記事が、HTMLテンプレートやサイトをWordPressテーマに変換する方法を理解するのに役立つことを願っています。 これは、私はプロセスを実証するために十一のステップをカバーしてきた詳細なチュートリアルです。

ご質問やご質問がございましたら、以下のコメント欄にいつでもお気軽にお問い合わせください。