Bei einem Blog mit WordPress, werden die Seiten des Blogs mit „Ältere“ und „Neuere“ angezeigt. Sobald die Zahl der Posts pro Seite überschritten ist, blendet WordPress zum Durchblättern der Seiten eben diese beiden Begriffe ein. Für manch einen mag das reichen, andere – und da gehöre ich auch dazu, finden das weniger schön. Diese Anzeige wird als „Paginierung“ oder in der deutschen Übersetzung in Divi als „Nummerierung“ bezeichnet. Die Seitennummerierung in WordPress und Divi ändern ist gar nicht so schwierig und lässt sich nach eigenen Wünschen gestalten. Wie das geht, zeige ich euch in diesem neuen Wegdesign-Beitrag.

Hierzu gibt es viele Plugins im Netz, ich stelle hier eines vor, das hervorragend mit Divi zusammenspielt. Alles was ihr hierzu braucht: WordPress, Divi (optional), ein kostenloses Plugin und ein wenig CSS – fertig.

Die Standard-Seitennummerierung in WordPress

Wie ich ja schon im oberern Abschnitt sagte, ist der Standard für die Paginierung, bzw. Seitennummerierung in WordPress nicht wirklich schön. Hier werden halt nur die Begriffe „Ältere“ bzw. „Neuere“ verwendet. Das sieht dann so aus, wie im folgenden Bild.

Ein kostenloses Plugin sorgt für Änderung

Das kostenlose Plugin „WP-PageNavi“ sorgt für die grundlegende Änderung. Der Vorteil an diesem Plugin ist, das es recht „Schmal“ ist, also das System nicht unnötig voll lädt und langsamer macht, und es passt sich hervorragend in Divi ein. Hier kann es nicht nur für Blogseiten verwendet werden, auch in Portfolio-Seiten oder Galerie-Seiten findet es hervorragend Anwendung.

Bereits in der Grundversion, also ohne die im folgenden beschriebenen CSS-Anpassungen, lassen sich einige Einstellungen vornehmen.

Bereits jetzt ein ganz anderes Look & Feel

Wenn ihr euch jetzt das Resultat anschaut, ist das doch schon mal was ganz anderes, oder ?

Die Seitennummerierung in WordPress und Divi ändern – next Level

Wer diese Anpassungen noch etwas interessanter gestalten möchte, der benötigt noch ein wenig CSS. Dieser CSS-Code wird entweder in den DIVI-Theme-Optionen eingetragen oder im Theme-Customizer unter „Zusätzliches CSS“.

Ich habe euch mal ein Beispiel erstellt, wie das aussehen könnte. Den Code könnt ihr gern als Basis für eure eigenen Anpassungen benutzen.

/*styles the wp-pagenavi pagination links*/

.wp-pagenavi a, .wp-pagenavi span {

  padding: 0.3em 0.8em !important;

  font-size: 2em !important;

  color: #333333;

  line-height: 2em;

  background: #eeeeee;

  transition: all .5s;

}

/*styles the wp-pagenavi current page number*/

.wp-pagenavi span.current {

  color: #ffffff !important;

  background: #333333 !important;

}

/*styles the wp-pagenavi pagination links on hover*/

.wp-pagenavi a:hover {

  color: #ffffff !important;

  background: #333333 !important;

}

/*styles the wp-pagenavi pages text*/

.wp-pagenavi .pages {

  background: none;

}

Der erste Teil des Codes umfasst die allgemeinen Layoutanpassungen. Im Current Page“-Bereich legt ihr fest, wie die aktuelle Seite, bzw. deren Nummer angezeigt wird. Die Links-over-hover“- Sektion ist für das Layout zuständig, wenn mit der Maus über ein Element gefahren wird.

Der oben gezeigte CSS-Code und die Einstellungen in Page-Navi bieten schlußendlich einen völlig neuen Anblick für die Seitennummerierung. Wie ich finde, deutlich „porfessioneller“ und anschaulicher.

Hier habe ich das Ganze etwas größer dargestellt. Dies dient zu Anschauungszwecken. Jedoch sollte diese Anzeige auch nicht zu klein gestaltet werden, da sie ja auch auf Smartphones oder Tablets bedienbar bleiben soll.

Zum Abschluss noch etwas Feinschliff

Den letzten Feinschliff, könnt ihr dem Ganzen dann in Divi selbst geben. In den Design-Optionen des Blogmopduls kann die Schriftart, -größe, -farbe usw. noch geändert werden.

Das war es dann auch schon. Die Seitennummerierung in WordPress und Divi ändern – gar nicht so schwierig, oder ?
Ich hoffe, ich habe dem Einen oder Anderen von euch helfen können. Lasst mir gern einen Kommentar da oder wenn noch Fragen sind, könnt ihr die auch gerne in den Kommentaren anbringen.

Zu guter Letzt für alle Neugierigen

Noch ein Tipp: Wer sich in WordPress noch nicht so sicher fühlt oder einfach neu einsteigen möchte, dem sei das E-Book von Oliver Pfeil empfohlen. Hier findest du ALLES was du für einen erfolgreichen und umfassenden Umgang mit WordPress brauchst.