WordPress 插件

Advanced Custom Fields代码示例

Advanced Custom Fields插件可以帮助你快速创建和管理custom fields,当你成功存储了数据后,该如何在网站前台显示它们呢?本文列举了来自ACF官方文档的代码实例,帮助你了解如何使用ACF创建内容丰富的网页。使用模版函数需要修改模版,ACF也提供了shortcode方式,不需修改模版依然能使用其数据。

获取/显示字段的值

// Get one field
$field_value = get_field( 'field_name' );

// Get  or display field of from post which has ID 10
$field_value = get_field( 'field_name', 10 );

// Display
the_field( 'field_name' );
the_field( 'field_name', 10 );

ACF里所有的字段都可以用get_field( 'field_name' )获取,不同字段获取的值差异巨大。例如,text字段返回简单的字符串,而image字段会返回一个包含该图片所有信息的数组。

ACF字段不仅可以在post / custom post type编辑页面显示,还能出现在很多其它地方,例如menu、menu item、user profile、category和tag等各种taxonomy的编辑界面。

不管出现在哪里,我们都用get_field(),但要给它传入第二个参数,告诉它我们要从哪个对象里获取字段的值。

ACF Group

$group_fields_values = get_field( 'group_name' );
/**
 * Return a array
 *  array (
	  'text_1' => 'value of group sub field',
	  'text_2' => 'value of group sub field',
	)
 */

由于group下的字段的meta_key是{group_key}_{field_key}这种格式,想直接获取group下的某个字段的值,也可以这样做:

$sub_field = get_field('group_name_text_1');

Repeater

$repeater = get_field( 'repeater' );
/**
 *  array (
	  0 => 
	  array (
	    'my_field' => 'value of a repeater sub field',
	  ),
	  1 => 
	  array (
	    'my_field' => 'value of a repeater sub field',
	  ),
	)
 */

获取User字段的值

// Format: get_field( 'field_name', user_{$user_id} );
$uservalue = get_field('text_field', 'user_1')

获取Menu的值

add_filter('wp_nav_menu_items', 'my_wp_nav_menu_items', 10, 2);

function my_wp_nav_menu_items( $items, $args ) {
	
	// get menu
	$menu = wp_get_nav_menu_object($args->menu);
	
	// modify primary only
	if( $args->theme_location == 'top' ) {
		
		// vars
		$logo = get_field('logo', $menu);
		$color = get_field('color', $menu);
		
		// prepend logo
		$html_logo = '<li class="menu-item-logo"><a href="'.home_url().'"><img src="'.$logo['url'].'" alt="'.$logo['alt'].'" /></a></li>';
		
		// append style
		$html_color = '<style type="text/css">.navigation-top{ background: '.$color.';}</style>';
		
		// append html
		$items = $html_logo . $items . $html_color;
	}
	
	// return
	return $items;
}

获取Menu Items的值

add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);

function my_wp_nav_menu_objects( $items, $args ) {
	// loop
	foreach( $items as &$item ) {
		// vars
		$icon = get_field('icon', $item);

		// append icon
		if( $icon ) {
			$item->title .= ' <i class="fa fa-'.$icon.'"></i>';
		}
	}

	return $items;
}

创建Options页面

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_page(array(
		'page_title' 	=> 'Theme General Settings',
		'menu_title'	=> 'Theme Settings',
		'menu_slug' 	=> 'theme-general-settings',
		'capability'	=> 'edit_posts',
		'redirect'	=> false
	));
	
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Theme Header Settings',
		'menu_title'	=> 'Header',
		'parent_slug'	=> 'theme-general-settings',
	));
	
	acf_add_options_sub_page(array(
		'page_title' 	=> 'Theme Footer Settings',
		'menu_title'	=> 'Footer',
		'parent_slug'	=> 'theme-general-settings',
	));
	
}

如果要将options页面放到woocommerce菜单下,parent_slug要写woocommerce

获取ACF字段的详细设置

这里说的设置是指字段设置,需要传入字段组的ID,ID指下图蓝色方框里的字符串。

$field_group = acf_get_fields( 'group_6188fea1357d9' )

返回一个数组,如下所示:

