VPS参考、测评、推荐
分享你关注的VPS主机优惠信息

创建WordPress登录页面:逐步指南

创建WordPress登录页面:逐步指南

创建WordPress登录页面:逐步指南

如果您想销售商品或吸引访问者注册,WordPress & # 32593站上的登陆页面是一个非常宝贵的工具。在这篇文章中,您将了解如何在WordPress & # 20013免费创建登陆页面并鼓励人们购买或注册您的服务。

我们将通过自定义第三方WordPress & # 20027题来创建着陆页。这是免费创建WordPress & # 30331陆页面的最佳方式,并为您提供最大的灵活性,但它需要一些编码知识。如果您想创建一个无需编码的登陆页面,请查看我们的其他一些帖子。

着陆页是关键页面,旨在促使用户采取行动。该操作的具体内容取决于您的业务,但可能是以下两种情况之一:

买一些东西,可能是大件商品,因为您会使用产品页面来购买较小的产品。注册某项内容,可能是服务或课程的订阅,也可能是邮件列表。您需要尽可能多地吸引此页面的流量,因为它将对您的网站非常重要。您可以通过搜索引擎优化、广告或直接营销(或者两者的结合)来做到这一点。

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

页面的内容将成为您执行此操作的一部分- 不仅是内容本身,还有您的布局方式。一般来说,商品越贵,您需要的文字和号召性用语就越多。

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

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

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

为您的目标网页创建页面模板为没有链接的着陆页创建标头为着陆页创建一个不带链接的页脚使用模板创建目标网页那么让我们开始吧。我将为& ldquo二十二十& rdquo主题创建此登陆页面模板,这意味着创建一个子主题,这样我就不会编辑第三方主题。

您需要什么要学习本教程,您需要:

WordPress & # 30340测试或开发安装代码编辑器已安装主题那么让我们开始吧。

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

按照我们的指南创建子主题,并将新主题保存在您网站的内容/。录中。

创建登陆页面模板文件现在您需要创建一个页面模板作为您的登陆页面模板。您需要复制主题中页面使用的任何模板并重命名新文件。对于许多主题来说,就是page.php & # 12290对于二十二十,那就是singular.php & # 12290您可以使用WordPress & # 27169板层次结构来确定正在使用哪个模板文件。

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

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

我已将文件命名为landing-page-template . PHP & # 12290;不要给它一个以第&#24320页;头的名称。如果您随后使用该名称创建页面,WordPress & # 20250自动将模板分配给该页面。最好保持手动操作,以便您拥有更多控制权。

这是我的新landing-page-template.php & # 25991;件的完整内容。如果您使用不同的主题,您的主题看起来会有所不同。

& lt?php/** *显示单个帖子和页面的。* * @ link ://developer . WordPress . org/themes/basics/template-hierarchy/* * @ package WordPress * @ subpackage Twenty _ Twenty * @ since Twenty Twenty 1.0 */get _ header();?& & ltmain id = ” site-content ” role = ” main ” >& lt?phpif(have _ posts()){ while(have _ posts()){ the _ post();get _ template _ part(‘ template-parts/content ‘,get _ post _ type());}}?& & lt/main & gt;& lt!-#网站内容-& gt;& lt?php get_template_part(‘-部件/页脚-菜单-小部件’);?& gt& lt?PHP get _ footer();?& gt现在是时候编辑文件了。从顶部注释掉的文本开始。将其替换为页面模板所需的文本:

& lt?php/***模板名称:登陆页面* */& # 19979;一步是删除对侧边栏或页脚的任何调用。如何执行此操作取决于您的主题以及您是否首先使用全角模板。

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

& lt?PHP get _ sidebar();?& gt注意:编辑完此模板文件后,您可能会发现布局在侧边栏应有的位置留下了间隙。编辑模板的CSS & # 25110更改内容部分中的类以使其全宽。

现在是页脚。您不想完全删除页脚,因为您仍然需要版权页和对wp _ footer & # 30340调用,因此您不必删除get _ footer()& # 35843;用,而是将其保留在那里并为您的目标网页创建一个新的页脚文件。

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

& lt?php get_template_part(‘模板-部件/页脚-菜单-小部件’);?& gt& lt?PHP get _ footer();?& gt第一个调用一个包含文件,该文件只包含小部件。第二个调用我需要的页脚,但我们稍后会对其进行编辑。所以我删除这一行:

& lt?php get_template_part(‘模板-部件/页脚-菜单-小部件’);?& gt现在保存您的文件。我们很快就会回来讨论这个问题。

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

复制主题的header.php & # 25991;件(在主主题或子主题中)并将其命名为header-landing . PHP & # 12290;

删除徽标或网站标题中的链接在头文件中查找站点名称或徽标。我的由一个函数组成:

twenty twenty _ site _ logo();我不会尝试编辑该函数,而是将其替换为对徽标的调用:

& ltimg src = ” & lt?PHP echo get _ style sheet _ directory _ uri();?& gt/images/XXX . jpg & rdquo;& gt将上面代码中的xxx.jpg & # 26367换为您自己的徽标名称,并确保使用正确的路径。

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

& ltdiv class = ” site-title faux-heading ” >& lt?PHP bloginfo(‘ name ‘);?& gt& lt/div & gt;注意:我上面使用的类是特定于20 20 的。编辑它们以反映您的主题。

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

删除导航菜单

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

& ltdiv class = & ldquo标题-导航-包装” >& lt/div & gt;& lt!- .标题-导航-包装器& mdash& gt如果您正在使用& ldquo二十二十& rdquo,请删除它以及其中的所有内容。如果没有,您需要找到具有相似名称的div & # 12289抛开& # 25110;第& # 12290;

