Aangepaste zijbalken gebruiken op berichten en pagina's

Vandaag wil ik je laten zien hoe je gemakkelijk aangepaste zijbalken kunt toevoegen om te gebruiken in je berichten en pagina's. Het kan handig zijn om verschillende widgets weer te geven op basis van uw pagina of onderwerp van het bericht.

We zullen zien hoe WordPress-metakaders worden gebruikt om een gekozen zijbalk voor een specifieke post op te slaan en op te halen. Aangepaste zijbalken worden toegevoegd in het gedeelte met thema-opties.

Invoering

Ik had altijd te maken met de geweldige plug-in voor widgetlogica om verschillende widgets op verschillende pagina's weer te geven, maar de widgets-pagina werd erg wazig en moeilijk te onderhouden. Dus waarom zou u niet meerdere zijbalken gebruiken en kiezen welke u op een specifiek bericht wilt weergeven? Dat is wat ik in deze tutorial zal behandelen.

Stap 1 Zijbalken toevoegen op de pagina met thema-opties (Twenty Eleven)

In deze tutorial gebruik ik het geweldige WordPress standaardthema Twenty Eleven om te demonstreren hoe je aangepaste zijbalken gebruikt in je thema.

Eerst gaan we een nieuwe instelling toevoegen in Uiterlijk -> Thema-opties. U kunt deze geweldige zelfstudie raadplegen om te zien hoe u instellingen toevoegt.

Open de theme-options.php bestand, gevestigd in twentyeleven / inc en voeg deze code toe aan het eind van de twentyeleven_theme_options_init () functie:

 add_settings_field ('custom_sidebar', __ ('Aangepaste sidebars', 'twentyeleven'), 'twentyeleven_settings_field_custom_sidebar', 'theme_options', 'general');

Voeg vervolgens een standaardwaarde (een lege array) toe aan de standaardthema-opties, aan het einde van de twentyeleven_get_default_theme_options () functie:

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

Nu gaan we de callback-functie maken die de weergave van de instelling afhandelt.

Laten we wat jQuery toevoegen om interacties te behandelen, zoals het toevoegen en verwijderen van sidebars, die in feite enkele elementen van de lijst zijn die een verborgen invoer bevatten. We zullen ook die lijstelementen genereren van reeds opgeslagen zijbalken.

 function twentyeleven_settings_field_custom_sidebar () // Thema-opties ophalen $ opts = twentyeleven_get_theme_options (); // Een beetje jQuery om interacties af te handelen (zijbalken toevoegen / verwijderen) $ output = ""; $ output. =""; $ output. =" 
"; $ output. =""; // Geef alle aangepaste zijbalk weer als (isset ($ opts ['custom_sidebar'])) $ i = 0; foreach ($ opts ['custom_sidebar'] als $ zijbalk) $ output. =""$ Zijbalk." ".__ (" verwijderen ", $ themename)." 
"; $ i ++; $ output. ="
"; $ output. ="
"; echo $ uitvoer;

Voeg deze code uiteindelijk toe aan de twentyeleven_theme_options_validate () functie om formulierinvoer te zuiveren en te valideren:

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

Op dit punt moet u aangepaste zijbalken binnen uw thema kunnen beheren en opslaan. Laten we bijvoorbeeld een nieuwe aangepaste zijbalk maken met de naam 'Mijn aangepaste zijbalk'. Uw pagina met thema-opties zou er als volgt uit moeten zien:

Stap 2 Registreer aangepaste zijbalken

Nu kunnen we aangepaste zijbalken toevoegen, dat moeten we doen registreren zodat ze kunnen verschijnen op de admin-pagina van de widgets.

In het Twenty Eleven-thema gebeurt dit binnen de twentyeleven_widgets_init () functie. Dus voeg aan het einde van deze functie dit toe:

 $ 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' => __ ($ zijbalk, 'twentyeleven'), 'id' => generateSlug ($ sidebar, 45), 'before_widget' => '',' after_widget '=> "
", 'before_title' => '',' after_title '=>'
',));

We halen thema-opties op, controleren of er ten minste één aangepaste zijbalk is en registreren deze. We gebruiken een snelle functie om een slak genereren uit de zijbalknaam die moet worden gebruikt als de zijbalk-ID.

 function generateSlug ($ phrase, $ maxLength) $ result = strtolower ($ phrase); $ result = preg_replace ("/ [^ a-z0-9 \ s -] /", "", $ result); $ result = trim (preg_replace ("/ [\ s -] + /", "", resultaat $)); $ result = trim (substr ($ resultaat, 0, $ maxLength)); $ result = preg_replace ("/ \ s /", "-", $ result); return $ resultaat;

Ga nu naar Uiterlijk -> Widgets en je zou onze nieuwe aangepaste zijbalk moeten zien.

Stap 3 Een metakast toevoegen

Nu onze aangepaste zijbalken beschikbaar zijn, voegen we een metabox toe om een lijst met alle zijbalken weer te geven die beschikbaar zijn in het berichtbewerkingsformulier.

Als u niet bekend bent met metaboxen, kunt u deze links raadplegen:

add_meta_box op de WordPress codex
Hoe maak je aangepaste WordPress Write / Meta Boxes
Herbruikbare aangepaste metabakseries

Laten we nu ingaan op de code.

Meta-dozen toevoegen

Eerst voegen we eenvoudig onze metaboxen toe. We moeten twee metaboxen aangeven, één voor berichten en één voor pagina's. We moeten ook twee haken registreren, één om metaboxen toe te voegen en de andere om ze op te slaan.

Dus open je functions.php bestand en voeg dit toe:

 / * Definieer de aangepaste box * / add_action ('add_meta_boxes', 'add_sidebar_metabox'); add_action ('save_post', 'save_sidebar_postdata'); / * Voegt een vak toe aan de zijkolom op de bewerkingsschermen Post en Pagina * / functie add_sidebar_metabox () add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'post', ' kant '); add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'page', 'side');

Maak de callback-functie

Laten we nu het maken custom_sidebar_callback functie, die de opmaak van de metabox zal afdrukken.

Er zijn verschillende belangrijke stappen in deze functie:

Haal alle geregistreerde sidebars op (inclusief standaard zijbalken) met de globale $ wp_registered_sidebars veranderlijk.
Ontvang post-meta's
Maak nonce beveiliging
Voeg een select element toe met alle zijbalken plus een standaardelement dat direct in het sjabloonbestand wordt gedefinieerd.

 / * Drukt de inhoud van het vak * / 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"; // Gebruik nonce voor verificatie wp_nonce_field (plugin_basename (__FILE__), 'custom_sidebar_nonce'); // De eigenlijke velden voor gegevensinvoer $ output = ''.__ ("Kies een zijbalk om weer te geven",' twentyeleven ').'
'; $ output. = ""; echo $ uitvoer;

Meta Box opslaan

Laten we nu onze post-meta opslaan. Nogmaals verschillende stappen hier:

Controleer of WordPress niet automatisch wordt opgeslagen
Controleer nonce en autorisaties
Bewaar post_meta

 / * Wanneer het bericht is opgeslagen, slaat u onze aangepaste gegevens op * / function save_sidebar_postdata ($ post_id) // verifieert of dit een automatische opslagroutine is. // Als het is dat ons formulier niet is ingediend, willen we niets doen als (gedefinieerd ('DOING_AUTOSAVE') && DOING_AUTOSAVE) terugkeren; // verifiëren of dit afkomstig was van ons scherm en met de juiste autorisatie, // omdat save_post op andere momenten kan worden geactiveerd als (! wp_verify_nonce ($ _POST ['custom_sidebar_nonce'], plugin_basteynaam (__FILE__))) terugkeert; als (! current_user_can ('edit_page', $ post_id)) terugkeert; $ data = $ _POST ['custom_sidebar']; update_post_meta ($ post_id, "custom_sidebar", $ data);

Nu zou je dit vak nu in de berichtbewerkingspagina in de rechterkolom moeten kunnen zien. Als dit niet het geval is, controleert u of het vak Aangepaste zijbalk wordt weergegeven in het optievenster van het bovenste scherm.

Stap 4 Pas sjabloonbestanden aan

Nu alles correct is ingesteld, hoeft u alleen nog onze sjabloondocumenten bij te werken zodat ze aangepaste zijbalken kunnen weergeven.

Laten we een nieuwe pagina maken op basis van de sidebar-sjabloon (beschikbaar in het vak met paginakenmerken). Deze sjabloon is afhankelijk van de sidebar-page.php het dossier. Bewerk dit bestand en voeg deze regels bovenaan toe (onder de kop met commentaar van de sjabloon):

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

We halen huidige post-metadata op om de gekozen zijbalk te krijgen.

Naar schakelaar tussen een aangepaste zijbalk en de standaardzijbalk, verander de get_sidebar () roep onderaan dit bestand dit aan:

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

De get_sidebar ($ naaktslak) vraagt om sidebar-slug.php. Dus wat we moeten doen, is om een bestand met de naam te maken sidebar-custom.php en voeg dit toe binnen:

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

Nu moet uw pagina de zijbalk weergeven die u hebt gekozen. Ik heb bijvoorbeeld twee widgets in mijn aangepaste zijbalk toegevoegd:

Ik ga niet in op hoe je dit op berichten toepast omdat het precies hetzelfde gedrag is, je hoeft alleen het inhoud single.php bestand om aangepaste zijbalken te beheren.

Conclusie

Dat is alles Mensen! Nu kunt u gebruiken onbeperkte sidebars voor uw pagina's en berichten. Dit is slechts één oplossing, maar het is een snel en gemakkelijk manier om aangepaste zijbalken te implementeren, dus aarzel niet om een opmerking achter te laten, uw ideeën te delen en feedback te geven!

Code