WordPress: Seitennummerierung

Anzeigebild für den Artikel "Wordpress: Seitennummerierung"

Ein Blog umfasst viele verschiedene Beiträge oder Artikel auf verschiedenen Kategorien verteilt, welche alle durch eine WordPress Seitennummerierung (Pagination) sortiert werden können. Im Folgenden möchte ich Dir eine Anleitung liefern, wie Du sehr bequem die Standardfunktionen von Worpress nutzen kannst und damit nicht umbedingt auf Plugins zurückgreifen musst.

WordPress Seitennummerierung Anleitung

  1. Adminoberfläche von WordPress
  2. Einstellungen
  3. Lesen
  4. Anzahl bei Blogseiten zeigen maximal ändern
Bild - WordPress Seitennummerierung

WordPress Seitennummerierung

Die hier dargestellte Anleitung sorgt dafür, dass auf die Standardfunktion von WordPress zurückgegriffen wird. Dadurch wird ein HTML Code unter der letzten Vorschau Deiner Beiträge auf der jeweiligen Seite eingefügt. Das sollte in etwas so aussehen:

<nav class="navigation pagination" role="navigation">
    <h2 class="screen-reader-text">Beitrags-Navigation</h2>
    <div class="nav-links"><span class="page-numbers current">1</span>
    <a class="page-numbers" href="http://www.andreasgeiger-it.de/page/2/">2</a>
    <a class="next page-numbers" href="http://www.andreasgeiger-it.de/page/2/">
        <span class="meta-nav screen-reader-text">Nächste Seite </span>»</a>
    </div>
</nav>

Nun kannst Du die entsprechenden CSS Klassen in Deiner style.css Datei verändern oder hinzufügen.

CSS Klasse ‚pagination‘

Die css Klasse ‚pagination‘ modifiziert die Schriftart und verändert das Aussehen der Menüpunkte.
Beispielcode:

.pagination {
        width: 100%;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	text-align: center;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
	overflow: hidden;
	display: block;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-weight: bold;
	line-height: 35px;
	margin: 0px auto;
	padding: 0px;
	position: relative;
}

CSS Klasse ‚page-numbers‘

Die css Klasse ‚page-numbers‘ ist für die Darstellung der einzelnen Menüpunkte verantwortlich. Hierbei gibt es drei Ausführungen:

  • Mit weiterer css Klasse ‚current‘: Aktive Menüpunkt
  • Mit zusätzlicher css Klasse ’next‘: Menüpunkt, um zur nächsten Seite zu gelangen. Dieser ist am Ende des Menüs angesiedelt.
  • Nur ‚page-numbers‘: Design aller anderen Menüpunkten.

Hier kommt ein Beispielcode, wie man diese css Klassen designen könnte:

.pagination .page-numbers:first-child {
	border-left: none;
}
.pagination .page-numbers.current {
	background: #eeeeee;
	min-height: 35px;
	min-width: 35px;
	line-height: 35px;
	padding: 0px;
.pagination .page-numbers:hover,
.pagination .page-numbers:active {
	background: #eeeeee;
	line-height: 35px;
	padding: 0px;
	min-height: 35px;
	min-width: 35px;
}
}

Man kann die Seitennummerierung nach eigenen Wünschen und Vorlieben modifizieren. Meiner Meinung nach ist die Standardfunktion von WordPress Seitennummerierung ein probates Mittel, um schnell und einfach Übersicht in seine Internetseite zu bringen. Wenn Ihr Euch einen eigenen Überblick über meine Seitennummerierung machen wollt, könnt Ihr gerne auf die Startseite gehen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.