Einfügen einer Mediendatei in einen Beitrag mit WordPress ist dank der standardmäßigen dedizierten Schaltfläche nicht sehr kompliziert. Wenn Sie jedoch ein Plugin mithilfe von Mediendateien entwickeln, hilft diese Schaltfläche Ihren Benutzern nicht, den von Ihren Funktionen benötigten Code einzufügen.
Glücklicherweise ist es möglich, Ihre eigene Medienschaltfläche hinzuzufügen, damit Sie es richtig machen können, was Sie wollen.
In diesem Tutorial werden wir überprüfen Sowohl visuelle als auch HTML -Redakteure.
Das Hinzufügen unserer Medienschaltfläche ist der erste und einfachste Teil. Wie beim Anpassen vieler Dinge in WordPress werden wir Aktionen verwenden, um unsere Schaltfläche an der richtigen Stelle zu setzen.
Erstellen Sie zunächst eine neue Funktion in der dedizierten Datei Ihres Plugins oder Themas (z. B. Funktionen.php). Für dieses Tutorial werde ich eine Funktion namens add_my_media_button () verwenden. Haken Sie Ihre Funktion an die Aktion von Media_buttons, die, wie der Name darauf hindeutet, die auf WordPress aufgerufene Aktion, die die Medienschaltflächen anzeigt, lautet.
<span>add_action('media_buttons', 'add_my_media_button');</span>Wie Sie sich vorstellen können, müssen wir jetzt unsere Funktion ändern, um unsere Schaltfläche richtig anzuzeigen. Wir möchten, dass unsere Schaltfläche den gleichen Stil hat wie der Standard.
Medienschaltflächen sind keine echten Schaltflächen, sie sind Links mit dem Stil einer Schaltfläche und WordPress geben uns eine Klasse für diesen Stil mit dem Namen „ -Button “.
<span>function add_my_media_button() {
</span> echo <span>'<a href="#" >Add my media</a>';
</span><span>}</span>Wir geben unserer Schaltfläche eine ID. Auf diese Weise können wir es später in JavaScript abrufen.
unsere benutzerdefinierte Medienschaltfläche ist fertig: Sie hat den richtigen Stil und fast den richtigen Ort. Tatsächlich wird unsere neue Schaltfläche standardmäßig vor dem Standard platziert. Wenn wir es danach platzieren möchten, ist es möglich, indem wir ein drittes Argument an den Aufruf add_action () übergeben, um die Priorität unserer Funktion zu ändern.
In der Tat hat die Funktion, die die Standardmedienschaltfläche anzeigt, eine Priorität von 10. Die Angabe eines niedrigeren Werts für unsere Funktion platziert unsere Schaltfläche vor dem Standard. Wenn wir es danach platzieren wollen, können wir einen höheren Wert angeben.
<span>add_action('media_buttons', 'add_my_media_button');</span>Und das war's! Jetzt müssen wir unseren Knopf nützlicher machen.
Um das Medienfenster zu öffnen, werden wir JavaScript mit JQuery verwenden, das standardmäßig in WordPress enthalten ist. Zunächst erstellen wir eine JS -Datei. Ich habe mich entschieden, es Media_Button.js zu nennen, aber natürlich können Sie Ihren eigenen Namen auswählen.
Wenn Sie mit WordPress vertraut sind, sollten Sie wissen, dass das CMS uns eine ordnungsgemäße Möglichkeit gibt, die von uns benötigten JS -Dateien einzuschließen. Dazu erstellen wir eine Funktion, in der wir die WordPress -Funktion wp_enqueue_script () verwenden.
<span>function add_my_media_button() {
</span> echo <span>'<a href="#" >Add my media</a>';
</span><span>}</span>Wie Sie sehen, geben wir JQuery als Abhängigkeit an. Dank des letzten Arguments habe ich mich dafür entschieden, das Skript in die Fußzeile aufzunehmen, aber Sie können es in den Kopfzeile legen, wenn Sie es vorziehen.
Wir haben eine Funktion erstellt, um WordPress zu bitten, unser Skript nur dann einzuschließen, wenn dies erforderlich ist. Dafür werden wir eine andere Aktion verwenden: wp_enqueue_media, die ausgelöst wird, wenn WordPress alle von den Medienschaltflächen benötigten Skripte aufruft.
<span>add_action('media_buttons', 'add_my_media_button', 15);</span>Um die JQuery -Funktion $ () zu verwenden, verkapulieren wir den Inhalt unserer Datei medias_button.js in der Funktion jQuery (). Dann erstellen wir eine neue Funktion, die das Medienfenster öffnet, wenn der Benutzer auf unsere Schaltfläche klickt.
<span>function include_media_button_js_file() {
</span> <span>wp_enqueue_script('media_button', 'path/to/media_button.js', array('jquery'), '1.0', true);
</span><span>}</span>Ein Medienfenster ist eine Instanz des WP.Media -Objekts. Sein Konstruktor gibt einen Parameter zu, der ein weiteres Objekt ist, das einige Attribute für das Fenster enthält. Die open_media_window_ () -Funktion oben kann also Folgendes enthalten:
<span>add_action('wp_enqueue_media', 'include_media_button_js_file');</span>Das Titelattribut wird als Titel des Fensters angezeigt. Seien Sie vorsichtig, der Wert des Schaltflächenattributs ist ein Objekt, das ein Textattribut zum Festlegen der Etikett der Schaltfläche, auf der der Benutzer klickt, um seine Auswahl zu validieren.
Das Bibliotheksattribut wird von WordPress verwendet, um die im Fenster angezeigten Mediendateien zu filtern. In diesem Beispiel können nur die Bilder ausgewählt werden. Darüber hinaus kann der Benutzer dank des falschen Wertes für das Mehrfachattribut nicht mehr als eine Datei auswählen.
Keine dieser Attribute wird von WordPress wirklich verlangt. Wenn Sie jedoch keinen Titel angeben, wird Ihr Fenster ohne Titel. Standardmäßig ist das Mehrfachattribut auf False festgelegt und die angezeigten Mediendateien werden nicht gefiltert.
Der folgende Code geht in die oben erstellte Open_Media_Window () -Funktion.
für den Moment ist unser Fenster konstruiert, aber es wird nicht geöffnet. Um das Fenster zu öffnen, können Sie die Open () -Methode verwenden, aber vorher möchten Sie möglicherweise die Auswahl des Benutzers abrufen.
Um dies zu tun, verwenden wir ein spezielles Ereignis, das von WordPress für die Medienfenster erstellt wurde: SELECT. Binden Sie eine Funktion an dieses Ereignis an, erfordert die Verwendung der On () -Methode.
<span>add_action('media_buttons', 'add_my_media_button');</span>Wenn der Benutzer nur eine Datei auswählen kann, können Sie sie mit der First () -Methode abrufen. Dann können Sie das erhaltene Objekt in JSON konvertieren, um die gewünschten Informationen zu erhalten. Ersetzen Sie das obige Fenster. Ein Ereignis durch:
<span>function add_my_media_button() {
</span> echo <span>'<a href="#" >Add my media</a>';
</span><span>}</span>Wenn Sie wissen möchten, welche Attribute verwendet werden können, können Sie beispielsweise alle in der Konsole Ihres Browsers auflisten.
<span>add_action('media_buttons', 'add_my_media_button', 15);</span>
<span>function include_media_button_js_file() {
</span> <span>wp_enqueue_script('media_button', 'path/to/media_button.js', array('jquery'), '1.0', true);
</span><span>}</span>.
Nachdem wir die Wahl des Benutzers abgerufen haben, würden wir einen Text in den Editor einfügen. Dazu verwenden wir die WordPress -Funktion wp.media.editor.insert (), die einen Parameter zulässt: den Text, der in der aktuellen Position des Cursors einfügt.
<span>add_action('wp_enqueue_media', 'include_media_button_js_file');</span>Der Vorteil der Verwendung dieser Funktion besteht darin, dass WordPress unseren Text automatisch sowohl in visuelle als auch in HTML -Editoren einfügt.
Unser Fenster ist bereit für die Verwendung. Ein Problem bleibt jedoch bestehen: Es wird jedes Mal rekonstruiert, wenn der Benutzer die Schaltfläche trifft, damit wir dieses Verhalten ändern.
<span>jQuery(function($) {
</span> <span>$(document).ready(function(){
</span> <span>$('#insert-my-media').click(open_media_window);
</span> <span>});
</span>
<span>function open_media_window() {
</span> <span>}
</span><span>});</span>Zuerst überprüfen wir, ob das Fenster bereits erstellt wurde, und wenn nicht, erstellen wir es. Dann öffnen wir unser Fenster und beenden die Funktion open_media_window () mit der Anweisung zurück. Um das Standardverhalten des Links zu verhindern.
Beachten Sie, dass es mehr als eine Möglichkeit gibt, das oben angegebene Problem zu verhindern. Das Schema ist jedoch immer das gleiche und Sie können Ihre Lieblingsmethode leicht anpassen.
Sie wissen jetzt, wie Sie eine Medienschaltfläche hinzufügen und wie Sie sie verwenden, um einen Text in Bezug auf die Wahl des Benutzers im Editor einzulegen. Wenn Sie die oben erstellten Attribute der oben erstellten Datenvariablen aufgelistet haben, haben Sie möglicherweise festgestellt, dass WordPress uns alle Informationen über die ausgewählte Mediendatei gibt, dh Sie können alles tun, was Sie wollen.
Das obige ist der detaillierte Inhalt vonHinzufügen einer Medienschaltfläche zum WordPress -Inhaltseditor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Attributverwendung
Welche Methoden gibt es, Crawler zu verhindern?
Es kann keine Verbindung zum Internet hergestellt werden
Verwendung von Instanceof in Java
Der Unterschied zwischen PHP und JS
nvidia geforce 940mx
So verwenden Sie die Groupby-Funktion
Webstorm wurde auf chinesische Version geändert
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
