• Articles
• admin

Das Hinzufügen einer linken Seitenleiste zu einem WordPress-Theme ist nicht einfach. Ohne dieses Tutorial wäre es einfacher, eine benutzerdefinierte Seitenvorlage von Grund auf neu zu erstellen, wobei die linke Seitenleiste in diese Vorlagendatei eingefügt wird.

Die Sidebars sind in den Theme-Template-Dateien fest codiert.

In jeder Vorlagendatei befinden sich mehrere WordPress-Hooks.

Der Grund dafür ist, dass WordPress auf der Skriptsprache PHP läuft. Fast jede Funktion in Theme-Vorlagen verwendet WordPress-Hooks.

Der Code zum Laden der linken Seitenleiste lautet

<?php get_sidebar(‚links‘); ?>

Die Funktion „get_sidebar“ wird für mehrere Vorlagen verwendet. Einige, um die rechte Seitenleiste anzuzeigen, andere, um keine anzuzeigen.

Das Hinzufügen ist keine Option. Der Versuch, zwei Seitenleisten zu laden, führt zu einem Konflikt, der dazu führt, dass Ihre Site einen kritischen Fehler auslöst.

Sie müssen vorhandene Seitenleisten bearbeiten oder „dynamische“ Seitenleisten laden.

Um eine Site-weite Änderung vorzunehmen, muss jede Instanz der Funktion get_sidebar durch den Code zum Laden der linken Seitenleiste ersetzt werden.

Für diejenigen, die keine andere Wahl haben, als das Web nach dem Hinzufügen einer linken Seitenleiste in WordPress zu durchsuchen, liegt dies daran, dass Ihr Thema diese Funktion nicht hat.

Sie müssen es manuell hinzufügen.

Die Suche nach dem Fix endet hier.

Es wurden mehrere Codes ausprobiert und getestet, Plugins hinzugefügt und gelöscht (weil sie nicht funktionierten) und schließlich …

Funktionscode geschrieben (den Sie kopieren und einfügen können), der eine benutzerdefinierte Seitenleiste links von Ihrem Inhaltsbereich hinzufügt.

So fügen Sie eine linke Seitenleiste in WordPress hinzu

1) Registrieren Sie eine neue Seitenleiste in Ihren Funktionen.PHP-Datei.

2) Erstellen Sie eine Seitenleiste-links.PHP-Datei.

3) Laden Sie es in Ihren Themenordner hoch.

4) Optimieren Sie Ihre Seite.PHP-Vorlage zum Laden der linken Seitenleiste.

5) Bearbeiten Sie Ihr Stylesheet, um die Seitenleiste links neben Ihrem Inhalt zu verschieben.

Verschwenden Sie keine Zeit mit Plugins, um eine linke Seitenleiste in WordPress hinzuzufügen

Es stehen zahlreiche Plugins zum Hinzufügen benutzerdefinierter Seitenleisten zur Verfügung. Sie registrieren keine neuen Seitenleisten. Sie erweitern nur die vorhandene Funktionalität. Sie können benutzerdefinierte Seitenleisten einfach mit Plugins erstellen, aber diese haken in Ihr Thema ein.

Für Themen ohne linke Seitenleiste haben Plugins keinen Widget-Bereich für die linke Seitenleiste zum Anpassen.

Die einzige Möglichkeit, eine linke Seitenleiste hinzuzufügen, besteht darin, den Quellcode für Ihr Thema zu bearbeiten.

Das bedeutet, mit PHP zu arbeiten. Etwas, das Ihre Site beschädigen kann, wenn Sie entweder den Code falsch eingeben, ihn in den falschen Bereich einfügen oder vergessen, ein div-Tag zu schließen.

Aus diesem Grund werden die meisten Online-Quellen Sie auffordern, zuerst ein untergeordnetes Thema zu erstellen und dort Ihre Änderungen vorzunehmen, um zu vermeiden, dass Ihr Thema beschädigt wird.

Das ist ein Weg zu gehen. Ein langer Weg.

Der schnellere Weg ist, Ihre Themenvorlage auf Ihren Desktop herunterzuladen.

Auf diese Weise erhalten Sie für jede Datei, die Sie bearbeiten, eine Kopie des Originals.

Wenn Sie nicht wissen, was wohin geht – Erwarten Sie, dass die Dinge kaputt gehen

Wenn sie dies tun, öffnen Sie Ihren Vorlagen-Download-Ordner, gehen Sie zu der Datei, die Sie bearbeitet haben, und kopieren Sie den ursprünglichen Quellcode und fügen Sie ihn wieder ein.

Es ist viel schneller als das Erstellen eines untergeordneten Themas. Etwas, das Sie tun sollten, wenn Sie mehrere Änderungen an Ihrem Thema vornehmen möchten.

Für eine Änderung wird jedoch eine Kopie Ihrer ursprünglichen Theme-Quelldateien gut tun.

Zuerst: Registrieren Sie eine neue Seitenleiste

Dies geschieht in Ihren Funktionen.php-Datei

Gehen Sie zu Ihrem Website-cPanel, öffnen Sie den Dateimanager, gehen Sie zu Ihrem WP-Content-Ordner und öffnen Sie dann den Themenordner. Öffnen Sie den Themenordner für den Ordner, dem Sie eine linke Seitenleiste hinzufügen möchten.

In es wird eine funktionen.PHP-Datei.

Fügen Sie diesen Code hinzu

function my_custom_sidebar() {register_sidebar(array ('name' => __( 'Left', 'twentytwentyone' ),'id' => 'left-sidebar','description' => __( 'Left Sidebar', 'twentytwentyone' ),'before_widget' => '<div class="widget-content">','after_widget' => "</div>",'before_title' => '<h3 class="widget-title">','after_title' => '</h3>',));}add_action( 'widgets_init', 'my_custom_sidebar' );

Geben Sie den Code nirgendwo ab. Scrollen Sie nach unten, bis Sie zu einem Kommentarbereich kommen, der

/**
* Widget-Bereich registrieren.

Hier registrieren Sie die linke Seitenleiste mit dem obigen Code.

Drücken Sie Speichern und beenden. Das ist alles, was Sie zu dieser Datei hinzufügen müssen.

Der einzige Teil des obigen Codes, der geändert werden muss, ist der Themenname. Ersetzen Sie „twentytwentyone“ durch den Namen Ihres Themas.

Wenn Sie Ihren Fortschritt überprüfen möchten, können Sie zu Ihrer WordPress-Website zurückkehren, den Widget-Bereich laden und Sie werden sehen, dass die linke Seitenleiste als neuer Widget-Bereich hinzugefügt wurde.

Es wird noch nicht funktionieren.

Als nächstes wird die Seitenleiste erstellt.php-Datei

Dieser Teil ist einfacher als es klingt.

Sie benötigen lediglich einen einfachen Texteditor.

Verwenden Sie kein MS Word oder ein anderes Textverarbeitungsprogramm. Diese fügen Codierung hinzu, die WordPress durcheinander bringt.

Kopieren Sie den folgenden Code und fügen Sie ihn in einen einfachen Texteditor ein

<div><?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar('sidebar-left');?></div>

Speichern Sie ihn dann als „sidebar-left.PHP“. Stellen Sie sicher, dass es sich um eine PHP-Datei und nicht um TXT handelt.

Außerdem muss das Wort „sidebar“ das erste Wort im Dateinamen sein, damit WordPress es erkennt.

Linke Seitenleiste.php wird nicht funktionieren. (Es wird klar, warum in ein bisschen).

Laden Sie Ihre Seitenleiste hoch-links.PHP-Datei in cPanel

Gehen Sie zurück zu Ihrem WP-Themenordner in cPanel und laden Sie Ihre neue Datei hoch.

Zu diesem Zeitpunkt wird Ihre Seitenleiste registriert und die Datei ist in Ihrem Thema aktiv.

Zur Bestätigung sehen Sie die Datei in Ihrem Vorlagenordner

Jetzt müssen Sie es in eine Seitenvorlage codieren

Alle WordPress-Themes haben Seitenvorlagen. Einige mehr als andere.

Wenn Sie nur eine Vorlage haben, ist die zu bearbeitende Datei page.php für Ihre Seiten und Post.php für Blog-Beiträge.

Viele Themen haben zahlreiche Seitenvorlagen, alle mit unterschiedlichen Layouts. Wenn Sie eine Vorlage mit einer rechten Seitenleiste haben, verwenden Sie diese als Verknüpfung.

Kopieren Sie den Inhalt der Seite mit einer rechten Seitenleiste, tauschen Sie dann jede Instanz von sidebar-right mit sidebar-left aus und speichern Sie die neue Datei.

Das spart Zeit auf der nächsten Stufe für das Styling Ihrer Seitenleiste.

Der Code zum Laden Ihrer linken Seitenleiste lautet

<?php get_sidebar('left'); ?>

Alle Themen mit einem beliebigen Seitenleisten- oder Widget-Bereich verwenden den Hook „get_sidebar“.

Das (‚left‘) in Klammern teilt WordPress mit, welche Datei geladen werden soll. Wenn Sie verwenden

<?php get_sidebar(); ?>

… WP lädt die Seitenleiste.PHP-Datei. Platzieren Sie ‚right‘ in den geschweiften Klammern und es wird die Seitenleiste rechts geladen.PHP-Datei.

Deshalb müssen Sie das Wort ’sidebar‘ zuerst im Dateinamen haben, wenn Sie Ihre Sidebar-left speichern.PHP-Datei.

Einige Themen, wie das Twenty Twenty One-Thema, haben nur eine Fußzeile.

Dies ist eines der schwierigsten Themen, um eine Seitenleiste hinzuzufügen, da überhaupt keine registriert sind.

In unseren Versuchen haben wir es geschafft. Die haarsträubende Phase bringt die Seitenleiste dazu, rechts vom Inhalt zu schweben.

Wenn Sie das Twenty Twenty One-Thema verwenden, tun Sie sich selbst einen Gefallen und sehen Sie sich die Optionen für das Twenty Twenty One-Theme-Plugin von WebD LTD an.

Die kostenlose Version fügt nicht die linke Seitenleiste Funktionalität. Die Premium-Version tut es.

Dies ist das einzige Plugin, auf das wir stoßen, das die Möglichkeit bietet, Seitenleisten in das Thema einzufügen. Der Rest passt nur an, was schon da ist.

Da wir wussten, dass es eine machbare Aufgabe war, mussten wir herausfinden, wie.

Wie es gemacht wird:

Der Trick besteht darin, wichtige Teile des Stils zu überschreiben.CSS-Datei.

Das ist viel einfacher, wenn Sie den zusätzlichen CSS-Bereich in Ihrem WordPress-Administrationsbereich verwenden.

Weil der Stil.CSS-Datei ist Tausende von Zeilen lang.

Mit dem WordPress Customizer > Zusätzliche CSS macht dies ein Kinderspiel.

Der Nachteil ist, es erfordert die !wichtiger Code, der verwendet werden soll, um vorhandenen Code endgültig zu überschreiben.

Selten wird empfohlen, diese CSS-Zeichenfolge zu verwenden, da das Debuggen behindert wird, wenn Sie später Code in Ihrem Stylesheet bearbeiten müssen.

Die !wichtige Tags sollten nur als letzter Ausweg verwendet werden, um Ihre Codes sauber zu halten.

Angesichts der Umstände zu bestimmten Themen mit Tonnen von Code ist dies gerechtfertigt.

Hinweis: Dies ist für das Twenty Twenty-One-Thema. Das Element „Widget-Inhalt“ unterscheidet sich bei anderen Themen.

Verwenden Sie Ihren Browser-Inspektor (klicken Sie mit der rechten Maustaste auf das Widget, wählen Sie inspect , und die div-Klasse wird das sein, was Sie hier einfügen.

Fügen Sie zunächst dieses CSS

.widget-content {width:350px;float:left;padding-left: 150px;}

hinzu, mit dem der Inhalt in Ihrem Widget auf 350 Pixel links von Ihrem Inhalt verschoben wird. Sie können die Breite nach Ihren Wünschen ändern.

Der nächste Teil ist, wo die !wichtiges Tag wird eingefügt, um die Breite Ihres Inhaltsbereichs zu erweitern. Andernfalls wird der Inhalt in der Mitte der Seite mit viel Leerraum auf beiden Seiten angezeigt.

Wenn Sie das gerne haben, lassen Sie es sein.

Andernfalls fügen Sie diesen Code zu Ihrem CSS-Customizer hinzu.

.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), * > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {max-width: var(--responsive--alignwide-width) !important;}

Da es sich um ein Listenelementmenü handelt, können Sie das Erscheinungsbild weiter anpassen. Erfahren Sie, wie Sie die Farbe von Aufzählungszeichen in WordPress ändern. (Sie können die Farbe und Form ändern, Sonderzeichen verwenden oder die Aufzählungszeichen gegen Bilder austauschen).

Fügen Sie für jedes andere Thema den folgenden Code hinzu

<?php get_sidebar('left'); ?>

… zu jeder Ihrer Seiten- und Post-Vorlagen, um Ihre linke Seitenleiste zu laden.

Styling linke Seitenleisten auf jedem WordPress-Theme

Ohne den linken Seitenleisten-Widget-Bereich zu stylen, wird die get_sidebar(‚left‘) die Seitenleiste nur nach links einfügen, ohne zu sagen, wo der Inhalt angezeigt wird.

Normalerweise befindet es sich oben und Ihr Inhalt wird unter den Widget-Bereich gedrückt.

In Ihrem Stylesheet steuern Sie, wie Ihre Seitenleiste auf Ihrer Website angezeigt wird.

Für alle anderen Themen mit Ausnahme des Twenty-Twenty One-Themas (möglicherweise für andere, bei denen keine Seitenleisten registriert sind) lautet der CSS-Code zum Ausrichten einer Seitenleiste links vom Inhalt

.content {width: 75%;float: right;}.sidebar {width: 25%;float: left;}

Die Teile nach dem Zeitraum (.) wird je nach Thema variieren.

Einige können den Titel ‚Artikel‘, andere, ‚Body Content‘ oder ähnliches tragen.

Verwenden Sie Ihren Browser-Inspektor, um das anzuvisierende Element zu identifizieren, und ändern Sie dann den obigen Code in Ihrem WordPress-Customizer > Zusätzliches CSS, um die Seitenleiste links von Ihrem Inhalt auszurichten.

Sie können variieren die größen (75% und 25%) zu werden, was größe sie phantasie.