如何在WordPress主题中编写登录页面代码

最新推荐文章于 2022-09-17 15:41:14 发布

cunjie3951

最新推荐文章于 2022-09-17 15:41:14 发布

阅读量1.3k

点赞数 1

文章标签： python java css html web

如果您在互联网上购买了任何商品，则可能遇到了登录页面。它们是最大化网站转化的一种高效方法。

但是，什么是登录页面？如何为WordPress网站创建登录页面？

什么是登陆页面？

登陆页面是您网站上旨在出售商品的页面。

您可以使用SEO或通过付费广告，或者通过网站中其他页面上的号召性用语或窗口小部件来引导人们访问它。这是一个目的地：您希望人们做某事的地方。

您的目标网页只有一项工作。该工作将根据您的业务性质而有所不同，但通常是以下两件事之一：卖东西或获得访客的电子邮件地址。

因此，如果您要出售订阅，服务或产品，那么您的目标网页将被设计为鼓励人们购买该产品。内容旨在克服异议，展示产品，服务或订阅如何满足买方的需求，并让他们购买。

如果您的目标网页旨在获取电子邮件地址，则通常会提供一些回报。那可能是样本，优惠券或人们可以下载的免费赠品。

无论哪种方式，当某人登陆该页面（这就是为什么它被称为登陆页面）时，您都不希望他们在从您那里购买或提供您的联系方式之前一直走到其他任何地方。

这就是为什么最有效的目标网页除了与页面目标直接相关的链接之外没有其他链接的原因。您的目标网页应该没有导航菜单来吸引人们访问网站的其他部分，没有可点击的徽标将他们带到您的主页，也没有侧边栏或页脚小部件来分散人们的注意力。

这就是为什么您需要一个专门的页面模板来剥离所有这些东西的原因。

这是我其中一个网站上的登录页面：

真的很简单。它没有链接，没有导航菜单，只有一个按钮，可带您进入注册表单。

您不想让人们选择在目标网页上执行其他任何操作，这就是为什么您需要专用的模板文件的原因。该页面将没有链接，从而使访问者无法进行销售或订阅过程。该页面上的唯一链接（它们应该是明显的大按钮）将代表销售渠道的顶部。

如果使用标准页面模板来创建登录页面，则将增加访问者分心并远离销售流程的机会。

因此，让我们开始创建自定义页面模板。

您需要什么

为此，您需要满足以下条件：

您网站的开发安装
您自己的主题或第三方主题的子主题（请勿直接编辑第三方主题）
代码编辑器

创建页面模板

在您的主题（或您的子主题）中，创建一个新的页面模板。您可以通过复制page.php模板或创建一个空白文件并将page.php的内容复制到其中来完成此操作。我叫我的Land-page.php 。

这是我现有的page.php文件：

<?php
/**
 * The template for displaying all pages.
 */
get_header(); ?>

    <?php
	if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>	
		
		<?php if ( has_post_thumbnail() ) { ?>
		
			<h2 class="entry-title desktop"><?php the_title(); ?></h2>
		
			<div class="quarter right"> 
				<?php the_post_thumbnail( 'large' ); ?>
			</div>
			
			<section class="entry-content three-quarters left">
				<h2 class="entry-title mobile"><?php the_title(); ?></h2>
				<?php the_content(); ?>
			</section><!-- .entry-content -->
		
		<?php }
			
		else { ?>
		
			<h2 class="entry-title desktop"><?php the_title(); ?></h2>
	
			<section class="entry-content">
				<?php the_content(); ?>
			</section><!-- .entry-content -->	
			
		<?php } ?>
		
	</article><!-- #post-## -->

<?php endwhile; ?>

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

让我们遍历该文件的内容：

首先，调用header.php文件。
接下来，有条件检查以查看是否有特色图片。如果是这样，则显示为右对齐。这是我的主题所特有的-您可能有也可能没有类似的东西。
显示页面标题和内容的循环。
调用边栏。
页脚调用。

要创建目标网页模板，我们需要对该文件做一些事情：

在开头添加注释文本，以便WordPress知道这是一个页面模板。
删除该条件语句。
删除对边栏的呼叫。

我不会删除页脚，因为关闭body元素和wp_footer钩子需要此页脚。相反，我们将创建该页模板将使用的页脚文件的版本。

添加注释文本以创建页面模板

在新的Landing-page.php文件中，添加一行注释掉的文本，以告诉WordPress这是页面模板。这是我的：

/**
 * Template Name: Landing page
 * The template for displaying the landing page.
 *
 */

现在，当您在页面编辑屏幕中编辑或创建页面时，可以在页面编辑屏幕右侧的“ 文档”选项卡的“ 页面属性”部分中选择此模板：

在WordPress管理员中选择页面模板

删除条件代码

现在，让我们编辑条件检查。如果page.php文件只有一个，则只需要这样做。

我的目标网页将始终带有精选图片-我不需要检查图片。这是因为我将获得人们注册我的邮件列表时免费下载的图像。我也想更改布局。这是页面模板中代码的新版本：

<?php
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					
		<h2 class="entry-title"><?php the_title(); ?></h2>
					
		<section class="featured-image one-third left">
			<?php if ( has_post_thumbnail() ) { 
				the_post_thumbnail( 'medium' );
			} ?>
		</section>	
            
        <section class="entry-content right two-thirds">
			<?php the_content(); ?>
		</section><!-- .entry-content -->
	</article><!-- #post-## -->

<?php endwhile: endif; ?>

此页面中用于布局CSS样式已经在我主题的样式表中-如果您想要相同的布局，或者您要对着陆页进行样式设置，而与其他页面不同，则将CSS添加到主题的样式表中。

