如何轻松创建WordPress自定义字段

WordPress提供了必不可少的字段,使我们能够发布帖子和页面。 其中一些字段包括内容编辑器,类别选项,标签特色图片

但是,这些字段不足以容纳某些情况。 假设您建立了一个图书清单网站,该网站将显示图书作者, ISBN号和出版商。 您将需要一些额外的字段来输入额外的信息

幸运的是,WordPress现在已经非常广泛,它使开发人员能够创建自定义字段来满足任何网站需求 。 这些自定义字段可以是常规文本输入,文本区域,下拉选项,颜色选择器,日历,甚至是图像上载器。 在本教程中,我们向您展示如何轻松创建WordPress自定义字段 。 让我们开始吧。

高级自定义字段

为了给您一个真实的例子,让我们尝试建立一个书刊网站。 为了轻松创建我们的自定义字段,我们将使用Elliot Condon的名为Advanced Custom Fields的插件。 有了它,我们就无需为创建自定义字段而过多地触摸代码 。 但是,需要对主题文件进行一些代码级编辑才能显示我们输入到字段中的数据。

安装后,它将添加一个名为Custom Fields的新侧菜单。 转到此菜单,单击添加新按钮,然后命名字段组。 例如,“自定义设置”(请参见快照)。

单击+添加字段以创建新的自定义字段,我们将该字段标签命名为Author 。 在它下面,将字段名称设置为book_author ,我们将使用它来调出或显示Book Author的数据。 您也可以设置“ 字段指令 ”和“ 占位符文本”,但是这些是可选的。

然后,我们可以像在“页面长度”,“发布者”和“书本语言”中一样创建一组其他字段。

接下来,我们需要分配字段组以在特定的“帖子类型”中显示它。 您可以为其分配“帖子”,“页面”,“页面模板”,“附件”,或设置涉及多个“帖子类型”的规则。 在以下示例中,我想显示“ 书帖类型”的字段,您可以使用此便捷工具GenerateWP轻松地自己创建这些字段。

然后我们转到“书帖类型”编辑屏幕,并将其填满。

显示数据

在继续之前,由于我们将字段分配给“自定义帖子类型”,因此我们需要创建一个新文件来显示名为single-book.php的内容(请参阅此页面以供参考 )。 我们还将代码存储在该文件中。

填充完所有自定义字段后,我们将通过使用the_field()函数以及其后的字段名称在前端显示它们。 例如,下面的代码显示了我们在上面创建的“ 作者书”字段中的数据。

the_field('book_author')

真的很容易。 此外,如果要确保仅在存在数据时才显示它,则可以使用条件语句包装代码。 例如:

if( !empty(the_field('book_author')) ) : 
	the_field('book_author');
endif;

在下面,您将找到我们放入single-book.php以显示我们的书的所有代码。

<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进行一些样式设置,我们可以实现以下整洁而微妙的结果。

最终思想

在本教程中,我们向您展示了使用高级自定义字段插件创建自己的一组新文本字段并将其轻松分配给自定义帖子类型的基本示例。

除此之外,此插件提供了许多自定义字段来增强我们的网站,包括所见即所得编辑器,TextArea,Dropdown,用户列表选项,Google Maps等。 您可以进一步探索该插件,然后看看可以想到什么。


翻译自: https://www.hongkiat.com/blog/wordpress-custom-fields/

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值