web-dev-qa-db-ja.com

メタボックスにアップロードボタンを追加する

画像のアップロードボタンを追加してURLを取得したいです。誰かplsは私を助けることができる、私はかなりの数日間これを試している。私はこのスレッドのコードを使用しています 必要に応じてメタボックスをさらに作成します 。

add_action( 'add_meta_boxes', 'dynamic_add_custom_box' );

/* Do something with the data entered */
add_action( 'save_post', 'dynamic_save_postdata' );

/* Adds a box to the main column on the Post and Page edit screens */
function dynamic_add_custom_box() {
    add_meta_box(
        'dynamic_sectionid',
        __( 'Client Information', 'myplugin_textdomain' ),
        'dynamic_inner_custom_box',
        'page');
}

/* Prints the box content */
function dynamic_inner_custom_box() {
    global $post;
    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'dynamicMeta_noncename' );
    ?>
    <div id="meta_inner">
    <?php

    //get the saved meta as an arry
    $ourwork = get_post_meta($post->ID,'ourwork',true);

    $c = 0;
    if ( is_array( $ourwork ) ) {
        foreach( $ourwork as  $track ) {
            if ( isset( $track['thumb'] ) || isset( $track['client-img1'] ) || isset( $track['client-img2'] ) || isset( $track['client-img3'] ) || isset( $track['client-img4'] ) || isset( $track['client-desc'] ) ) {
                printf( '<p><strong>Thumb Image</strong> &nbsp;:&nbsp;<input type="button" name="ourwork[%1$s][thumb]" value="%2$s" size="50" /><br/><br/><strong>Client Image 1</strong> : <input type="button" name="ourwork[%1$s][client-img1]" value="%3$s" size="50" /><br/><br/>
                <strong>Client Image 2</strong> : <input type="button" name="ourwork[%1$s][client-img2]" value="%4$s" size="50"/><br/><br/>
                <strong>Client Image 3</strong> : <input type="button" name="ourwork[%1$s][client-img3]" value="%5$s" size="50" /><br/><br/>
                <strong>Client Image 4</strong> : <input type="button" name="ourwork[%1$s][client-img4]" value="%6$s" size="50" />
                <br/><br/>
                <strong>Client Link &nbsp;&nbsp;&nbsp;&nbsp;1</strong> : <input type="text" name="ourwork[%1$s][client-link1]" value="%7$s" size="50" />
                <br/><br/>
                <strong>client Description</strong> :<br/><textarea id="Elm1" class="tinymce_data" name="ourwork[%1$s][client-desc]" cols="75" rows="6" >%8$s</textarea><br/>
                <span class="remove">%9$s</span></p>', $c, $track['thumb'], $track['client-img1'], $track['client-img2'] , $track['client-img3'], $track['client-img4'], $track['client-link1'], $track['client-desc'],  __( '<span class="button">Remove Section</span>' ) );
                $c = $c +1;
            }
        }
    }
    ?>
<span id="here"></span>
<span class="add"><?php _e('<span class="button">Add Section</span>'); ?></span>
<script>
    var $ =jQuery.noConflict();
    $(document).ready(function() {
        var count = <?php echo $c; ?>;
        $(".add").click(function() {
            count = count + 1;

            $('#here').append('<p><strong>Thumb Image</strong> &nbsp;:&nbsp;<input type="button" name="ourwork['+count+'][thumb]" value="" size="50"/><br/><br/><strong>Client Image 1</strong> : <input type="type="button"" name="ourwork['+count+'][client-img1]" value="" size="50"/><br/><br/><strong>Client Image 2</strong> : <input type="button" name="ourwork['+count+'][client-img2]" value="" size="50"/><br/><br/><strong>Client Image 3</strong> : <input type="type="button"" name="ourwork['+count+'][client-img3]" value="" size="50"/><br/><br/><strong>Client Image 4</strong> : <input type="type="button"" name="ourwork['+count+'][client-img4]" value="" size="50"/><br/><br/><strong>Client Link &nbsp;&nbsp;&nbsp;&nbsp;1</strong> : <input type="text" name="ourwork['+count+'][client-link1]" value="" size="50"/><br/><br/><strong>Client Description</strong> :<br/><textarea id="Elm1" name="ourwork['+count+'][client-desc]" cols="75" rows="6"></textarea><br/><span class="remove"><span class="button">Remove Section</span></span></p>' );
            return false;       
        });
        $(".remove").live('click', function() {
            $(this).parent().remove();
        });
    });
    </script>
</div><?php

}

