Often users ask us if it’s possible to create a custom homepage in WordPress.

用户经常问我们是否可以在WordPress中创建自定义首页。

By default, WordPress shows your blog posts on the homepage. However as a business website, you may want to create a more engaging homepage that helps users find what they need and boost your sales conversion.

默认情况下，WordPress在首页上显示您的博客文章。 但是，作为企业网站 ，您可能需要创建一个更具吸引力的主页，以帮助用户找到所需的信息并提高您的销售转化率。

In this article, we will show you how to easily create a custom homepage in WordPress. We will show multiple methods, and you can choose the one that’s easier for you.

在本文中，我们将向您展示如何轻松地在WordPress中创建自定义主页。 我们将展示多种方法，您可以选择一种更简单的方法。

什么是首页？ (What is a homepage?)

A homepage is a default introductory page or the frontpage of a website. It is the page that appears when someone enters your website’s domain name in their browser’s address bar.

主页是默认的介绍性页面或网站的首页。 当有人在浏览器的地址栏中输入您网站的域名时，该页面就会出现。

The main purpose of the homepage is to introduce users to your website or business. Ideally, it should provide users essential information about your business, so they can continue exploring other pages on your site.

主页的主要目的是向用户介绍您的网站或公司。 理想情况下，它应该向用户提供有关您的业务的基本信息，以便他们可以继续浏览您网站上的其他页面。

By default, WordPress displays your recent blog posts on the homepage. This is not good as it only shows a few of your current articles.

默认情况下，WordPress在首页上显示您最近的博客文章。 这不好，因为它只显示您当前的一些文章。

If you run a business website, then the default homepage does not tell users about your business, products or services. It also doesn’t provide users a way to contact you.

如果您经营企业网站，则默认主页不会告诉用户您的企业，产品或服务。 它还无法为用户提供与您联系的方式。

The good news is that WordPress already comes with a built-in functionality to create custom home page.

好消息是WordPress已经带有内置功能来创建自定义主页。

选择自定义页面用作WordPress中的主页 (Selecting a Custom Page to be Used as Homepage in WordPress)

WordPress allows you to easily use any page on your website as your homepage. You can simply go to Pages » Add New page inside WordPress admin area to create a new page.

WordPress使您可以轻松地将网站上的任何页面用作主页。 您只需转到WordPress管理区域内的页面»添加新页面即可创建新页面。

Let’s give this page a title ‘Home’ and publish it. You will use this page as your custom homepage.

让我们将此页面命名为“首页”并发布它。 您将使用此页面作为自定义主页。

Don’t worry about layout or design at the moment. We will show you how to design your homepage later in this article.

现在不用担心布局或设计。 本文稍后将向您展示如何设计您的主页。

Now, if you want to run a blog on your site, then you need to create a separate blog page to display your posts.

现在，如果要在您的站点上运行博客，则需要创建一个单独的博客页面来显示您的帖子。

Once again, go to Pages » Add New page and create a page titled ‘Blog’. Go ahead and publish the blank page.

再次转到页面»添加新页面，然后创建一个名为“博客”的页面。 继续并发布空白页。

After creating the pages, you need to visit Settings » Reading page in your WordPress admin. From here select ‘A static page’ option under ‘Your homepage displays’ section.

创建页面后，您需要在WordPress管理员中访问设置»阅读页面。 从此处在“您的主页显示”部分下选择“静态页面”选项。

Next, you need to select the homepage and the blog pages you created earlier.

接下来，您需要选择您先前创建的主页和博客页面。

Don’t forget to click on the ‘Save changes’ button to store your settings.

不要忘记点击“保存更改”按钮来保存您的设置。

Now that you have set up a page to be used as your custom homepage, let’s start designing the custom home page for your WordPress site.

现在您已经设置了要用作自定义主页的页面，让我们开始为WordPress网站设计自定义主页。

方法1.使用古腾堡(Gutenberg)在WordPress中创建自定义主页 (Method 1. Create a Custom Homepage in WordPress using Gutenberg)

WordPress introduced a new block-based editor called Gutenberg in December 2018. This new editor allows users to not just write content but create beautiful layouts as well.

WordPress于2018年12月推出了一种新的基于块的编辑器，称为Gutenberg 。这种新的编辑器使用户不仅可以编写内容，还可以创建漂亮的布局。

It uses blocks for each content element which enables you to organize content blocks to create a page structure that you like.

它为每个内容元素使用块，使您可以组织内容块来创建所需的页面结构。

