Was wird benötigt

Natürlich braucht man die entsprechenden Scripte und etwas CSS, welche den Upload in die Mediathek zur Verfügung stellen, denn im Gegensatz zu vielen anderen Funktionen von WordPress ist die Mediathek kein Hook in den man sich per add_action einklinken kann. Diese ist über JavaScripte gesteuert und genau diese Scripte müssen angesprochen werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * JavaScript
 */

wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-image-upload', 'jquery-upload.js', array(
    'jquery',
    'media-upload',
    'thickbox'
));
wp_enqueue_script('my-image-upload');

/**
 * CSS
 */

wp_enqueue_style('thickbox');

Damit ist alles an Scripten und CSS eingebunden, was benötigt wird. Dem geschulten Beobachter wird nun auffallen, dass hier ebenfalls ein eigenes JavaScript eingebunden wird – jquery-upload.js – auf welches ich später noch zu sprechen komme.

Das Formularfeld

Natürlich muss auch das Formularfeld entsprechend vorbereitet werden. Das nötige HTML sieht nun wie folgt aus.

1
2
<input id="upload-image" type="text" name="upload-image" value="<?php echo esc_attr(get_options('upload-image')); ?>" />
<input id="upload-image-button" type="button" value="<?php _e('Upload Image', YOUR_TEXTDOMAIN); ?>" />

Damit wäre nun auch das Formularfeld präpariert. Natürlich noch nicht funktionsfähig, denn es fehlt noch etwas. Ich sagte ja, dazu komme ich späte. Die eigene JavaScript-Datei.

And now the Magic

Um nun den Uploader in die Mediathek auch richtig ansprechen zu können, muss noch etwas JavaScript herbei, denn WordPress muss ja wissen, was genau passieren soll. Zu diesem zweck wird ein eigenes JavaScript mit in diese Routine eingebunden. In meinem Beispiel jquery-upload.js, welches WordPress intern nun als my-image-upload addressiert und behandelt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(document).ready(function() {
    /**
     * Upload.
     */

    jQuery('#upload-image-button').click(function() {
        uploadfield = '#upload-image';
        formfield = jQuery(uploadfield).attr('name');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');

        return false;
    });

    /**
     * URL in das Eingebafeld einfügen.
     */

    window.send_to_editor = function(html) {
        imgurl = jQuery('img', html).attr('src');
        jQuery(uploadfield).val(imgurl);
        tb_remove();
    }
});

Damit ist nun ein Upload in die Mediathek möglich und die URL des neuen Bildes wird in das Eingabefeld übernommen.

Kleine Anpassung

Nach dem Upload steht natürlich noch “In Artikel einfügen” auf dem Button des Mediathekfensters. Dies kann zu kleineren Verwirrungen führen, wäre doch ein “Bild nutzen” dort etwas klarer. Auch dies ist schnell gelöst. Dazu müssen lediglich zwei Zeilen ergänz werden, eine in den Anweisungen zum Einfügen der Scripte und eine im eigenen JavaScript selbst.

Folgende Zeile muss nach wp_register_script(‘my-image-upload’ ….

1
2
3
wp_localize_script('my-image-upload', 'my_localizing_upload_js', array(
    'use_this_image' => __('Use This Image', MY_TEXTDOMAIN)
));

Diese Notation sorgt dafür, dass die neue Bezeichnung des Buttons auch durch alle Übersetzungen getragen wird. Also, wer sein Plugin oder Theme in mehreren Sprachen anbietet, kann auch den Button übersetzen lassen.

Und in ds eigene JavaScript in die Funktion für den Upload muss vor tb_show(”, ‘media-upload.php …

1
tbframe_interval = setInterval(function() {jQuery('#TB_iframeContent').contents().find('.savesend .button').val(my_localizing_upload_js.use_this_image);}, 2000);

Damit wird das “In den Artikel einfügen” ersetzt durch ein “Use This Image“, welches auch noch übersetzt werden kann :-)

Viel Spaß!

Artikel weiterempfehlen
Werbung

16 Meinungen zu “WordPress: Imageupload in Plugins und Themes nutzen

  1. Vielen Dank für den Artikel!

    Wie es der Zufall will, hab ich genau sowas heute gebaut. Mein Versuch hatte allerdings ein paar Schönheitsfehler, weshalb ich es jetzt nach deiner Methode mache. Ich habe allerdings einen Fehler gefunden:

    1
    <input id="upload-image-button" type="button" value="<?php _e('Upload Image', YOUR_TEXTDOMAIN); ?/>" />

    :-)

    Nochmal danke,
    Valentin

  2. Ich habe das ganze versucht bei mir zu integrieren aber das funktioniert leider genauso wenig wie der normale Upload. Irgendwie kann ich über WP gar nichts mehr hochladen, keine Bilder kein Nichts. Auch den Editor kann ich nicht benutzen (für die Themes) und mein Host meldet sich seit ner Woche nicht bei mir :(

    Ich bin total am verzweifeln, seit ich umgezogen klappt das nicht mehr. Sonst geht alles, hast du vielleicht ne Ahnung woran das liegt du scheinst ja wp experte zu sein

  3. Hallo,

    super dass hier solche Workarounds gibt. Vielen Dank.
    Werde diesen Blog zu meinen Lesezeichen hinzufügen.

    MfG
    Marc

  4. Super Anleitung, das hat mir einiges an Zeit erspart!
    Noch eine Frage dazu: gibt es eine einfache Möglichkeit, dass immer die vollständige Größe zum einfügen vorselektiert ist?
    Soweit ich erkenne orientiert sich die Auswahl immer an dem, was man vorher “eingefügt” hat.

    VG Michael

  5. Schön,
    dass Du nochmal daraufhinweist, dass WordPress immer noch keine allgemeine Uploadfunktion hat.Die Diskussion gibt es ja schon seit ein paar Jahren.Z.B. http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/

    Leider ist Deine Lösung nicht ganz vollständig.
    Da die Originalfunktion überschrieben wurde, kann man nach Eingabe ins Formular keine Dateien mehr in den Editor laden.

    Eine Lösung dafür gibt es z.B. hier
    http://www.it-in-a-box.com/2011/03/wordpress-image-uploaders-in-admin/

    Gruß

    Norbert

    • Leider ist Deine Lösung nicht ganz vollständig.

      Doch ist sie.

      Da die Originalfunktion überschrieben wurde, kann man nach Eingabe ins Formular keine Dateien mehr in den Editor laden.

      Hier wird keine Funktion überschrieben, sondern nur an der benötigten Stelle aufgerufen. UNd das mit dem Editor, da verstehe ich gerade nicht wirklich auf was Du hinaus willst.

      Ich selbst nutze genau die hier von mir beschriebene Methode in mehreren Themes und Plugins ohne Probleme und WordPress funktioniert auch mit diesen einwandfrei und tadellos.

      • Das glaube ich, und ich wollte auch die Lösung nicht schlechtmachen :-)

        window.send_to_editor ist eine in WordPress vordefinierte Funktion, mit der Medien in den tinymce Editor an die Stelle wo der Cursor steht geladen werden können. Die wird hier umdefiniert (überschrieben).
        Man merkt es aber nicht, wenn man den Editor zum Bildladen nicht verwendet. Einer meiner Kunden hat es leider gemerkt….

        Aber wir haben ja jetzt das WordPress 3.5 mit dem neuen Media manager, und da ist dann wieder alles gaaanz anders http://www.it-in-a-box.com/2013/01/wordpress-3-5-neuer-media-uploader-in-admin/

        Gruß

        Norbert

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>