删除边栏呼叫

现在，让我们删除该侧边栏调用。

删除get_sidebar()标记。将页脚调用保留在此处-我们将编辑页脚以删除所有链接。

编辑页眉和页脚

并非网站上每个页面中的所有内容和链接都在模板文件中。标题包含导航菜单以及通过徽标或站点名称指向首页的链接。它还可能在横幅中包含其他链接。

您的页脚中可能会包含一个带首页链接的colophon，以及可能包含内部或外部链接的小部件。

您希望摆脱所有这些限制，以使人们在没有购买或注册的情况下无法离开目标网页。

从标题中删除导航

现在让我们从标题开始。有两件事要摆脱：徽标或网站标题中的链接，以及导航菜单。

首先创建头文件的副本。称之为header-landing.php 。

现在，在您的landing-page.php文件中，编辑对标头的调用，使其显示如下：

get_header( 'landing' ); ?>

完成此操作后，您可以编辑header-landing.php文件。

这是我的网站名称代码：

<hgroup class="site-name one-third left">
    <!-- site name and description - site name is inside a div element on all pages except the front page and/or main blog page, where it is in a h1 element -->
    <h1 id="site-title" class="one-half-left">
        <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <?php bloginfo( 'name' ); ?>
        </a>
    </h1>
  
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
  
</hgroup>

我们仍然想显示站点名称，因此我们编辑代码以输出不带链接的代码：

<hgroup class="site-name one-third left">
    <!-- site name and description - site name is inside a div element on all pages except the front page and/or main blog page, where it is in a h1 element -->
    <h1 id="site-title" class="one-half-left">
        <?php bloginfo( 'name' ); ?>
    </h1>
  
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
  
</hgroup>

现在，让我们删除导航菜单。您只需删除header-landing.php文件中导航菜单的所有代码。

这是代码：

<nav class="menu main right">

  <div class="skip-link screen-reader-text">
    <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>">
      <?php _e( 'Skip to content', 'tutsplus' ); ?>
    </a>
  </div>

  <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>

 </nav><!-- .main -->

只需删除所有这些。简单！

从页脚中删除链接

现在让我们继续到页脚。

与头文件一样，您需要创建页脚文件的另一个版本。复制footer.php并将其命名为footer-landing.php 。

在您的landing-page.php文件中，编辑页脚调用，使其显示如下：

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

现在，让我们编辑footer-landing.php文件。

在页脚文件中，我有一个小部件区域：

if ( is_active_sidebar( 'footer-widget-area' ) ) { ?>
    <aside class="footer-widget-area full-width" role="complementary">
		<?php dynamic_sidebar( 'footer-widget-area' ); ?>
	</aside>
<?php }

只需从footer-landing.php中删除它即可。如果需要，请删除包裹在其中的所有元素：尝试使它看起来像您想要的那样。

在我的文件中，我还拥有一个包含链接的colophon代码：

<section class="colophon" role="contentinfo">
    <small class="copyright left">
        &copy; <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <?php bloginfo( 'name'); ?>
        </a>
    </small><!-- #copyright -->

    <small class="credits right">
        Proudly powered by <a href="https://wordpress.org/">WordPress</a>.
    </small><!-- #credits -->
</section><!--#colophon-->

我需要对其进行编辑，以删除指向主页和WordPress链接的链接，如下所示：

<section class="colophon" role="contentinfo">
    <small class="copyright left">
        &copy; <?php bloginfo( 'name'); ?>
    </small><!-- #copyright -->

    <small class="credits right">
        Proudly powered by WordPress.
    </small><!-- #credits -->
</section><!--#colophon-->

现在着陆页脚或页眉中将没有任何链接。

编辑样式表

最后一步是编辑页面模板的样式，以使内容以全角显示。

默认情况下，我的内容和侧边栏具有以下布局样式：

#content {
  width: 65%;
  float: left;
}
.sidebar {
  width: 32%;
  float: right;
}

我需要添加一些样式以仅在此页面模板上定位内容：

.page-template-landing-page #content {
  width: 100%;
  float: none;
}

您无需为侧边栏添加任何额外的样式-它不会显示在自定义页面模板上，因为不会从模板文件中调用它。

创建页面

最后一步是创建您的登录页面。使用新的目标网页模板在WordPress管理员中创建一个新页面。其中将包括吸引人们购买或注册的文字，以及表格或购买按钮。

在我的网站上，我实际上有两个登录页面：第一个是人们将到达的页面，第二个是人们提供其电子邮件地址的页面。我这样做是因为有研究表明，如果人们首先必须单击链接，他们更有可能完成一个过程。我尚未测试它是否对我的网站有所帮助：也许我应该！

如果单击我网站上第一个登录页面中的按钮，则会得到以下简单的注册页面：

具有一栏式表单且没有其他链接的登录页面

该页面使用与我的登录页面相同的模板。在这两种情况下，我都添加了相同的精选图片。这样做加强了这样的信息，即人们注册后将获得免费赠品-包括视觉效果使您的页面更具吸引力并增加了转化。

着陆页模板可减少干扰并增加转化次数

为目标网页创建模板文件将使它们更加有效。任何人在此页面上到达您的网站，或单击您网站上的按钮即可到达该网站。

请按照本教程中的步骤为您的网站创建一个登录页面。如果它比我的大（出售昂贵产品的登陆页面可能需要很多文本才能进行销售），则可能需要添加其他样式来分解内容并帮助人们阅读。

翻译自: https://code.tutsplus.com/tutorials/how-to-code-a-landing-page-in-your-wordpress-theme--cms-33423

cunjie3951

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