Bauen eines WordPress -Karussell -Plugins: Teil 3

Key Takeaways

• Um die Karussellpfeile funktional zu machen, wird eine JavaScript -Datei erstellt und mit der Funktion wp_enqueue_script () mit WordPress verknüpft, die in der Funktion display_carousel () gesetzt wird, um sicherzustellen, dass sie nur dann enthalten ist, wenn das Karussell angezeigt wird.
• Der UL-Block des Karussells wird horizontal bewegt, um verschiedene Elemente anzuzeigen, indem die Rand-Links-CSS-Eigenschaft angepasst wird. Ein negativer linker Rand richtet die linke Seite des nächsten Elements mit der linken Seite des Karussellblocks aus.
• Eine Funktion, carousel_show_another_link (), wird erstellt, um ein anderes Element basierend auf dem Richtungsparameter anzuzeigen (-1 für das vorherige Element, 1 für das nächste Element); Es berechnet den Index des neuen Elements, das angezeigt wird, und überprüft, ob es vorhanden ist, bevor es den UL -Block verschiebt.
• Zwei Funktionen, carousel_previous_link () und carousel_next_link (), werden erstellt und an die jeweiligen Pfeilereignisse angehängt und rufen Sie die Funktion carousel_show_another_link () mit dem entsprechenden Parameter auf. Ein Fehler wird verhindert, indem die Rand-Links-Eigenschaft des UL-Blocks auf 0 initialisiert wird, wenn das Dokument fertig ist.

Ohne Styling ist das WordPress -Karussell, das wir im ersten Teil dieses Tutorials eingebaut haben, nur eine Liste von Elementen, aber es ist zumindest nützlich in dem Sinne, dass sie alle sichtbar sind. Das CSS, das wir in Teil zwei dieses Tutorials hinzugefügt haben, hat die Anzeige des Karussells verbessert, aber jetzt ist das Problem, dass nur das erste Element dem Benutzer angezeigt wird und es keine Möglichkeit gibt, den Rest der Elemente anzuzeigen.

Wir haben unser Karussell Pfeile hinzugefügt, damit der Benutzer zwischen den verschiedenen Elementen navigieren kann, und jetzt ist es an der Zeit, sie mit ein wenig JavaScript verwendbar zu machen.

In der Fortsetzung dieses Tutorials erfahren wir, wie Sie unser Skript ordnungsgemäß einschließen. Dann schreiben wir ein Skript, das eine Funktion startet, die die Elemente animiert, wenn der Benutzer einen Pfeil trifft.

Verknüpfen einer JavaScript -Datei

Hier verwenden wir JavaScript, um unsere Pfeile nützlich zu machen. Erstellen Sie eine neue Datei. Ich nannte es Carousel.js und stellte es in die Wurzel des Plugins -Ordners.

Wir müssen WordPress angeben, dass wir die JavaScript -Datei verwenden. Dazu verwenden wir die Funktion wp_enqueue_script ().

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

Die ersten beiden Parameter sind die gleichen wie für wp_enqueue_style (). Dann finden wir ein Array. Dieses Array listet die Abhängigkeiten auf, die von unserem Skript benötigten Skripte, die für die Arbeit benötigt werden. Ich habe mich entschieden, JQuery zu verwenden, um die Probleme mit dem Browserkompatibilität zu umgehen, und gib für WordPress an, dass ich es verwenden möchte: Wie wir in unserem Artikel über die richtige Einbeziehung von Skripten in WordPress gesehen haben, ist 'JQuery' ein anerkannter Wert in WordPress.

Der vierte Parameter ist die Versionsnummer des Skripts. Hier ist es nicht sehr wichtig (siehe Artikel, die zuvor für weitere Informationen verlinkt wurden), aber wir mussten den letzten Parameter verwenden und auf True setzen, damit unser Skript in die Fußzeile aufgenommen wird.

