...
Actualités WEB et WordPress, thèmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

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

87

Récemment, je travaillais sur un plugin où nous voulions utiliser le téléchargeur multimédia par défaut de WordPress pour nos besoins. Nous avions un bouton d’image personnalisé et voulions télécharger une image via le téléchargeur de médias. WordPress a magnifiquement construit un téléchargeur de médias qui permet à un utilisateur de télécharger une nouvelle image ou d’utiliser une image existante de la médiathèque.

Il est toujours recommandé d’utiliser le téléchargeur multimédia intégré si vous recherchez une solution personnalisée pour télécharger une image dans le backend. Ce faisant, vous suivez les normes WordPress. La mise en œuvre d’un téléchargeur de médias ne prend que quelques lignes de code. Alors, sans plus de discussion, commençons par cela.

Pour ce tutoriel, j’ajouterai un bouton d’image personnalisé pour la publication et la page. En cliquant sur ce bouton, le téléchargeur de médias s’ouvrira où l’utilisateur pourra télécharger l’image. L’URL de l’image téléchargée est définie dans un champ méta personnalisé et sera enregistrée en tant que méta de publication pour la publication ou la page spécifique.

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.

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

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

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails