Verwenden der WordPress Theme Customizer Media Controls

Detaillierte Erläuterung des WordPress -Themas Customizer Media Control: Neu WP_Customize_Media_Control Klasse

Aktuelle WordPress -Updates haben seine API geändert. Einige Funktionen und Klassen werden hinzugefügt, andere sind veraltet. In diesem Artikel werden Themen Customizer Media Controls beschrieben. In früheren Versionen waren diese Kontrollen verfügbar, jedoch nur in der WP_Customize_Upload_Control -Klasse. Jetzt haben wir eine neue Klasse entdeckt, in der Medien namens WP_Customize_Media_Control verwaltet wurden.

Erstens werde ich erklären, wie Sie diese neue Klasse verwenden, um Medienkontrollen im Themen -Customizer zu verwalten. Wir werden dann ein Beispiel für Betonklassen einführen, das WP_Customize_Media_Control erweitert, um die Kontrolle von Schnittbildern zu ermöglichen.

Schlüsselpunkte:

• WordPress Theme Customizer Media Control wurde aktualisiert, um neue Funktionen und Klassen zu enthalten, einschließlich neuer WP_Customize_Media_Control -Klassen, die ein besseres Medienmanagement ermöglichen.
• WP_Customize_Media_Control kann verwendet werden, um dem Benutzer eine Audiodatei auszuwählen, auf die auf allen Seiten zugegriffen werden kann. Diese Steuerung kann zur functions.php -Datei des Themas oder zu einem neuen Plug-In hinzugefügt werden.
• WP_Customize_Media_Control kann erweitert werden, um weitere Funktionen hinzuzufügen, z. WP_Customize_Cropped_Image_Control
Das neue Steuerelement macht den Themen -Customizer vielseitiger, sodass Entwickler ihre eigenen Medienkontrollen hinzufügen und den nützlichsten Wert abrufen: Medien -ID. Diese Basisklasse kann auf spezifischere Steuerelemente erweitert werden.

Neue Basisklasse für die Verwaltung von Medienkontrollen

Warum neue Klassen einführen?

Vor der Version 4.3 hat uns WordPress

eine Klasse zur Verfügung gestellt, die die Uploads von Mediendateien im Thema Customizer verwaltet. Diese Klasse speichert jedoch nicht die hochgeladene Medien -ID, sondern nur die URL. Da ID die häufigere Möglichkeit ist, Informationen über Mediendateien abzurufen, wurde beschlossen, eine neue Klasse WP_Customize_Upload_Control bereitzustellen. WP_Customize_Media_Control

Wenn Sie es gewohnt sind,

zu verwenden, können Sie es trotzdem ohne Probleme verwenden, da es jetzt die WP_Customize_Upload_Control -Klasse erweitert und so die Kompatibilität gewährleistet. Das Aktualisieren Ihres Codes und die Verwendung von WP_Customize_Media_Control ist jedoch definitiv eine bessere Idee. WP_Customize_Media_Control

So verwenden Sie diese Medienkontrolle

Diese neue Medienkontrolle wird auf die gleiche Weise wie sein Vorgänger verwendet, mit Ausnahme der gespeicherten Werte. Da es sich nicht mehr um eine URL handelt, kann es nicht auf die gleiche Weise aufgeräumt werden.

Um zu verstehen, wie diese Kontrolle verwendet wird, werden wir ein bestimmtes Beispiel überprüfen. Wir werden sehen, wie Benutzer eine Audiodatei auswählen können, die Besucher auf allen Seiten hören können. Sie können Code in eine functions.php -Datei des Themas oder in ein neues Plug-In schreiben. Beide sind akzeptabel und beide Optionen haben ihre eigenen Vorteile.

Beachten Sie, dass ich nicht alle verfügbaren Optionen für die Funktionen beschreiben werde, die wir hier anrufen werden, da die API des Themas Customizer nicht im Mittelpunkt dieses Artikels liegt.

Grundnutzung

Erstens beginnen wir mit einer WordPress -Funktion, die von WordPress aufgerufen wird, wenn der Benutzer den Themen -Customizer anzeigen möchte. Diese Funktion fügt diesem Customizer unsere benutzerdefinierten Elemente hinzu. Um WordPress darüber zu informieren, dass wir unsere Funktion zur richtigen Zeit aufrufen sollen, verwenden wir die customize_register -Aktion.

<code class="language-php">function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');</code>

Der Parameter

(hier $wp_customize genannt) ist ein Objekt, das den Themenpassungsanpassungen darstellt. Es enthält alle Methoden, die Sie zum Hinzufügen von Einstellungen benötigen.

Da es keinen Standardabschnitt gibt, der wirklich zum Hinzufügen unseres benutzerdefinierten Sounds geeignet ist, werden wir unseren eigenen Abschnitt, einfach "Sound", hinzufügen.