array (
  0 => array (
    'ID'                => 964,
    'key'               => 'field_6188fea972f48',
    'label'             => '一般字段',
    'name'              => 'text_field',
    'prefix'            => 'acf',
    'type'              => 'text',
    'value'             => NULL,
    'menu_order'        => 0,
    'instructions'      => '',
    'required'          => 0,
    'id'                => '',
    'class'             => '',
    'conditional_logic' => 0,
    'parent'            => 963,
    'wrapper'       => array (
      'width' => '',
      'class' => '',
      'id'    => '',
    ),
    'default_value'   => '',
    'placeholder'     => '',
    'prepend'         => '',
    'append'          => '',
    'maxlength'       => '',
    '_name'           => 'text_field',
    '_valid'          => 1,
  ),
  
  1 => array (
    'ID'                => 968,
    'key'               => 'field_6188ff3472f4c',
    'label'             => '字段组',
    'name'              => 'groupname',
    'prefix'            => 'acf',
    'type'              => 'group',
    'value'             => NULL,
    'menu_order'        => 1,
    'instructions'      => '',
    'required'          => 0,
    'id'                => '',
    'class'             => '',
    'conditional_logic' => 0,
    'parent'            => 963,
    'wrapper'       => array (
      'width' => '',
      'class' => '',
      'id'    => '',
    ),
    'layout'      => 'block',
    'sub_fields'    => array (
      0 => array (
        'ID'                => 969,
        'key'               => 'field_6188ff4a72f4d',
        'label'             => '字段1',
        'name'              => 'text_1',
        'prefix'            => 'acf',
        'type'              => 'text',
        'value'             => NULL,
        'menu_order'        => 0,
        'instructions'      => '',
        'required'          => 0,
        'id'                => '',
        'class'             => '',
        'conditional_logic' => 0,
        'parent'            => 968,
        'wrapper'       => array (
          'width' => '40',
          'class' => '',
          'id'    => '',
        ),
        'default_value'   => '',
        'placeholder'     => '',
        'prepend'         => '',
        'append'          => '',
        'maxlength'       => '',
        '_name'           => 'text_1',
        '_valid'          => 1,
      ),
    ),
    '_name'     => 'groupname',
    '_valid'    => 1,
  ),
)

保存选项时进行操作

根据get_current_screen()返回的值可以判断当前处于什么页面。

add_action( 'acf/save_post', 'update_on_save_post' );
function update_on_save_post( $post_id ){
	$screen = get_current_screen();
	if( $screen && $screen->base == 'woocommerce_page_acf-options-whatever'){
		// do your stuff...
	}
}

参考链接: ACF文档

验证字段

要想增加自定义字段验证逻辑,可以使用acf/validate_value这个filter。需要注意的是,它用ajax的方式判断,所以不能用正常方法获取页面信息,比如global $post,或者get_the_ID()等等,打印$_POST变量看一下有哪些可用信息即可。

function my_acf_validate_value($valid, $value, $field, $input_name) {

    // Bail early if value is already invalid.
    if ($valid !== true) {
        return $valid;
    }

    // 要访问可用数据,请使用$_POST变量
    $post_id   = absint($_POST['post_id']);
    $post_type = $_POST['post_type'];
    $old_value = get_post_meta($post_id, 'my_custom_meta', true);

    if ($old_value != $value) {
        //进行逻辑判断

        // 如果验证不通过,可以返回一个字符串格式的错误信息
        return __('A custom error message');
    }

    return $valid;
}

// 针对所有字段
add_filter('acf/validate_value', 'my_acf_validate_value', 10, 4);

// 针对textarea类型的字段
// add_filter('acf/validate_value/type=textarea', 'my_acf_validate_value', 10, 4);

// 针对字段名称(name,不是label)为hero_text的字段
// add_filter('acf/validate_value/name=hero_text', 'my_acf_validate_value', 10, 4);

// 针对key是field_123abcf的字段
// add_filter('acf/validate_value/key=field_123abcf', 'my_acf_validate_value', 10, 4);

自动生成标题

使用acf/save_post这个action,可以访问被保存的字段值,这样我们就能根据填写的数据来生成标题了。

add_action('acf/save_post', 'acf_auto_post_title');
function acf_auto_post_title( $post_id ){
    if ('mycpt' == get_post_type($post_id)) {
        $name = get_post_meta($post_id, 'cpt_name', true);
        $update_post = array(
            'ID'           => $post_id,
            'post_title'   => sanitize_post($name . ' #' . $post_id)
        );
        wp_update_post($update_post);
    }
}

