Elegant Themes – der Hersteller des Divi-Themes – empfiehlt für eine Paginierung von Blog-Beiträgen das Plugin WP-PageNavi. Nur leider sieht das Resultat standardmässig nicht so hübsch aus. Mit ein wenig CSS wird das Ganze besser lesbar und passt sich besser in das Divi-Design ein.
Zunächst: Das Plugin WP-PageNavi erhalten Sie unter diesem Link. Sie können es im WordPress-Backend unter «Plugins» installieren.
Wenn Sie das Plugin aktivieren werden Sie vielleicht von der Darstellung nicht sehr angetan sein. Den folgenden CSS-Code können Sie nach Ihren Bedürfnissen anpassen und erhalten damit eine aufgehübschte Darstellung. Den CSS-Code fügen Sie ein unter Design/Customizer/Zusätzliches CSS:
.wp-pagenavi span, .wp-pagenavi a, .wp-pagenavi :last-child {
border: 1px solid #bbb !important;
padding: 6px 12px;
margin: 0;
}
.wp-pagenavi span, .wp-pagenavi a { border-right: none !important; }
.wp-pagenavi span, .wp-pagenavi a {
font-weight: bold !important;
color: #999 !important
}
.wp-pagenavi span.current,
.wp-pagenavi a:hover {
color: #666 !important;
background-color: #ddd !important;
}
.wp-pagenavi :first-child { color: #666 !important; }
.wp-pagenavi .nextpostslink:before { content: 'Weiter '; }
.wp-pagenavi .previouspostslink:after { content: ' Zurück'; }Hier eine kurze Aufstellung was der Code tut. Sämtliche Einstellungen können Sie natürlich – Ihrem Design entsprechend – anpassen.
- Zeile 1 bis 6: Ränder und Rahmen der Page-Navigation festlegen
- Zeile 8 bis 11: Textattribute festlegen
- Zeile 13 bis 17: Der aktive und der hover-Link wird gestylt
- Zeile 19: Der Seitenzähler wird gestylt
- Zeile 21 und 22: Die Texte der Weiter- und Zurück-Links werden festgelegt
Den Code können Sie nach Belieben verändern oder erweitern, bis die Ausgabe dem Design Ihrer Website entspricht.
Werbung
Werbung