/* When the post is saved, saves our custom data */
function dynamic_save_postdata( $post_id ) {
    // verify if this is an auto save routine. 
    // If it is our form has not been submitted, so we dont want to do anything
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
        return $post_id;

    // verify this came from the our screen and with proper authorization,
    // because save_post can be triggered at other times
    if ( !isset( $_POST['dynamicMeta_noncename'] ) )
        return;

    if ( !wp_verify_nonce( $_POST['dynamicMeta_noncename'], plugin_basename( __FILE__ ) ) )
        return;

    // OK, we're authenticated: we need to find and save the data

    $ourwork = $_POST['ourwork'];

    update_post_meta($post_id,'ourwork',$ourwork);
}
imagesmetaboxuploads
4
Azad Rana

メタボックスとやり取りするための優れたフレームワークがあり（かなり文書化されています）、画像/ファイルのアップロードを含む複数のメタボックスオプションをサポートしています。 Githubにあります： カスタムメタボックスとフィールド（CMB） 。 CMBを使用するのであれば、これはアップロードフィールドを実装するための1つの方法になります。

init.phpファイルで次のコードを使用して、ファイルupload metaboxを登録し、CMB functions.phpへの呼び出しを追加する必要があります。

function be_sample_metaboxes( $meta_boxes ) {
    $prefix = '_cmb_'; // Prefix for all fields
    $meta_boxes['test_metabox'] = array(
        'id' => 'test_metabox',
        'title' => 'Test Metabox',
        'pages' => array('post'), // post type (e.g post, post etc.)
        'context' => 'normal',
        'priority' => 'high',
        'show_names' => true, // Show field names on the left
        'fields' => array(
            array(
                'name' => __( 'Test Image', 'cmb' ),
                'desc' => __( 'Upload an image or enter a URL.', 'cmb' ),
                'id'   => $prefix . 'test_image',
                'type' => 'file',
            ),
        ),
    );

    return $meta_boxes;
}
add_filter( 'cmb_meta_boxes', 'be_sample_metaboxes' );

// Initialize the metabox class
add_action( 'init', 'be_initialize_cmb_meta_boxes', 9999 );
function be_initialize_cmb_meta_boxes() {
    if ( !class_exists( 'cmb_Meta_Box' ) ) {
        require_once( './metabox/init.php' );
    }
}

2番目の関数の行require_once( './metabox/init.php' );は、CMB Metaboxのファイルをテーマディレクトリ内のmetaboxというフォルダーに配置したと想定しています。それからあなたのテンプレート（例えばsingle.php）でこのオプションを呼び出すためにあなたは次の関数を使うことができます

$file = get_post_meta( $post->ID, '_cmb_test_image', true );
1
MBL

これは、メタボックスにアップロードボタンを作成する方法です。

ファイル：template_dir/functions.php

次の行を追加します。

 wp_enqueue_script（ 'custom-js'、get_template_directory_uri（）。 '/ js/custom-js.js'）; 
 
 //メタボックスの追加
 function add_custom_meta_box（）{
 add_meta_box（
 'custom_meta_box'、// $ id 
 'Custom Meta Box'、// $ title 
 'show_custom_meta_box'、//$ callback 
 'post'、// $ page 
 'normal'、// $ context 
 'high'）; // $ priority 
} 
 add_action（ 'add_meta_boxes'、 'add_custom_meta_box'）; 
 
 //フィールド配列
 $ prefix = 'custom_'; 
 $ custom_meta_fields = array（
 array（
 'name' => 'Image'、
 'desc' => 'フィールドの説明'、 
 'id' => $ prefix.'image '、
' type '=>' image '
）
）; 
 
 
 //コールバック
 function show_custom_meta_box（）{
 global $ custom_meta_fields、$ post; 
 //確認にノンスを使用
 echo ''; 
 
 //フィールドテーブルを開始し、ループ
 echo ''; 
 foreach（$ custom_meta_fields as $ field）{
 //この投稿に存在する場合、このフィールドの値を取得します
 $ meta = get_post_meta（$ post-> ID、$ field ['id']、true）; 
 // 
 echo '
'。$ field ['label']。 'でテーブル行を開始します
 '; 
 switch（$ field ['type']）{
 //ここにケース項目が表示されます
 //画像
 case 'image'：
 $ image = get_template_directory_uri（）。 '/ images/image.png'; 
 echo ''。$ image。 ''; 
 if（$ meta）{$ image = wp_get_attachment_image_src（$ meta、 'medium'）; $ image = $ image [0]; }                 
                            エコー    ' 
 
 
 
画像の削除
 '。$ field [' desc ']。' '; 
 break; 
} //スイッチの終了
 echo ''; 
} // foreach 
 echo '';を終了します//テーブルを終了
} 
 
 //データを保存
 function save_custom_meta（$ post_id）{
 global $ custom_meta_fields; 
 
 //ナンスを検証
 if（！wp_verify_nonce（$ _ POST ['custom_meta_box_nonce']、basename（__ FILE__）））
 return $ post_id; 
 //自動保存を確認
 if（defined（ 'DOING_AUTOSAVE'）&& DOING_AUTOSAVE）
 return $ post_id; 
 //アクセス許可を確認
 if（ 'page' == $ _POST ['post_type']）{
 if（！current_user_can（ 'edit_page'、$ post_id））
 return $ post_id; 
} elseif（！current_user_can（ 'edit_post'、$ post_id））{
 return $ post_id; 
} 
 
 //フィールドをループし、データを保存します
 foreach（$ custom_meta_fields as $ field）{
 $ old = get_post_meta（$ post_id、$ field ['id']、true）; 
 $ new = $ _POST [$ field ['id']]; 
 if（$ new && $ new！= $ old）{
 update_post_meta（$ post_id、$ field ['id']、$ new）; 
} elseif（ '' == $ new && $ old）{
 delete_post_meta（$ post_id、$ field ['id']、$ old）; 
} 
} // foreachを終了
} 
 add_action（ 'save_post'、 'save_custom_meta'）;

ファイル：template_dir/js/custom-js.js

 jQuery（function（jQuery）{
 
 jQuery（ '。custom_upload_image_button'）。click（function（）{
 formfield = jQuery（this）.siblings（ '.custom_upload_image'）; 
 preview = jQuery（this）.siblings（ '。custom_preview_image'）; 
 tb_show（ ''、 'media-upload.php？type = image＆TB_iframe = true'） ; 
 window.send_to_editor = function（html）{
 imgurl = jQuery（ 'img'、html）.attr（ 'src'）; 
 classes = jQuery（ 'img' 、html）.attr（ 'class'）; 
 id = classes.replace（/(.*？）wp-image- /、 ''）; 
 formfield.val（imgurl）; //画像のURLを取得してフィールドにコピーします
 preview.attr（ 'src'、imgurl）; 
 tb_remove（）; 
} 
 return false; 
}）; 
 
 jQuery（ '。custom_clear_image_button'）。click（function（）{
 var defaultImage = j Query（this）.parent（）。siblings（ '。custom_default_image'）。text（）; 
 jQuery（this）.parent（）。siblings（ '。custom_upload_image'）。val（ ''）; 
 jQuery（this）.parent（）。siblings（ '。custom_preview_image'）。attr（ 'src'、defaultImage）; 
 falseを返します。 
}）; 
 
}）;



フィールドの種類を追加する場合は、 で再学習できます。再利用可能なカスタムメタボックスパート1：イントロと基本フィールド

1
eduardogoncalves