So passen Sie die Paginierung im WordPress-Blockeditor an

Die Paginierung ist eine wichtige Komponente im Webdesign, insbesondere für Websites mit umfangreichen Inhalten wie Blogs oder Produktlisten. Eine effektive Paginierung sorgt für ein nahtloses Surferlebnis und steigert sowohl die Benutzerzufriedenheit als auch die Suchmaschinenoptimierung (SEO).

Die Paginierungsfunktion im WordPress-Blockeditor, allgemein bekannt als Gutenberg, ist Teil des Query Loop-Blocks und kein eigenständiger Block. Mit dem Block „Abfrageschleife“ können Sie Beiträge anzeigen oder benutzerdefinierte Vorlagen in einem Blockthema erstellen.

Der Paginierungsblock in der Abfrageschleife von Gutenberg ist ziemlich begrenzt, wenn es um die sofortige Anpassung geht. Das Standarddesign entspricht möglicherweise nicht immer den ästhetischen Anforderungen Ihrer Website, Sie können jedoch das Erscheinungsbild und die Funktionalität verbessern, indem Sie benutzerdefiniertes CSS verwenden.

Dieser Artikel führt Sie durch die Schritte zum Ändern und Optimieren der Paginierung im Gutenberg-Editor durch Hinzufügen von benutzerdefiniertem CSS, sodass Sie die Navigation Ihrer Website und das allgemeine Benutzererlebnis verbessern können.

Schritte zum Anpassen der Paginierung im WordPress-Blockeditor

Schritt 1: Erstellen oder bearbeiten Sie eine Seite oder Vorlage

Erstellen Sie einen neuen Beitragstyp (Seite/Beitrag) oder wählen Sie den vorhandenen aus. Wenn Sie ein Blockdesign verwenden, können Sie auch eine neue Vorlage hinzufügen oder die vorhandene Vorlage mit dem Site Editor bearbeiten.

In diesem Beispiel erstellen wir eine neue Seite, die wir als Beitragsseite (Blogseite) verwenden.

Fügen Sie den Abfrageschleifenblock hinzu

Navigieren Sie in Ihrem WordPress-Dashboard zu Seiten -> Neue Seite hinzufügen . Fügen Sie im Gutenberg einen Query Loop-Block hinzu. Mit diesem Block können Sie Beiträge, Seiten oder benutzerdefinierte Beitragstypen anzeigen.

Sie können ein Muster für die Abfrageschleife auswählen oder leer beginnen. Für dieses Beispiel wählen wir die Option „Start schwarz“ und wählen dann für die Variation der Abfrageschleife „Bild“, „Datum“ und „Titel“ aus.

Als Nächstes können Sie das Erscheinungsbild aller Elemente im Block „Abfrageschleife“ mithilfe der Blockeinstellungen bearbeiten und gestalten.

Schritt 2: Identifizieren Sie die CSS-Klasse für das Paginierungselement

Sie müssen die spezifische CSS-Klasse bestimmen, bevor Sie das Paginierungselement anpassen. Im Allgemeinen hängt der Klassenname vom WordPress-Theme und dem von Ihnen verwendeten aktiven Plugin ab. Wie erhalten Sie also den CSS-Klassennamen jedes Paginierungselements auf Ihrer Seite?

Zeigen Sie eine Vorschau Ihrer Seite an, indem Sie auf die Schaltfläche „Vorschau in neuem Tab“ klicken.

Sie können die integrierten Entwicklertools Ihres Webbrowsers verwenden (fast alle Webbrowser verfügen über diese Funktion). Wenn Sie Google Chrome verwenden, können Sie auf das Menüsymbol (Dreipunktsymbol) klicken und Weitere Tools -> Entwicklertools auswählen.

Sobald Sie das Fenster „Entwicklertools“ geöffnet haben, klicken Sie auf das Pfeilsymbol, um ein Element auf Ihrer Seite zu überprüfen (siehe Abbildung unten).

Zeigen Sie als Nächstes mit dem Cursor auf die Paginierungselemente (Hauptpaginierungscontainer, einzelne Seitenzahlen, aktuelle Seitenzahl, Schaltflächen „Zurück“ und „Weiter“), um deren Klassen zu bestimmen.

Wie Sie dem Bild oben entnehmen können, haben wir unten die CSS-Klassen unserer Paginierungselemente identifiziert:

Schritt 3: Hinzufügen von benutzerdefiniertem CSS für die Paginierung

Als Nächstes fügen wir das CSS-Snippet zum WordPress-Theme-Customizer hinzu, um das Paginierungselement im Query Loop-Block anzupassen. Gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild -> Customizer -> Zusätzliches CSS . Kopieren Sie anschließend das CSS-Snippet unten und fügen Sie es in das verfügbare Feld ein.

Hinweis : Wenn Sie ein Block-Theme verwenden, klicken Sie hier, um zu erfahren, wie Sie einen Theme-Anpasser in Ihrem WordPress aktivieren.

 .wp-block-query-pagination {
  Anzeige: Flex;
  rechtfertigen-Inhalt: Mitte;
  Rand: 20px 0;
}

.wp-block-query-pagination .page-numbers {
  Polsterung: 5px 8px;
  Hintergrundfarbe: #f0f0f0;
  Rand: 0 3px;
  Farbe: #000000;
}

.wp-block-query-pagination .page-numbers.current {
  Hintergrundfarbe: #601599;
  Farbe: weiß;
}

.wp-block-query-pagination- previous {
  Polsterung: 8px 12px;
  Hintergrund: #233b27;
  Rand: 0 4px;
  Farbe: #ffffff;
  Randradius: 4px;

}