<code class="language-php">$wp_customize->add_section('sound', array(
    'title' => 'Sound',
    'description' => 'Add a sound to your website',
    'capability' => 'edit_theme_options'
));</code>

Wie erwartet erstellt diese Methode einen neuen Abschnitt namens "Sound". Wenn der Benutzer es öffnet, werden die Anweisungen oben angezeigt. Aufgrund der dritten Option kann dieser Abschnitt nur von Benutzern angezeigt werden, die die Themenoptionen bereits bearbeiten können. Beachten Sie schließlich den ersten Parameter vor der Array -Option: Es definiert die ID des Abschnitts, die wir wiederverwenden müssen, wenn wir in diesem Abschnitt eine Steuerung hinzufügen möchten.

Wenn Sie jetzt den Themen -Customizer öffnen, werden Sie diesen Abschnitt nicht sehen. Dies ist normal: WordPress zeigt den leeren Teil nicht an. Um ihn zu sehen, müssen wir ihn mit mindestens einer Steuerung füllen.

Themenpassungs -API unterteilt die Steuerung in zwei Teile: eine UI -Steuerung, mit der der Benutzer die richtigen Daten auswählen oder eingeben kann, und eine Einstellung, die den aktuellen Wert abruft und den neuen Wert speichert. Behandeln Sie Einstellungen als Schnittstelle zwischen der UI -Steuerung und der Datenbank.

Wir müssen Einstellungen erstellen, bevor wir das Steuerelement erstellen.

<code class="language-php">$wp_customize->add_setting('music', array(
    'type' => 'theme_mod',
    'capability' => 'edit_theme_options',
    'sanitize_callback' => 'absint'
));</code>

Wir geben "Musik" als ID an, die wir festgelegt haben. Es ist eine Themenänderung, wie in der ersten Option gezeigt. Die Option für die Fähigkeit ist dieselbe wie die add_section() -Methode. Schließlich geben wir absint() als Reinigungsrückruffunktion an. Diese WordPress -Funktion ist eine Abkürzung zu abs(intval()), um sicherzustellen, dass der Wert eine positive Ganzzahl ist. Wie wir oben gesehen haben, speichert WP_Customize_Media_Control eine ID, sodass es genau die Funktion ist, mit der wir die Werte bereinigen möchten.

Wir sind jetzt bereit, UI -Steuerelemente hinzuzufügen, die Benutzer sehen können.

<code class="language-php">$wp_customize->add_control(new WP_Customize_Media_Control($wp_customize, 'music', array(
    'section' => 'sound',
    'label' => 'Music',
    'mime_type' => 'audio'
)));</code>

Um das Objekt WP_Customize_Media_Control zu erstellen, sind drei Parameter erforderlich: Die aktuelle Anpassungsinstanz, die entsprechende Set -ID (wir haben gerade oben erstellt) und ein Optionsarray.

Die Option

Abschnitt wird verwendet, um den Teil anzugeben, den wir die Steuerung platzieren möchten. Wir verwenden hier die Abschnitte, die wir speziell für diesen Zweck erstellt haben. Dann geben wir das Etikett des Feldes an. Sie können jeden gewünschten Wert hier platzieren.

Schließlich bieten wir den Benutzern eine Möglichkeit, Mediendateien auszuwählen. Da wir möchten, dass sie nur Audiodateien auswählen, geben wir den Audio als den gewünschten MIME -Typ an. Auf diese Weise ermöglicht WordPress nicht, dass andere Arten von Dateien ausgewählt werden.

geht es darum, die Kontrolle zu erstellen. Jetzt können Sie den Themen -Customizer öffnen: Sie sollten unsere Abschnitte und unsere Steuerelemente sehen.

Mehr Optionen

Beachten Sie, dass das Array von Optionen, die wir als dritter Parameter des WP_Customize_Media_Control -Konstruktors angeben, mehr Optionen akzeptieren kann.

Zusätzlich zu den Tags können Sie über die Option description weitere Informationen zum Steuerelement anzeigen. Durch die Bereitstellung einer nicht leeren Zeichenfolge für die Option description können Sie beispielsweise Anweisungen unter dem Etikett anzeigen und beschreiben, wo sie angezeigt wird.

Sie können seine Priorität über die Option priority festlegen. Diese Nummer definiert die Reihenfolge, in der Objekte angezeigt werden müssen. Standardmäßig wird die Priorität auf 10 gesetzt und Objekte werden in der Reihenfolge angezeigt, in der sie erstellt werden. Aber Sie können es ändern. Wenn Sie beispielsweise zwei Objekte erstellen, können Sie die Priorität des ersten Objekts auf 10 und die Priorität des zweiten Objekts auf 0 festlegen: Auf diese Weise wird das zweite Objekt zuerst angezeigt. Diese Option kann nützlich sein, wenn Ihr Plugin oder Thema mehrere Steuerelemente enthält, die in einer bestimmten Reihenfolge angezeigt werden müssen.