Der Vorteil der Auswahl der Fußzeile anstelle des Headers besteht darin, dass wir wp_enqueue_script () verwenden können, wo immer wir wollen. Wir haben nicht die Einschränkung, es vor wp_head () wie bei WP_ENQUEUE_STYLE () zu verwenden. Wir können dann unser Skript nur dann einfügen, wenn es erforderlich ist: Nur wenn wir das Karussell anzeigen.

Der beste Ort, um wp_enqueue_script () zu setzen, befindet sich daher in der Funktion unserer Funktion display_carousel (). Wir werden das Karussell nur dann anzeigen, wenn Elemente angezeigt werden müssen. Daher werden wir unser Skript mit demselben Zustand einfügen.

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

Jetzt sind wir bereit, unsere JavaScript -Datei zu bearbeiten.

Was wollen wir tun?

Zuerst verkapulieren wir unseren gesamten Code in einer Funktion. Um Kollisionen mit anderen Bibliotheken zu verhindern, deaktiviert WordPress die Verwendung von $ in JQuery. Wir können es mit dieser Funktion erneut aktivieren.

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

Es gibt viele verschiedene Möglichkeiten, ein Karussell zu machen, auch ohne unseren HTML -Code zu ändern. Hier schlage ich vor, dass Sie den UL -Block bewegen. Es enthält alle unsere Elemente in einer Zeile, damit wir es horizontal verschieben können, um ein oder ein anderes Element anzuzeigen, indem wir seine Position festlegen. Sehen Sie das Schema unten, das bereits im vorherigen Teil dieses Tutorials zu sehen ist, um zu sehen, was wir tun möchten.

Um es zu bewegen, spielen wir mit seiner links-links-CSS-Eigenschaft. Standardmäßig wird es auf 0 gesetzt und daher das erste Element „anzeigen“. Der erste Artikel ist groß genug, um den Karussellblock und den zweiten Artikel zu füllen, der dank der Überlaufeigenschaft nicht zu sehen ist.

Um das zweite Element anzuzeigen, müssen wir den UL -Block nach links bewegen, um die linke Seite des zweiten Elements mit der linken Seite des Karussellblocks auszurichten. Dies kann mit einem negativen linken Rand erreicht werden. Um zu testen, welchen Wert wir verwenden müssen, können wir mit einem CSS -Code experimentieren (den wir direkt entfernen, da wir ihn nicht benötigen).

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

Diese einfache Zeile verdient eine Erklärung. Wenn Sie es testen, sollten Sie sehen, dass das erste Element nicht angezeigt wird, sondern den zweiten Element. Sie können einen anderen Wert testen, um besser zu verstehen, was passiert ist. Mit -50px bewegen wir den UL -Block 50 Pixel zum Beispiel nach links. Mit den Werten, die ich Ihnen in der obigen CSS angezeigt habe, kann ich den zweiten Element mit einem Wert von -900px anstellen.

, da das Karussell eine Breite von 900 Pixel hat.

wir können jedoch stattdessen Prozentsätze verwenden. Der Vorteil ist, dass dieser Prozentsatz relativ zum Behälter ist. Hier entspricht „100%“ „900 Pixel“. Wenn wir also einen Wert von -100%geben, verbergen wir das erste Element und zeigen das zweite an. Mit Prozentsätzen können Sie die Breite des Containers ändern, ohne die Werte der Rand-Links-Eigenschaft zu ändern.

Die Funktion zur Anzeige eines anderen Elements

Erstens schreiben wir die Funktion, die ein anderes Element anzeigt. Dieser akzeptiert einen Parameter, die Richtung. Wenn wir das vorherige Element anzeigen möchten, muss diese Richtung auf -1 eingestellt werden. Wenn wir das nächste Element anzeigen möchten, muss sie auf 1.

gesetzt werden

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

Wohin gehen wir?

Um den Wert zu bestimmen, der dem Margen-Links zugeordnet ist, müssen wir wissen, wo wir sind. Es gibt eine Reihe möglicher Möglichkeiten, dies zu erreichen, und ich habe einen gewählt, der nur den aktuellen Wert der Marge-Links-Eigenschaft verwendet.

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

