ホームページ >CMS チュートリアル >＆＃＆プレス >WordPress ランディングページの作成: ステップバイステップガイド

WordPress ランディングページの作成: ステップバイステップガイド

WBOYオリジナル: 2023-09-16 13:45:111124ブラウズ

创建 WordPress 登陆页面：分步指南

WordPress サイトのランディングページは、何かを販売したり、訪問者にサインアップしてもらいたい場合に非常に貴重なツールです。この記事では、WordPress でランディングページを無料で作成し、人々にサービスの購入やサインアップを促す方法を学びます。

サードパーティの WordPress テーマをカスタマイズしてランディングページを作成します。これは WordPress ランディングページを無料で作成するための最良の方法であり、柔軟性が最も高くなりますが、コーディングの知識が必要です。コーディングを必要としないランディングページを作成したい場合は、他の投稿をチェックしてください。

ランディングページは、ユーザーの行動を促すために設計された重要なページです。これが正確に何をするかはあなたのビジネスによって異なりますが、次の 2 つのうちのいずれかである可能性があります:

製品ページを使用して小規模な製品を購入するため、何か、おそらく高額なものを購入します。
サービスやコース、メーリングリストへの購読など、何かに登録します。

このページは Web サイトにとって非常に重要であるため、できるだけ多くのトラフィックをこのページに誘導する必要があります。これは、SEO、広告、ダイレクトマーケティング (または両方の組み合わせ) を通じて行うことができます。

しかし、ユーザーがそのランディングページにアクセスしたら、購入またはサインアップを確認する必要があります。

ページのコンテンツは、これを行う方法の一部になります。コンテンツ自体だけでなく、ページのレイアウト方法も含まれます。一般的に、商品が高価であればあるほど、より多くのテキストと行動喚起が必要になります。

しかし、それはコンテンツだけではありません。また、誰かがページにアクセスしたときに、その人が利用できる唯一のオプションが購入ボタンをクリックすることだけであることを確認したいと考えています。ナビゲーションメニュー、特定のウィジェット、またはクリック可能なロゴがある場合、サイトの残りの部分を調査するためにクリックしてしまい、ランディングページに戻らなくなる可能性があります。

ここで、テーマ内でランディングページを作成する必要があります。ランディングページにはコンテンツの外部にリンクがありません。ヘッダー、フッター、その他の場所には、メニュー、ウィジェット、クリック可能なリンクはありません。通常は全幅で (サイドバーウィジェットが必要ないため)、コンテンツに注目を集めるように設計されたすっきりとしたレイアウトになっています。

このチュートリアルでは、テーマのランディングページテンプレートを作成する方法を説明します。これには 4 つのことが含まれます:

ランディングページのページテンプレートを作成する
リンクのないランディングページのヘッダーを作成する
ランディングページのリンクを含まないフッターを作成する
テンプレートを使用してランディングページを作成する

それでは、始めましょう。このランディングページテンプレートは、Twenty Twenty テーマ用に作成します。これは、サードパーティのテーマを編集する必要がないように、子テーマを作成することを意味します。

＃＃＃＃＃＃あなたは何が必要ですか＃＃＃＃＃＃

このチュートリアルに従うには、次のものが必要です:

WordPress のテストまたは開発インストール

コードエディタ

テーマがインストールされました

サブテーマの作成

独自のテーマを開発している場合は、このセクションをスキップできます。ただし、テーマディレクトリからダウンロードしたり、ThemeForest などから購入したサードパーティのテーマを使用する場合は、子テーマが必要になります。ガイドラインに従って子テーマを作成し、新しいテーマをサイトの

wp-content/themes

ディレクトリに保存します。

ランディングページテンプレートファイルを作成する

次に、ランディングページテンプレートとして機能するページテンプレートを作成する必要があります。テーマ内のページで使用されているテンプレートをコピーし、新しいファイルの名前を変更する必要があります。多くのテーマでは、これは page.php です。 Twenty Twenty の場合は、

singular.php