WordPress includes blocks that can be used for design purposes like cover images, columns, tables, text and media, galleries, and more.

WordPress包含可用于设计目的的块，例如封面图像 ， 列 ，表格，文本和媒体， 画廊等。

Each block comes with its own settings, which allows you to customize its appearance to meet your design requirements.

每个模块都有其自己的设置，使您可以自定义其外观以满足设计要求。

You can extend available blocks with Gutenberg block plugins to add more blocks to your arsenal. These plugins allow you to use advanced elements like testimonials, sliders, services, and other common design features.

您可以使用古腾堡(Gutenberg)块插件扩展可用块，以向您的武器库添加更多块。 这些插件使您可以使用高级元素，例如推荐，滑块，服务和其他常见设计功能。

You can also use Gutenberg ready WordPress themes which give you more flexibility to work with blocks.

您还可以使用古腾堡就绪的WordPress主题 ，这些主题为您提供了更大的灵活性来使用块。

We recommend using Astra, it comes with Gutenberg website templates that you can install using their Astra Starter Sites plugin.

我们建议使用Astra ，它带有Gutenberg网站模板，您可以使用其Astra Starter Sites插件进行安装。

Once you import a template, you can edit it using the default WordPress editor and create a highly professional looking homepage for your website.

导入模板后，您可以使用默认的WordPress编辑器对其进行编辑，并为您的网站创建外观非常专业的首页。

方法2.使用页面构建器在WordPress中创建自定义主页 (Method 2. Create a Custom Homepage in WordPress using Page Builders)

This method is very easy and does not require any coding or design skills. For this method, you will be using a WordPress page builder plugin.

这种方法非常简单，不需要任何编码或设计技能。 对于这种方法，您将使用WordPress页面构建器插件 。

A page builder plugin allows you to easily create custom page layouts by using a simple drag and drop interface.

页面构建器插件使您可以使用简单的拖放界面轻松创建自定义页面布局。

We recommend using Beaver Builder because it is the most beginner-friendly page builder plugin on the market. It comes with dozens of custom homepage templates that you can install with a single click.

我们建议使用Beaver Builder，因为它是市场上最适合初学者的页面构建器插件。 它带有许多自定义主页模板，您可以单击以安装它们。

Once installed, you can edit the template using point and click tools. You can replace content and images with your own content, and even extend the template by adding more modules, widgets, and sections.

安装后，您可以使用指向和单击工具编辑模板。 您可以用自己的内容替换内容和图像，甚至可以通过添加更多模块，小部件和部分来扩展模板。

Beaver Builder also gives you access to Beaver Themer, which allows you to make your own custom WordPress theme without writing any code.

Beaver Builder还使您可以访问Beaver Themer ，这使您无需编写任何代码即可制作自己的自定义WordPress主题 。

For more details, see our guide on how to easily create custom WordPress layouts using Beaver Builder.

有关更多详细信息，请参见有关如何使用Beaver Builder轻松创建自定义WordPress布局的指南。

As an alternative, you can also try Elementor. It is also an immensely popular WordPress page builder plugin. It also comes with drag and drop templates and an easy to use interface.

另外，您也可以尝试Elementor 。 它也是一个非常流行的WordPress页面构建器插件。 它还带有拖放模板和易于使用的界面。

For details, see our tutorial on creating custom page layouts with Elementor.

有关详细信息，请参见有关使用Elementor创建自定义页面布局的教程。

方法3.在WordPress中手动创建自定义主页(需要编码) (Method 3. Manually Create a Custom Homepage in WordPress (Coding Required))

This method is not recommended for beginners as it requires coding. You need to be familiar with the WordPress coding practices, PHP, HTML, and CSS to use this method.

不建议初学者使用此方法，因为它需要编码。 您需要熟悉WordPress编码实践，PHP，HTML和CSS才能使用此方法。

Let’s see how this works.

让我们看看它是如何工作的。

Your WordPress theme is made up of different files. Some of these files are called templates and control the display of certain areas of your website. See our WordPress template hierarchy cheat sheet for more details.

您的WordPress主题由不同的文件组成。 其中一些文件称为模板，它们控制网站某些区域的显示。 有关更多详细信息，请参见我们的WordPress模板层次结构速查表 。

One of these templates is called front-page.php. If your theme has this template, then WordPress will automatically use it to display your custom homepage.

这些模板之一称为front-page.php。 如果您的主题具有此模板，则WordPress将自动使用它来显示您的自定义主页。

However, if your theme does not have it, then you can create one for yourself/

但是，如果您的主题没有主题，则可以自己创建一个主题/

