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!