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.

Key Takeaways

• Hinzufügen einer Medienschaltfl?che zum WordPress -Inhaltseditor beinhaltet das Erstellen einer neuen Funktion in Ihrer Plugin- oder Themendatei, das Anschlie?en Ihrer Funktion an die Aktion media_buttons und ?nderungen Ihrer Funktion, um Ihre Schaltfl?che richtig anzuzeigen.
• Um das Medienfenster zu ?ffnen, wenn der Benutzer auf die Schaltfl?che klickt, wird JavaScript mit JQuery, das standardm??ig in WordPress enthalten ist, verwendet. Dies beinhaltet das Erstellen einer JS -Datei, einschlie?lich dieser in Ihrer WordPress -Funktion und das Erstellen des Fensters.
• Die Auswahl des Benutzers kann mit dem von WordPress für die Medienfenster erstellten Ereignis "Ausw?hlen" abgerufen werden. Abh?ngig davon, ob Sie Multiple -Choice zulassen, unterscheidet sich die Verwendung der Variablen, die die Auswahl speichert.
• Die Medienschaltfl?che kann optimiert werden, indem sichergestellt wird, dass sie nicht jedes Mal rekonstruiert, wenn der Benutzer die Taste trifft. Dies kann erreicht werden, indem überprüft wird, ob das Fenster bereits erstellt wurde, und wenn nicht, erstellen Sie es.

fügen Sie eine Medienschaltfl?che hinzu

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.

?ffnen Sie das Medienfenster

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.

Fügen Sie die JavaScript -Datei

hinzu

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>

Konstruieren Sie das Fenster

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.

Verwenden Sie das Medienfenster

Abrufen Sie die Auswahl des Benutzers

ab

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>

Die Auswahl des Benutzers wird jetzt in der variablen Auswahl gespeichert. Abh?ngig davon, ob Sie Multiple -Choice zulassen oder nicht, ist die Verwendung dieser Variablen unterschiedlich.

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>

Dieses JSON -Objekt enth?lt alles, was Sie über die ausgew?hlte Datei ben?tigen. Beispielsweise k?nnen Sie mit dem ID -Attribut auf die ID der Datei zugreifen, w?hrend die URL der Datei über das URL -Attribut zug?nglich ist.

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>

Wenn der Benutzer mehrere Dateien ausw?hlen kann, k?nnen Sie die Auswahl in ein Array konvertieren. Anschlie?end k?nnen Sie die Daten jeder Datei mit der Tojson () -Methode genau wie im ersten Fall abrufen. Ersetzen Sie das obige Fenster. Ein Ereignis durch:

<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>

Das Dateien -Array ist sortiert: Der 0 -Eintrag enth?lt die erste vom Benutzer ausgew?hlte Datei, der 1 -Eintrag enth?lt die zweite Datei usw.

.

Text in den Editor

einfügen

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.

Optimierung

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.

Abschlie?end

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.

h?ufig gestellte Fragen (FAQs) zum Hinzufügen einer Medienschaltfl?che zum Content -Editor