Die erste Zeile holt den UL -Block ab. Da wir es später wiederverwenden werden, ist es eine gute Idee, es in einer Variablen zu speichern. Die zweite Zeile kann etwas seltsam erscheinen. Ziel ist es, eine Ganzzahl zu speichern, die das aktuelle angezeigte Element darstellt. Das erste Element wird durch 0, die zweite bis 1 usw. dargestellt.

Um dies zu erreichen, erhalten wir den aktuellen Wert der Marge-Links-Eigenschaft. Das Problem ist, dass dieser Wert ungefähr -200%entspricht und wir eine Zahl möchten: Um die „%“ zu entfernen, verwenden wir die ParseInt () -Funktion, die den Wert in eine Ganzzahl verwandelt (z. B. '-200%', wird zu -200). Da wir eine positive Ganzzahl wollen, fügen wir ein "Minus" -Schild hinzu (z. B. 200 von -200), und wir teilen uns um 100, um den gewünschten Wert zu erhalten (z. B. 2, nicht 200).

Sie fragen sich vielleicht, warum wir UL.CSS ('Margin-Links') nicht verwendet haben, um den Wert der Marge-Links-Eigenschaft zu erhalten. Tatsächlich ist .CSS () eine JQuery -Methode und scheint in unserem Kontext eine bessere Idee zu sein. Das Problem ist, dass diese Methode uns keinen Prozentsatz gibt. Wenn der aktuelle Element die gleichen Werte wie oben verwendet, wird die Marge -Links -Eigenschaft auf -200% eingestellt, während die .css () -Methode -1800px zurückgibt. Um den aktuellen Element mit diesem Wert in Pixel zu berechnen, müssen wir die Breite des großen Containers verwenden, und ich bevorzuge nur den UL -Block.

Jetzt können wir dank der in dem Argument unserer Funktion angegebenen Richtung den Index des Elements berechnen.

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

existiert das neue Element?

Bevor wir das neue Element anzeigen, müssen wir testen, ob es vorhanden ist. Wenn New_Link weniger oder gleich -1 ist oder größer oder gleich der Gesamtzahl der Elemente ist, gibt es nicht und wir können sie nicht anzeigen, sodass das Bewegen des UL -Blocks keine gute Idee ist. Beachten Sie, dass dieser Test überflüssig erscheinen kann, da die Pfeile nicht angezeigt werden, wenn wir nicht weiter gehen können, aber sicherzustellen, dass tatsächlich etwas getan werden kann, ist immer eine gute Idee.

<span><span>#carousel ul</span> {
</span>	<span>margin-left: -100%;
</span><span>}</span>

Zuerst erhalten wir die Gesamtzahl der Elemente, die die Anzahl der Li -Tags in unserer Liste ist. Diese Zahl ist nützlich für die oben beschriebene Erkrankung, da wir eine positive Ganzzahl wünschen, die nicht größer ist als oder gleich der Anzahl der Elemente (vergessen Sie nicht, dass wir mit 0 und nicht 1 beginnen).

Zeigt das neue Element

an

Schließlich kann der Blockbewegung mit einer einzigen Linie erreicht werden. Wir müssen den neuen Wert von Margen-Links berechnen. Lassen Sie uns dazu darüber nachdenken. Für jeden „bestandenen“ Artikel haben wir eine Breite von 100%, um zu reisen. Auf diese Weise beträgt der neue Wert von Marge-Links das 100-fache der neuen Artikel, die wir gerade berechnet haben, mit einem Minuszeichen nach links.

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

Ich habe hier eine JQuery -Animation verwendet, aber Sie können Ihre eigenen erstellen oder sogar die Einstellungen dieses.

ändern.

Einige Aliase für eine praktischere Verwendung

Wir erstellen nun die Funktionen, die jedes Mal aufgerufen werden, wenn der Benutzer auf einen Pfeil klickt. Diese Funktionen erfordern keine große Menge an Code, da sie nur die Funktion carousel_show_another_link () mit dem richtigen Parameter aufrufen. Unten finden Sie den Code für die Funktion, der aufgerufen wird, wenn wir auf einen "vorherigen" Pfeil klicken.

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

