So verwenden Sie benutzerdefinierte Seitenleisten für Posts und Seiten

Heute möchte ich Ihnen zeigen, wie Sie benutzerdefinierte Seitenleisten für die Verwendung in Ihren Posts und Seiten hinzufügen. Es kann nützlich sein, verschiedene Widgets entsprechend dem Thema Ihrer Seite oder Ihres Beitrags anzuzeigen.

Wir werden sehen, wie man mit WordPress-Meta-Boxen eine ausgewählte Seitenleiste für einen bestimmten Beitrag speichert und abruft. Benutzerdefinierte Seitenleisten werden im Designbereich hinzugefügt.

Einführung

Früher habe ich mich mit dem großartigen Widget-Logik-Plugin beschäftigt, um verschiedene Widgets auf verschiedenen Seiten anzuzeigen, aber die Widgets-Seite wurde sehr unscharf und schwierig zu verwalten. Warum also nicht mehrere Seitenleisten verwenden und auswählen, welche in einem bestimmten Beitrag angezeigt werden sollen? Das werde ich in diesem Tutorial behandeln.

Schritt 1 Hinzufügen von Seitenleisten auf der Seite für Designoptionen (Twenty Eleven)

In diesem Tutorial werde ich das großartige WordPress-Standarddesign "Twenty Eleven" verwenden, um zu zeigen, wie Sie benutzerdefinierte Seitenleisten in Ihrem Design verwenden.

Zuerst fügen wir eine neue Einstellung in hinzu Darstellung -> Designoptionen. In diesem großartigen Tutorial erfahren Sie, wie Sie Einstellungen hinzufügen.

Öffne das theme-options.php Datei, die sich in befindet twentyeleven / inc und fügen Sie diesen Code am Ende des twentyeleven_theme_options_init () Funktion:

 add_settings_field ('custom_sidebar', __ ('Benutzerdefinierte Seitenleisten', 'twentyeleven'), 'twentyeleven_settings_field_custom_sidebar', 'theme_options', 'general');

Fügen Sie dann den Standardwert für die Designoptionen am Ende des Fensters einen Standardwert (ein leeres Array) hinzu twentyeleven_get_default_theme_options () Funktion:

 $ default_theme_options = array ('color_scheme' => 'light', 'link_color' => twentyeleven_get_default_link_color ('light'), 'theme_layout' => 'content-sidebar', 'custom_sidebar' => array ());

Jetzt erstellen wir die Callback-Funktion, die die Anzeige der Einstellung übernimmt.

Fügen Sie jQuery hinzu, um Interaktionen zu handhaben, z. B. das Hinzufügen und Entfernen von Seitenleisten. Dies sind im Wesentlichen einige Listenelemente, die eine verborgene Eingabe enthalten. Diese Listenelemente werden auch aus bereits gespeicherten Seitenleisten generiert.

 function twentyeleven_settings_field_custom_sidebar () // Themenoptionen abrufen $ opts = twentyeleven_get_theme_options (); // Ein bisschen jQuery zur Behandlung von Interaktionen (Seitenleisten hinzufügen / entfernen) $ output = ""; $ output. =""; $ output. =" 
"; $ output. =""; // Zeige jede benutzerdefinierte Seitenleiste if (isset ($ opts ['custom_sidebar'])) $ i = 0; foreach ($ opts ['custom_sidebar'] als $ sidebar) $ output. ="". $ sidebar." ".__ (" delete ", $ themename)." 
"; $ i ++; $ output. ="
"; $ output. ="
"; echo $ ausgabe;

Fügen Sie schließlich diesen Code in der twentyeleven_theme_options_validate () Funktion zur Bereinigung und Validierung der Formulareingabe:

 if (isset ($ input ['custom_sidebar'])) $ output ['custom_sidebar'] = $ input ['custom_sidebar'];

An diesem Punkt sollten Sie in der Lage sein, benutzerdefinierte Seitenleisten in Ihrem Design zu verwalten und zu speichern. Erstellen wir beispielsweise eine neue benutzerdefinierte Seitenleiste mit dem Namen "Meine benutzerdefinierte Seitenleiste". Ihre Theme-Options-Seite sollte folgendermaßen aussehen:

