WordPress超级自定义字段插件Advanced Custom Fields

Advanced Custom Fields 是一款非常强大的自定义字段插件,允许你自己添加多种形式的自定义字段类型,比如 Image、Checkbox、File、Text、Select、True / False、Link、Textarea 等等,可以集成为一个或多个面板,支持导出字段为 xml 或php代码,还可以集成到主题或插件里。

Advanced Custom Fields is the perfect solution for any wordpress website which needs more flexible data like other Content Management Systems.

  • Visually create your Fields
  • Select from multiple input types (text, textarea, wysiwyg, image, file, page link, post object, relationship, select, checkbox, radio buttons, date picker, true / false, repeater, flexible content, gallery and more to come!)
  • Assign your fields to multiple edit pages (via custom location rules)
  • Easily load data through a simple and friendly API
  • Uses the native WordPress custom post type for ease of use and fast processing
  • Uses the native WordPress metadata for ease of use and fast processing
Field Types
  • Tab (Group fields into tabs)
  • Text (type text, api returns text)
  • Text Area (type text, api returns text with <br /> tags)
  • Number (type number, api returns integer)
  • Email (type email, api returns text)
  • Password (type password, api returns text)
  • WYSIWYG (a wordpress wysiwyg editor, api returns html)
  • Image (upload an image, api returns the url)
  • File (upload a file, api returns the url)
  • Select (drop down list of choices, api returns chosen item)
  • Checkbox (tickbox list of choices, api returns array of choices)
  • Radio Buttons ( radio button list of choices, api returns chosen item)
  • True / False (tick box with message, api returns true or false)
  • Page Link (select 1 or more page, post or custom post types, api returns the selected url)
  • Post Object (select 1 or more page, post or custom post types, api returns the selected post objects)
  • Relationship (search, select and order post objects with a tidy interface, api returns the selected post objects)
  • Taxonomy (select taxonomy terms with options to load, display and save, api returns the selected term objects)
  • User (select 1 or more WP users, api returns the selected user objects)
  • Date Picker (jquery date picker, options for format, api returns string)
  • Color Picker (Farbtastic!)
  • Repeater (ability to create repeatable blocks of fields!)
  • Flexible Content (ability to create flexible blocks of fields!)
  • Gallery (Add, edit and order multiple images in 1 simple field)
  • Custom (Create your own field type!)

该插件需要基础的PHP代码编辑能力,你需要修改主题面板文件来显示字段。

下面倡萌将做一个简单的测试演示。

1.在后台插件安装界面搜索 Advanced Custom Fields 即可现在安装,或者下载 Advanced Custom Fields

2.启用插件后,你就可以在左边菜单看到“字段”,进入后点击“新建”,就出现类似下面的界面。

advanced-custom-fields screenshot 1

点击“添加字段”,填写和选择相关信息,需要注意的是“字段名称”必须是英文、数字、短横线、下划线组成,不能有空格。比如倡萌添加了“test_text”和 “test_img”两个字段,分别为 文本 和 图像 类型。

显示“位置”为 文章类型 下的 “post”,也就是在文章编辑界面添加这个自定义字段组。

然后“选项”的“样式”设置为“标准MetaBox”,保存发布。

3.新建一篇文章,就可以在内容编辑器下方看到如下界面,就是倡萌刚才添加的字段(图中已经选择了图片)

 

4.重点就是如何调用这两个字段的值。看的懂英文的就自己查看下官方的教程 http://www.advancedcustomfields.com/resources/

下面只简单介绍下 the_field() 和 get_field() 函数。前者是直接输出字段值,后者是获取字段值以供其他函数调用。

比如,我们直接输出刚才倡萌添加的文本字段 test_text,可以使用下面两种方式打印:

<?php   //直接打印输出字段的值
the_field('test_text');   //使用 echo 打印输出
echo get_field('test_text');   ?>

综合下,倡萌要在文章底部输出刚才添加的 test_text 和 test_img 这两个字段,可以编辑主题的 single.php 文件,找到 the_content();  在下方添加:

<?php
if (get_field('test_text')) {
	echo '<p>输出文本字段:'.get_field('test_text').'</p>';
}   if (get_field('test_img')) {
	echo '<p>输出图像字段:<img src="'.get_field('test_img').'" /></p>';
}
?>

查看刚才的文章,就可以看到输出结果如下:

 

  • Creating the Advanced Custom Fields

  • advanced-custom-fields screenshot 2

    Adding the Custom Fields to a page and hiding the default meta boxes

  • advanced-custom-fields screenshot 3

    The Page edit screen after creating the Advanced Custom Fields

  • advanced-custom-fields screenshot 4

    Simple and intuitive API. Read the documentation at: http://www.advancedcustomfields.com/resources/

  • 安装:

    1. Upload 'advanced-custom-fields' to the '/wp-content/plugins/' directory
    2. Activate the plugin through the 'Plugins' menu in WordPress
    3. Click on the new menu itme "Custom Fields" and create your first Custom Field Group!
    4. Your custom field group will now appear on the page / post / template you specified in the field group's location rules!
    5. Read the documentation to display your data:

    发表评论