Warum funktioniert meine Schaltfl?che ?Medien hinzufügen“ nicht in WordPress? Der h?ufigste Grund ist ein Plugin -Konflikt. Einige Plugins k?nnen die Funktionalit?t der Schaltfl?che ?Medien hinzufügen“ beeintr?chtigen. Um dies zu beheben, k?nnen Sie alle Ihre Plugins deaktivieren und sie dann einzeln reaktivieren, um das problematische Plugin zu identifizieren. Ein weiterer Grund k?nnte veraltet sein, dass WordPress- oder Themenversionen veraltet sein k?nnen. Stellen Sie sicher, dass die neuesten Versionen installiert sind. Wenn das Problem bestehen bleibt, kann dies an einem JavaScript- oder JQuery -Problem zurückzuführen sein. In diesem Fall müssen Sie m?glicherweise Hilfe von einem professionellen Entwickler suchen. WordPress ist ein einfacher Prozess. Sie k?nnen dies tun, indem Sie die Funktion "add_action" in der functions.php -Datei Ihres Themas verwenden. Mit dieser Funktion k?nnen Sie dem Inhaltseditor eine neue Schaltfl?che hinzufügen. Sie k?nnen dann die Funktion "wp_enqueue_media" verwenden, um die erforderlichen Skripte und Stile für den Medien -Uploader zu laden. Schlie?lich k?nnen Sie das Objekt "WP.Media" verwenden, um den Medien -Uploader zu ?ffnen, wenn die Schaltfl?che klickt. Passen Sie die Medienschaltfl?che im Content -Editor an. Mit verschiedenen WordPress -Funktionen und Haken k?nnen Sie den Text, Stil und die Funktionalit?t der Schaltfl?che ?ndern. Beispielsweise k?nnen Sie den Filter "media_buttons_context" verwenden, um die Position der Schaltfl?che im Editor zu ?ndern. Sie k?nnen auch das Objekt "WP.Media" verwenden, um das Erscheinungs- und Verhalten des Medien -Uploaders anzupassen. Sie k?nnen die Schaltfl?che ?Medien hinzufügen“ in Ihrem Content -Editor nicht sehen, dies kann auf eine Einschr?nkung der Benutzerrolle zurückzuführen sein. Mit WordPress k?nnen Sie steuern, was verschiedene Benutzerrollen auf Ihrer Website tun k?nnen. Wenn Ihre Benutzerrolle nicht über die Funktion "upload_files" verfügt, k?nnen Sie die Schaltfl?che "Medien hinzufügen" nicht sehen. Sie k?nnen dies ?ndern, indem Sie die Funktionen Ihrer Benutzerrolle mithilfe eines Plugins wie Benutzerrolleneditors ?ndern. Mit Codierung k?nnen Sie mehrere L?sungen ausprobieren, um die Schaltfl?che ?Medien hinzufügen“ nicht zu reparieren. Versuchen Sie zun?chst, Ihren Browser -Cache und Cookies zu beseitigen. Wenn das nicht funktioniert, deaktivieren Sie alle Ihre Plugins und reaktivieren Sie sie nacheinander, um das problematische Plugin zu identifizieren. Sie k?nnen auch zu einem Standard-WordPress-Thema wechseln, um festzustellen, ob das Problem mit Themen bezogen ist. Wenn keine dieser L?sungen funktioniert, sollten Sie Hilfe von einem professionellen Entwickler suchen oder sich an WordPress -Unterstützung wenden.

Was sind die Alternativen zur Schaltfl?che "Medien hinzufügen" in WordPress? Eine Option besteht darin, das Plugin "Aus dem Server hinzufügen" zu verwenden, mit dem Sie Dateien direkt von Ihrem Server hochladen k?nnen. Eine andere Option ist die Verwendung des Plugins "Drag & Drop -Featured Image", mit dem Sie Bilder in Ihre Beitr?ge und Seiten ziehen k?nnen. Sie k?nnen auch das Plugin "Medien von FTP" zum Hochladen von Dateien über FTP verwenden. Medienschaltfl?che zum Content -Editor in anderen CMS -Plattformen. Der Prozess kann je nach Plattform variieren, beinhaltet jedoch im Allgemeinen die API oder integrierte Funktionen der Plattform, um dem Inhaltseditor eine neue Taste hinzuzufügen. Sie k?nnen dann JavaScript oder JQuery verwenden, um einen Medien -Uploader zu ?ffnen, wenn die Schaltfl?che klickt. Content -Editor mit der Funktion 'add_action' in der Datei Funktionen Ihres Themas in den Funktionen Ihres Themas. Jeder Funktion "Add_Action" fügt dem Inhaltseditor eine neue Schaltfl?che hinzu. Sie k?nnen dann die Funktion "wp_enqueue_media" und das Objekt "WP.Media" verwenden, um die erforderlichen Skripte und Stile für jeden Medien -Uploader zu laden? Editor? Mit WordPress k?nnen Sie steuern, was verschiedene Benutzerrollen auf Ihrer Website tun k?nnen. Wenn Sie die Schaltfl?che ?Medien hinzufügen“ auf bestimmte Benutzerrollen beschr?nken m?chten, k?nnen Sie dies tun, indem Sie die Funktionen der Benutzerrollen mithilfe eines Plugins wie Benutzerrolleneditor ?ndern. Die Schaltfl?che ?Medien hinzufügen“? Der h?ufigste Grund ist eine Dateigr??e oder ein Typ. WordPress hat die Gr??e und Art der Dateien, die Sie hochladen k?nnen. Wenn Ihre Datei diese Grenzen überschreitet, wird in Ihrem Beitrag oder Ihrer Seite nicht angezeigt. Sie k?nnen diese Grenzwerte ?ndern, indem Sie die Php.ini -Datei Ihres Servers ?ndern oder ein Plugin wie die maximale Hochladendateigr??e erh?hen. Ein weiterer Grund k?nnte ein Plugin -Konflikt sein. Einige Plugins k?nnen die Funktionalit?t des Medien -Uploaders beeintr?chtigen. Um dies zu beheben, k?nnen Sie alle Ihre Plugins deaktivieren und sie dann einzeln reaktivieren, um das problematische Plugin zu identifizieren.

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!