Question

我有一个新的主题我正在努力，我真的需要3个图片上传选项来触发弹出媒体上传框。

我知道现在推荐使用自定义程序但是对我来说只使用它来表示样式（即颜色和字体）并且仍然有一个主题设置部分就是我所做的。

在尝试了许多解决方案之后，Rushabh Dave的解决方案here起作用，近乎完美但不完全......

我的问题是我得到弹出框，选择图像，然后我得到该图像的URL但是当我点击保存时，页面刷新但我的图像没有保存，URL消失，因此我可以＆＃ 39;把它捡到前端。

我不确定自己可能做错了什么。

在functions.php中

<?php
// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script  
wp_enqueue_media();
?>
<div>
<label for="image_url">Image</label>
<input type="text" name="image_url" id="image_url" class="regular-text" />
<input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">

</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#upload-btn').click(function(e) {
    e.preventDefault();
    var image = wp.media({ 
        title: 'Upload Image',
        // mutiple: true if you want to upload multiple files at once
        multiple: false
    }).open()
    .on('select', function(e){
        // This will return the selected image from the Media Uploader, the result is an object
        var uploaded_image = image.state().get('selection').first();
        // We convert uploaded_image to a JSON object to make accessing it easier
        // Output to the console uploaded_image
        console.log(uploaded_image);
        var image_url = uploaded_image.toJSON().url;
        // Let's assign the url value to the input field
        $('#image_url').val(image_url);
    });
});
});
</script>

在前端

<div><img src="<?php echo $options['image_url']; ?>" /></div>

Answer 1

首先，您只想在后端排队脚本。在In [442]: sklearn.__version__ Out[442]: '0.18'添加

functions.php

或者只是添加到现有的add_action( 'after_setup_theme', 'yourthemeslug_theme_setup' ); if ( ! function_exists( 'yourthemeslug_theme_setup' ) ) { /** * Sets up theme defaults and registers support for various WordPress features. * * Note that this function is hooked into the after_setup_theme hook, which * runs before the init hook. The init hook is too late for some features, such * as indicating support for post thumbnails. * * @since 1.0.0 */ function yourthemeslug_theme_setup() { add_action( 'admin_enqueue_scripts', 'yourthemeslug_backend_scripts' ); } } if ( ! function_exists( 'yourthemeslug_backend_scripts' ) ) { /** * Enqueue back end scripts and styles. * * @param string $hook Hook string to check the page, so that not all scripts are loaded * unnecessarily on every page. * @since 1.0.0 */ function yourthemeslug_backend_scripts( $hook ) { if ( 'your_subpage_slug' === $hook ) { wp_enqueue_media(); wp_enqueue_script( 'yourthemeslug_image_upload', get_template_directory_uri(). '/js/admin.js', array('jquery') ); } } }挂钩，以及挂钩到after_setup_theme的函数。

admin_enqueue_scripts函数中的your_subpage_slug必须替换为描述自定义构建子页面的字符串。查看内容的最佳方法是在if条件之前执行yourthemeslug_backend_scripts并查看字符串将是什么（在检查器中它应该在print_r($hook);标记下方。）

在你的页面中你应该有

body

<div> <label for="image_url">Image</label> <div class="image"><img src="<?php echo esc_url( $image ); ?>" /></div> <input type="text" name="image_url" id="image_url" class="regular-text" /> <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image"> </div>

的位置

$image

从数据库中获取所需的值。

因此，只需点击$image = ( isset( $options['image_url'] ) && '' !== $options['image_url'] ) ? $options['image_url'] : '';，就必须打开媒体上传器。

在我们加入的#upload-btn文件中添加

admin.js

这会触发媒体上传。但是你仍然需要保存它。

在保存选项的页面中，您需要检查是否设置了带有图片网址的输入字段，该字段是否为空，然后您可以将其保存到您的选项中（我要包含一个nonce检查安全措施）

jQuery( document ).ready(function( $) {
    "use strict";

    $(document).on('click', '#upload-btn', upload_image_button);

    function upload_image_button(e) {
        e.preventDefault();
        var $input_field = $('#image_url');
        var $image = $('.image');
        var custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Add Image',
            button: {
                text: 'Add Image'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $input_field.val(attachment.url);
            $image.html('').html('<img width="254" src="'+attachment.url+'" />');
        });
        custom_uploader.open();
    }

});

现在我不知道你是如何保存这些选项的，因为你还没有指定，但是在保存时你应该使用某种钩子。只要把它放在那里，就应该这样做。

Answer 2

     <?php
 add_action( 'after_setup_theme', 'yourthemeslug_theme_setup' );
 if ( ! function_exists( 'yourthemeslug_theme_setup' ) ) {
 /**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 *
 * @since  1.0.0
 */
 function yourthemeslug_theme_setup() {

    add_action( 'admin_enqueue_scripts', 'yourthemeslug_backend_scripts' );
 }
 }

 if ( ! function_exists( 'yourthemeslug_backend_scripts' ) ) {
 /**
 * Enqueue back end scripts and styles.
 *
 * @param  string $hook Hook string to check the page, so that not all scripts are loaded
 *                      unnecessarily on every page.
 * @since 1.0.0
 */
 function yourthemeslug_backend_scripts( $hook ) {
    if ( 'theme_settings' === $hook ) {
        wp_enqueue_media();
        wp_enqueue_script( 'yourthemeslug_image_upload', UTTER_TEMPPATH . '/js/admin.js', array('jquery') );
    }
 }
 }
 ?>
 <div>
 <label for="image_url">Image</label>
 <div class="image"><img src="<?php echo esc_url( $image ); ?>" /></div>
 <input type="text" name="image_url" id="image_url" class="regular-text" />
 <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
 </div>

 <?php
 if ( isset($_POST['image_url'] ) && '' !== $_POST['image_url'] ) {
 update_option( $_POST['image_url'], 'image_url' );
 }
 ?>

在WordPress主题设置中保存媒体上载选项中的值

2 个答案: