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

文章目录

大家好,是我揭雾
今天和大家分享 ACF Pro插件中的字段类型-【文本】

文本字段运用

主要用于扩展增强网站的文本显示,例如:

  1. 在网站中添加一个百度网盘文件下载链接
  2. 在网站底部添加一段简短的公司介绍
  3. 或者想在文章底部输出文章版权说明或者是文章的参考来源等。

你可以在任何位置上显示自定义文字的字段

文本字段调用方法

直接显示字段内容

正常页面调用
正常页面调用

 

选项页面调用
选项页面调用

 

返回字段的值

  • <?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.查看成果

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注