Wie man die Seitenleiste in WordPress ändert

Kürzlich fragte uns einer unserer Leser, wie man die Seitenleiste in einem WordPress-Theme ändern kann. Wir erhalten diese Frage häufig, 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 Seite der Seitenleiste in WordPress ändern können.

Warum die Seite der Seitenleiste in WordPress ändern

Usability-Experten sind der Meinung, dass Menschen Seiten von links nach rechts durchsuchen. Sie empfehlen, die wichtigen Inhalte auf der linken Seite zu platzieren, damit die Benutzer sie zuerst sehen. Dies könnte sich jedoch umkehren, wenn Ihre Website in einer Sprache verfasst ist, die von rechts nach links geschrieben wird.

Viele WordPress-Websites 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 mit einer Website beginnen, sollten Sie ein WordPress-Theme wählen, bei dem sich die Seitenleiste an der von Ihnen bevorzugten Stelle befindet.

Viele Themes bieten die Möglichkeit, die Seiten der Seitenleiste in den Theme-Einstellungen zu wechseln. Wenn Ihr Theme jedoch nicht über diese Option verfügt, müssen Sie die Seitenleiste manuell ändern.

Sehen wir uns also an, wie Sie die Seitenleiste in WordPress mit ein wenig CSS ganz einfach ändern können.

Ändern der Seitenleistenseite in WordPress mit CSS

Bevor Sie Änderungen an Ihrem Theme vornehmen, sollten Sie zunächst die Erstellung eines Child-Themes in Betracht ziehen. Mit einem Child-Theme können Sie Ihr Eltern-Theme aktualisieren, ohne dass Ihre Änderungen verloren gehen.

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

Sie benötigen einen FTP-Client, um Ihre Theme-Dateien zu bearbeiten. In unserer Anleitung für Einsteiger erfahren Sie, wie Sie FTP zum Hochladen von Dateien in WordPress verwenden.

Stellen Sie mit dem FTP-Client eine Verbindung zu Ihrer WordPress-Website her und gehen Sie zu Ihrem Theme-Ordner. Dieser befindet sich normalerweise unter:

/ihrewebsite/wp-content/themes/ihr-theme-ordner/

Laden Sie nun die Haupt-Stylesheet-Datei Ihres Themes herunter und öffnen Sie sie in einem einfachen Texteditor wie Notepad. Diese Datei heißt style.css und befindet sich im Stammverzeichnis Ihres Themas.

Suchen Sie in dieser Datei die CSS-Klasse für Ihre Seitenleiste. Sie lautet normalerweise .sidebar. In diesem Beispiel verwenden wir das Standard-WordPress-Theme Twenty Fifteen, das dieses CSS zur Definition der Seitenleiste enthält:

.sidebar {
		float: left;
		margin-right: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}

Wie Sie sehen können, schwebt die Seitenleiste nach links mit einem Rand von -100% nach rechts. Wir ändern es in float right und margin-left wie folgt:

.sidebar {
		float: right;
		margin-left: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}

Speichern Sie Ihre Änderungen und laden Sie die Datei style.css mit einem FTP-Client zurück auf Ihre Website. Wenn Sie nun Ihre Website besuchen, wird sie so aussehen:

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

.site-content {
		display: block;
		float: left;
		margin-left: 29.4118%;
		width: 70.5882%;
	}

Wir werden es ändern, um den Inhalt nach rechts zu verschieben. Etwa so:

.site-content {
		display: block;
		float: left;
		margin-right: 29.4118%;
		width: 70.5882%;
	}

So sieht unsere Website nach der Anwendung dieses CSS aus.

Wie Sie sehen können, haben wir die Seiten für den Inhalt und die Seitenleistenbereiche gewechselt. Allerdings gibt es immer noch einen weißen Block auf der linken Seite.

Auf solche Dinge stößt man, wenn man mit CSS arbeitet. Es bedarf einiger detektivischer Arbeit, um herauszufinden, was die Ursache dafür ist und wie man sie beheben kann.

Verwenden Sie das Inspektionswerkzeug Ihres Browsers, um sich den Quellcode anzusehen. Zeigen Sie mit der Maus auf die betroffene Stelle im Browser, klicken Sie mit der rechten Maustaste und wählen Sie im Browsermenü die Option „Inspizieren“.

Wenn Sie Ihre Maus in der Quellcodeansicht bewegen, werden die betroffenen Bereiche in der Live-Vorschau hervorgehoben. Im rechten Fensterbereich sehen Sie die für das ausgewählte Element verwendeten CSS.

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

@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}

Dieser CSS-Code fügt links oben einen leeren Inhaltsblock mit 29,4118 % Breite und 100 % Breite ein. Hier sehen Sie, wie wir ihn nach rechts verschieben können.

@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}

Nachdem wir das Stylesheet gespeichert und auf den Server hochgeladen haben, sieht unsere Website so aus.

Die Arbeit mit CSS kann für Anfänger verwirrend sein. Wenn Sie sich die ganze manuelle Code-Arbeit ersparen wollen, sollten Sie CSS Hero ausprobieren. Damit können Sie CSS bearbeiten, ohne Code zu schreiben, und es funktioniert mit jedem WordPress-Theme.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die Seitenleiste in WordPress zu ändern. Vielleicht interessiert Sie auch unsere Liste von 12 WordPress-Seitenleisten-Tricks, um maximale Ergebnisse zu erzielen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.