Beachten Sie die Rückgabe falsch; Um das Standardverhalten unserer Pfeile zu verhindern (vergessen Sie nicht, dass es sich um Links handelt). Auf diese Weise ändert sich die URL nicht, wenn der Benutzer auf einen Pfeil klickt.

Die Funktion, in der das Element „Nächster“ angezeigt wird, ist genau das gleiche, aber mit 1 als Parameter für carousel_show_another_link (). Ich habe es mir entschieden, es carousel_next_link () zu nennen.

Anhängen der Ereignisse

Schließlich müssen wir diese Funktionen nützlich machen, indem wir die richtigen Ereignisse an die richtigen Elemente anbringen. Wir werden dies in einer neuen Funktion tun, die genannt wird, wenn wir sicher sein können, dass unsere Elemente erstellt werden: Wenn das Dokument geladen wird.

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

Wir möchten die Funktion carousel_previous_link () an jeden "vorherigen" Pfeil anhängen. Mit dem Dom -Baum unseres Karussells können wir sie leicht abrufen, genauso wie wir sie abgerufen haben, wenn wir sie im CSS stylen wollten.

<span><span>#carousel ul</span> {
</span>	<span>margin-left: -100%;
</span><span>}</span>

Dann können wir die Funktion carousel_next_link () an die richtigen Pfeile (#Carousel ul li a.carousel-Next) auf die gleiche Weise anhängen.

Sie können diesen Code testen, aber ein Fehler sollte angezeigt werden: Wenn die Funktion carousel_show_another_link () zum ersten Mal aufgerufen wird, existiert die CSS-Eigenschaftsleistung für unseren UL-Block nicht, sodass ein Fehler auftritt, wenn wir versuchen, abzurufen Sein Wert.

Um diesen Fehler zu verhindern, können wir den Wert dieser Eigenschaft initialisieren. Noch in der Funktion, die aufgerufen wird, wenn das Dokument fertig ist (vor dem Anhängen der Ereignisse) die folgende Zeile hinzufügen.

<span>function carousel_show_another_link(direction) {
</span><span>}</span>

Dies setzt die Margen-Links-Eigenschaft unseres UL-Blocks als Standard auf 0. Diese Eigenschaft wird nun existieren, ohne den Block zu bewegen.

Sie können jetzt auf die Pfeile wegklicken, das Karussell ist fertig und es funktioniert!

Abschließend

In diesem Tutorial gingen wir mit der WordPress Links Manager -API durch den Bau eines Karussell -Plugins. Es war ein gutes Beispiel für die Verwendung dieser API, aber es war auch eine gute Möglichkeit zu sehen, wie man PHP, HTML, CSS und JavaScript in einem WordPress -Plugin kombiniert.

Abschließend würde ich sagen, dass es viele verschiedene Möglichkeiten gibt, ein Karussell zu bauen, auch wenn wir den von uns generierten HTML -Code aufbewahren: Wir könnten verschiedene Stile oder verschiedene Möglichkeiten zum Schreiben des Skripts auswählen. Tatsächlich ist das Skript, das wir hier geschrieben haben, nur ein Beispiel und wir könnten ein völlig anderes mit demselben Ergebnis schreiben.

Sie können selbst entscheiden, ob Sie den hier verwendeten Code mögen. Wenn nicht, zögern Sie nicht, es zu bearbeiten!

Auch wenn Ihnen das gefallen hat, was uns hier getan hat, können Sie das Ergebnis trotzdem verbessern. Zum Beispiel müssen Besucher die Pfeile treffen, um andere Elemente anzuzeigen: Sie können versuchen, das Karussell automatisch mit der Funktion setTimeout () zu animieren.

Wenn Sie den fertigen Code sehen oder das Plugin für sich selbst ausprobieren möchten, kann er hier heruntergeladen werden.

Das obige ist der detaillierte Inhalt vonBauen eines WordPress -Karussell -Plugins: Teil 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!