Hinzufügen einer benutzerdefinierten Bildschaltfläche mit Media Uploader in WordPress

Last updated 18. Oktober 2021

Inhalt

Benutzerdefinierte Metabox in WordPress hinzufügen Add

Kürzlich habe ich an einem Plugin gearbeitet, bei dem wir den Standard-Medien-Uploader von WordPress für unsere Anforderung verwenden wollten. Wir hatten eine benutzerdefinierte Bildschaltfläche und wollten ein Bild über den Medien-Uploader hochladen. WordPress hat einen schönen Medien-Uploader erstellt, der es einem Benutzer ermöglicht, ein neues Bild hochzuladen oder ein vorhandenes Bild aus der Medienbibliothek zu verwenden.

Es wird immer empfohlen, den integrierten Medien-Uploader zu verwenden, wenn Sie nach einer benutzerdefinierten Lösung suchen, um ein Bild im Backend hochzuladen. Dabei folgst du den WordPress-Standards. Die Implementierung eines Medien-Uploaders erfordert nur wenige Codezeilen. Lassen Sie uns also ohne weitere Diskussion damit beginnen.

Für dieses Tutorial füge ich eine benutzerdefinierte Bildschaltfläche für den Beitrag und die Seite hinzu. Wenn Sie auf diese Schaltfläche klicken, wird der Medien-Uploader geöffnet, in dem der Benutzer das Bild hochladen kann. Die hochgeladene Bild-URL wird in einem benutzerdefinierten Metafeld festgelegt und als Beitrags-Meta für den jeweiligen Beitrag oder die Seite gespeichert.

Benutzerdefinierte Metabox in WordPress hinzufügen Add

Metabox ist nichts anderes als ein Block auf einem Beitrag oder einer Seite. Kategorien, Tags, Featured Image, Excerpt, Discussion, etc. sind Beispiele für Metaboxen. Über die Meta-Box können Sie zusätzliche Informationen für den Beitrag und die Seite hinzufügen.

Wir benötigen eine Metabox, die die Schaltfläche zum Hochladen des Bildes und ein Textfeld enthält. Wenn ein Benutzer auf die Schaltfläche klickt, lädt er das Bild hoch und die endgültige Bild-URL wird im Textfeld festgelegt.

Das Hinzufügen einer Metabox ist einfach und unkompliziert. Schreiben Sie den folgenden Code in die functions.phpDatei oder in Ihr 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
}

Nachdem Sie den obigen Code hinzugefügt haben, gehen Sie zu Ihrem Beitrag oder Ihrer Seite und Sie sollten die neue Meta-Box zusammen mit ihren Feldern sehen können.

WordPress Media Uploader anpassen

Sie sind jetzt mit Ihrer Meta-Box fertig. Als nächstes klicken Sie auf die Schaltfläche ‘Bild hochladen’, öffnen den Medien-Uploader und geben die hochgeladene Bild-URL in das Textfeld ein. Zuerst müssen Sie also eine js-Datei erstellen und in eine WordPress-Umgebung einreihen.

Lassen Sie uns eine js-Datei erstellen awscript.jsund sie wie folgt in die Warteschlange einreihen:

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

Hier habe ich den Theme-Pfad angegeben, vorausgesetzt, Sie fügen dem Theme einen ganzen Code hinzu. Wenn Sie dies über ein Plugin tun, müssen Sie den Pfad gemäß Ihrem Plugin anpassen.

Um diese Aufgabe auszuführen, habe ich eine Referenz von Javascript Reference/wp.media genommen und den jQuery-Code geschrieben. In der werden awscript.jswir einen Medien-Uploader-Code wie folgt schreiben.

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

Fahren Sie nun fort und klicken Sie auf die Schaltfläche "Bild hochladen". Dadurch wird der Medien-Uploader geöffnet, das Bild ausgewählt / hochgeladen und Sie sollten die Bild-URL im Textfeld hinzugefügt sehen. Abschließend speichere ich diese URL in der ‘postmeta’-Tabelle mit dem Schlüssel ‘aw_custom_image’. Natürlich können Sie dem Schlüssel einen beliebigen Namen geben.

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

Der save_post ist eine Aktion, die immer dann ausgelöst wird, wenn ein Beitrag oder eine Seite erstellt oder aktualisiert wird. Mit dieser Aktion können Sie Ihren Code in das System einschleusen. Sie können mehr über diesen Hook in der WordPress-Dokumentation lesen.

Ich hoffe, Sie haben sich mit dem Hinzufügen eines benutzerdefinierten Medien-Uploaders in WordPress vertraut gemacht. Probieren Sie es in Ihrem Plugin oder Theme aus und teilen Sie mir Ihre Meinung im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net