Agregar un botón de imagen personalizado con el cargador de medios en WordPress

Recientemente, estaba trabajando en un complemento en el que queríamos usar el cargador de medios predeterminado de WordPress para nuestro requisito. Teníamos un botón de imagen personalizado y queríamos subir una imagen a través del cargador de medios. WordPress construyó un cargador de medios maravillosamente que permite al usuario cargar una nueva imagen o usar una imagen existente de la biblioteca de medios.

Siempre se recomienda utilizar el cargador de medios incorporado si está buscando una solución personalizada para cargar una imagen en el backend. Al hacerlo, está siguiendo los estándares de WordPress. Implementar un cargador de medios solo requiere unas pocas líneas de código. Entonces, sin más discusión, comencemos con eso.

Para este tutorial, agregaré un botón de imagen personalizado para la publicación y la página. Al hacer clic en este botón, se abrirá el cargador de medios donde el usuario puede cargar la imagen. La URL de la imagen cargada se establece en un metacampo personalizado y se guardará como un meta de publicación para la publicación o página específica.

Agregar Meta Box personalizado en WordPress

Meta box no es más que un bloque en una publicación o una página. Categorías, Etiquetas, Imagen destacada, Extracto, Discusión, etc. son ejemplos de metacajas. Usando el cuadro Meta puede agregar información adicional para la publicación y la página.

Necesitamos un cuadro de meta que contenga el botón de carga de imagen y un campo de texto. Cuando un usuario hace clic en el botón, cargará la imagen y la URL de la imagen final se establecerá en el campo de texto.

Agregar metabox es fácil y sencillo. Escriba el siguiente código en el functions.phparchivo o en su complemento.

function aw_custom_meta_boxes( $post_type, $post) {
    add_meta_box(
        'aw-meta-box',
        __( 'Custom Image' ),
        'render_aw_meta_box',
        array('post', 'page'), //post types here
        'normal',
        'high'
    );
}
add_action( 'add_meta_boxes', 'aw_custom_meta_boxes', 10, 2 );
 
function render_aw_meta_box($post) {
    $image = get_post_meta($post->ID, 'aw_custom_image', true);
    ?>
    <table>
        <tr>
            <td><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></td>
            <td><input type="text" name="aw_custom_image" id="aw_custom_image" value="<?php echo $image; ?>" style="width:500px;" /></td>
        </tr>
    </table>
    <?php
}

Después de agregar el código anterior, vaya a su publicación o página y debería poder ver el nuevo cuadro de meta agregado junto con sus campos.

Personalizar el cargador de medios de WordPress

Ahora está listo con su meta box. Lo siguiente es hacer clic en el botón ‘Cargar imagen’, abrir el cargador de medios y configurar la URL de la imagen cargada en el campo de texto. Entonces, primero debe crear un archivo js y ponerlo en cola en un entorno de WordPress.

Creemos un archivo js awscript.jsy colóquelo de la siguiente manera:

function aw_include_script() {
 
    if (! did_action( 'wp_enqueue_media')) {
        wp_enqueue_media();
    }
  
    wp_enqueue_script( 'awscript', get_stylesheet_directory_uri(). '/js/awscript.js', array('jquery'), null, false );
}
add_action( 'admin_enqueue_scripts', 'aw_include_script' );

Aquí, he dado la ruta del tema asumiendo que está agregando un código completo en el tema. Si lo está haciendo a través de un complemento, debe ajustar la ruta según su complemento.

Para realizar esta tarea he tomado una referencia de Javascript Reference / wp.media y escribo el código jQuery. En el awscript.js, escribiremos un código de cargador de medios de la siguiente manera.

jQuery(function($){
    $('body').on('click', '.aw_upload_image_button', function(e){
        e.preventDefault();
  
        var button = $(this),
        aw_uploader = wp.media({
            title: 'Custom image',
            library: {
                uploadedTo: wp.media.view.settings.post.id,
                type: 'image'
            },
            button: {
                text: 'Use this image'
            },
            multiple: false
        }).on('select', function() {
            var attachment = aw_uploader.state().get('selection').first().toJSON();
            $('#aw_custom_image').val(attachment.url);
        })
        .open();
    });
});

Ahora continúe y haga clic en el botón ‘Cargar imagen’, se abrirá el cargador de medios, elija / cargue la imagen y debería ver la URL de la imagen agregada en el campo de texto. Finalmente, voy a guardar esta URL en la tabla ‘postmeta’ con la clave ‘aw_custom_image’. Por supuesto, puede dar cualquier nombre a la clave.

function aw_save_postdata($post_id)
{
    if (array_key_exists('aw_custom_image', $_POST)) {
        update_post_meta(
            $post_id,
            'aw_custom_image',
            $_POST['aw_custom_image']
        );
    }
}
add_action('save_post', 'aw_save_postdata');

El save_post es una acción que se activa cada vez que se crea o actualiza una publicación o página. Con esta acción, puede inyectar su código en el sistema. Puede leer más sobre este gancho en la documentación de WordPress.

Espero que sepas cómo agregar un cargador de medios personalizado en WordPress. Pruébelo en su complemento o tema y déjeme saber lo que piensa en la sección de comentarios a continuación.

Artículos relacionados

• Integración de MailChimp con el complemento Contact Form 7
• Cómo agregar código después de la etiqueta del cuerpo en WordPress