16条评论

  1. solagirl,预祝愉快。是这样,我使用pro版的。repeater的名称为:homenew ,sub_field我使用的是post_object。我想输出post_object的标题,固定连接等;我写的是:

    <a href="”>

    字段规则是应对首页的,我想在首页输出几个指定的文章。我知道还有别的方法,关键是我还需要列出文章字段的信息,所以,麻烦您就告诉如何通过文章对象输出title就可以了。其他的我可以自己琢磨。谢谢了。

    1. 代码:
      <?php if(have_rows(‘homenew’)):while(have_rows(‘homenew’)):the_row();//外层循环
      $postinfo=get_sub_field(‘homenewpost’);setup_postdata(‘$postinfo’);//setup_postdata我是看官方文档,大概理解成格式化处理吧。?>
      <h3><a href=”<?php the_permalink();?>”><?php the_title();?></a></h3>
      <?php wp_reset_postdata();//官方文档说这个必须要endwhile;endif;?>

      补充,出现的循环,并没有列出文章的标题,而是把首页的标题列出来了。求问原因在哪里?

      1. 我没有使用官方文档的,我是自己输出对象的值可以,求问solagirl我按照官方文档的做没有成功。错在哪了?

      2. repeater field是针对一个post,而setup_postdata是用在WordPress WP_Query循环中的,理应WP_Query循环为外层,repeater field循环在内层,你的顺序正好反着。

        如果你不理解这俩循环的区别,建议使用更直观的方式,官方文档http://www.advancedcustomfields.com/resources/repeater/中Basic Loop (PHP foreach loop)这一段的代码可以参考,你直接用get_field获取repeater字段的内容,打印一下就明白这个repeater field到底存了哪些数据,是怎么存的。获取文章其它信息都用带着post id的函数,就不会出错了。比如获取文章标题,用get_the_title( $post_id )这种

  2. sola好,我用advanced custom field pro (上次你给我的pro版,再次感谢) ,在页面增加了字段然后保存页面后,内容莫名其妙的就没了,又要重新保存,请问是什么情况下会这样呢

  3. Pingback: wordpress自定义字段自定义域插件Advanced Custom Fields | whybu
  4. 博主你好,希望你能及时看到,我现在使用repeat与gallery一起,gallery是repeat的sub field,可是我前台调用只能调用到repeat,gallery不显示

  5. Hi Sola,
    我使用<i-mg src="” alt=”” />这样的方式输出自定义的图像,后台(这个插件)自定义字段(image_test)配置中”预览图大小”我选择中或者我自定义的其它几个裁剪图片尺寸,前台输出的图像始终是图片原始图,后台文章中预览图大小正常,希望得到你的帮助
    谢谢!

    1. image字段可以选返回值类型,你选择返回image object,这个包含所有尺寸图片的地址,用var_dump看一下返回值结构即明了。
      也可以参考官方文档http://www.advancedcustomfields.com/resources/field-types/image/
      看Customized display (Object)一节里的数组结构

  6. 博主好,希望请教一个问题,我设置了一个文本类型的字段用来处理链接。例如field name是post_url,内容是http://url,在php中调用<a href="”>TEXT</a>,但尝试后不成功。网页会显示到标签之前,不知道该如何修改。

    1. 评论中的代码被过滤掉了,所以你说的问题我不太明白,你是说acf调用出错吧。我用这个插件没出过问题,建议你用全新wordpress+默认主题测试。

      1. 简单的说,我定义了一个名为url的文本类型字段,内容填写的是一个完整网址,然后在PHP里调用出来作为a标签的href属性,想以此产生一个超链接(比如转载文章时,用来加原文链接),就是这个不成功,其他都成功的,实际页面的HTML会显示到a标签之前的内容。我用的就是3.6+2012主题。

        1. 文本类型下面应该有个设置控制输出html还是纯文本,选择纯文本。
          然后用var_dump()函数输出一下你的字段,看看输出的字符串到底是不是你想要的。
          看不到代码我也不知道到底什么问题,能想到的可能就是是本该传递给变量的值被直接输出了。

留言

您的电子邮箱地址不会被公开。