カスタムWordPressランディングページをコーディングするための簡単な手順

良いランディングページを作成することは簡単ではないことを学ぶのにウェブデザインの経験はあまり必要ありません。 あなたはあなたのランディングページが何についてであると思われるかについて明確な考えを持っている必要があります。 そして、あなたはあなたの訪問者を理解し、彼らの注意を回心に向けて導く必要があります。 幸いなことに、Webコーディングの基本に精通している場合は、必要に応じてページを最適化するために必要な自由があります。 それを念頭に置いて、カスタムWordPressランディングページのコーディングとは何かを見てみましょう。

ランディングページの重要性

コーディングの特定の手順を説明する前に、まず、適切なランディングページを用意することが重要である理由について詳しく説明しましょう。 まともなランディングページを持つことの決定的な重要性に言及しないウェブサイト構築へのオンラインガイドはほとんどありません。 あなたのウェブサイトが製品の販売、サービスの提供、またはデータの収集に関するものであるかどうかにかかわらず、あなたは良いランディングページを持っている必要があります。

残念ながら、適切なランディングページを作成するのは簡単ではありません。 あなたはあなたの着陸がどのようになっているのかを明確に理解する必要があります。 そして、あなたは彼らを回心に導くためにあなたの聴衆を理解する必要があります。 ランディングページの最適化が不十分だと、パフォーマンスが大幅に低下し、他の点では優れたオンラインプレゼンスが損なわれる可能性があります。 ランディングページは通常、訪問者が顧客に変わる前の最後のステップであることを忘れないでください。 それで、それをできるだけ良くするために最善を尽くしてください。 幸い、Webプログラミングの基本を知っていれば、カスタムランディングページを簡単にコーディングできます。 これにより、かなりの自由度が得られます。これは通常、真に機能するページに必要です。 それで、それを念頭に置いて、WPランディングページを作成するために必要なコードを段階的に見ていきましょう。

カスタムWordPressランディングページのコーディング

ここで概説する手順はかなり単純ですが、常にプロのWebデザイナーに相談することを検討する必要があります。 特定のWebサイトは、バックグラウンドで実行されている多数のプラグインによって非常に複雑になる可能性があります。 また、これらのプラグインの中には、何をしているのかわからない場合に問題を引き起こしたり、問題が発生したりする可能性があるものがあります。 管理エリアにアクセスせずにプラグインを無効にすることはできますが、あまりトラブルに巻き込まれないようにする必要があります。 今後問題が発生した場合は、プロのWebデザイナーに連絡して支援を求めてください。

子テーマを作成する

理論的には、まったく新しい親テーマを作成できますが、子テーマを使用する必要があります。 これらはカスタマイズに非常に適しているため、独自のランディングページをより自由に作成できます。 子テーマの作成方法について説明したので、ここでは再度説明しません。 先に進むには、子テーマディレクトリにstyle.cssファイルとfunctions.phpファイルの両方が必要であるということだけを説明します。

Style.cssファイルを作成する

style.cssファイルに、次のコードを追加するだけです。

/ *

テーマ名：ランディングページのテーマ

説明：カスタムランディングページを持つ子テーマ

作成者：デフォルトのライター

著者URI：https://www.wpfullcare.com

* /

Functions.phpファイルを作成する

Functions.phpファイルに、次のコードを追加する必要があります。 そうすることで、子スタイルシートファイルを登録できるようになります。

<？php

//親のテーマスタイル//

// https://codex.wordpress.org/Child_Themes //

関数theme_enqueue_styles（）{

$ parent_style='親スタイル';

wp_enqueue_style（$ parent_style、get_template_directory_uri（）。'/style.css'）;

wp_enqueue_style（'子スタイル'、

get_stylesheet_directory_uri（）。 '/style.css'、

array（$ parent_style）

）;

}

add_action（'wp_enqueue_scripts'、'theme_enqueue_styles'）;

子テーマをインストールしてアクティブ化する

これが完了すると、子テーマのインストールとアクティブ化に進むことができます。 一般的なWordPressテーマに関しては、別のWPWebサイトでローカルにテストする必要があります。 すでに述べたように、事故は起こります。 そして、あなたは本当にあなたのウェブサイトを無効にすることを避けるべきです。 ローカルのWordPressサイトを設定したら、テーマのアップロードに進みます。 有効にしたら、子テーマが機能していることと、スタイルを追加できることを確認してください。 style.cssファイルに移動し、コードの一部を変更して、機能しているかどうかを確認します。

カスタムページを作成する

すべてが正常であれば、子テーマでカスタムページの作成に進むことができます。 そのためには、子供のテーマで新しいファイルを作成する必要があります。 そうしたら、page-landing.phpとして保存します。 そのファイルに、次のコードを追加する必要があります。

<？php

/ **

テンプレート名：ランディングページ

** /

？>

次に、テンプレートのドロップダウンに移動し、メニューからランディングページを選択します。 背景として使用する注目の画像を選択する必要があります（後で実験できるように、今のところ大きくて単純なものを選択してください）。 次に、コピーを追加して、追加したページを公開します。 今すぐページを確認しようとすると、黒い画面が表示されるだけです。 これは、page-landing.phpに次のマークアップをまだ追加していないためです。

<div id =” landing-page” class =” hfeed site”>

<div class =” site-branding”>

<p class =” site-title aligncenter”> <a href =” <？php echo esc_url（home_url（'/'））; ？>” rel =” home”> <？php bloginfo（'name'）; ？> </a> </ p>

</ div> <！– .site-branding –>

追加してページをプレビューすると、白い背景と大きな背景画像とともにサイトのタイトルが表示されます。

コンテンツを表示する

ランディングページに残りのコンテンツを表示するには、page-landing.phpに次のマークアップを追加する必要があります。 正しく機能させるには、<！– .site-branding –>行のすぐ下でこれを行う必要があります。

<div class =” sidebar sidebar-bribe”>

<？php if（have_posts（））：？>

<？php while（have_posts（））：the_post（）; ？>

<h1 class =” landing-title”> <？php the_title（”）; ？> </ h1>

<？php the_content（）; ？>

<！– https://codex.wordpress.org/Function_Reference/wp_link_pages –>

<？php endwhile; ？>

<？php endif; ？> <！– mdl-cell-8 //＃primary –>

</ div>

カスタムWordPressランディングページのコーディングはほぼ完了しています。 あなたがしなければならないのはそれのためのスタイルを設定することです。 これを行う最も簡単な方法は、style.cssファイルとそれに必要なコードのみを使用することです。 ページの外観には文字通り無制限のオプションがあるため、厳密な例を示すことはしません。 代わりに、好きなスタイルを見つけてコピーすることをお勧めします。 そうすれば、その機能のさまざまな側面を理解できます。