让作者通过按下按钮向Metabox添加字段

时间：2015-04-09 作者：Bram Vanroy

我为作者添加了一个自定义元数据库，他们可以在其中填写指向源的url，然后我可以在模板中使用该url。

在我的functions.php

<?php
/* Add metaboxes (see below) */
function add_custom_metaboxes(){
    add_meta_box(\'source_post_metabox\', \'Link to bron (optional)\', \'output_source_metabox\', \'post\');
}
add_action(\'add_meta_boxes\', \'add_custom_metaboxes\');

/* Save values of custom metaboxes on save */
function save_custom_metabox($post_id){

    if(!isset($_POST[\'source_post_metabox_nonce\'])) :
        return;
    endif;

    if(!wp_verify_nonce( $_POST[\'source_post_metabox_nonce\'], \'source_post_metabox\')) :
        return;
    endif;

    if(defined(\'DOING_AUTOSAVE\') && DOING_AUTOSAVE) :
        return;
    endif;

    if(!current_user_can(\'edit_post\', $post_id)) :
        return;
    endif;

    if ( isset( $_POST[\'source_post\'] ) ) {
        $data = sanitize_text_field( $_POST[\'source_post\'] );
        update_post_meta( $post_id, \'_post_source\', $data );
    }

}
add_action(\'save_post\', \'save_custom_metabox\');

function output_source_metabox($post){
    wp_nonce_field(\'source_post_metabox\', \'source_post_metabox_nonce\');
    $post_source = $post->_post_source;

    echo \'<label for="source_post">\';
    echo \'<input type="text" id="source_post" name="source_post" value="\'.$post_source.\'" style="width: 80%;max-width: 720px;">\';
    echo \' Source of your post</label>\';
    echo \'<p>Try to be as specific as possible. <br> E.g. <em>http://tweakers.net/nieuws/101372/ing-belgie-wil-betalingsgedrag-van-klanten-meer-gebruiken-voor-dienstverlening.html</em></p>\';
}

?>
但是，我想添加添加多个源的选项。我想了想，最人性化的方法似乎是添加一个按钮，将输入字段添加到metabox中。类似这样：http://jsfiddle.net/BramVanroy/23n6s717/

counter = 0;
$(".add-field").click(function() {
    counter++;
    $("#source_post").after(\'<input type="text" id="source_post_\'+counter+\'" name="source_post_\'+counter+\'" value="" style="width: 80%;max-width: 720px;">\');
});
然而，我不知道如何将这些新输入字段“链接”到后端。如何让Wordpress知道有多个字段需要记帐和保存？我如何才能输出所有这些数据？

1 个回复
最合适的回答,由SO网友:websupporter 整理而成

我把所有东西都打包好了。考虑使用wp_enqueue_script() 使用脚本。使用此代码，您将把所有URL保存为一个数组。查看我如何使用get_post_meta() 检索保存的URL。

function save_custom_metabox($post_id){
    if(!isset($_POST[\'source_post_metabox_nonce\'])) :
        return;
    endif;

    if(!wp_verify_nonce( $_POST[\'source_post_metabox_nonce\'], \'source_post_metabox\')) :
        return;
    endif;

    if(defined(\'DOING_AUTOSAVE\') && DOING_AUTOSAVE) :
        return;
    endif;

    if(!current_user_can(\'edit_post\', $post_id))
        return;


    if ( isset( $_POST[\'source_post\'] ) ) {
        foreach( $_POST[\'source_post\'] as $key => $val )
            $_POST[\'source_post\'][ $key ] = sanitize_text_field( $val );
        update_post_meta( $post_id, \'_post_source\', $_POST[\'source_post\'] );
    }

}
add_action(\'save_post\', \'save_custom_metabox\');

function output_source_metabox($post){
    wp_nonce_field(\'source_post_metabox\', \'source_post_metabox_nonce\');
    $post_sources = get_post_meta( $post->ID, \'_post_source\', true );
    if( is_array( $post_sources ) )
        foreach( $post_sources as $post_source )
            echo \'<input type="text" id="source_post" name="source_post[]" value="\'.$post_source.\'" style="width: 80%;max-width: 720px;"><br />\';
    else
        echo \'<input type="text" id="source_post" name="source_post[]" value="" style="width: 80%;max-width: 720px;"><br />\';
    echo \'<button class="add-field">+</button>\';
    echo \'<p>Try to be as specific as possible. <br> E.g. <em>http://tweakers.net/nieuws/101372/ing-belgie-wil-betalingsgedrag-van-klanten-meer-gebruiken-voor-dienstverlening.html</em></p>\';
    echo \'<script>counter = 0;
jQuery(".add-field").click(function( event ) {
    event.preventDefault();
    counter++;
    jQuery("#source_post").after(\\\'<input type="text" id="source_post_\\\'+counter+\\\'" name="source_post[]" value="" style="width: 80%;max-width: 720px;">\\\');
});</script>\';
}
模板文件中的用法您可以在模板文件中输出这些URL，如下所示：

<?php
//We expect $post_sources to be an array
$post_sources = get_post_meta( get_the_ID(), \'_post_source\', true );
if( ! empty( $post_sources ) && count( $post_sources ) > 0 ):
    //Output all sources as a list if sources exist
    ?>
    <ul><?php
    foreach( $post_sources as $post_source ):
    ?>
        <li><?php echo $post_source; ?></li>
    <?php
    endforeach;
    ?>
    </ul>
<?php endif;


if( isset( $post_sources[ 0 ] ) ):
    //Output only a single source, in this case the first one
    ?>
    <p><?php echo $post_sources[ 0 ]; ?></p>
    <?php
endif;
?>

结束
标签： customization   custom-field   metabox   小码农  

相关推荐

基于Metabox选择在主页上显示自定义帖子

我正在尝试根据所选内容向我的主页显示帖子。我的意思是，在后端，我有一个自定义帖子，其中有一个标记为Assign to Home（分配给主页）的元框，下拉列表中有一个Yes（是）或No（否）选项。我试图做的是，当自定义帖子选择Yes（是）时，它将显示在主页上。当选择显示“否”时，将不会显示。下面的代码是我试图用来调用我的帖子的代码。帖子类型和元键都是正确的，但当我尝试显示帖子时，会得到一个数组。主页 <?php function posts_draft($meta_values) {