Bauen eines WordPress -Karussell -Plugins: Teil 2

Ein Karussell ist nicht nur eine Liste von Links, sondern es gibt auch, dass die Links als Elemente auf eine Weise angezeigt werden, die sie attraktiver macht. In unserem vorherigen Artikel haben wir gesehen, wie man ein Karussell erstellt und wie wir die von uns benötigten HTML -Elemente anzeigen. Jetzt ist es Zeit, unser WordPress -Karussell -Plugin zu bauen und zu stylen.

Unser Karussell ist derzeit eine einfache Liste von Links. Am Ende dieses Artikels haben wir ein ordnungsgemäß formatiertes Karussell. Wir werden sehen, wie wir die Stile anwenden können, die wir benötigen, um das Ergebnis zu erzielen, das ich Ihnen im Beispiel -Bild in Teil 1 gezeigt habe. Natürlich gibt es viele Eigenschaften, die Sie anpassen können, Websites müssen weltweit nicht gleich sein!

Erstens werden wir uns ansehen, wie wir eine CSS -Datei ordnungsgemäß mit einer Webseite in WordPress verknüpfen können. Dann werden wir unsere Elemente stylen, die einige CSS -Tricks demonstrieren, die in vielen verschiedenen Situationen nützlich sein können.

Key Takeaways

• Das WordPress -Karussell -Plugin wird durch Verknüpfen einer externen CSS -Datei verbessert, die ein einfacheres und flexibleres Styling ermöglicht. Dies schließt die Funktion wp_enqueue_style () für die Aufnahme der Datei ein.
• Die Größe des Karussells ist in der CSS -Datei definiert, wobei jedes Element den gesamten erstellten Block füllt. Die Positionierung der Verbindungen und die Größe des Behälters wird ebenfalls festgelegt.
• Das Styling des Namens, der Beschreibung und der Pfeile des Elements werden mit CSS-Eigenschaften wie Anzeige, Polsterung, Farbe, Hintergrundfarbe, Text-Align und Text-Shadow angepasst.
• Das Karussell -Plugin wird durch Hinzufügen von JavaScript abgeschlossen, um die Pfeile funktionieren zu lassen, sodass Scrollen beim Klicken der Pfeile ermöglicht werden. Dies wird im nächsten Teil des Tutorials behandelt.

Verknüpfen einer externen CSS -Datei

Um das Styling unseres Karussells so flexibel und einfach wie möglich zu gestalten, haben wir die Verwendung von Inline -Stilen auf nur ein Attribut, den Hintergrund jedes Elements, eingeschränkt. Für alle anderen Stile verwenden wir eine externe CSS -Datei (Stylesheet). Sie können Ihren eigenen Namen für die Datei (z. B. carousel.css) auswählen und ihn in den Ordner Ihres Plugins (oder in einem Unterverzeichnis) platzieren.

Um die Datei einzuschließen, verwenden wir die Funktion wp_enqueue_style (), wie in unserem Artikel beschrieben, um ein Skript einzuschließen.

Wir können diese Funktion nicht einfach überall aufrufen, sie muss vor dem Anruf von WP_HEAD () aufgerufen werden (im Gegensatz zu einem Skript können wir keine CSS -Datei in die Fußzeile einbeziehen!). Wir können wp_enqueue_scripts verwenden, die aufgerufen werden, wenn WordPress die Skripte und die Stile für die aktuelle Seite (im Front-End) enthält. Daher ist es perfekt für diese Anwendung.

Der folgende Code muss in der Hauptdatei Ihres Plugins angezeigt werden.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

Die Funktion wp_enqueue_style () akzeptiert (zumindest) zwei Parameter, den Namen des Stils und die URI in der entsprechenden Datei. Die Funktion plugin_dir_url () gibt uns die URL zu dem Ordner unseres Plugins, da sich meine carousel.css -Datei im Root dieses Ordners befindet. Ich habe hier kein Unterverzeichnis, aber Sie müssen sie verkettet, wenn Sie eine verwenden.

Beachten Sie, dass wir in unserer Funktion nichts testen. WordPress enthält unsere CSS -Datei in jede Seite. Dies ist kein Problem, wenn Sie Ihr Karussell auf allen Seiten anzeigen. Wenn Sie Ihr Karussell jedoch nur auf einigen Seiten anzeigen (z. B. nur auf der Startseite), sollten Sie testen, ob sich der Besucher auf der rechten Seite befindet, bevor Sie die CSS -Datei einbeziehen (z. B. mit IS_HOME ()).

