So ändern Sie die Seitenleisten-Seite in WordPress

Vor kurzem hat uns einer unserer Leser gefragt, wie man die Seitenleisten-Seite in einem WordPress-Theme ändern kann. Diese Frage wird häufig gestellt, wenn Benutzer ihre Seitenleiste von links nach rechts oder von rechts nach links ändern möchten. In diesem Artikel zeigen wir Ihnen, wie Sie die Seitenleisten-Seite in WordPress ändern.

Warum die Sidebar-Seite in WordPress ändern?

Usability-Experten glauben, dass Leute Seiten von links nach rechts scannen. Sie empfehlen, den wichtigen Inhalt auf der linken Seite zu platzieren, damit Benutzer den Inhalt zuerst sehen können. Dies kann jedoch umgekehrt werden, wenn sich Ihre Site in einer Sprache befindet, die von rechts nach links geschrieben ist.

Viele WordPress-Sites verwenden das typische Blog-Layout mit zwei Spalten. Eine für den Inhalt und die andere Spalte für die Seitenleiste.

Wenn Sie gerade erst eine Website starten, sollten Sie ein WordPress-Theme auswählen, in dem sich die Seitenleiste an Ihrem bevorzugten Ort befindet.

Viele Designs bieten Optionen zum Wechseln der Seitenleisten-Seiten von den Designeinstellungen. Wenn Ihr Design diese Option jedoch nicht hat, müssen Sie die Seitenleisten-Seiten manuell ändern.

Sehen wir uns jedoch an, wie Sie die Seitenleisten-Seite in WordPress mit ein wenig CSS leicht ändern können.

Ändern der Seitenleisten-Seite in WordPress mithilfe von CSS

Bevor Sie Änderungen an Ihrem Design vornehmen, sollten Sie zuerst ein untergeordnetes Design erstellen. Wenn Sie ein untergeordnetes Design verwenden, können Sie Ihr übergeordnetes Design aktualisieren, ohne Ihre Änderungen zu verlieren.

Zweitens sollten Sie immer ein Backup Ihrer WordPress-Site erstellen, wenn Sie direkte Änderungen an Ihrem aktiven WordPress-Design vornehmen.

Sie benötigen einen FTP-Client, um Ihre Designdateien zu bearbeiten. In unserem Einsteigerhandbuch erfahren Sie, wie Sie mit FTP Dateien in WordPress hochladen.

Stellen Sie über den FTP-Client eine Verbindung zu Ihrer WordPress-Site her und gehen Sie zu Ihrem Designordner. Es befindet sich normalerweise in:

/ deinewebsite / wp-content / themes / dein-themenordner /

Nun müssen Sie die Stylesheet-Datei Ihres Themes in einem einfachen Texteditor wie Notepad herunterladen und öffnen. Diese Datei wird aufgerufen style.css, und es befindet sich im Stammverzeichnis des Themes.

Suchen Sie in dieser Datei die CSS-Klasse für Ihre Sidebar. Das ist normal .Seitenleiste. In diesem Beispiel verwenden wir das Standard-WordPress-Design Twenty Fifteen, das dieses CSS zur Definition der Seitenleiste enthält:

 .Seitenleiste float: left; rechte Marge: -100%; Max-Breite: 413px; Position: relativ; Breite: 29,4118%;  

Wie Sie sehen, wird die Seitenleiste mit einem Rand von -100% nach rechts verschoben. Wir werden es so ändern, dass es nach rechts und links schwimmt:

 .Seitenleiste float: right; Rand links: -100%; Max-Breite: 413px; Position: relativ; Breite: 29,4118%;  

Speichern Sie Ihre Änderungen und laden Sie die style.css-Datei mit dem FTP-Client zurück auf Ihre Website. Wenn Sie jetzt Ihre Website besuchen, sieht das so aus:

Das liegt daran, dass wir die Seitenleiste verschoben haben, den Inhaltsbereich jedoch nicht verschoben haben. Twenty Fifteen verwendet dieses CSS, um die Position des Inhaltsbereichs zu definieren.

 .Seiteninhalt Anzeige: Block; Schwimmer: links; Rand links: 29,4118%; Breite: 70,5882%;  

Wir werden es ändern, um den Inhalt nach rechts zu verschieben. So was:

 .Seiteninhalt Anzeige: Block; Schwimmer: links; rechte Marge: 29,4118%; Breite: 70,5882%;  

So sah unsere Website nach der Anwendung dieses CSS aus.

Wie Sie sehen, haben wir die Seiten sowohl für den Inhalt als auch für die Seitenleistenbereiche gewechselt. Es gibt jedoch immer noch einen weißen Block auf der linken Seite.

Sie werden auf solche Dinge stoßen, wenn Sie mit CSS arbeiten. Es wird Detektivarbeit erfordern, um herauszufinden, was das verursacht und wie man es anpassen kann.

Verwenden Sie das Inspect-Tool Ihres Browsers, um den Quellcode einzusehen. Zeigen Sie mit der Maus im Browser auf die betroffene Region, klicken Sie mit der rechten Maustaste, und wählen Sie im Browsermenü Inspizieren.

Wenn Sie Ihre Maus in der Quelltextansicht bewegen, werden Sie feststellen, welche Bereiche davon in der Live-Vorschau hervorgehoben werden. Im rechten Fensterbereich können Sie das für dieses ausgewählte Element verwendete CSS sehen.

Wir haben herausgefunden, dass dieses CSS in unserem Stylesheet angepasst werden muss.

 @media screen und (min-width: 59.6875em) body: before Hintergrundfarbe: #fff; Box-Schatten: 0 0 1px rgba (0, 0, 0, 0,15); Inhalt: ""; Bildschirmsperre; Höhe: 100%; Mindesthöhe: 100%; Position: feststehend; oben: 0; links: 0; Breite: 29,4118%; z-Index: 0; / * Behebt einen blinkenden Fehler beim Scrollen in Safari * / 

Dieser CSS-Code fügt oben links einen leeren Inhaltsblock mit einer Breite von 29.4118% und einer Breite von 100% hinzu. So verschieben wir es nach rechts.

 @media screen und (min-width: 59.6875em) body: before Hintergrundfarbe: #fff; Box-Schatten: 0 0 1px rgba (0, 0, 0, 0,15); Inhalt: ""; Bildschirmsperre; Höhe: 100%; Mindesthöhe: 100%; Position: feststehend; oben: 0; rechts: 0; Breite: 29,4118%; z-Index: 0; / * Behebt einen blinkenden Fehler beim Scrollen in Safari * / 

Nachdem Sie das Stylesheet gespeichert und wieder auf den Server hochgeladen haben, sah unsere Website so aus.

Die Arbeit mit CSS kann für Anfänger verwirrend sein. Wenn Sie nicht die gesamte manuelle Code-Arbeit ausführen möchten, sollten Sie CSS Hero ausprobieren. Sie können CSS bearbeiten, ohne Code schreiben zu müssen, und funktioniert mit jedem WordPress-Theme.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die Sidebar-Seite in WordPress zu ändern. Möglicherweise möchten Sie auch unsere Liste der 12 WordPress-Sidebar-Tricks anzeigen, um maximale Ergebnisse zu erzielen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.