Schritt 2 Registrieren Sie benutzerdefinierte Seitenleisten

Jetzt können wir benutzerdefinierte Seitenleisten hinzufügen, die wir benötigen registrieren Sie können sie auf der Widgets-Verwaltungsseite anzeigen.

Im zwanzig elf Thema geschieht dies im twentyeleven_widgets_init () Funktion. Fügen Sie am Ende dieser Funktion Folgendes hinzu:

 $ options = twentyeleven_get_theme_options (); if (isset ($ options ['custom_sidebar']) && sizeof ($ options ['custom_sidebar'])> 0) foreach ($ options ['custom_sidebar']) als $ sidebar) register_sidebar (array ('name' =>.) __ ($ sidebar, 'twentyeleven'), 'id' => generateSlug ($ sidebar, 45), 'before_widget' => '',' after_widget '=> "
", 'before_title' => '',' after_title '=>'
',));

Wir rufen Designoptionen ab, überprüfen, ob mindestens eine benutzerdefinierte Seitenleiste vorhanden ist, und registrieren sie. Wir verwenden eine schnelle Funktion um eine Schnecke erzeugen aus dem Sidebar-Namen, der als Sidebar-ID verwendet werden soll.

 Funktion generateSlug ($ satz, $ maxLength) $ result = strtolower ($ satz); $ result = preg_replace ("/ [^ a-z0-9 \ s -] /", "", $ result); $ result = trim (preg_replace ("/ [\ s -] + /", "", $ result))); $ result = trim (substr ($ result, 0, $ maxLength)); $ result = preg_replace ("/ \ s /", "-", $ result); $ Ergebnis zurückgeben;

Gehen Sie jetzt zu Darstellung -> Widgets und Sie sollten unsere neue benutzerdefinierte Seitenleiste sehen.

Schritt 3 Hinzufügen einer Meta-Box

Jetzt sind unsere benutzerdefinierten Seitenleisten verfügbar. Wir fügen eine Meta-Box hinzu, um eine Liste aller im Post-Bearbeitungsformular verfügbaren Seitenleisten anzuzeigen.

Wenn Sie mit Meta-Boxen nicht vertraut sind, können Sie auf diese Links verweisen:

add_meta_box auf dem WordPress-Codex
So erstellen Sie benutzerdefinierte WordPress-Schreib- / Metaboxen
Wiederverwendbare Meta-Box-Serien

Nun lasst uns in den Code eintauchen.

Fügen Sie Meta-Boxen hinzu

Zuerst fügen wir einfach unsere Meta-Boxen hinzu. Wir müssen zwei Meta-Boxen deklarieren, eine für Posts und eine für Seiten. Wir müssen auch zwei Hooks registrieren, einen zum Hinzufügen von Meta-Boxen und den anderen, um sie zu speichern.

Also öffne deine Functions.php Datei und fügen Sie Folgendes hinzu:

 / * Definiere die benutzerdefinierte Box * / add_action ('add_meta_boxes', 'add_sidebar_metabox'); add_action ('save_post', 'save_sidebar_postdata'); / * Fügt der Seitenspalte auf den Bild- und Seitenbearbeitungsfenstern ein Feld hinzu. * / Function add_sidebar_metabox () add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'post', ' Seite '); add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'page', 'side');

Erstellen Sie die Rückruffunktion

Nun lassen Sie uns die erstellen custom_sidebar_callback Funktion, die das Markup der Meta-Boxen ausgeben soll.

Es gibt mehrere wichtige Schritte in dieser Funktion:

Rufen Sie alle registrierten Seitenleisten (einschließlich der Standard-Seitenleisten des Designs) mit der globalen Seite ab $ wp_registered_sidebars Variable.
Erhalten Sie Post-Metas
Erstellen Sie Nonce-Sicherheit
Fügen Sie ein Auswahlelement mit allen Seitenleisten und einem Standardelement hinzu, das direkt in der Vorlagendatei definiert ist.

 / * Gibt den Inhalt der Box aus * / function custom_sidebar_callback ($ post) global $ wp_registered_sidebars; $ custom = get_post_custom ($ post-> ID); if (isset ($ custom ['custom_sidebar'])) $ val = $ custom ['custom_sidebar'] [0]; else $ val = "default"; // Verwendung von nonce zur Überprüfung wp_nonce_field (plugin_basename (__FILE__), 'custom_sidebar_nonce'); // Die tatsächlichen Felder für die Dateneingabe $ output = ''.__ ("Wählen Sie eine anzuzeigende Seitenleiste aus", "zwanzigeleven"). "