二十二& # 22312;这些元素内还有两个用于移动设备的切换导航按钮:

& ltbutton class= “切换搜索-切换移动设备-搜索-切换” >& lt/button & gt;& ltbutton class = ” toggle nav-toggle mobile-nav-toggle ” >& lt/button & gt;删除这些内容,确保不要删除它们之间的网站标题和说明。如果您的主题有类似的内容,请将其删除。

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

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

我的header-landing . PHP & # 25991;件现在看起来简单多了:

& lt?WordPress默认的php/** *头。* * @ link ://developer . WordPress . org/themes/basics/template-files/# template-partials * * @ package WordPress * @ subpackage Twenty _ Twenty * @ since Twenty Twenty 1.0 */?& gt& lt!DOCTYPE html & gt& lthtml class = ” no- ” & lt;?PHP language _ attributes();?& gt& gt& lthead & gt& ltmeta charset = ” & lt?PHP bloginfo(‘ charset ‘);?>& gt& ltmeta name = ” viewport ” content = ” width =设备宽度,initial-scale=1.0 ” >& ltlink rel = ” profile ” href = ” https://gmpg . org/xfn/11 ” >& lt?PHP WP _ head();?& gt& lt/head & gt;& ltbody & lt?PHP body _ class();?& gt& gt& lt?PHP WP _ body _ open();?& gt& ltheader id = ” site-header ” class = ” header-footer-group ” role = ” banner ” & gt。& ltdiv class = ” header-inner section-inner ” >& ltdiv class = ” header-titles-wrapper ” >& ltdiv class=”header-titles ” >& lt?php//站点标题或logo . bloginfo(‘ name ‘);//Site description . twenty twenty _ Site _ description();?& gt& lt/div & gt;& lt!- .标题-标题-& gt;& lt/div & gt;& lt!- .标题-标题-包装-& gt;& lt/div & gt;& lt!- .标题-内部->;& lt/header & gt;& lt!-# site-header & mdash;& gt保存文件并返回到您的模板文件。找到调用标题的行:

get _ header();编辑它,以便它调用新的头文件:

get _ header(& lsquo;着陆& rsquo);现在保存您的文件。

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

复制 & # 24182;将其命名为页脚-landing . PHP & # 12290;打开您的新文件。

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

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

& ltdiv class=”footer-credits ” >& ltp class=”footer-copyright ” >& amp复制;& lt?phpecho date_i18n(/* translators:版权日期格式,见https://.php.net/date */_ x(‘ Y ‘,’版权日期格式’,’ twenty twenty ‘));?& gt& lta href = ” & lt?PHP echo ESC _ URL(home _ URL(‘/’);?>& gt& lt?PHP bloginfo(‘ name ‘);?& gt& lt/a & gt;& lt/p & gt;& lt!- .页脚-版权-& gt;& ltp class=”powered-by-wordpress ” >& lta href = ” & lt?PHP echo ESC _ URL(_ _(‘ https://WordPress . org/’,’ twenty twenty ‘);?>& gt& lt?php _e( ‘Powered by WordPress ‘,’ twenty twenty ‘);?& gt& lt/a & gt;& lt/p & gt;& lt!- .由WordPress-& gt;& lt/div & gt;& lt!- .页脚-学分-& gt;删除代码中的所有链接。我的现在是这样的:

& ltdiv class=”footer-credits ” >& ltp class=”footer-copyright ” >& amp复制;& lt?phpecho date_i18n(/* translators:版权日期格式,见https://.php.net/date */_ x(‘ Y ‘,’版权日期格式’,’ twenty twenty ‘));?& gt& lt?PHP bloginfo(‘ name ‘);?& gt& lt/p & gt;& lt!- .页脚-版权-& gt;& ltp class=”powered-by-wordpress ” >& lt?php _e( ‘Powered by WordPress ‘,’ twenty twenty ‘);?& gt& lt/p & gt;& lt!- .由WordPress-& gt;& lt/div & gt;& lt!- .页脚-学分-& gt;现在保存页脚文件并返回到您的模板文件。找到对页脚的调用:

& lt?PHP get _ footer();?& gt编辑它以调用新的页脚文件:

& lt?PHP get _ footer(‘ landing ‘);?& gt我的模板文件现在已被精简,内容如下:

& lt?php/***模板名称:登陆页* */get _ header();?& gt& ltmain id = ” site-content ” role = ” main ” >& lt?phpif(have _ posts()){ while(have _ posts()){ the _ post();get _ template _ part(‘ template-parts/content ‘,get _ post _ type());}}?& gt& lt/main & gt;& lt!-#网站内容-& gt;& lt?PHP get _ footer(‘ landing ‘);?& gt保存您的模板文件,如果您正在使用子主题,请在WordPress & # 31649理员中激活它。

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

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

创建WordPress登录页面:逐步指南

发布页面。

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

创建WordPress登录页面:逐步指南

摘要如果您确保人们到达目标网页时可以采取的唯一操作是点击您的& ldquo购买& rdquo按钮,那么目标网页就会更加强大。通过在WordPress & # 20027题中创建着陆页模板,您将使着陆页更加有效并获得更多销售或订阅。

按照本指南操作,您将拥有适合您的主题的强大登陆页面!

创建WordPress登陆页面的细节:一步一步的指南。更多信息请关注草根吧相关文章!

:创建WordPress登录页面:逐步指南 https://.caogenba../95191.html

赞(0) 打赏
未经允许不得转载:草根吧VPS_最新VPS信息参考 » 创建WordPress登录页面:逐步指南
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址