如何以简单的方式创建 WordPress 自定义字段
WordPress 提供了允许我们发布帖子和页面的基本字段。其中一些字段包括内容编辑器、类别选项、标签和特色图片。
然而,这些字段不足以适应某些情况。假设您构建了一个图书列表网站,该网站将显示图书作者、ISBN号和出版商。您将需要一些额外的字段来输入额外的信息。
幸运的是,WordPress 现在相当广泛,它使开发人员能够创建自定义字段以满足任何网站需求。这些自定义字段可以是一般的文本输入、文本区域、下拉选项、颜色选择器、日历,甚至是图像上传器。在本教程中,我们将向您展示如何以简单的方式创建 WordPress 自定义字段。让我们开始吧。
高级自定义字段
举个真实的例子,让我们尝试构建一个图书列表网站。为了轻松创建自定义字段,我们将使用 Elliot Condon 开发的名为Advanced Custom Fields的插件。有了它,我们就不需要为创建自定义字段而触及太多代码。但是,需要在主题文件中进行一些代码级编辑才能显示我们在字段中输入的数据。
一旦我们安装了它,它就会添加一个名为Custom Fields的新侧边菜单。转到此菜单,单击添加新按钮,然后命名字段组。例如,“自定义设置”(见截图)。
点击+ 添加字段创建一个新的自定义字段,我们将字段标签命名为Author。在其下方,将Field Name简单设置为book_author
,我们将使用它来调出或显示Book Author的数据。您还可以设置Field Instruction和Placeholder Text,但这些都是可选的。
然后,我们可以像这样创建一组其他字段,如页面长度、出版商和图书语言。
接下来,我们需要分配字段组以在特定的帖子类型中显示它。您可以为其分配帖子、页面、页面模板、附件,或设置涉及多个帖子类型的规则。在下面的示例中,我想显示Book Post Type的字段,您可以使用这个方便的工具GenerateWP轻松创建自己的字段。
然后我们转到我们的 Book Post Type 编辑屏幕,并填写它。
显示数据
在继续之前,由于我们将字段分配给自定义帖子类型,我们需要创建一个新文件来显示名为的内容single-book.php
(查看此页面以供参考)。我们还将把我们的代码放在这个文件中。
the_field()
填充所有自定义字段后,我们将使用函数后跟字段名称将它们显示在前端。例如,下面的代码显示了我们在上面创建的Author Book字段中的数据。
1个
|
the_field( 'book_author' ) |
这真的很容易。此外,如果您想确保它只应在数据存在时显示,您可以用条件语句包装代码。例如:
1个
2个
3个
|
if ( ! empty (the_field( 'book_author' )) ) : the_field( 'book_author' ); endif ; |
single-book.php
在下面,您将找到我们为展示图书而放入的所有代码。
1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<div class = "entry-content" > <?php if ( has_post_thumbnail() ) { echo '<figure class="book-thumbnail">' ; the_post_thumbnail( 'book-thumbnail' ); } echo '</figure>' ; ?> <div class = "book-info" > <h4 class = "book-title" ><?php the_title() ?></h4> <p class = "book-description" ><?php the_content() ?></p> <h4 class = "book-details-title" >Book Details</h4> <div class = "book-details" > <ul> <li class = "book-author" ><span class = "label" >Author:</span> <?php the_field( 'book_author' ) ;?></li> <li class = "book-pub" ><span class = "label" >Publisher:</span> <?php the_field( 'book_publisher' ) ;?></li> <li class = "book-pages" ><span class = "label" >Length:</span> <?php the_field( 'book_pages' ) ;?></li> <li class = "book-lang" ><span class = "label" >Language:</span> <?php the_field( 'book_language' ) ;?></li> <li class = "book-pubid" ><span class = "label" >ISBN/ASIN:</span> <?php the_field( 'book_isbn_asin' ) ;?></li> </ul> </div> </div> </div> |
通过使用 CSS 进行一些样式设置,我们可以获得以下整洁而微妙的结果。
最后的想法
在本教程中,我们向您展示了使用高级自定义字段插件创建您自己的一组新文本字段并将它们轻松分配给自定义帖子类型的非常基本的示例。
除此之外,该插件还提供了许多自定义字段来增强我们的网站,包括所见即所得编辑器、文本区域、下拉列表、用户列表选项、谷歌地图等等。您可以进一步探索该插件,看看您能想出什么很酷的东西。