.wp-block-query-pagination-next {
  Polsterung: 8px 12px;
  Hintergrund: #233b27;
  Rand: 0 4px;
  Farbe: #ffffff;
  Randradius: 4px;
}

.wp-block-query-pagination .page-numbers:hover {
  Hintergrundfarbe: #be76f5;
  Farbe: weiß;
}

.wp-block-query-pagination- previous:hover {
  Hintergrund: #ffb300;
  Farbe: #000000;
}

.wp-block-query-pagination-next:hover {
  Hintergrund: #ffb300;
  Farbe: #000000;
}

Vergessen Sie nicht, auf die Schaltfläche „Veröffentlichen“ zu klicken, um die vorgenommenen Änderungen zu übernehmen.

Das ist es. Um das Ergebnis zu sehen, kehren Sie bitte zu Ihrer Seite zurück und zeigen Sie eine Vorschau an. Sie werden sehen, dass Ihre Paginierungselemente angepasst sind. Fühlen Sie sich frei, die CSS-Eigenschaftswerte zu ersetzen, um das Aussehen zu erhalten, das zu Ihrem Gesamtdesign passt.

Vergessen Sie nicht, Ihre Seite zu speichern oder zu veröffentlichen, wenn Sie möchten.

Was hat der CSS-Code bewirkt?

• Haupt-Paginierungscontainer: .wp-block-query-pagination
  • Verwendet Flexbox, um die Paginierungselemente zu zentrieren und einen vertikalen Abstand (20 Pixel) hinzuzufügen.
• Einzelne Seitenzahlen: .wp-block-query-pagination .page-numbers
  • padding: 5px 8px; : Erstellt Abstand innerhalb jeder Seitenzahl. Es fügt 5 Pixel vertikalen Abstand (oben und unten) und 8 Pixel horizontalen Abstand (links und rechts) hinzu und vergrößert so den anklickbaren Bereich.
  • background-color: #f0f0f0; : Setzt die Hintergrundfarbe der Seitenzahlen auf ein helles Grau (#f0f0f0).
  • margin: 0 3px; : Fügt horizontalen Abstand (3 Pixel links und rechts) zwischen den Seitenzahlelementen hinzu. Da es keinen vertikalen Rand gibt, wirkt sich der Abstand nur auf die horizontale Ausrichtung aus.
  • color: #000000; : Ändert die Textfarbe der Seitenzahlen in Schwarz, um einen guten Kontrast zum hellen Hintergrund zu gewährleisten.
• Aktuelle Seitennummer: .wp-block-query-pagination .page-numbers.current
  • background-color: #601599; : Ändert die Hintergrundfarbe der aktuellen (aktiven) Seitenzahl in ein sattes Lila (#601599). Dadurch wird optisch angezeigt, welche Seite aktuell ausgewählt ist.
  • color: white; : Stellt die Textfarbe auf Weiß ein und bietet einen hohen Kontrast zum violetten Hintergrund, wodurch die aktive Seitennummer sichtbar wird.
• Schaltflächen „Zurück“ und „Weiter“: .wp-block-query-pagination-previous und . wp-block-query-pagination-next
  • Mit dunkelgrünem Hintergrund, weißem Text, Polsterung und leicht abgerundeten Ecken.
• Hover-Effekte:
  • .wp-block-query-pagination .page-numbers:hover
    • Wenn der Benutzer mit der Maus über eine einzelne Seitenzahl fährt, ändert sich die Hintergrundfarbe in ein helles Lila (#be76f5) für einen subtilen interaktiven Effekt.
    • Die Textfarbe wechselt zu Weiß, wodurch der Kontrast erhöht und die Lesbarkeit beim Hover verbessert wird. Hover-Effekte:
  • .wp-block-query-pagination-previous:hover und . wp-block-query-pagination-next:hover
    • Wenn der Benutzer mit der Maus über die Schaltflächen „Zurück“ oder „Weiter“ fährt, ändert sich der Hintergrund in ein leuchtendes Gelb-Orange (#ffb300), wodurch sie hervorstechen.
    • Die Textfarbe wechselt zu Schwarz und bietet so eine klare Lesbarkeit vor dem hellen Hintergrund.

Das Fazit

Dieser Artikel zeigt, wie einfach Sie die Paginierung im WordPress Block Editor ohne die Hilfe eines Plugins anpassen können. Das Anpassen der Paginierung im WordPress-Blockeditor mit benutzerdefiniertem CSS ermöglicht eine bessere Kontrolle über das Erscheinungsbild und die Funktionalität der Navigation Ihrer Website.

Durch die Nutzung von CSS können Sie die Paginierung an den Stil Ihrer Marke anpassen, das Benutzererlebnis verbessern und das Gesamtdesign Ihrer WordPress-Site verbessern. Unabhängig davon, ob Sie Farben, Größen oder das Layout von Paginierungselementen anpassen möchten, können Sie dank der Flexibilität von benutzerdefiniertem CSS eine nahtlose und optisch ansprechende Benutzerreise auf Ihrer Website erstellen.

Wenn Sie jedoch umfangreiche Designoptionen wünschen, ohne benutzerdefiniertes CSS zu benötigen, empfehlen wir Ihnen dringend die Verwendung eines WordPress-Plugins wie Divi oder Elementor, da beide intuitive visuelle Builder mit umfangreichen Anpassungsfunktionen bieten, mit denen Sie atemberaubende, vollständig responsive Layouts erstellen können Erweiterte Optionen für Paginierung, dynamischen Inhalt und Stil direkt in der Benutzeroberfläche des Seitenerstellers.