Ajout d’un bouton d’image personnalisé avec Media Uploader dans WordPress

Dernière mise à jour Oct 18, 2021

Teneur

Ajouter une méta-boîte personnalisée dans WordPress

La méta-boîte n’est rien d’autre qu’un bloc sur une publication ou une page. Les catégories, les balises, l’image en vedette, l’extrait, la discussion, etc. sont des exemples de boîtes méta. En utilisant la zone Meta, vous pouvez ajouter des informations supplémentaires pour le message et la page.

Nous avons besoin d’une boîte méta qui contient le bouton de téléchargement d’image et un champ de texte. Lorsqu’un utilisateur clique sur le bouton, il télécharge l’image et l’URL de l’image finale est définie dans le champ de texte.

L’ajout d’une méta-boîte est simple et direct. Écrivez le code ci-dessous dans le functions.phpfichier ou dans votre 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
}

Après avoir ajouté le code ci-dessus, accédez à votre article ou à votre page et vous devriez pouvoir voir la nouvelle boîte méta ajoutée avec leurs champs.

Personnaliser WordPress Media Uploader

Vous êtes maintenant prêt avec votre boîte méta. La prochaine chose est de cliquer sur le bouton « Télécharger l’image », d’ouvrir le téléchargeur de médias et de définir l’URL de l’image téléchargée dans le champ de texte. Donc, au début, vous devez créer un fichier js et le mettre en file d’ attente dans un environnement WordPress.

Créons un fichier js awscript.jset mettons-le en file d’ attente comme suit :

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

Ici, j’ai donné le chemin du thème en supposant que vous ajoutez un code entier dans le thème. Si vous le faites via le plugin, vous devez ajuster le chemin selon votre plugin.

Pour effectuer cette tâche, j’ai pris une référence de Javascript Reference/wp.media et écrit le code jQuery. Dans le, awscript.jsnous écrirons un code de téléchargement de média comme suit.

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

Maintenant, allez-y et cliquez sur le bouton "Télécharger l’image", cela ouvrira le téléchargeur de médias, choisissez/téléchargez l’image et vous devriez voir l’URL de l’image ajoutée dans le champ de texte. Enfin, je vais enregistrer cette URL dans la table ‘postmeta’ avec la clé ‘aw_custom_image’. Bien sûr, vous pouvez donner n’importe quel nom à la clé.

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

Le save_post est une action déclenchée chaque fois qu’un article ou une page est créé ou mis à jour. En utilisant cette action, vous pouvez injecter votre code dans le système. Vous pouvez en savoir plus sur ce crochet sur la documentation WordPress.

J’espère que vous avez appris à ajouter un téléchargeur de médias personnalisé dans WordPress. Essayez-le dans votre plugin ou votre thème et faites-moi part de vos commentaires dans la section commentaire ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net