如何在 WordPress 中创建登陆页面

作者 : 慕源网 本文共6218个字,预计阅读时间需要16分钟 发布时间: 2021-09-22 共232人阅读

如何在 WordPress 中创建登陆页面

如果您想出售某些东西或让访问者注册,那么 WordPress 网站上的登录页面是一个非常宝贵的工具。在这篇文章中,您将学习如何在 WordPress 中免费创建登录页面,并鼓励人们购买或注册您的服务。

我们将通过自定义第三方 WordPress 主题来创建登录页面。这是免费创建 WordPress 登陆页面的最佳方式,并为您提供最大的灵活性,但它需要一些编码知识。如果您想在没有编码的情况下创建登录页面,请查看我们的其他一些帖子。

登陆页面是一个关键页面,旨在让用户采取行动。该操作是什么取决于您的业务,但它可能是以下两种情况之一:

  • 购买一些东西,可能是大件商品,因为您将使用产品页面购买较小的产品。
  • 注册一些东西,可能是订阅服务或课程,或邮件列表。

您需要尽可能多地访问此页面,因为它对您的网站很重要。您可以通过搜索引擎优化、广告或直接营销——或者可能是两者的结合来做到这一点。

但是,一旦人们到达该着陆页,您就需要确保他们购买或注册。

页面的内容将是你如何做到这一点的一部分——不仅是内容本身,还有你的布局方式。通常,商品越贵,您需要的文字和号召性用语就越多。

但这不仅仅是关于内容。您还需要确保当有人登陆该页面时,他们唯一可用的选项是单击购买按钮。如果有导航菜单、一些小部件或可点击的徽标,他们就有可能点击离开以调查您网站的其余部分,而永远不会回到登录页面。

这就是在您的主题中创建登陆页面的地方。登陆页面在内容之外没有链接。在页眉、页脚或其他任何地方将没有菜单、小部件和可点击的链接。它通常是全宽的(因为你不需要侧边栏小部件),并且它会有一个干净的布局,旨在将注意力集中在内容上。

在本教程中,我将向您展示如何为您的主题创建登录页面模板。这包括四件事:

  • 为您的着陆页创建页面模板
  • 为没有链接的着陆页创建标题
  • 为没有链接的着陆页创建页脚
  • 使用模板创建登陆页面

让我们开始吧。我将为“二十二十”主题创建此登录页面模板,这意味着创建一个子主题,这样我就不会编辑第三方主题。

你需要什么

要学习本教程,您需要:

  • WordPress 的测试或开发安装
  • 代码编辑器
  • 安装了一个主题

让我们开始吧。

创建子主题

如果您正在开发自己的主题,则可以跳过此部分。但是,如果您使用的是从主题目录下载的第三方主题,或者从ThemeForest或其他来源购买的第三方主题,则需要一个子主题。

按照我们的指南创建子主题并将您的新主题保存在您网站的wp-content/themes目录中。

创建登陆页面模板文件

现在您需要创建一个页面模板,这将是您的登录页面模板。您需要复制用于主题页面的任何模板并重命名新文件。对于许多主题,这是page.php。对于二十二十,那是single.php。您可以使用WordPress 模板层次结构来确定正在使用哪个模板文件。

如果您使用子主题,您需要将副本复制到子主题。如果您在主题中工作,请将副本保存在主题中。注意:不要在您的实时站点上执行此操作!

如果您的主题有一个全角页面模板,请使用它而不是page.php,因为布局已经设置为页面没有侧边栏,并且侧边栏将被删除。

我已将文件命名为land-page-template.php。不要给它起一个以 开头的名字page。如果您随后创建了一个具有该名称的页面,WordPress 会自动将模板分配给该页面。最好保持手动操作,以便您有更多控制权。

这是我的新登陆页面模板.php文件的完整内容。如果您使用不同的主题,您的看起来会有所不同。

<?php
/**
 * The template for displaying single posts and pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */
 
get_header();
?>
 
<main id="site-content" role="main">
 
    <?php
 
    if ( have_posts() ) {
 
        while ( have_posts() ) {
            the_post();
 
            get_template_part( 'template-parts/content', get_post_type() );
        }
    }
 
    ?>
 
</main><!-- #site-content -->
 
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
 
<?php get_footer(); ?>

现在是编辑文件的时候了。从顶部注释掉的文本开始。将其替换为页面模板所需的文本:

<?php
/**
* Template Name: Landing Page
*
*/

下一步是删除对侧边栏或页脚的任何调用。您如何执行此操作取决于您的主题以及您是否使用全角模板开始。

在 202 中,没有调用侧边栏,所以我不需要删除它。如果您的模板中有此行,则需要将其删除:

<?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>

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

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

   删除导航菜单

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

<div class=“header-navigation-wrapper">
 
</div><!-- .header-navigation-wrapper —>

如果您正在使用 200,请删除它以及其中的所有内容。如果没有,你需要找到一个divasidesection具有类似名称。

二十二十还有两个用于移动设备的切换导航按钮,在这些元素中:

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

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

删除它们,确保您没有删除它们之间的站点标题和描述。如果您的主题有类似的内容,请将其删除。

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

二十二十也有搜索代码,我也会删除。您的主题可能在小部件中具有此功能,在这种情况下,请删除头文件中的所有小部件区域。

最后,在 202 的文件末尾有一个模态菜单,我也想删除它。同样,你的主题可能没有这个——220 比很多都复杂!

我的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
/**
* Template Name: Landing Page
*
*/
 
get_header();
?>
 
<main id="site-content" role="main">
 
    <?php
 
    if ( have_posts() ) {
 
        while ( have_posts() ) {
            the_post();
 
            get_template_part( 'template-parts/content', get_post_type() );
        }
    }
 
    ?>
 
</main><!-- #site-content -->
 
<?php get_footer( 'landing' ); ?>

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

使用模板创建登陆页面

为您的着陆页创建一个新的静态页面,并为其提供一个适合您希望它做什么的标题。

创建内容,然后在右侧“文档”窗格的“页面属性”部分,从“模板” 下拉列表中选择“登陆页面” 。

如何在 WordPress 中创建登陆页面

发布页面。

现在,当您在前端访问它时,您会发现它没有链接或导航,人们可以在页面上单击的唯一内容就是您的号召性用语按钮。

如何在 WordPress 中创建登陆页面

概括

如果您确保人们到达它时唯一可以执行的操作是单击您的“购买”按钮,则登录页面会更加强大。通过在您的 WordPress 主题中创建登陆页面模板,您将使登陆页面更有效并获得更多销售或订阅。

遵循本指南,您将拥有一个强大的主题登陆页面!


慕源网 » 如何在 WordPress 中创建登陆页面

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录