Jetzt ist es Zeit, unsere CSS -Datei zu bearbeiten.

lass uns unser Karussell stylen!

die Größe des Karussells

Wir beginnen mit der Größe des Hauptbehälters, dem von #Carousel identifizierten Div. Hier können Sie die gewünschte Größe einstellen. Wenn wir Bilder verwenden, die wir nicht ändern, ist eine feste Größe eine gute Idee.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

Später werden wir diesem Container, dem Überlauf, eine dritte Eigenschaft hinzufügen. Im Moment werden wir es nicht verwenden, so können wir sehen, wie unsere Artikel auf der Seite ausgelegt werden.

Jedes Element füllt den gesamten Block, den wir gerade erstellt haben. Die folgende Regel gilt sowohl für das Element selbst (das A-Tag mit dem Klassennamen-Karussell-Link) als auch für seine Eltern.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

Positionierung der Links

Was passiert, wenn wir zum Recht gehen?

Jetzt müssen wir darüber nachdenken, was wir tun wollen. Es gibt viele Möglichkeiten, wenn wir ein Karussell bauen wollen. Ich schlage vor, unsere Gegenstände nebeneinander mit einer Float -Eigenschaft in einen großen Container zu positionieren: Es muss groß genug sein, um alle unsere Artikel in einer Zeile zu enthalten.

Wenn der Benutzer ein anderes Bild sehen möchte, verschieben wir diesen Container, um das nächste Element mit dem #Carousel Div auszurichten. In diesem Div wird der Eigenschaftsüberlauf auf verborgen sein, so werden wir die anderen Links nicht sehen.

unten ist ein Schema von dem, was wir machen wollen. In Green sehen Sie den großen Behälter mit all unseren Links in einer Zeile. Um uns den Link rechts anzusehen, geht der Container nach links und umgekehrt. Der schwarze Rahmen repräsentiert das #Carousel Div: Außerhalb dieses Rahmens ist alles unsichtbar.

Die Größe des Behälters

Erstens der Container: Wir erstellen kein weiteres HTML -Element, da die UL für unsere Zwecke perfekt ist. Wir haben gesehen, dass dieser Container groß genug sein muss, um alle unsere Links in einer Zeile zu enthalten. Derzeit ist dies nicht der Fall, unsere Artikel und unser Container haben beide eine Breite von 900 Pixel.

Um das zu ändern, werden wir die Breite des Behälters auf 500%erhöhen. Die von #Carousel identifizierte DIV hat eine Breite von 900 Pixel, sodass eine Breite von 500% es uns ermöglicht, fünf Links in einer Reihe anzuzeigen.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

Ein potenzielles Problem kann Ihnen hier auftreten: Die Anzahl der Elemente kann variabel sein, da unser Skript beispielsweise nur drei Elemente anzeigen kann. Es ist nicht wirklich ein Problem, da wir die Anzahl der Elemente auf maximal fünf beschränkt haben. Selbst wenn es nur drei gibt, passen sie alle und der leere Raum stört den Betrieb des Karussells nicht.

Wenn Sie eine weitere Grenze gewählt haben, müssen Sie diese Breite ändern (z. B. auf 1000%, wenn Sie 10 anzeigen möchten). Es treten Probleme auf, wenn Sie kein Grenzwert wünschen. In diesem Fall müssen Sie die Breite im Stilattribut des UL -Tags basierend auf unserer Variablen $ n festlegen, die die Anzahl der zu angezeigten Elemente enthält.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

Positionierung der Links

Jetzt müssen wir die Breite der Li -Tags korrigieren. Derzeit sind sie auf 100% eingestellt, sodass sie die gesamte Breite unseres Behälters nehmen, was fünfmal zu lang ist.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

Die Li -Tags haben jetzt die richtige Breite und schweben. Wenn Sie jetzt unser Karussell testen, sehen Sie das richtige Ergebnis, fünf Artikel nebeneinander. Sie können jetzt die Überlaufeigenschaft zu #Carousel hinzufügen, um die Elemente zu verbergen, die nicht sichtbar sein sollten.

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

Der Name und die Beschreibung des Elements

Der Name der Elemente kann so gestaltet werden, wie Sie möchten. Hier werde ich beschreiben, wie ich den Stil erstellt habe, den Sie im vorherigen Teil dieses Tutorials gesehen haben.

