Share
Oggi vorrei mostrarti come aggiungere facilmente barre laterali personalizzate da utilizzare nei tuoi post e pagine. Potrebbe essere utile visualizzare diversi widget in base alla tua pagina o argomento del post.
Vedremo come utilizzare le meta box di WordPress per archiviare e recuperare una barra laterale scelta per un post specifico. Le barre laterali personalizzate verranno aggiunte nella sezione delle opzioni del tema.
Ero abituato a gestire il grande plugin per la logica dei widget per visualizzare vari widget su pagine diverse, ma la pagina dei widget è diventata molto sfocata e difficile da mantenere. Quindi, perché non utilizzare più barre laterali e scegliere quale visualizzare su un post specifico? Questo è quello che tratterò in questo tutorial.
In questo tutorial, utilizzerò il fantastico tema predefinito di WordPress Twenty Eleven per dimostrare come utilizzare le barre laterali personalizzate nel tema.
Innanzitutto, aggiungeremo una nuova impostazione in Aspetto -> Opzioni del tema. Puoi fare riferimento a questo fantastico tutorial per vedere come aggiungere impostazioni.
Apri il theme-options.php file, situato in TwentyEleven / inc e aggiungi questo codice alla fine del twentyeleven_theme_options_init () funzione:
Accentsconagua
add_settings_field ('custom_sidebar', __ ('Custom sidebars', 'twentyeleven'), 'twentyeleven_settings_field_custom_sidebar', 'theme_options', 'general'); Quindi aggiungere un valore predefinito (una matrice vuota) ai valori delle opzioni del tema di default, alla fine del twentyeleven_get_default_theme_options () funzione:
$ default_theme_options = array ('color_scheme' => 'light', 'link_color' => twentyeleven_get_default_link_color ('light'), 'theme_layout' => 'content-sidebar', 'custom_sidebar' => array ()); Ora creeremo la funzione di callback che gestisce la visualizzazione delle impostazioni.
Aggiungiamo un po 'di jQuery per gestire interazioni come l'aggiunta e la rimozione di barre laterali, che sono fondamentalmente alcuni elementi di lista contenenti un input nascosto. Verranno inoltre generati quegli elementi dell'elenco dalle barre laterali già salvate.
function twentyeleven_settings_field_custom_sidebar () // Recupera le opzioni del tema $ opts = twentyeleven_get_theme_options (); // Un po 'di jQuery per gestire le interazioni (aggiungi / rimuovi barre laterali) $ output = ""; $ output. =""; $ output. =""; echo $ output;"; $ output. ="
"; // Visualizza ogni barra laterale personalizzata se (isset ($ opta ['custom_sidebar'])) $ i = 0; foreach ($ opta ['custom_sidebar'] come $ sidebar) $ output. ="
"; $ output. ="- "$ Barra laterale". ".__ (" delete ", $ themename)."
"; $ i ++; $ output. ="
Alla fine, aggiungi questo codice nel twentyeleven_theme_options_validate () funzione per disinfettare e convalidare l'input del modulo:
if (isset ($ input ['custom_sidebar'])) $ output ['custom_sidebar'] = $ input ['custom_sidebar'];
A questo punto, dovresti essere in grado di gestire e salvare barre laterali personalizzate all'interno del tuo tema. Ad esempio, creiamo una nuova barra laterale personalizzata chiamata "My sidebar personalizzato". La pagina delle opzioni del tema dovrebbe essere simile a questa:
Ora siamo in grado di aggiungere barre laterali personalizzate, è necessario Registrare loro in modo che possano apparire nella pagina di amministrazione dei widget.
Nel tema Twenty Eleven, questo è fatto all'interno del twentyeleven_widgets_init () funzione. Quindi alla fine di questa funzione aggiungi questo:
$ options = twentyeleven_get_theme_options (); if (isset ($ options ['custom_sidebar']) && sizeof ($ options ['custom_sidebar'])> 0) foreach ($ options ['custom_sidebar'] come $ sidebar) register_sidebar (array ('name' => __ ($ sidebar, 'twentyeleven'), 'id' => generateSlug ($ sidebar, 45), 'before_widget' => '", 'before_title' => '',' after_title '=>'
',)); Ritiriamo le opzioni del tema, controlliamo che ci sia almeno una barra laterale personalizzata e la registriamo. Usiamo una funzione rapida per generare una lumaca fuori dal nome della barra laterale da utilizzare come ID della barra laterale.
function generateSlug ($ phrase, $ maxLength) $ result = strtolower ($ phrase); $ 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); ritorno $ risultato; Ora vai Aspetto -> Widget e dovresti vedere la nostra nuova barra laterale personalizzata.
Ora sono disponibili le nostre barre laterali personalizzate, aggiungeremo una meta-box per visualizzare un elenco di tutte le barre laterali disponibili nel modulo di modifica del post.
Se non hai familiarità con i meta-box, puoi fare riferimento a questi collegamenti:
add_meta_box sul codice WordPressOra analizziamo il codice.
Per prima cosa, aggiungeremo semplicemente le nostre meta-box. Dobbiamo dichiarare due meta box, uno per i post e uno per le pagine. Abbiamo anche bisogno di registrare due ganci, uno per aggiungere i meta box e l'altro per salvarli.
Quindi apri il tuo functions.php file e aggiungi questo:
/ * Definisci la casella personalizzata * / add_action ('add_meta_boxes', 'add_sidebar_metabox'); add_action ('save_post', 'save_sidebar_postdata'); / * Aggiunge una casella alla colonna laterale nelle schermate di modifica Post e Pagina * / function add_sidebar_metabox () add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'post', ' lato '); add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'page', 'side'); Ora, creiamo il custom_sidebar_callback funzione, che stamperà il markup dei meta box.
Ci sono diversi passaggi chiave in questa funzione:
$ wp_registered_sidebars variabile./ * Stampa il contenuto della casella * / function custom_sidebar_callback ($ post) global $ wp_registered_sidebars; $ personalizzato = get_post_custom ($ post-> ID); if (isset ($ custom ['custom_sidebar'])) $ val = $ custom ['custom_sidebar'] [0]; else $ val = "default"; // Usa nonce per la verifica wp_nonce_field (plugin_basename (__FILE__), 'custom_sidebar_nonce'); // I campi effettivi per la voce di dati $ output = ''; $ output. = ""; echo $ output;
Ora salviamo il nostro post meta. Ancora diversi passaggi qui:
/ * Quando il post viene salvato, salva i nostri dati personalizzati * / function save_sidebar_postdata ($ post_id) // verifica se questa è una routine di salvataggio automatico. // Se è il nostro modulo non è stato inviato, quindi non vogliamo fare nulla se (definito ('DOING_AUTOSAVE') && DOING_AUTOSAVE) ritorno; // verifica che questo provenga dal nostro schermo e con l'autorizzazione corretta, // perché save_post può essere attivato altre volte se (! wp_verify_nonce ($ _POST ['custom_sidebar_nonce'], plugin_basename (__FILE__))) restituisce; se (! current_user_can ('edit_page', $ post_id)) restituisce; $ data = $ _POST ['custom_sidebar']; update_post_meta ($ post_id, "custom_sidebar", $ data); Ora dovresti essere in grado di vedere questa casella nella pagina di modifica del post, nella colonna di destra. In caso contrario, controllare che la casella della barra laterale personalizzata sia visualizzata nel pannello delle opzioni dello schermo superiore.
Ora tutto è impostato correttamente, non resta che aggiornare i nostri file di template in modo che possano visualizzare barre laterali personalizzate.
Creiamo una nuova pagina basata sul modello della barra laterale (disponibile nella casella degli attributi della pagina). Questo modello si basa sul sidebar-page.php file. Modifica questo file e aggiungi queste righe in alto (sotto l'intestazione commentata del modello):
$ options = get_post_custom (get_the_ID ()); if (isset ($ options ['custom_sidebar'])) $ sidebar_choice = $ options ['custom_sidebar'] [0]; else $ sidebar_choice = "default";
Recuperiamo i metadati del post corrente per ottenere la barra laterale selezionata.
A interruttore tra una barra laterale personalizzata e quella predefinita, cambia il get_sidebar () chiama in fondo a questo stesso file a questo:
if ($ sidebar_choice && $ sidebar_choice! = "default") get_sidebar ("custom"); else get_sidebar (); Il get_sidebar ($ slug) chiede sidebar-slug.php. Quindi, quello che dobbiamo fare, è creare un file chiamato sidebar-custom.php e aggiungilo all'interno:
$ options = get_post_custom ($ post-> ID); $ sidebar_choice = $ options ['custom_sidebar'] [0]; ?>
Ora la tua pagina dovrebbe mostrare la barra laterale che hai scelto. Ad esempio, ho aggiunto due widget nella mia barra laterale personalizzata:
Non parlerò di come applicare questo ai post poiché è esattamente lo stesso comportamento, è sufficiente aggiornare il content-single.php file per gestire le barre laterali personalizzate.
È tutto gente! Ora puoi usare barre laterali illimitate per le tue pagine e i tuoi post. Questa è solo una soluzione tra le altre, ma è a facile e veloce modo di implementare barre laterali personalizzate, quindi non esitare a lasciare un commento, condividere le tue idee e dare feedback!