'; $ output. = ""; echo $ ausgabe;

Meta-Box speichern

Jetzt speichern wir unser Post-Meta. Wieder einige Schritte hier:

Überprüfen Sie, ob WordPress nicht automatisch gespeichert wird
Nonce und Berechtigungen prüfen
Speichern Sie post_meta

 / * Wenn der Beitrag gespeichert ist, werden unsere benutzerdefinierten Daten gespeichert. // Wenn unser Formular nicht gesendet wurde, möchten wir nichts tun, wenn (definiert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; // Vergewissern Sie sich, dass dies von unserem Bildschirm kam und mit der richtigen Berechtigung, // weil save_post zu anderen Zeitpunkten ausgelöst werden kann, wenn (! wp_verify_nonce ($ _POST ['custom_sidebar_nonce'], plugin_basename (__FILE__))) return; if (! current_user_can ('edit_page', $ post_id)) return; $ data = $ _POST ['custom_sidebar']; update_post_meta ($ post_id, "custom_sidebar", $ data);

Sie sollten dieses Feld jetzt auf der Nachbearbeitungsseite in der rechten Spalte sehen können. Wenn dies nicht der Fall ist, überprüfen Sie, ob das benutzerdefinierte Seitenleistenfeld im Optionsfeld des oberen Bildschirms angezeigt wird.

Schritt 4 Passen Sie die Vorlagendateien an

Jetzt ist alles richtig eingerichtet. Jetzt müssen Sie nur noch unsere Schablonendateien aktualisieren, um benutzerdefinierte Seitenleisten anzeigen zu können.

Lassen Sie uns eine neue Seite erstellen, die auf der basiert Seitenleistenvorlage (im Feld Seitenattribute verfügbar). Diese Vorlage basiert auf der sidebar-page.php Datei. Bearbeiten Sie diese Datei und fügen Sie diese Zeilen oben (unter der kommentierten Kopfzeile der Vorlage) ein:

 $ options = get_post_custom (get_the_ID ()); if (isset ($ options ['custom_sidebar'])) $ sidebar_choice = $ options ['custom_sidebar'] [0];  else $ sidebar_choice = "default";

Wir rufen aktuelle Post-Metadaten ab, um die ausgewählte Seitenleiste zu erhalten.

Zu Schalter Ändern Sie zwischen einer benutzerdefinierten und der Standard-Seitenleiste die get_sidebar () Rufe am Ende dieser gleichen Datei dazu auf:

 if ($ sidebar_choice && $ sidebar_choice! = "default") get_sidebar ("custom");  else get_sidebar ();

Das get_sidebar ($ slug) ruft nach sidebar-slug.php. Wir müssen also eine Datei mit dem Namen erstellen sidebar-custom.php und füge dies innen hinzu:

 $ options = get_post_custom ($ post-> ID); $ sidebar_choice = $ options ['custom_sidebar'] [0]; ?>

Jetzt sollte Ihre Seite die von Ihnen gewählte Seitenleiste anzeigen. Ich habe zum Beispiel zwei Widgets in meiner benutzerdefinierten Seitenleiste hinzugefügt:

Ich werde nicht darauf eingehen, wie man dies auf Posts anwenden kann, da es genau das gleiche Verhalten ist content-single.php Datei zum Verwalten von benutzerdefinierten Seitenleisten.

Fazit

Das war's Leute! Jetzt können Sie verwenden unbegrenzte Seitenleisten für Ihre Seiten und Beiträge. Dies ist nur eine Lösung unter anderen, aber es ist eine schnell und einfach So können Sie benutzerdefinierte Sidebars implementieren. Zögern Sie nicht, einen Kommentar zu hinterlassen, Ihre Ideen zu teilen und Feedback zu geben!

Code