Als Erinnerung wird der Name des Elements in einem starken Tag im A.Carousel-Link-Element angezeigt. Der Streifen kann mit einer Hintergrundfarbe erhalten werden, aber wir möchten, dass dieser Streifen die gesamte Breite einnimmt. Dazu können wir das Display auf Block setzen. Polster- und Farbeigenschaften vervollständigen den Stil.

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

Wie beim Namen können Sie die Beschreibung des Artikels personalisieren. Hier habe ich es auf der rechten Seite unter dem Namen unter Verwendung der CSS unten angezeigt.

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

Der Blockwert für die Anzeigeeigenschaft ermöglicht es dem EM -Tag, die gesamte verfügbare Breite zu verwenden. Anschließend richten wir den Text auf der rechten Seite mit etwas Polsterung aus, sodass der Text nicht an der Kante stand. Ich habe hier ein dunkles Grau für die Textfarbe gewählt. Um sicher zu sein, dass der Text immer lesbar ist, selbst bei dunklen Bildern, habe ich einen weißen Textschatten hinzugefügt.

Styling der Pfeile

Der letzte Schritt wird die Pfeile korrekt angezeigt. Sie haben hier mehrere Möglichkeiten, je nachdem, wo Sie diese Pfeile anzeigen möchten.

Ich habe die unten aufgeführten Eigenschaften verwendet, um den Effekt auf das Beispielelement zu erzielen. Wir verwandeln die Pfeile in Blöcke, um ihre Größen zu ändern, dann reparieren wir diese Größe und stylen die Pfeile. Wir verwenden auch einen nützlichen Trick, um den Text (den Pfeil) vertikal auszurichten. Wir setzen die Linienhöhe-Eigenschaft auf denselben Wert, den wir der Höhe angegeben haben. Der Text wird dann vertikal zentriert.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

Um die abgerundeten Ecken zu reproduzieren, werden wir Border-Radius verwenden, aber nicht an allen Ecken, diejenigen, die sich an den Seiten des Karussells befinden, sollten nicht abgerundet werden. Deshalb werden wir die "Unterproperties" von Border-Radius verwenden, die es uns ermöglichen, die Ecken zu rund auszuwählen.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

Schließlich mag ich persönlich Schaltflächen und Links, um einen Schwebeffekt zu erzielen. Hier habe ich mich entschieden, nur die Farbe des Pfeils zu modifizieren.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

Da CSS3 es uns ermöglicht, leicht einen weichen Übergang zu haben. Warum nicht verwenden?

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

Positionierung der Pfeile

Das ist alles für den Stil der Pfeile. Jetzt müssen wir sie dort platzieren, wo wir sie wollen. Wir werden die absolute Positionierung mit einem kleinen Trick verwenden: Wir kennen die Position des Karussells selbst nicht, sodass wir die Pfeile nicht aus den Bildschirmecken positionieren können. Stattdessen werden wir die Karussellecken und genauer gesagt die Li -Tags -Ecken verwenden.

Positionieren wir unsere Pfeile mit der Position auf Absolute.

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

Wenn Sie dies versuchen, werden die Pfeile auf den Bildschirmseiten positioniert. Wir müssen eine weniger bekannte Option der absoluten Positionierung verwenden. Das Pfeilelement ist relativ zu seinem nächstgelegenen positionierten Elternteil positioniert. Hier haben unsere Pfeile keine positionierten übergeordneten, so dass sie relativ zum Bildschirm positioniert sind.

Das Problem ist, dass die Pfeile die Eltern an den richtigen Stellen sind: Wir möchten keine von ihnen bewegen. Der Trick besteht darin, die relative Positionierung zu verwenden, ohne etwas anderes zu ändern. Wir werden die relative Positionierung auf die Li -Tags anwenden, die der engste Elternteil unserer Pfeile sind.

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

Dann befinden sich die Pfeile auf der Seite ihrer engsten positionierten Eltern, die Li -Tags, was wir wollten.

Was kommt als nächstes?

Die von unserem Karussell benötigten HTML -Elemente werden ausgestellt und jetzt werden sie auch gestylt. Das Problem ist, dass unser Karussell völlig nutzlos ist, da es nur den ersten Gegenstand zeigt (es war nützlicher ohne CSS!).

Deshalb müssen wir eine letzte Sache hinzufügen: JavaScript. Im nächsten (und letzten) Teil dieses Tutorials werden wir unsere Pfeile wie erwartet funktionieren. Links werden beim Klicken auf Pfeile scrollen. Das ist eine gute Sache, oder?

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