gespeicherte Einstellungen

abrufen

Um die vom Benutzer gespeicherten Einstellungen abzurufen, erstellen wir eine neue Funktion namens echo_theme_sound(). Diese Funktion wird aufgerufen, wo Sie im Thema angezeigt werden möchten, um die Audio -Tags anzuzeigen, die den ausgewählten Medien entsprechen.

Denken Sie zunächst daran, dass unsere Einstellungen eine Themenänderung sind. Um ihren Wert abzurufen, müssen wir die Funktion get_theme_mod() verwenden.

<code class="language-php">function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');</code>

Wenn der Benutzer eine Auswahl getroffen hat, enthält diese Variable die ID der ausgewählten Medien. Mit anderen Worten, um zu überprüfen, ob eine Auswahl getroffen wurde, müssen wir nur überprüfen, ob sich diese ID von Null unterscheidet.

<code class="language-php">$wp_customize->add_section('sound', array(
    'title' => 'Sound',
    'description' => 'Add a sound to your website',
    'capability' => 'edit_theme_options'
));</code>

Um ein Audio -Tag zu erstellen, verwenden wir wp_audio_shortcode(), was einen Parameter erfordert: eine Reihe von Optionen, die tatsächlich das Attribut des Tags sein.

Dieses Array muss eine Option mit dem Namen src enthalten, was die URL der Audio -Datei ist. Um diese URL abzurufen, können wir wp_get_attachment_url() und die ID früher abgerufen. Wenn Sie andere Eigenschaften verwenden möchten, können Sie, aber nicht obligatorisch. Weitere Informationen zu verfügbaren Eigenschaften finden Sie unter WordPress Codex.

Wir sind jetzt bereit, unsere Audio -Tags anzuzeigen. Ich bin hier, um es in eine DIV einzuwickeln, aber Sie können ein anderes Tag und einen anderen Stil auswählen. Sie können beispielsweise zwei Parameter echo_theme_sound() und $before für Ihre $after -Funktion definieren, damit der Benutzer vor und nach dem Audio -Tag Text angeben kann.

<code class="language-php">function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');</code>

Rufen Sie jetzt einfach die echo_theme_sound() -Funktion an, wo immer Sie wollen, und genießen Sie das Ergebnis! Beachten Sie, dass Sie nach der Verwendung dieser Funktion in einer Themendatei die Änderungen sehen, die Sie im Themen -Customizer direkt vorgenommen haben, nachdem Sie die Änderungen vorgenommen haben, ohne die Seite zu aktualisieren.

Verwalten Sie geschnittene Bilder

kann erweitert werden WP_Customize_Media_Control, um weitere Funktionen hinzuzufügen. Wenn Sie ein spezifisches Beispiel dafür benötigen, welche Funktionen wie diese hinzugefügt werden können, können Sie einen in WordPress Core selbst unter Verwendung der WP_Customize_Cropped_Image_Control -Klasse finden.

Wie Sie an seinem Namen erraten haben, ist dies nützlich, wenn Sie dem Benutzer eine Möglichkeit geben möchten, ein Bild vor der Verwendung auszuwählen und zu erfassen.

Hier werden wir es verwenden, um dem aktuellen Standard -WordPress -Thema (fünfundzwanzig fünfzehn) ein Untertitelbild hinzuzufügen. Ich habe mich entschlossen, dieses Bild ganz oben im Titel direkt über dem Website -Titel zu zeigen, aber Sie können es wieder als möchten: Das Ziel dieses Artikels ist nur ein spezifisches Beispiel für die neue API.

Erstens erstellen wir unsere Einstellungen. Da wir die Medien -ID speichern, entspricht diese Einstellung im Grunde genommen mit den zuvor hinzugefügten Audio -Tags.

<code class="language-php">$wp_customize->add_section('sound', array(
    'title' => 'Sound',
    'description' => 'Add a sound to your website',
    'capability' => 'edit_theme_options'
));</code>

dann der interessante Teil: die Kontrolle selbst. Wie bei der WP_Customize_Media_Control benötigt der Konstruktor von WP_Customize_Cropped_Image_Control drei Parameter, die genau gleich sind: die Themen -Customizer -Instanz, die festgelegte ID und eine Reihe von Optionen.

<code class="language-php">$wp_customize->add_setting('music', array(
    'type' => 'theme_mod',
    'capability' => 'edit_theme_options',
    'sanitize_callback' => 'absint'
));</code>