になります。 WordPress テンプレート階層を使用して、どのテンプレートファイルが使用されているかを決定できます。子テーマを使用している場合は、コピーを子テーマにコピーできます。メインテーマを使用している場合は、メインテーマにコピーを保存します。注: ライブ Web サイトではこれを行わないでください。テーマに全幅のページテンプレートがある場合は、

page.php

の代わりにそれを使用してください。ページレイアウトはすでにサイドバーなしで設定されており、サイドバーは削除されているためです。

ファイルに landing-page-template.php という名前を付けました。

page

で始まる名前を付けないでください。その後その名前でページを作成すると、WordPress はそのページにテンプレートを自動的に割り当てます。より細かく制御できるよう、手動のままにすることをお勧めします。これは、新しい landing-page-template.php ファイルの完全な内容です。別のテーマを使用すると、テーマの外観も異なります。

リーリー

今度はファイルを編集します。上部のコメントアウトされたテキストから始めます。これをページテンプレートに必要なテキストに置き換えます: リーリー 次のステップは、サイドバーまたはフッターへの呼び出しを削除することです。これを行う方法は、テーマと、そもそも全幅のテンプレートを使用するかどうかによって異なります。

在《二十二十分》中，没有对侧边栏的调用，所以我不需要删除它。如果您的模板中有此行，则需要将其删除：

<?php get_sidebar(); ?>

注意：编辑完此模板文件后，您可能会发现布局在侧边栏应有的位置留下了间隙。编辑模板的 CSS 或更改内容部分中的类以使其全宽。

现在是页脚。您不想完全删除页脚，因为您仍然需要版权页和对 wp_footer 的调用，因此您不必删除 get_footer() 调用，而是将其保留在那里并为您的目标网页创建一个新的页脚文件。

在《二十二十分》中，页脚无法以标准方式工作。我的模板文件中有两个调用：

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>

第一个调用一个包含文件，该文件只包含小部件。第二个调用我需要的页脚，但我们稍后会对其进行编辑。所以我删除这一行：

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

现在保存您的文件。我们很快就会回来讨论这个问题。

为您的目标网页创建标头

现在是时候为您的目标网页创建一个没有导航、小部件或链接的标题了。

复制主题的 header.php 文件（在主主题或子主题中）并将其命名为 header-landing.php。

删除徽标或网站标题中的链接

在头文件中查找站点名称或徽标。我的由一个函数组成：

twentytwenty_site_logo();

我不会尝试编辑该函数，而是将其替换为对徽标的调用：

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/xxx.jpg” >

将上面代码中的xxx.jpg替换为您自己的徽标名称，并确保使用正确的路径。

如果您的网站在标题中使用网站标题而不是徽标图像，请使用以下内容：

<div class="site-title faux-heading">

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

</div>

注意：我上面使用的类是特定于 20 20 的。编辑它们以反映您的主题。

如果您的主题以比二十二十更标准的方式工作，您可能会发现此代码已经存在。您所要做的就是删除其周围的任何 3499910bf9dac5ae3c52d5ede7383485 元素，以便网站标题或徽标仍然存在，但它们不会充当链接。

删除导航菜单

现在是时候删除导航菜单了。在头文件管理器中找到它的代码。在《二十二》中，它位于一个如下所示的元素内：

<div class=“header-navigation-wrapper">

</div><!-- .header-navigation-wrapper —>

如果您正在使用“二十二十”，请删除它以及其中的所有内容。如果没有，您需要找到具有相似名称的 div、aside 或 section。

Twenty Twenty 在这些元素内还有两个用于移动设备的切换导航按钮：

<button class="toggle search-toggle mobile-search-toggle">

</button>

<button class="toggle nav-toggle mobile-nav-toggle">

</button>

删除这些内容，确保不要删除它们之间的网站标题和说明。如果您的主题有类似的内容，请将其删除。

删除任何小部件区域或其他带有链接的代码

《二十二十》也有搜索代码，我也将删除它。您的主题可能在小部件中包含此内容，在这种情况下，请删除头文件中的所有小部件区域。

最后，在《二十二十》中，文件末尾有一个模式菜单，我也想将其删除。同样，您的主题可能没有这个 - 《二十二十》比许多主题更复杂！