Simply create a blank file and save it as front-page.php. After that you need to upload it to your current theme’s folder on your WordPress hosting account using FTP.

只需创建一个空白文件并将其另存为front-page.php。 之后，您需要使用FTP将其上传到WordPress托管帐户中当前主题的文件夹中。

As soon as you upload this file, WordPress will start using it to display your homepage. However, since this file is completely empty, you will see a blank white page.

一旦您上传了该文件，WordPress将开始使用它来显示您的主页。 但是，由于此文件是完全空的，因此您会看到空白的页面。

To fix this, you can start adding your HTML code to display contents of your custom homepage. An easier approach is to use the existing code and templates in your WordPress theme.

要解决此问题，您可以开始添加HTML代码以显示自定义首页的内容。 一种更简单的方法是在WordPress主题中使用现有的代码和模板。

For example, you can use the same header and footer. WordPress makes it super easy to include those templates.

例如，您可以使用相同的页眉和页脚。 WordPress使包含这些模板变得非常容易。

Here is a sample code where we removed the content and sidebars while preserving the header and navigation templates from the theme.

这是一个示例代码，我们在保留主题的标题和导航模板的同时删除了内容和侧边栏。

<?php /*
This page is used to display the static frontpage.
*/
// Fetch theme header template
get_header(); ?>
<div id="primary" <?php astra_primary_class(); ?>>
<div class="custom-homepage-container">
You custom homepage code goes here
</div>
</div><!-- #primary -->
//Fetch the theme footer template
<?php get_footer(); ?>

在WordPress中制作有效的自定义首页的提示 (Tips on Making an Effective Custom Homepage in WordPress)

Your website’s homepage is the most important page on your website. Users look at it to learn more about your business, products, and services.

您网站的主页是网站上最重要的页面。 用户可以查看它以了解有关您的业务，产品和服务的更多信息。

We recommend keeping your homepage design as simple as possible. On our own websites, we have learned that our users find simpler layouts more helpful.

我们建议您的首页设计尽可能简单。 在我们自己的网站上，我们了解到用户发现更简单的布局会更有帮助。

Try to avoid clutter, but don’t hide important information that your users would want to see on the homepage. You also need to prioritize which content appears first in your layout.

尝试避免混乱，但不要隐藏用户希望在主页上看到的重要信息。 您还需要确定哪些内容优先出现在布局中。

Write down the goals you want to achieve before making a custom homepage for your website. This exercise will help you come up with a clear design goal.

在为网站创建自定义首页之前，写下您要实现的目标。 本练习将帮助您提出一个明确的设计目标。

For most businesses and blogs, the number one goal is to convert website visitors into customers. To achieve this, you’ll need OptinMonster.

对于大多数企业和博客而言，首要目标是将网站访问者转化为客户。 为此，您需要OptinMonster 。

It is the best WordPress popup plugin and lead generation software. It helps you convert website visitors into subscribers and paying customers.

这是最好的WordPress弹出插件和销售线索生成软件。 它可以帮助您将网站访问者转换为订阅者和付费客户。

Next, you would want to track how your custom homepage is performing. For this, you need to install Google Analytics on your website. It helps you see where your users are coming from and what they do on your website.

接下来，您需要跟踪自定义首页的效果。 为此，您需要在网站上安装Google Analytics(分析) 。 它可以帮助您查看用户的来源以及他们在您网站上的工作。

You would also want to make it easier for your users to contact you. For this, you will need the WPForms plugin which is the best WordPress form plugin on the market.

您还希望使用户更轻松地与您联系。 为此，您将需要WPForms插件，这是市场上最好的WordPress表单插件 。

You can also add a click to call button your website, so people can easily call your business phone.

您还可以在您的网站上添加一个点击通话按钮 ，以便人们可以轻松拨打您的商务电话 。

Lastly, we recommend you to look around at your competitors and other popular sites in your industry/niche. We are not asking you to copy their design, but to learn from their best practices and then apply it on your own homepage layout.

最后，我们建议您环顾竞争对手/您所在行业/细分市场中的其他热门网站。 我们并不是要您复制他们的设计，而是要从他们的最佳实践中学习，然后将其应用于您自己的首页布局。

We hope this article helped you easily create a custom homepage in WordPress. You may also want to see our proven tips to increase your blog traffic.

我们希望本文能帮助您轻松地在WordPress中创建自定义首页。 您可能还希望查看我们经过验证的技巧，以增加博客流量 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-create-a-custom-homepage-in-wordpress/