Hier habe ich keinen neuen Abschnitt erstellt: Wir verwenden den Teil, den WordPress bereits verwendet hat, um die Steuerelemente anzugeben, sodass der Benutzer den Hintergrundbild -Titel auswählen kann. Die Label -Option ist eine bereits bekannte Option und Sie interessieren sich mehr für zwei weitere Optionen: Breite und Höhe.

Diese Optionen werden verwendet, um die Größe des endgültigen Bildes zu steuern. Der Benutzer wählt das gewünschte Bild aus, und dann ermöglicht ein Grafik -Tool das gewünschte Bild. WordPress wird das Bild basierend auf dieser Auswahl erschwingen und das geschnittene Bild zu der Größe der mit diesen Optionen ausgewählten Größe ändern.

Wenn Benutzer ein Bild aufnehmen, sind die Einschränkungen der Bildanteile hier und sie können keinen Teil des Bildes mit anderen Anteilen auswählen. Aber das kann sich ändern.

Tatsächlich bietet diese Klasse zwei weitere Optionen: flex_width und flex_height. Standardmäßig sind beide Optionen auf False festgelegt, und das Seitenverhältnis, das durch die von Ihnen angegebenen Dimensionen angegeben ist, ist eine Einschränkung: Der Benutzer muss einen Bereich mit demselben Anteil auswählen.

Wenn Sie jedoch eine der Optionen für True festlegen, wird diese Einschränkung entfernt und der Benutzer kann einen Teil des Bildes mit einer beliebigen Skala auswählen. Beachten Sie, dass WordPress die Ergebnisse immer noch in der von Ihnen anfordernen Größe ändern wird, sodass sie sich verformen kann.

Bei Verwendung flex_width und flex_height ist das Verhältnis wichtig. Tatsächlich bietet WordPress den Benutzern zu Beginn einen Standard -Erntebereich. Dieser Bereich entspricht der größten verfügbaren Fläche im Bild mit der gewünschten Skala (z. B. das maximal mögliche Quadrat in einem Rechteck). Dies gibt uns das, worüber wir hier sprechen, die Standardbreite und die Höhe.

Wenn flex_width auf false eingestellt ist, kann der Benutzer keine Bereiche auswählen, die größer als die Standardbreite sind. Wenn Sie diese Option auf True festlegen, wird diese Einschränkung storniert. Gleiches gilt für flex_height.

Schließlich, wenn flex_width und flex_height auf false (ihre Standardwerte) eingestellt sind und wenn der Benutzer ein Bild auswählt, das genau die gleiche Größe hat wie Sie in der Breite und der Höhenoptionen angegeben sind, wird der Zubereitungsschritt genau die gleiche Größe haben übersprungen werden.

Beachten Sie, dass das Schneiden von Bildern das Originalbild nicht ändert Wenn Ihre Benutzer das gleiche Bild an mehreren Stellen verwenden müssen, müssen sie das gleiche Bild nicht mehrmals hochladen.

Die Methode zum Abrufen von geschnittenen Bildern ähnelt der Methode, mit der wir zuvor Geräusche abgerufen haben: Wir verwenden get_theme_mod(), um die Bild -ID zu erhalten, und wp_get_attachment_url(), um die URL zu erhalten. Dann zeigen wir es so, wie wir es wollen. Hier habe ich den einfachsten Weg gewählt, das Bild wiederzugeben.

<code class="language-php">function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');</code>

Schlussfolgerung

Mit diesen neuen Steuerelementen werden die Themenanpassungen immer interessanter, da Entwickler es einfacher machen können. Wenn Sie nun eine Medienkontrolle in diesem Customizer benötigen, können Sie Ihre eigene Steuerung hinzufügen und den nützlichsten Wert abrufen: Medien -ID.

Die in diesem Artikel angezeigte Basisklasse kann erweitert werden, wenn Sie spezifischere Steuerelemente benötigen. Dies erfolgt an mehreren Stellen im WordPress -Kern: Die Pflanzenbildsteuerung erweitert WP_Customize_Media_Control, und diese Klasse selbst wird durch die Steuerung der neuen Site -Icon -API erweitert. Dies sind nur Beispiele für Aktionen, die Sie mit dieser API durchführen können.

Sie können das Thema oder das Plug-In verwenden, um den Themen-Customizer zu verwenden. Da es für mich jedoch praktischer ist, ein kleines Plugin bereitzustellen, finden Sie einen über diesen Link. Es kombiniert die Beispiele in diesem Artikel.

(Der FAQ -Abschnitt sollte hier eingefügt werden, und der Inhalt stimmt mit dem FAQ -Teil im Eingabetxt überein.)

Das obige ist der detaillierte Inhalt vonVerwenden der WordPress Theme Customizer Media Controls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!