我的header-landing.php文件现在看起来简单多了：

<?php
/**
 * Header file for the Twenty Twenty WordPress default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

    <head>

        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >

    	<link rel="profile" href="https://gmpg.org/xfn/11">

    	<?php wp_head(); ?>

    </head>

	<body <?php body_class(); ?>>

		<?php
		wp_body_open();
		?>

		<header id="site-header" class="header-footer-group" role="banner">

			<div class="header-inner section-inner">

				<div class="header-titles-wrapper">

					<div class="header-titles">

						<?php
							// Site title or logo.
							bloginfo( 'name' );

							// Site description.
							twentytwenty_site_description();
						?>

					</div><!-- .header-titles -->

				</div><!-- .header-titles-wrapper -->
			

			</div><!-- .header-inner -->

		</header><!-- #site-header —>

保存文件并返回到您的模板文件。找到调用标题的行：

get_header();

编辑它，以便它调用新的头文件：

get_header( ‘landing’ );

现在保存您的文件。

为着陆页创建页脚

现在是时候为您的目标网页创建页脚了。

复制 footer.php 并将其命名为 footer-landing.php。打开您的新文件。

找到小部件区域的任何代码并将其删除。《二十二十》在 footer.php 文件中没有小部件区域；它们位于一个包含文件中，我已经删除了对该文件的调用。

您还需要编辑版权页以删除链接。这是《二十二十分》的版权页：

<div class="footer-credits">

    <p class="footer-copyright">&copy;
		<?php
		echo date_i18n(
			/* translators: Copyright date format, see https://www.php.net/date */
			_x( 'Y', 'copyright date format', 'twentytwenty' )
		);
		?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
	</p><!-- .footer-copyright -->

	<p class="powered-by-wordpress">
		<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
			<?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
		</a>
	</p><!-- .powered-by-wordpress -->

</div><!-- .footer-credits -->

删除代码中的所有链接。我的现在是这样的：

<div class="footer-credits">

    <p class="footer-copyright">&copy;
		<?php
		echo date_i18n(
			/* translators: Copyright date format, see https://www.php.net/date */
			_x( 'Y', 'copyright date format', 'twentytwenty' )
		);
		?>
		<?php bloginfo( 'name' ); ?>
	</p><!-- .footer-copyright -->

	<p class="powered-by-wordpress">
			<?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
	</p><!-- .powered-by-wordpress -->

</div><!-- .footer-credits -->

现在保存页脚文件并返回到您的模板文件。找到对页脚的调用：

<?php get_footer(); ?>

编辑它以调用新的页脚文件：

<?php get_footer( 'landing' ); ?>

我的模板文件现在已被精简，内容如下：





    



<?php get_footer( 'landing' ); ?>

保存您的模板文件，如果您正在使用子主题，请在 WordPress 管理员中激活它。

使用模板创建您的目标网页

为您的目标网页创建一个新的静态页面，并为其指定一个适合您希望其执行的操作的标题。

创建内容，然后在右侧文档窗格的页面属性部分中，选择着陆页 >模板下拉菜单。

创建 WordPress 登陆页面：分步指南

ページを公開します。

フロントエンドでこのページにアクセスすると、リンクやナビゲーションがなく、ユーザーがページ上でクリックできるのは行動喚起ボタンだけであることがわかります。

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃まとめ＃＃＃＃＃＃

ランディングページにアクセスしたときにユーザーが実行できるアクションが「購入」ボタンをクリックすることだけであることを確認できれば、ランディングページはさらに強力になります。 WordPress テーマでランディングページテンプレートを作成すると、ランディングページがより効果的になり、より多くの販売や購読を獲得できます。创建 WordPress 登陆页面：分步指南

このガイドに従えば、テーマに合った強力なランディングページが完成します。

以上がWordPress ランディングページの作成: ステップバイステップガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php css 搜索引擎 WordPress

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：WordPress での A/B テストガイド次の記事：WordPress での A/B テストガイド

続きを見る

WordPress ランディング ページの作成: ステップバイステップ ガイド