将测试过的代码示例添加到@DaveRomsey已经很好的答案中
可以为元框使用Rhyzz可重复字段。事实上,不久前我正在为此构建一个小的测试插件!我想得到一个简单的可重复的所见即所得字段。由于此字段类型有一些限制,因此将其替换为普通的textarea元素。
因此,以下代码未经过现场测试,不应按原样使用,但应能正常工作。
首先,我们必须将JQuery可排序字段、Rhyzz可重复字段和我们自己的JS文件排队到init。
/**
* Enqueue our styles and scripts
*/
function prfx_enqueue_scripts() {
// enqueue JQuery sortable
wp_enqueue_script( \'jquery-ui-sortable\', array( \'jquery\' ) );
// enqueue Rhyzz Repeatable-fields
wp_enqueue_script( \'prfx-repeatable-fields-js\', plugins_url(\'/inc/repeatable-fields/repeatable-fields.js\', __FILE__), array( \'jquery\' ) );
// enqueue init JS
wp_enqueue_script( \'prfx-init-js\', plugins_url(\'/js/scripts.js\', __FILE__) );
}
add_action( \'admin_enqueue_scripts\', \'prfx_enqueue_scripts\', 99 );
现在,我们创建一个新的元框,仅以页面帖子类型为例。
/**
* Create custom metabox
*/
function prfx_add_meta_boxes() {
add_meta_box(
\'prfx_repeatable-fields\',
\'prfx_Repeatable Fields\',
\'prfx_callback\', // see callback function below
\'page\', // post-type
\'normal\',
\'default\'
);
}
add_action(\'admin_init\', \'prfx_add_meta_boxes\', 1);
现在我们可以创建回调函数了。在此函数中,您将看到Rhyzz可重复字段模板的HTML表。
我无法使用占位符{{row-count-placeholder}}
, 因此,我最终只是使用PHP来增加行数。
/**
* Callback function of our fields
*/
function prfx_callback() {
global $post;
// check our fields
$repeatable_fields = get_post_meta($post->ID, \'an-input-field\', true);
// create a nonce for the field
wp_nonce_field( \'prfx_repeatable_meta_box_nonce\', \'prfx_repeatable_meta_box_nonce\' ); ?>
<div class="repeat">
<table class="wrapper" width="100%">
<thead>
<tr>
<td width="100%" colspan="4"><span class="add button">Add Editor</span><hr></td>
</tr>
</thead>
<tbody class="container">
<?php if ($repeatable_fields) {
$i = 0;
foreach ($repeatable_fields as $field) {
++$i; ?>
<tr class="row">
<td width="100%" class="td">
<textarea rows="3" id="custom_editor_<?php echo $i; ?>" name="an-input-field[]" class="custom-editor-box"><?php echo $field; ?></textarea>
<p>
<hr>
<span class="move button">Move</span>
<span class="remove button">Remove</span>
</p>
</td>
</tr>
<?php }
} ?>
<!-- template row, if "Add" button is clicked, this template will show -->
<tr class="template row">
<td width="100%">
<textarea rows="3" id="custom_editor_0" name="an-input-field[]" class="custom-editor-box"></textarea>
<p>
<hr>
<span class="move button">Move</span>
<span class="remove button">Remove</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<?php }
最后,但并非最不重要的是,我们还需要一个save函数来保存可重复的字段。
/**
* Save our metafields
*/
function prfx_repeatable_meta_box_save($post_id) {
if ( ! isset( $_POST[\'prfx_repeatable_meta_box_nonce\'] ) ||
! wp_verify_nonce( $_POST[\'prfx_repeatable_meta_box_nonce\'], \'prfx_repeatable_meta_box_nonce\' ) )
return;
if (defined(\'DOING_AUTOSAVE\') && DOING_AUTOSAVE)
return;
if (!current_user_can(\'edit_post\', $post_id))
return;
if ( isset( $_POST[\'an-input-field\'] ) ) {
$contents = $_POST[\'an-input-field\'];
update_post_meta( $post_id, \'an-input-field\', $contents );
}
}
add_action(\'save_post\', \'prfx_repeatable_meta_box_save\');
这是需要的PHP代码,现在我们只需要填写
scripts.js
文件如下:
jQuery(document).ready(function($){
$(\'.repeat\').each(function() {
$(this).repeatable_fields({
wrapper: \'.wrapper\',
container: \'.container\',
row: \'.row\',
add: \'.add\',
remove: \'.remove\',
move: \'.move\',
template: \'.template\',
is_sortable: true,
});
});
});
此示例使用普通textarea元素。
如果您想在所见即所得/编辑器字段中使用此技术,请注意:由于TinyMCE使用iframe,这更为复杂。例如,您需要侦听JQuery sortable以在可排序开始时删除编辑器,然后在可排序停止时重新添加编辑器。还有更多的问题随之而来(我去过那里)。