Adicionar botão de imagem personalizado com o uploader de mídia no WordPress

Last updated Out 18, 2021

Contente

Adicionar Meta Box personalizada no WordPress

Meta box nada mais é do que um bloco no post ou na página. Categorias, tags, imagem em destaque, trecho, discussão, etc. são exemplos de caixas de meta. Usando a caixa Meta, você pode adicionar informações adicionais para a postagem e a página.

Precisamos de uma metacaixa que contém o botão de upload de imagem e um campo de texto. Quando um usuário clica no botão, ele faz o upload da imagem e o URL final da imagem é definido no campo de texto.

Adicionar metacaixa é fácil e direto. Escreva o código abaixo no functions.phparquivo ou no seu plugin.

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
}

Depois de adicionar o código acima, vá para a sua postagem ou página e você verá a nova metacaixa adicionada junto com seus campos.

Personalize WordPress Media Uploader

Agora você está pronto com sua metacaixa. A próxima coisa é clicar no botão ‘Carregar imagem’, abrir o carregador de mídia e definir o URL da imagem carregada no campo de texto. Portanto, primeiro você precisa criar um arquivo js e enfileirá-lo em um ambiente WordPress.

Vamos criar um arquivo js awscript.jse enfileirá-lo da seguinte maneira:

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' );

Aqui, forneci o caminho do tema presumindo que você esteja adicionando um código inteiro ao tema. Se você estiver fazendo isso por meio do plug-in, será necessário ajustar o caminho de acordo com o seu plug-in.

Para realizar esta tarefa, peguei uma referência de Javascript Reference / wp.media e escrevi o código jQuery. No awscript.js, iremos escrever um código de uploader de mídia da seguinte maneira.

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();
    });
});

Agora vá em frente e clique no botão ‘Upload de imagem’, ele abrirá o carregador de mídia, escolha / faça upload da imagem e você deverá ver o URL da imagem adicionado no campo de texto. Por fim, salvarei este URL na tabela ‘postmeta’ com a chave ‘aw_custom_image’. Claro, você pode dar qualquer nome para a chave.

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');

O save_post é uma ação disparada sempre que uma postagem ou página é criada ou atualizada. Usando esta ação, você pode injetar seu código no sistema. Você pode ler mais sobre este gancho na documentação do WordPress.

Espero que você saiba como adicionar um uploader de mídia personalizado no WordPress. Experimente em seu plugin ou tema e deixe-me saber sua opinião na seção de comentários abaixo.

Adicionar botão de imagem personalizado com o uploader de mídia no WordPress

Adicionar Meta Box personalizada no WordPress

Personalize WordPress Media Uploader

Artigos relacionados