Kürzlich hat uns einer unserer Leser gefragt, wie man die Seitenleiste eines WordPress-Themas ändert.
Diese Frage erhalten wir normalerweise von Benutzern, die die Position ihrer Seitenleiste von links nach rechts oder von rechts nach links ändern möchten.
In diesem Tutorial zeigen wir Ihnen, wie Sie die Position der Seitenleiste in WordPress ändern können.
Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren
Dann zurück zu warum wir hier sind.
Warum die Position der Seitenleiste in WordPress ändern?
Usability-Experten glauben, dass Benutzer Seiten von links nach rechts scannen. Sie empfehlen, wichtige Inhalte links zu platzieren, damit Benutzer diese Inhalte zuerst sehen. Dies kann jedoch rückgängig gemacht werden, wenn Ihre Website in einer RTL-Sprache vorliegt (rechts auf der linken Seite).
Finden Sie heraus, ob sollte Ihr WordPress-Blog Seitenleisten haben
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 noch nicht mit Websites vertraut sind, sollten Sie ein WordPress-Design auswählen, dessen bevorzugte Website eine Seitenleiste enthält.
viele WordPress-Themes bieten Optionen zum Ändern der Seitenleistenseite in den Seitenleisteneinstellungen. Wenn Ihr WordPress-Theme diese Option jedoch nicht bietet, müssen Sie die Seitenleistenseite manuell ändern. Gehen Sie weiter, indem Sie entdecken So entfernen Sie die Seitenleiste in WordPress
Schauen wir uns die Methode an, die Sie verwenden sollten, um die Seitenleistenseite von WordPress mithilfe von CSS zu ändern.
Ändern der Seitenleiste mit CSS
Bevor Sie Änderungen an Ihrem WordPress-Theme vornehmen, sollten Sie zunächst die Erstellen eines untergeordneten Themas. Wenn Sie ein untergeordnetes Thema verwenden, können Sie Ihr übergeordnetes Thema aktualisieren, ohne Ihre Änderungen zu verlieren.
Entdecken Sie Wie für jedes Element auf Wordpress eine andere Seitenleiste angezeigt werden
Zweitens sollten Sie immer eine Sicherungskopie Ihrer WordPress-Website erstellen, wenn Sie Änderungen an Ihrem aktiven Thema in Echtzeit vornehmen.
Sie benötigen einen FTP-Client, um die WordPress-Themendateien zu bearbeiten. Konsultieren Sie die Anleitung, wie man FTP verwenden,.
Melden Sie sich mit dem FTP-Client bei Ihrer WordPress-Website an und navigieren Sie zum Themenordner. Es befindet sich normalerweise in:
/ Ihre_site / wp-content / themes / your-Thema-Ordner /
Jetzt müssen Sie die Haupt-Stylesheet-Datei Ihres WordPress-Themas in einem Texteditor wie Notepad herunterladen und öffnen. Diese Datei wird aufgerufen style.cssund es befindet sich im Stammverzeichnis Ihres WordPress-Themas.
Entdecken Sie wie man WordPress Dateien und Ordner verwaltet
Suchen Sie in dieser Datei die CSS-Klasse Ihrer Seitenleiste. Im Allgemeinen ist diese Klasse " Seitenleiste “. In diesem Beispiel verwenden wir das Standard-WordPress-Theme " zwanzig fünfzehn Wer hat diese Klasse für die Sidebar:
.sidebar {float: left; Rand rechts: -100%; maximale Breite: 413px; Position: relativ; Breite: 29.4118%; }
Wie Sie sehen, schwebt die Seitenleiste mit einem Rand von -100% nach links. Wir werden den Schwimmer nach rechts ändern:
.sidebar {float: rechts; Rand-links: -100%; maximale Breite: 413px; Position: relativ; Breite: 29.4118%; }
Speichern Sie Ihre Änderungen und laden Sie die Datei style.css mit einem FTP-Client auf Ihre Website hoch. Wenn Sie jetzt Ihre Website besuchen, sieht sie folgendermaßen aus:
Wir haben zwar die Seitenleiste verschoben, aber den Inhaltsbereich nicht verschoben. " Zwanzig Fünfzehn Verwendet dieses CSS, um die Position des Inhaltsbereichs zu definieren.
.site-content {display: block; Schwimmer: links; ganz links: 29.4118%; Breite: 70.5882%; }
Wir werden es ändern, um den Inhalt nach rechts zu verschieben. Wie folgt:
.site-content {display: block; Schwimmer: links; Rand rechts: 29.4118%; Breite: 70.5882%; }
So sieht Ihre Website aus, nachdem Sie diesen CSS-Code angewendet haben.
Wie Sie sehen, haben wir die Position des Inhaltsbereichs und der Seitenleiste geändert. Es gibt jedoch immer noch einen weißen Block auf der linken Seite.
Gehen Sie weiter und entdecken Sie wie man WordPress Dateien und Ordner verwaltet
Diese Fehler treten häufig bei der Arbeit mit CSS auf. Es wird einige Detektivarbeit erfordern, um zu verstehen, was dies verursacht und wie es behoben werden kann.
Verwenden Sie das "Inspector" -Tool Ihres Browsers, um den Quellcode anzuzeigen. Zeigen Sie mit der Maus auf die betroffene Region im Browser, klicken Sie mit der rechten Maustaste und wählen Sie "Inspektor" aus dem Browser-Menü.
Wenn Sie die Maus in der Quellcodeansicht bewegen, werden Sie die betroffenen Bereiche in der Live-Vorschau hervorheben. Im rechten Bereich sehen Sie das für das ausgewählte Element verwendete CSS.
Unsere Ideen für 5 WordPress-Plugins zum visuellen Bearbeiten von CSS in Ihrem Blog
Daher muss das CSS, das dem markierten Element entspricht, neu angepasst werden.
@media screen und (min-width: 59.6875em) {body: before {background-color: #fff; Kastenschatten: 0 0 1px rgba (0, 0, 0, 0.15); Inhalt: ""; Anzeige: Block; Höhe: 100%; Mindesthöhe: 100%; Position: feststehend; oben: 0; links: 0; Breite: 29.4118%; Z-Index: 0; / * Behebt einen Fehler beim Scrollen in Safari * /}
Dieser CSS-Code fügt oben links einen leeren Block mit 29,4118% width und eine Breite von 100% hinzu. So verschieben wir es nach rechts.
@media screen und (min-width: 59.6875em) {body: before {background-color: #fff; Kastenschatten: 0 0 1px rgba (0, 0, 0, 0.15); Inhalt: ""; Anzeige: Block; Höhe: 100%; Mindesthöhe: 100%; Position: feststehend; oben: 0; rechts: 0; Breite: 29.4118%; Z-Index: 0; / * Behebt einen Fehler beim Scrollen in Safari * /}
Nach dem Speichern und Hochladen des Stylesheets auf den Server sieht Ihre Website folgendermaßen aus.
Das Arbeiten mit CSS kann für Anfänger verwirrend sein. Wenn Sie nicht alle manuellen Arbeiten ausführen möchten, können Sie das versuchen WordPress CSS Hero Plugin. Sie können CSS bearbeiten, ohne Code schreiben zu müssen, und es funktioniert mit jedem WordPress-Thema.
Entdecken Sie auch einige Premium-WordPress-Plugins
Sie können andere verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung Ihres Blogs oder Ihrer Website zu optimieren.
Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.
1. Zxeion
Zxeion ist ein mächtiger WordPress Plugin premium verantwortlich für die Verbesserung der Sicherheit Ihrer Website. Dieses Plugin enthält eine Sammlung von Schutz- und Sicherheitstools, die Ihre Website vor möglichen Angriffen schützen.
Das Echtzeit-Schutzsystem hilft Ihnen dabei, Bedrohungen für Ihre Website zu erkennen und zu blockieren, ohne dass Sie etwas unternehmen müssen.
Entdecken Sie auch unsere 7 Plugins, um Ihre Seitenleisten in WordPress zu verbessern
Seine Funktionen sind: Echtzeitschutz, exzellenter Kundensupport, regelmäßige Updates, IP-Adressblocker, exzellente Dokumentation, moderne und professionelle Benutzeroberfläche, dedizierter Kundensupport und andere
Herunterladen | Demo | Web-Hosting
2. Slaido
Slaido ist ein WordPress Plugin Premium, mit dem Sie aus fast 320 reaktionsschnellen Slider-Vorlagen auswählen und eine davon mit nur wenigen Klicks in Ihre Website importieren können. Es ist ein komplettes Paket von Vorlagen, perfekt für Slider Revolution. Sie müssen es also zuerst installieren, um es vollständig nutzen zu können WordPress Plugin
Die Hauptmerkmale sind: ein ansprechendes Layout der Schieberegler, das einfache Importieren oder Exportieren von Schiebereglern, regelmäßige Updates, rund um die Uhr verfügbarer Kundensupport, flüssige und sehr coole Animationen, die Verfügbarkeit von Video-Tutorials für einen schnellen Start, Unterstützung für Google Fonts und vieles mehr.
Herunterladen | Demo | Web-Hosting
3. Kontaktieren Sie uns
Das Kontaktformular ist ein erstklassiges WordPress-Plugin und ein einfaches Tool mit zahlreichen Anpassungsoptionen, mit denen Sie ein klares und ermutigendes Formular anzeigen können, auf dem Ihre Besucher Sie kontaktieren können, indem sie ihre Nachricht hinterlassen.
Sie können die erforderlichen Felder definieren, das beste Layout der Felder auswählen und es vollständig anpassen, um Ihre Kunden oder Besucher zu ermutigen, ihre Vorschläge oder Nachrichten zu hinterlassen.
Wir laden Sie auch ein zu lesen: 10 WordPress-Plugins zum Erstellen und Verwalten einer Restaurant-Website
Richten Sie einfach die E-Mail-Adresse ein, unter der Sie die Nachrichten erhalten möchten, und verwenden Sie sie, um Ihr Unternehmen in die profitabelste Richtung zu führen.
Herunterladen | Demo | Web-Hosting
Empfohlene Ressourcen
Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.
- So finden Sie die Login-URL Ihres WordPress-Blogs
- So erstellen Sie eine Superheld-Zone mit animiertem Text
- So passen Sie das CSS Ihrer WordPress-Website an
- Wie zu den Kategorien in das Menü Ihres Wordpress-Blog hinzufügen
Zusammenfassung
Es! Das war's für dieses Tutorial. Wir hoffen, es hilft Ihnen dabei, die Seitenleiste Ihres WordPress-Blogs zu ändern. Zögere nicht zu Teile diesen Artikel mit deinen Freunden in deinen bevorzugten sozialen Netzwerken.
Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.
Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.
...
