Das Perfektionieren des Layouts Ihrer WordPress-Website kann viel Arbeit sein, ist aber auch unerlässlich für die Benutzererfahrung (UX), das Engagement und die Konversionen. Es kann daher frustrierend sein, wenn ein scheinbar zufälliger Fehler zu einer Störung der Anzeige Ihrer Website führt — wie zum Beispiel Ihre Seitenleiste, die plötzlich unter dem Inhalt erscheint, anstatt an der Seite.
Während es einige mögliche Ursachen gibt, liegt es hauptsächlich an Problemen mit der Hypertext Markup Language (HTML) oder Cascading Style Sheets (CSS). Glücklicherweise sind die Probleme relativ einfach zu beheben, sodass Sie Ihre Website schnell wieder in Topform bringen können.
In diesem Artikel gehen wir die häufigsten Ursachen dieses Fehlers durch und zeigen Ihnen dann, wie Sie ihn in drei einfachen Schritten lösen können. Jetzt starten!
Häufige Ursachen dafür, dass die Seitenleiste unter den Inhalt in WordPress fällt
Sidebars in WordPress sind Inhaltsbereiche, die entweder links oder rechts vom Hauptsegment der Seite (oder manchmal beides) angezeigt werden sollen. Sie enthalten oft Widgets, Anmeldeformulare, Links zu verwandten Beiträgen oder ähnliche Inhalte, die Sie auf Ihrer gesamten Website einbinden möchten.
Aufgrund verschiedener Fehler oder Probleme können Ihre Seitenleisten manchmal am unteren Rand der Seite erscheinen, anstatt links oder rechts. Überflüssig zu sagen, dass dies leicht eine gut gestaltete Webseite ruinieren kann.
Die Hauptursache für dieses Verhalten sind Probleme entweder mit dem HTML oder CSS auf Ihrer Website. Es ist normalerweise das Ergebnis von direkten Änderungen, die Sie am Code Ihrer Website vorgenommen haben, wie z. B. eine Theme- oder Plugin-Datei.
Zum Beispiel könnte es ein zusätzliches oder nicht angegebenes <div> Tag auf der Seite geben. Das Problem könnte sogar auf falsche Breiten- und Float-Einstellungen in Ihrem CSS zurückzuführen sein. Glücklicherweise ist dieser Fehler leicht zu beheben.
Vermeiden Sie den Stress
Vermeiden Sie Fehlerbehebung, wenn Sie sich für DreamPress anmelden. Unsere freundlichen WordPress-Experten stehen Ihnen rund um die Uhr zur Verfügung, um bei Website-Problemen zu helfen — egal ob groß oder klein.
Tarife ansehenWie man den WordPress-Seitenleistenfehler unter dem Inhalt in 3 Schritten behebt
Nun, da Sie die möglichen Ursachen dieses verwirrenden Fehlers kennen, ist es Zeit, ihn zu korrigieren. Wir empfehlen, die folgenden drei Schritte der Reihe nach durchzuführen, wobei Sie erst zum nächsten übergehen, wenn der vorherige nicht funktioniert hat. Bevor Sie anfangen, denken Sie daran, eine Sicherungskopie Ihrer Website zu erstellen für alle Fälle.
Schritt 1: Machen Sie Ihre letzten Änderungen rückgängig
Der erste Schritt ist auch der einfachste. Wenn sich Ihre Seitenleiste nach einer Änderung an Ihrer Website verschoben hat — sei es durch die Installation eines neuen Plugins, das Hinzufügen von benutzerdefiniertem Code oder etwas anderes — machen Sie es einfach rückgängig. Das Rückgängigmachen der Aktion stellt Ihr Layout wieder auf das ursprüngliche Format zurück und hilft dabei, die Ursache des Problems zu isolieren.
Sie können damit beginnen, die Änderung rückgängig zu machen und Ihre Website zu aktualisieren, um zu sehen, ob die Seitenleiste wieder an ihrem richtigen Platz ist. Wenn ja, können Sie dann nach potenziellen Problemen mit den Änderungen suchen, die Sie vornehmen wollten. Wenn Sie beispielsweise ein neues Plugin installiert haben, suchen Sie nach Alternativen. Wenn Sie den Code Ihrer Website geändert oder ergänzt haben, suchen Sie nach Tippfehlern oder Syntaxfehlern.
Schritt 2: Unabgeschlossene <div> Tags reparieren oder zusätzliche <div> Tags entfernen
Häufig ist ein nicht geschlossenes oder zusätzliches <div>-Tag in Ihrem Seiten-Code die Ursache für den WordPress-Sidebar-Fehler. Diese HTML-Tags definieren die Grenzen von Abschnitten auf Ihrer Website. Wenn sie falsch platziert sind, werden die Browser die Seite nicht richtig darstellen (daher die wandernde Sidebar).
Hier ist ein Beispiel für eine korrekt formatierte Seite:
Unten ist dieselbe Seite mit einem nicht geschlossenen <div>-Tag:
Sie können sehen, dass das, was das schließende <div> Tag sein sollte, den Schrägstrich vermisst. Dadurch weiß der Browser nicht, dass es geschlossen werden soll, und der Inhalt, der außerhalb des Elements sein sollte, ist jetzt innerhalb.
Um dies zu beheben, durchsuchen Sie alle von Ihnen geänderten Vorlagendateien nach fehlenden oder zusätzlichen Tags. Generell können diese Fehler in den “template parts” Dateien Ihres WordPress-Themas gefunden werden. Um dorthin zu gelangen, gehen Sie zu Ihrem WordPress-Armaturenbrett und navigieren Sie zu Erscheinungsbild > Theme-Editor.
Wählen Sie das richtige Theme aus dem Dropdown-Menü oben aus und suchen Sie dann im Seitenbereich den Abschnitt template parts.
Die Vorlagen, die Seiten und Beiträge generieren, befinden sich normalerweise im Inhalts-Bereich. Finden Sie die benötigte aus der Liste heraus, überprüfen Sie sie und nehmen Sie etwaige Korrekturen vor. Dann können Sie auf Datei aktualisieren klicken, um Ihre Änderungen zu speichern.
Wenn Sie wissen, welche Datei Sie bearbeitet haben, können Sie direkt dorthin springen. Andernfalls müssen Sie alle auf Inkonsistenzen überprüfen.
Schritt 3: CSS-Probleme beheben
Ein weiterer häufiger Grund für diesen Fehler befindet sich in Ihrem Website-CSS. Der Abschnitt Zusätzliches CSS des WordPress-Anpassers ermöglicht es Ihnen, benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen.
Wenn Sie diese Funktion genutzt oder das CSS auf andere Weise bearbeitet haben, haben Sie möglicherweise den Code falsch formatiert. Im Falle der Verschiebung von Seitenleisten ist die häufigste Ursache die “width”-Eigenschaft.
Sie sollten überprüfen, dass die Summe der Breiten der Content und Sidebar Elemente die Breite des Wrap Elements nicht überschreitet. Wenn dies der Fall ist, wird das kleinere Element nach unten verschoben, um Platz zu schaffen.
Werkzeuge zur einfacheren Fehlerbehebung bei Seitenleistenproblemen
Sie können das Problem auch selbst ohne Verwendung von Code beheben. Es gibt mehrere Online-Tools, die Ihren Code validieren und auf Fehler überprüfen können.
Sie können den W3C Markup Validation Service verwenden, um HTML-Code zu überprüfen. Der W3C CSS Validation Service ist das Gegenstück für CSS. Online Web Check ist ebenfalls ein ausgezeichnetes Werkzeug, das sowohl für HTML als auch für CSS funktioniert.
Diese Dienste sind auch fantastisch, wenn Sie einfach nur einen zweiten Blick auf Ihren Code werfen möchten, unabhängig vom Können. Eine schnelle Doppelprüfung hat noch niemandem geschadet!
Sie können auch das Beheben von WordPress-Fehlern von Ihrer To-Do-Liste streichen mit unserem DreamCare-Service. Unser Team von Experten kümmert sich um alles im Backend Ihrer Website, um sicherzustellen, dass sie sicher, geschützt und immer verfügbar ist.
Zusätzliche WordPress-Ressourcen
Sagen Sie auf Wiedersehen zu kaputten Links und Fehlermeldungen! Wir haben mehrere Anleitungen zusammengestellt, um Ihnen bei der Fehlerbehebung aller Arten von WordPress-Problemen zu helfen:
- Übersicht über häufige WordPress-Fehler
- So beheben Sie den 500 Internal Server Error in WordPress
- So beheben Sie Syntaxfehler in WordPress
- So beheben Sie das Problem, dass WordPress keine E-Mails sendet
- So beheben Sie den Fehler beim Aufbau einer Datenbankverbindung in WordPress
- So beheben Sie den WordPress-Fehler 404 Nicht gefunden
- So beheben Sie weißen Text und fehlende Buttons im WordPress-Visualeditor[b]
Wenn Sie nach weiteren WordPress-Tipps und Hacks suchen, schauen Sie sich unsere WordPress-Tutorials an, eine Sammlung von Anleitungen, die Ihnen helfen, den WordPress-Admin-Bereich wie ein Profi zu navigieren.
Behebung des Sidebar-Fehlers
Wenn Sie Zeit damit verbracht haben, eine schöne WordPress-Website zu erstellen, möchten Sie wahrscheinlich nicht, dass irgendetwas davon ablenkt – am wenigsten plötzliche Fehler. Glücklicherweise ist die Lösung relativ einfach, wenn das Problem darin besteht, dass Ihre Seitenleisten unter Ihrem Inhalt erscheinen!
Um den Fehler zu beheben, dass die Seitenleiste unter dem Inhalt erscheint, können Sie diesen drei Schritten folgen:
- Machen Sie alle Änderungen rückgängig, die Sie an Ihrer Website kurz vor dem Auftreten des Fehlers vorgenommen haben.
- Überprüfen Sie, ob ungeschlossene oder zusätzliche <div> Tags in Ihrem Code vorhanden sind und beheben Sie diese.
- Stellen Sie sicher, dass das CSS Ihrer Website korrekt ist.
Wenn Sie lieber Ihre Zeit damit verbringen möchten, an Ihrem Unternehmen zu arbeiten, statt Ihre Website zu reparieren, erwägen Sie den Wechsel zu DreamPress. Mit unseren verwalteten WordPress-Hosting-Plänen kümmern wir uns um die Probleme für Sie, damit Sie sich auf das konzentrieren können, was wirklich wichtig ist.
