Anleitung zum Stylen des WP-PageNavi WordPress-Plugins

Wenn Sie mit dem WordPress-Plugin WP-PageNavi nicht vertraut sind, können Sie damit die normale Vorher/Nächste-Navigation durch eine erweiterte, nummerierte Seiten-Navigation ersetzen.

In diesem Tutorial werden wir uns ansehen, wie man:

• WP-PageNavi installiert und korrekt in Ihr Theme integriert.
• Zwei Methoden, um die Standard-Plugin-Stile zu deaktivieren und/oder zu überschreiben.
• Eine Übersicht über den von WP-PageNavi ausgegebenen HTML-Markup
• Schließlich, wie man das Aussehen Ihrer Seiten-Navigation über CSS verändert

Das Plugin installieren

Sie haben zwei Möglichkeiten, das WP-PageNavi-Plugin zu installieren.

• Laden Sie es von WordPress.org herunter, laden Sie es in Ihr /wp-content/plugins/ Verzeichnis hoch und aktivieren Sie es (auch bekannt als der altmodische Weg).
• Abhängig von Ihrem Hoster können Sie Plugins auch automatisch installieren, indem Sie sie auf der Seite „Neues Plugin hinzufügen“ unter Plugins in Ihrem WordPress-Admin-Panel suchen. Suchen Sie einfach nach „pagenavi“ und Sie sollten es finden.

Okay, das sollte ziemlich einfach gewesen sein. Jetzt ist es an der Zeit, für den Integrationsschritt etwas tiefer in den Code einzusteigen.

Theme-Integration

Bei unserer Theme-Integration möchten wir niemals, dass Fehler angezeigt werden, wenn WP-PageNavi nicht aktiv ist. Stattdessen stellen wir sicher, dass es auf die alte Vorher/Nächste-Navigation zurückfällt. Dazu verwenden wir eine `function_exists`-Bedingungsprüfung.

Nehmen wir an, dies ist Ihr normaler Vorher/Nächste-WordPress-Navigationscode:

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>

Wir werden ihn wie folgt ändern:

<?php if (function_exists('wp-pagenavi')) { wp_pagenavi(); } else { ?><div class="navigation">
	<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div><?php } ?>

Dies prüft im Grunde, ob WP-PageNavi aktiv ist, und wenn ja, zeigt es den neuen Seiten-Navigationscode an. Wenn nicht, fällt es ordnungsgemäß auf die normale Vorher/Nächste-Navigation zurück.

Bitte beachten Sie: Abhängig davon, wie Ihr CSS codiert ist, möchten Sie den wp_pagenavi(); Teil möglicherweise innerhalb des „navigation“ (oder äquivalenten) Divs platzieren. Beachten Sie jedoch, dass WP-PageNavi eine neue Klasse namens „wp-pagenavi“ ausgibt, die wir separat stylen können.

Plugin-Stile überschreiben

Standardmäßig fügt WP-PageNavi automatisch eine CSS-Datei namens pagenavi-css.css aus seinem Plugin-Verzeichnis in den Header Ihrer Website ein. Wir möchten nicht, dass diese Standardstile mit unseren eigenen coolen, selbst erstellten Stilen kollidieren, daher werden wir sie komplett entfernen, und dafür gibt es zwei einfache Möglichkeiten.

• Fügen Sie eine CSS-Datei zu Ihrem Theme-Verzeichnis hinzu – Dies ist wahrscheinlich der einfachste Weg, die Standard-WP-PageNavi-Stile zu überschreiben. Wenn Sie eine Datei namens pagenavi-css.css in Ihrem Theme-Verzeichnis haben, wird WP-PageNavi diese anstelle der Standarddatei im Plugin-Verzeichnis verwenden.
• Fügen Sie einen Codeausschnitt zu Ihrer functions.php-Datei hinzu – Der folgende Codeausschnitt, den wir von WP Recipes übernommen haben, deaktiviert das obige Verhalten vollständig und bindet keine Stylesheet-Datei aus dem Plugin ein (weder die Standarddatei noch eine Überschreibung in Ihrem Theme-Verzeichnis).

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

