在WordPress中使用高级自定义字段的初学者指南

WordPress以易于使用和可扩展而闻名，这使其非常适合初学者和更高级的用户。如果您属于后一类，那么您可能需要探索并利用WordPress的所有内置功能。

One feature that will provide you more control over your content is custom fields. Using custom fields, you can add structured data to enrich your posts and pages. If you want an even easier interface with more options to add custom fields to your WordPress site, then you can use theAdvanced Custom Fields (ACF) plugin.

In this post, we’ll cover both the built-in functionality for WordPress custom fields and the popular ACF plugin. Let’s get started.

WordPress自定义字段

WordPress自定义字段可以分配给帖子或页面，以提供称为元数据的任意额外信息。元数据用密钥/值对处理，其中密钥是元数据元素的名称，值是帖子上“元数据”列表中显示的信息。

以下是WordPress自定义字段的一些示例：

• 心情：受到启发
• 目前正在阅读：我仍然兴起
• Listening To: Someone Like You
• Weather: Chilly

If you’d like to add this type of structured data to your posts and pages, then check out the process for adding custom fields in your WordPress dashboard below.

How to Use Custom Fields in WordPress

Below is how to use custom fields in WordPress for the first time. If you or another user has already used custom fields on aWordPress网站, then the process will vary slightly.

• Log in to your WordPress dashboard.
• 导航到帖子或页面。您可以创建一个新的，也可以编辑现有的新版本。
• 点击three dots button at the top of the right sidebar.

• 向下滚动并单击Preferences.

• A new window will pop up. ClickPanels.

• 为自定义字段切换按钮。这将自动重新加载页面。

• Now scroll down to the bottom of the post to the section labelled Custom Fields.

• To create a new Custom Field, fill in the text entry field titled Name. This will be the “key.”
• 现在填写标题为“值”的文本输入字段。这将是分配给密钥的值。

• 点击Add Custom Field按钮为该帖子保存此元数据。
• You can continue adding custom fields. When you’re ready, click更新.

• 如果您创建或编辑另一个帖子或页面，那么您将已经看到“自定义字段”部分。现在，名称或键字段将是一个下拉列表，其中包含先前输入的自定义字段。

While this process is not difficult, it’s not the most user-friendly or flexible. For these reasons, many users opt to use the Advanced Custom Fields plugin over the native custom fields functionality in WordPress.

Below let’s take a closer look at what thisWordPress pluginis capable of, and how to use it.

Advanced Custom Fields Plugin

Advanced Custom Fields, or ACF, is a plugin designed to enableWordPress developersto have more control over their custom field data. Thefree version允许用户快速，轻松地在WordPress仪表板上快速添加30多个字段，包括帖子，用户，分类术语，媒体，评论和自定义选项页面，并在任何主题模板文件中显示自定义字段值。

Supported field types include text (which is the only type supported natively in WordPress), range, button group, checkbox, select, true/false, color picker, date picker, time picker, link, and more. That means you have way more control over your custom fields with ACF than with WordPress’s built-in functionality.

Advanced Custom Fields Pro

Advanced Custom Fields Prois the premium version of ACF. It offers even more fields, functionality, and flexibility than the free version. Here are the pro features below:

Repeater Field

With this field, you can create a set of sub fields which can be repeated again and again.

ACF Blocks

Using this powerful PHP-based framework, you can develop custom block types for the Gutenberg Editor.

Flexible Content Field

这一领域提供了多种布局和子领域options that you can use to define, create, and manage content.

Gallery Field

With this field, you can build fully customisable image galleries.

Clone Field

使用此字段，您可以重复使用现有字段和字段组来更有效地管理字段设置。

Options Page Feature

With this feature, you can add custom admin pages to edit ACF fields.

To understand how to use the Advanced Custom Fields plugin, we’ll walk through how to create and display a set of custom fields on your WordPress posts below.

如何使用高级自定义字段

1. Create a field group.
2. Add custom fields to that group.
3. 在WordPress Post Editor中编辑字段。
4. 在网站的前端显示字段。

As an example, let’s say you run an电子商务网站and use your blog to promote popup events. With each blog post, you want to share an event’s:

• 日期
• 开始时间
• End Time
• Location
• 图像缩略图

To do so, you’ll have to add five custom fields. Let’s walk through the process below.

Step 1: Create a field group.

要开始，请单击自定义字段>添新from your admin screen. Then give this group a name in the title box.

跳过位置，您可以在其中确定哪些编辑屏幕将使用此组自定义字段。在此示例中，您想在所有帖子上显示此字段组，因此创建一个规则，该规则“显示此字段组，如果帖子类型等于帖子”。

Now skip down to Settings, where you can select the style, position, label placement, instruction placement, and more of your field group.

Step 2: Add custom fields to that group.

Now it’s time to add the custom fields that will make up this field group, and appear when editing a post.

For each of the five fields you want to add, click the+Add Field按钮并填写字段标签，名称和至少输入。

Once you complete these steps for date, start time, end time, location, and image thumbnail custom fields, then click发布. The page will automatically re-load.

步骤3：WordPress Post Editor中的编辑字段。

Now that the field group has been published and set to appear on Post edit screens, you can edit the field values by navigating toPosts>添新. In this screen, fill in a value for each custom field.

When you’re done making changes, click发布.

This information will now be stored in your database. However, it won’t appear on the front end of your site. See how the post appears if you clickPreview Changes:

Step 4: Display fields on the front-end of your site.

To display Advanced Custom Fields data on the front end of your site, you can edit your theme’s template files or use a shortcode. Editing a template file requires some technical knowledge, but it’s the most effective and scalable way to display ACF data. Using a shortcode is a simpler method, but much more manual. You’ll have to add a shortcode to every post that you want to display ACF data on the front-end.

For these reasons, we’re going to walk through the process of editing your theme’s template file to display custom fields on the front-end of your site.

Depending on the location you set for your field group and your theme, you’ll either edit the single.php or single-{$post_type}.php file, or use template parts or filters to customize the HTML of your WordPress posts so they display custom fields on the front-end.

此示例将事件字段组的位置设置为所有帖子，然后您将编辑单个.php模板并添加以下代码：



get_header（）;
the_post();


// vars
$ location = get_field（'location'）;
$thumbnail = get_field('thumbnail');

？>



Notice how it includes the_field() function to display the value of specific fields, including the date, start time, and end time. It also includes functions for displaying the location and thumbnail fields.

You can go to your Theme Editor, select Single Post, and copy and paste this code before the closing 更新文件.

However, it’s recommended that you创建孩子主题since any modifications you make directly in your theme editor will be lost the next time you update your website. Once created, you’d follow the same process of adding the code snippet above to the single.php file in your child theme’s directory.

When you’re done, go to your post and scroll to the bottom. The result will look something like this on the front end of your site:

Now you know how to add and display Advanced Custom Fields data on WordPress posts. To learn how to add and display ACF data on WordPress categories, menus, users, widgets, and other places, check outACF’s documentation.

Taking Content Editing to the Next Level

The ACF plugin provides more control over the back and front end of your WordPress site. With it, you can add custom fields virtually anywhere in your WordPress dashboard and display them virtually anywhere on the front end. This custom fields data can help enrich your posts, taxonomies, media uploads, and more.