元框中的上载按钮未打开库

时间:2017-05-06 作者:Sonia

首先,感谢您的帮助。

我创建了一个自定义模板,使用“Page\\u Fiche\\u Metier”在页面中添加了两个元框。php的模板。一个元框用于上传图像。但是上传按钮并没有打开媒体库,尽管我已经添加了jQuery脚本。

Here is the code for the meta-boxes.php

    <?php

function prfx_custom_meta(){
  global $post;
    if ( \'page_fiche_metier.php\' == get_post_meta( $post->ID, \'_wp_page_template\', true ) ) {
    add_meta_box( \'prfx_meta\', __( \'Vidéo Présentation Bas de Page\', \'prfx-textdomain\' ), \'prfx_meta_callback\', \'page\' );
  }
}
add_action( \'add_meta_boxes\', \'prfx_custom_meta\' );


function prfx_meta_callback( $post ) {
    wp_nonce_field( basename( __FILE__ ), \'prfx_nonce\' );
    $prfx_stored_meta = get_post_meta( $post->ID );
    ?>

    <p>
        <label for="meta-text" class="prfx-row-title"><?php _e( \'Titre\', \'prfx-textdomain\' )?></label>
        <input type="text" name="meta-text" id="meta-text" value="<?php if ( isset ( $prfx_stored_meta[\'meta-text\'] ) ) echo $prfx_stored_meta[\'meta-text\'][0]; ?>" />
    </p>


      <p>
        <label for="meta-url" class="prfx-row-title"><?php _e( \'URL\', \'prfx-textdomain\' )?></label>
        <input type="text" name="meta-url" id="meta-url" value="<?php if ( isset ( $prfx_stored_meta[\'meta-url\'] ) ) echo $prfx_stored_meta[\'meta-url\'][0]; ?>" />
    </p>

    <p>
        <label for="meta-image" class="prfx-row-title"><?php _e( \'Example File Upload\', \'prfx-textdomain\' )?></label>
        <input type="text" name="meta-image" id="meta-image" value="<?php if ( isset ( $prfx_stored_meta[\'meta-image\'] ) ) echo $prfx_stored_meta[
        \'meta-image\'][0]; ?>" />
        <input type="button" id="meta-image-button" class="button" value="<?php _e( \'Choisir un fichier\', \'prfx-textdomain\' )?>" />
    </p>

    <?php
}


function prfx_meta_save( $post_id ) {

    // Checks save status
    $is_autosave = wp_is_post_autosave( $post_id );
    $is_revision = wp_is_post_revision( $post_id );
    $is_valid_nonce = ( isset( $_POST[ \'prfx_nonce\' ] ) && wp_verify_nonce( $_POST[ \'prfx_nonce\' ], basename( __FILE__ ) ) ) ? \'true\' : \'false\';

    // Exits script depending on save status
    if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
        return;
    }


    if( isset( $_POST[ \'meta-text\' ] ) ) {
        update_post_meta( $post_id, \'meta-text\', sanitize_text_field( $_POST[ \'meta-text\' ] ) );
    }



    if( isset( $_POST[ \'meta-url\' ] ) ) {
        update_post_meta( $post_id, \'meta-url\', sanitize_text_field( $_POST[ \'meta-url\' ] ) );
    }

    if( isset( $_POST[ \'meta-image\' ] ) ) {
    update_post_meta( $post_id, \'meta-image\', $_POST[ \'meta-image\' ] );
    }

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


function prfx_image_enqueue() {
    global $typenow;
    if( $typenow == \'post\' ) {
        wp_enqueue_media();

        // Registers and enqueues the required javascript.
        wp_register_script( \'meta-box-image\', plugin_dir_url( __FILE__ ) . \'meta-box-image.js\', array( \'jquery\' ) );
        wp_localize_script( \'meta-box-image\', \'meta_image\',
            array(
                \'title\' => __( \'Choose or Upload an Image\', \'prfx-textdomain\' ),
                \'button\' => __( \'Use this image\', \'prfx-textdomain\' ),
            )
        );
        wp_enqueue_script( \'meta-box-image\' );
    }
}
    add_action( \'admin_enqueue_scripts\', \'prfx_image_enqueue\' );
js的代码:

/*
 * Attaches the image uploader to the input field
 */
jQuery(document).ready(function($){

    // Instantiates the variable that holds the media library frame.
    var meta_image_frame;

    // Runs when the image button is clicked.
    $(\'#meta-image-button\').click(function(e){

        // Prevents the default action from occuring.
        e.preventDefault();

        // If the frame already exists, re-open it.
        if ( meta_image_frame ) {
            meta_image_frame.open();
            return;
        }

        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
            title: meta_image.title,
            button: { text:  meta_image.button },
            library: { type: \'image\' }
        });

        // Runs when an image is selected.
        meta_image_frame.on(\'select\', function(){

            // Grabs the attachment selection and creates a JSON representation of the model.
            var media_attachment = meta_image_frame.state().get(\'selection\').first().toJSON();

            // Sends the attachment URL to our custom image input field.
            $(\'#meta-image\').val(media_attachment.url);
        });

        // Opens the media library frame.
        meta_image_frame.open();
    });
});

2 个回复
SO网友:Dave Romsey

您提到已经为页面添加了元框:

我创建了一个自定义模板,使用“Page\\u Fiche\\u Metier”在页面中添加了两个元框。php的模板。

然而,在prfx_image_enqueue(), 仅当post类型为时,代码才会运行post. 正在更改prfx_image_enqueue() 以便检查page post类型将修复此问题。

function prfx_image_enqueue() {
    global $typenow;
    if ( $typenow == \'page\' ) {
        wp_enqueue_media();

        // Registers and enqueues the required javascript.
        wp_register_script( \'meta-box-image\', plugin_dir_url( __FILE__ ) . \'meta-box-image.js\', array( \'jquery\' ) );
        wp_localize_script( \'meta-box-image\', \'meta_image\',
                array(
                        \'title\' => __( \'Choose or Upload an Image\', \'prfx-textdomain\' ),
                        \'button\' => __( \'Use this image\', \'prfx-textdomain\' ),
                )
        );
        wp_enqueue_script( \'meta-box-image\' );
    }
}
add_action( \'admin_enqueue_scripts\', \'prfx_image_enqueue\' );

SO网友:Sonia

感谢您的回复。我发现了问题。路径“plugin_dir_url(FILE ) . \'元框图像。js“”不是正确的。我刚换到正确的目录!最好

结束

相关推荐

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

我为作者添加了一个自定义元数据库,他们可以在其中填写指向源的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\', \'pos