Fügen Sie diesen Code einfach in die functions.php-Datei Ihres Themes ein und fügen Sie die CSS-Stile zu Ihrer regulären Theme-Stylesheet-Datei (normalerweise style.css) hinzu.

Hinweis: Stellen Sie sicher, dass der Code in Klammern wie <?php ... ?> eingeschlossen ist, falls Ihre Funktionen-Datei derzeit leer ist.

WP-PageNavi HTML-Markup und CSS-Selektoren

Hier ist, wie das WP-PageNavi-Markup aussieht. Im folgenden Beispiel gibt es vier Seiten, derzeit auf Seite zwei.

<div class="wp-pagenavi">
	<a href="http://example.com/" >Previous</a><a href="http://example.com/" class="page" title="1">1</a>
	<span class="current">2</span>
	<a href="http://example.com/?paged=3" class="page" title="3">3</a>
	<a href="http://example.com/?paged=3" >Next</a></div>
	<span class="extend">...</span>
	<a href="http://example.com/?paged=4" class="last" title="Last »">Last »</a>
</div>

Wir können die folgenden CSS-Selektoren verwenden, um das obige HTML-Markup anzusprechen:

• .wp-pagenavi – Gilt für das gesamte Div, nützlich für CSS-Clears, Padding/Margin, Schriftgrößen und -stile (fett, kursiv usw.)
• .wp-pagenavi a – Zielt auf alle Links innerhalb der Seitennavigation ab, einschließlich Seitenzahlen und Vor/Zurück.
• .wp-pagenavi a.page – Zielt speziell auf Seitenzahlen
• .wp-pagenavi a.first – Zielt speziell auf den „ersten“-Link ab (nicht oben aufgeführt)
• .wp-pagenavi a.last – Zielt speziell auf den „letzten“-Link ab
• .wp-pagenavi span – Zielt auf die aktuelle Seitenzahl zusammen mit dem Erweiterungsteil (dem Ding mit den drei Punkten)
• .wp-pagenavi span.current – Zielt speziell auf die aktuelle Seitenzahl
• .wp-pagenavi span.extend – Zielt speziell auf die Erweiterung (Drei-Punkte-Ding)
• .wp-pagenavi span.pages – Zielt speziell auf die Anzeige der Seitenzahl (z. B. Seite 1 von 4)

Hinweis: Die Links „vorheriger“ und „nächster“ haben standardmäßig keine CSS-Klasse. Wenn Sie sie vollständig von den Seitenzahlen und den Links „erste/letzte“ unterscheiden möchten, müssen Sie alle Stile zurücksetzen, die dem Selektor .wp-pagenavi a hinzugefügt wurden. Wenn das keinen Sinn ergab, werfen Sie einen Blick auf das folgende (wirklich vereinfachte) Beispiel.

Beispiel: Nehmen wir an, Sie möchten, dass die Links „vorheriger“ und „nächster“ fett gedruckt werden, aber alle anderen Links ein normales Gewicht haben. Sie müssten Folgendes tun:

.wp-pagenavi a { font-weight: bold; } /* Previous and Next links only */
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last { font-weight: normal; } /* Other links */

Ich habe die Links zu den Seitenzahlen, den ersten und den letzten Link zu einem Regelwerk für Beispielzwecke kombiniert. Natürlich können Sie sie trennen und jedem spezifischere Stile hinzufügen.

Das wäre viel einfacher, wenn standardmäßig eine Klasse zu den Links „vorheriger“/„nächster“ hinzugefügt würde, aber das ist nicht der Fall. Es ist keine große Sache, da Sie sie einfach zurücksetzen können.

Sie können .wp-pagenavi a.previouspostslink und .wp-pagenavi a.nextpostslink verwenden, um die Links „vorheriger“ bzw. „nächster“ auszuwählen.

Ziemlich alles oben bis zur ungeordneten Liste der Selektoren ist nicht mehr relevant, aber wir behalten es, nur weil es in anderen Situationen eine nützliche Lektion im Überschreiben von CSS sein könnte. Das untenstehende CSS-Beispiel gilt immer noch, da wir diese Selektoren sowieso nicht verwendet haben.

