如何在 WordPress 中创建全宽页面(初学者指南)

技术教程 2021年11月6日
250 0

您想在 WordPress 中创建一个全宽页面，以便在整个屏幕上拉伸您的内容吗?

大多数 WordPress 主题已经带有一个您可以使用的内置全宽页面模板.但是，如果您的主题没有，那么添加它很容易.

在本文中，我们将向您展示如何在 WordPress 中轻松创建全宽页面，甚至无需任何代码即可创建完全自定义的页面布局.

How to create a full width page in WordPress

方法 1.使用主题的全宽模板

如果您的主题已经带有全宽页面模板，那么最好直接使用它.几乎所有好的 WordPress 主题都可以.

即使是最好的免费 WordPress 主题也经常带有全宽模板，因此您很有可能已经拥有了.

首先，您需要通过转到页面»来编辑一个页面或创建一个新页面.在您的 WordPress 仪表板中添加新.

在内容编辑器的右侧"文档"窗格中，您需要通过单击旁边的向下箭头来展开"页面属性"部分.然后您应该会看到一个"模板"下拉菜单.

Viewing the 'Page Attributes' section in the 'Document' pane in WordPress

如果您的主题有全宽模板，则会在此处列出.它应该被称为"全宽模板":

Select the full width template from the 'Template' dropdown

您在此处看到的选项会因您的主题而异.如果您的主题没有全宽页面模板，请不要担心.

您可以使用以下方法轻松添加一个.

方法 2.使用插件创建全宽页面模板

此方法最简单，适用于所有 WordPress 主题和页面构建器插件.

首先，您需要安装并激活全宽模板插件.如果您不确定如何操作，请查看我们的 WordPress 插件安装初学者指南.

全宽模板插件将为您的页面模板添加三个新选项:

The different options available for your page template using the Full Width plugin

这些选项是:

  • FW 无侧边栏:从您的页面中删除侧边栏，但保留其他所有内容完整
  • FW 全宽:删除侧边栏、标题和评论，并将布局拉伸至全宽
  • FW Fullwidth No Header Footer:删除 FW Fullwidth 所做的一切，加上页眉和页脚

如果您只想使用内置的 WordPress 编辑器，"FW No Sidebar"可能是最佳选择.

虽然此插件可让您创建全角页面模板，但您的自定义选项有限.

如果您想在没有任何代码的情况下自定义全角模板，则需要使用页面构建器.

方法 3:使用页面构建器插件在 WordPress 中设计全宽页面

如果您的主题没有全角模板，那么这是创建和自定义全角模板的最简单方法.

它允许您通过拖放界面轻松编辑全宽页面并为您的网站创建不同的页面布局.

对于这种方法，您需要一个 WordPress 页面构建器插件.在本教程中，我们将使用 Beaver Builder.它是最好的拖放页面构建器插件之一，它使您无需编写任何代码即可轻松创建页面布局.

首先，安装并激活 Beaver Builder 插件.有关更多详细信息，请参阅有关如何安装 WordPress 插件的分步指南.

激活后，可以编辑现有页面或创建新页面.

在屏幕右侧的"文档"窗格中，转到"页面属性"并从下拉列表中选择一个全宽模板.

接下来，点击屏幕中央的"Launch Beaver Builder"按钮.

Using the Beaver Builder plugin to create your full width page

现在，使用 Beaver Builder 的拖放界面来创建您的页面.

The Beaver Builder drag and drop interface

一个好的开始方法是点击顶部的模板标签.选择一个预制模板作为全宽页面的基础.

Select one of the Beaver Builder templates

单击模板以选择它，页面构建器将加载它.然后，您可以编辑要更改的任何元素，例如图像.

Beaver Builder 布局是用行和模块构建的.每行可以有多个列，并且在每行内您可以添加内容模块和小部件.

要编辑布局中的一行或一个模块，您只需单击它.在本例中，我们正在编辑 Heading 模块:

Editing a heading using Beaver Builder

Beaver Builder 将在弹出窗口中打开项目详细信息，您可以在其中编辑其设置.您可以更改文本、更改字体和颜色、添加或更改背景图像等.

Editing the details of an item in Beaver Builder

您可以随时将模块和小部件添加到您的布局中.Beaver Builder 带有许多基本和高级的内容模块，您可以将它们拖放到您的页面中.

Adding a module in Beaver Builder

完成编辑后，点击页面顶部的"完成".然后，您可以保存草稿或发布它.

Saving or publishing your full width page in Beaver Builder

您现在可以访问您的页面以查看完成的全宽页面.

方法 4.使用 SeedProd 创建完全自定义的全宽着陆页

虽然 Beaver Builder 是一个简洁的解决方案，但它确实有可能减慢您的网站速度.

