WordPress ACF Pro插件教程-文本字段 【WordPress主题开发教程】

 

 

返回字段的值

• <?php get_field( 'you_name', 'option' ); ?>
• <?php get_field( 'you_name'); ?>

你看到有的字段名称后面跟了一个option，这个是调用选项页面字段的方法。

演示例子

1.使用选项页面(主题设置页)来创建及修改网站底部的公司介绍
2.使用页面设置配合文本字段，创建一个联系方式页

教程开始

给网站底部添加简短的公司介绍

1.创建自定义选项页面

需要创建一个主题设置的页面来放置所创建的字段，在当前主题根目录下的functions.php文件的第一个
<?php之后添加：

//添加主题设置
add_action( 'acf/init', 'jiewu_acf_op_init' );
function jiewu_acf_op_init() {
	if ( function_exists( 'acf_add_options_sub_page' ) ) {
		$parent = acf_add_options_page( array(
			'page_title'      => __( '主题设置' ),
			'menu_title'      => __( '主题设置' ),
			'menu_slug'       => 'jiewu',
			'redirect'        => false,
			'updated_message' => __( "保存成功" ),
			'update_button'   => __( '保存' ),
			'icon_url'        => 'dashicons-superhero',
		) );
	}
}

此时在网站后台的左侧菜单中会出现一个名为 主题设置 的菜单项。

2.接下来创建字段组

1.新建字段组名为:网站底部设置
字段类型选择【文本】，字段标签输入：底部公司介绍，字段名称填写 footer-text，默认值是创建字段后，默认为字段填充的文本，我们可以选择跳过。
2.在验证（Validation）选项卡里，

1. 是否为必填项，跳过
2. 是否限制字符长短，需要的话可以设置下文本长度。
3. 3.在提示（Presentation）选项卡里：

1. 说明，这里可以填写一段文字后，则在文本框附近出现一段提示文字，这里我填写：建议20-30字
2. 占位符文本：在输入框内部显示，主要做引导使用，这里我填写：请输入公司简短的介绍。
3. 前置：在输入框内部显示，入图所示，我们不需要，跳过。
4. 追加：与上面的意思相同，只不过是在输入框之后显示。

包装属性：

1. 宽度，则是设置后台输入框在的显示宽度，如果你需要两个输入框为一行，你可以把宽度修改为50%。50%*2就是100%，也就是为一行显示。
2. Class和id，则是给前台显示的输入框添加名称

来在显示规则中，找到选项页面等于 主题设置设置后保存字段组即可。

3.填写字段

进入主题设置中，我们看到刚才创建的字段。可以在输入框填写文字完成后，点击保存。

4.调用字段

在当前主题的根目录下找到footer.php
在适当的位置中填入调用代码：

<?php
// 判断字段是否有值，有的话就输出，没有则不显示
if ( get_field( 'footer-site-text', 'option') ) { ?>
  <?php the_field( 'footer-site-text', 'option' ); ?>
<?php }; ?>

你看到在名称后面跟了一个option，这个是调用选项页面字段的方法。
这里做了判断，如果你喜欢整洁的代码，也可以直接使用以下代码进行调用：

 

5.查看成果

刷新首页，可以看到页面底部我们成功创建并调用了公司介绍。

例子2：创建一个联系页面

1.创建页面和字段

1.进入后台选择页面，标题填写联系我们，并将固定连接别名修改为：contact
2.进入字段组，1.新建字段组名为:联系我们，字段类型选择默认的文本。
在字段标签输入你想要的联系字段：

• 公司地址
• 联系电话
• Facebook地址
• 邮箱地址（这里可以严谨些，可以把字段类型改为电子邮件）
• 自定义表单短代码

来在显示规则中，找到页面等于 联系我们设置后保存字段组即可。

2.填写字段

进入联系我们页面中，在输入框填写内容，完成后点击保存。

3.调用页面中的字段

在当前主题的根目录中创建文件：page-contact.php
page-contact.php这里需要和固定连接的别名一致。
在适当的位置中填入调用代码：

<?php get_header(); ?>

<?php
// 联系电话
if ( get_field( 'site-mobile') ) { ?>
  联系电话：<?php the_field( 'site-mobile'); ?>
<?php }; ?>


<?php
// 其他字段..
if ( get_field( 'you_name') ) { ?>
  <?php the_field( 'you_name'); ?>
<?php }; ?>


<?php get_footer(); ?>

你看到在名称后面取消了option，这个是调用非选项页面字段的方法。
这里做了判断，如果你喜欢整洁的代码，也可以直接使用以下代码进行调用：

<?php get_header(); ?>

联系电话：<?php the_field( 'site-mobile'); ?>
其他字段：<?php the_field( 'you_name'); ?>

<?php get_footer(); ?>

 

4.查看成果