Ein CSS-Beispiel

Hier ist ein Beispiel für eine PageNavi-Formatierung, die wir erstellt haben:

Hier ist der Code, den wir verwendet haben, um dieses Aussehen zu erzielen. Mehrzeiliges CSS ist optional:

.wp-pagenavi a, .wp-pagenavi span {
	padding: 5px; margin-right: 10px;
	font-size: 15px; color: #03719c; text-decoration: none;
	border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background: #03719c;
	color: #fff;
	border: 3px solid #AFAFAF;
	}
.wp-pagenavi span.current { font-weight: bold; }

Und hier ist, was es alles bedeutet:

Erste Regel
Die .wp-pagenavi a, .wp-pagenavi span wählt alle Anker- und Span-Elemente (ziemlich alles) innerhalb des .wp-pagenavi-Divs aus.

• Die erste Zeile der Regel setzt einen Innenabstand von 5px, damit sie nicht an den hellgrauen Rand (unten definiert) gequetscht wird. Sie setzt auch einen konsistenten Außenabstand von 10px nach rechts für jedes Element, sodass ein gleichmäßiger Abstand zwischen ihnen besteht.
• Die zweite Zeile setzt eine Schriftgröße von 15px, macht die Textfarbe blau und stellt sicher, dass Links keine Unterstreichung haben.
• Die dritte Zeile setzt einen durchgehenden, 3 Pixel breiten grauen Rahmen um alles. Der border-radius-Code macht die Ecken abgerundet.

Zweite Regel
Die .wp-pagenavi a:hover, .wp-pagenavi span.current wählt den Link-Hover-Effekt sowie die aktuelle Seitenzahl aus.

• Die erste Zeile setzt eine dunkelblaue Hintergrundfarbe.
• Die zweite Zeile macht den Text weiß.
• Die dritte Zeile gibt einen etwas dunkleren Rahmen.

Dritte Regel
Dies wählt die aktuelle Seitenzahl (wieder) aus, ohne den Link-Hover-Effekt zu beeinflussen (wie die zweite Regel). Dies macht die aktuelle Seitenzahl einfach fett.

Der Grund, warum wir sie nicht mit dem Link-Hover-Effekt kombiniert haben, ist, dass sie einen ungleichmäßigen Effekt beim Übergang von normaler zu fetter Schriftstärke hat.

Hinweis: Abhängig davon, wie Ihr CSS codiert ist, müssen Sie möglicherweise spezifischere Selektoren verwenden. Wenn es beispielsweise Stile für #content a gibt und Ihr WP-PageNavi sich innerhalb des Inhalts-Divs befindet, müssen Sie möglicherweise Ihr PageNavi-CSS als #content .wp-pagenavi a umschreiben und alle anderen weniger spezifischen Stile überschreiben.

Fazit

Wir wissen, dass dies ein relativ einfaches Beispiel war. Sie könnten viel fortgeschrittenere CSS-Regeln haben, um die verschiedenen Links und andere Elemente noch weiter zu differenzieren. Hoffentlich haben Sie unterwegs ein paar CSS-Tipps mitgenommen.

Die optionale WP-PageNavi-Integration ist ein ziemlich cooles Feature, das Theme-Entwickler in ihre Themes integrieren könnten. Mit der von uns oben beschriebenen Integrationsmethode könnten Benutzer einfach wählen, ob sie sie verwenden möchten oder nicht, und es könnte eine schöne Option für viele Blogs sein.

Sie möchten vielleicht unsere Anleitungen und Tutorials sehen:

• Die besten WordPress Dropdown-Menü-Plugins (im Vergleich)
• So erstellen Sie ein Navigationsmenü mit Bootstrap
• So fügen Sie benutzerdefinierte Navigation in BuddyPress hinzu

Diese Beiträge helfen Ihnen, weitere Lösungen zu finden, nach denen Sie vielleicht suchen.