如果您想创建一个完全自定义的着陆页，并在其中自定义页眉、页脚和页面的所有区域，我们建议您使用 SeedProd.

它是 WordPress 最好的登陆页面插件，它带有一个非常易于使用的拖放页面构建器界面.

SeedProd Page Builder

首先，您需要安装并激活 SeedProd 插件.

激活后，只需转到SeedProd » Pages 以添加新的着陆页.您可以简单地从他们的许多预建模板中选择一个，或者从头开始创建自定义登录页面.

SeedProd 的最大优点是速度非常快，并且具有用于订阅者管理、电子邮件营销服务集成等的内置转换功能.

方法 5:手动创建全宽 WordPress 页面模板

如果上述方法都不适合您，则此方法是最后的手段.它要求您编辑 WordPress 主题文件.您需要对 PHP、CSS 和 HTML 有一些基本的了解.

如果您以前没有这样做过，请查看我们的指南，了解如何在 WordPress 中复制/粘贴代码.

在继续之前，我们建议您创建一个 WordPress 备份或至少一个当前主题的备份.如果出现问题，这将帮助您轻松恢复站点.

接下来，打开一个像记事本这样的纯文本编辑器，并将以下代码粘贴到一个空白文件中:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

在您的计算机上将此文件另存为 full-width.php.您可能需要将"保存类型"更改为"所有文件"以避免将其保存为.txt 文件:

Save the full-width template as a.php file

此代码仅定义模板文件的名称并要求 WordPress 获取标题模板.

接下来，您将需要代码的内容部分.使用 FTP 客户端(或 cPanel 中的 WordPress 托管文件管理器)连接到您的网站，然后转到/wp-content/themes/your-theme-folder/.

现在您需要找到文件 page.php.这是您主题的默认页面模板文件.

打开该文件并复制 get_header() 行之后的所有内容并将其粘贴到计算机上的 full-width.php 文件中.

在full-width.php文件中，找到并删除这行代码:

<?php get_sidebar(); ?>

这一行获取侧边栏并将其显示在您的主题中.删除它会阻止您的主题在使用全宽模板时显示侧边栏.

您可能会在主题中多次看到此行.如果您的主题有多个侧边栏(页脚小部件区域也称为侧边栏)，那么您将在代码中看到每个侧边栏被引用一次.决定要保留哪些侧边栏.

如果您的主题没有在页面上显示侧边栏，则您可能在文件中找不到此代码.

以下是我们的 full-width.php 代码在进行更改后的样子.根据您的主题，您的代码可能看起来略有不同.

<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>

	<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		//Start the loop.
		while ( have_posts() ) :
			the_post();

			//Include the page content template.
			get_template_part( 'template-parts/content', 'page' );

			//If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			//End of the loop.
		endwhile;
		?>

	</main><!--.site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!--.content-area -->

<?php get_footer(); ?>

接下来，使用您的 FTP 客户端将 full-width.php 文件上传到您的主题文件夹.

您现在已成功创建自定义全宽页面模板并将其上传到您的主题.下一步是使用此模板创建全宽页面.

前往您的 WordPress 管理区域并在 WordPress 块编辑器中编辑或创建一个新页面.

在右侧的"文档"窗格中，查找"页面属性"，并在必要时单击向下箭头以展开该部分.您应该会看到一个"模板"下拉菜单，您可以在其中选择新的"全宽"模板:

Select the Full Width template you created from the Template dropdown

选择该模板后，发布或更新页面.

当您查看页面时，您会看到侧边栏消失了，您的页面显示为单列.它可能还不是全宽，但您现在已准备好对其进行不同的样式设置.

您需要使用 Inspect 工具来找出您的主题用来定义内容区域的 CSS 类.

之后，您可以使用 CSS 将其宽度调整为 100%.您可以通过转到外观»来添加CSS代码.自定义并点击屏幕底部的"其他 CSS".

Adding CSS in the Theme Customizer

我们在测试站点中使用了以下 CSS 代码:

.page-template-full-width.content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width.site {
margin:0px;
}

以下是它在我们的演示站点上使用 26 主题的外观.

Full width page preview

如果您想使用手动方法并希望进行进一步的自定义，那么您还可以使用 CSS Hero 插件，该插件可让您通过点击编辑器修改 CSS 样式.

然而，对于大多数用户，我们建议使用您自己主题的全宽模板，或使用插件创建一个.

我们希望本文能帮助您了解如何在 WordPress 中轻松创建全宽页面.您可能还想查看我们关于最好的 WordPress 插件以发展您的网站的指南，以及我们对用于创建和销售课程的最佳 WordPress LMS 插件的比较.

PR(132)WordPress(893)创建(20)
♥赞3

相关文章

订阅评论
提醒
0 评论
内联反馈
查看所有评论