barra laterale wordpress. Barre laterali di WordPress, creazione di barre laterali di WordPress. Widget predefiniti di WordPress
Visualizza il primo pannello widget attivo (una barra laterale è un pannello che contiene almeno un widget). Puoi specificare l'ID o il numero del pannello, quale visualizzare, se il sito ha più di un pannello widget.
dynamic_sidebar() restituisce true o false, con il risultato restituito che mostra anche la barra dei widget. Il valore restituito può essere utilizzato, ad esempio, per determinare se il codice che sostituisce i widget deve essere elaborato quando non ci sono widget nel pannello (vedere l'esempio n. 1).
ritorna
true se il pannello del widget è stato trovato. false se il pannello non esiste o non contiene widget.
Utilizzo
$indice (stringa/numero) L'ID del pannello specificato nel parametro id della funzione register_sidebar() quando il pannello è stato registrato. Se viene fornito un numero, verrà cercato il pannello con ID sidebar-$index.Predefinito: 1 (barra laterale-1)
Esempi
#1 Visualizza la barra laterale se esiste.
Questo esempio mostra come visualizzare la prima barra laterale non vuota (l'id della barra laterale non è stato specificato durante la registrazione) o se non viene trovato, elaborare il codice specificato:
#2 Visualizza la barra laterale desiderata.
#3 Verificare la presenza del pannello e visualizzarlo
Nell'esempio 2, non abbiamo verificato la presenza di un pannello e di widget al suo interno. In questo esempio verificheremo la presenza di un pannello in modo da non visualizzare inutili Tag HTML (
- ) se la barra laterale è vuota:
- Globale. Vettore. $wp_registered_sidebars Barre laterali registrate.
- Globale. Vettore. $wp_registered_widgets
- Barra laterale dinamica: un contenitore per un insieme di widget che l'utente può installare tramite il pannello di amministrazione -> sezione Widget.
- Modello barra laterale: questa è la barra laterale visualizzata dal modello del sito.
Più barre laterali
Quando si registra più di un pannello widget con register_sidebar() , è più conveniente specificare un id per ogni pannello.
Non possiamo specificare l'id, quindi il pannello riceverà un numero di serie. Ma in questo caso, durante la modifica del tema, sarà difficile capire quale pannello è quale, perché i numeri 1, 2, 3 non significano nulla. Ma se imposti il nome, diventa molto più chiaro:
// --- numeri// registrazione register_sidebar(); // output dynamic_sidebar(1); // --- Stringhe// registrazione register_sidebar(array("id" => "top_menu")); // output dynamic_sidebar("top_menu");
Dall'esempio, è chiaro che è più conveniente con le stringhe: esaminando l'argomento e vedendo dynamic_sidebar("top_menu"), è subito chiaro che viene chiamato il pannello per il menu principale.
L'argomento id non deve contenere spazi, lettere maiuscole, caratteri cirillici. Puoi usare un trattino - e un trattino basso _ in esso. Deve anche essere unico. Specificando l'id, possiamo anche specificare il nome, la descrizione e le traduzioni per loro:
Register_sidebar(array("id" => "top-menu", "name" => __("Top Menu", $text_domain), "description" => __("Questa barra laterale si trova sopra il logo dell'età.", $testo_dominio))))
Appunti
Elenco delle modifiche
| Dalla versione 2.2.0 | Introdotto. |
Codice barra laterale dinamica: wp-includes/widgets.php WP 5.3.2
$value) ( if (sanitize_title($value["name"]) == $index) ( $index = $key; break; ) ) ) $sidebars_widgets = wp_get_sidebars_widgets(); if (empty($wp_registered_sidebars[ $index ]) || empty($sidebars_widgets[ $index ]) || !is_array($sidebars_widgets[ $index ])) ( /** Questa azione è documentata in wp-includes/widget. php */ do_action("dynamic_sidebar_before", $index, false); /** Questa azione è documentata in wp-includes/widget.php */ do_action("dynamic_sidebar_after", $index, false); /** Questo filtro è documentato in wp-includes/widget.php */ return apply_filters("dynamic_sidebar_has_widgets", false, $index); ) /** * Si attiva prima che i widget vengano visualizzati in una barra laterale dinamica. * * Nota: l'azione si attiva anche per le barre laterali vuote e sia sul front-end * che sul back-end, inclusa la barra laterale Widget inattivi nella schermata Widget. * * @since 3.9.0 * * @param int|string $index Indice, nome o ID della barra laterale dinamica. * @param bool $has_widgets Indica se la barra laterale è popolata con widget. * valore predefinito vero. */ do_action("dynamic_sidebar_before", $index, true); $sidebar = $wp_registered_sidebars[ $index ]; $ha_uno = falso; foreach ((array) $sidebars_widgets[ $index ] as $id) ( if (! isset($wp_registered_widgets[ $id ])) ( continue; ) $params = array_merge(array(array_merge($sidebar, array("widget_id" => $id, "widget_name" => $wp_registered_widgets[ $id ]["name"],)),), (array) $wp_registered_widgets[ $id ]["params"]); // Sostituisci ID e classe HTML attributi in before_widget $classname_ = ""; foreach ((array) $wp_registered_widgets[ $id ]["classname"] as $cn) ( if (is_string($cn)) ( $classname_ .= "_" . $cn; ) elseif (is_object($cn)) ( $classname_ .= "_" . get_class($cn); ) ) $classname_ = ltrim($classname_, "_"); $params["before_widget"] = sprintf($ params["before_widget"], $id, $classname_); /** * Filtra i parametri passati al callback di visualizzazione di un widget. * * Nota: il filtro viene valutato sia sul front-end che sul back-end, * incluso per la barra laterale Widget inattivi nella schermata Widget.* * @since 2.5.0 * * @see register_sidebar() * * @param array $params ( * @type array $args ( * Un array di argomenti di visualizzazione del widget. * * @type string $name Nome della barra laterale a cui è assegnato il widget. * @type string $id ID della barra laterale a cui è assegnato il widget. * @type string $description La descrizione della barra laterale. * @type string $class Classe CSS applicata al contenitore della barra laterale. * @type string $before_widget Markup HTML da anteporre a ciascun widget nella barra laterale. * @type string $after_widget Markup HTML da aggiungere a ciascun widget nella barra laterale. * @type string $before_title Markup HTML da anteporre al titolo del widget quando viene visualizzato. * @type string $after_title Markup HTML da aggiungere al titolo del widget quando viene visualizzato. * @type string $widget_id ID del widget. * @type string $widget_name Nome del widget. * ) * @type array $widget_args ( * Un array di argomenti multi-widget. * * @type int $number Incremento numerico utilizzato per multipli dello stesso widget. * ) * ) */ $params = apply_filters("dynamic_sidebar_params", $parametri); $callback = $wp_registered_widgets[ $id ]["callback"]; /** * Si attiva prima che venga chiamato il callback di visualizzazione di un widget. * * Nota: l'azione si attiva sia sul front-end che sul back-end, incluso * per i widget nella barra laterale Widget inattivi nella schermata Widget. * * L'azione è non attivato per barre laterali vuote * * @since 3.0.0 * * @param array $widget_id ( * Un array associativo di argomenti del widget. * * @type string $name Nome del widget. * @type string $id ID widget. * @type array|callable $callback Quando l'hook viene attivato sul front-end, $callback è un array * contenente l'oggetto widget. Attivato sul back-end, $callback * è "wp_widget_control", vedi $_callback.* @type array $params Un array associativo di argomenti multi-widget.* @type string $classname Classe CSS applicata al contenitore del widget.* @type string $description La descrizione del widget.* @type array $_callback Quando l'hook viene attivato sul retro end, $_callback è popolato * con un array contenente l'oggetto widget, vedi $callback.* ) */ do_action("dynamic_sidebar", $wp_registered_widgets[ $id ]); if (is_callable($callback)) ( call_user_func_array($callback, $params); $did_one = true; ) ) /** * Si attiva dopo che i widget sono stati visualizzati in una barra laterale dinamica. * * Nota: l'azione si attiva anche per le barre laterali vuote e sia sul front-end * che sul back-end, inclusa la barra laterale Widget inattivi nella schermata Widget. * * @since 3.9.0 * * @param int|string $index Indice, nome o ID della barra laterale dinamica. * @param bool $has_widgets Indica se la barra laterale è popolata con widget. * valore predefinito vero. */ do_action("dynamic_sidebar_after", $index, true); /** * Filtra se una barra laterale ha widget. * * Nota: il filtro viene valutato anche per le barre laterali vuote e sia sul front-end * che sul back-end, inclusa la barra laterale Widget inattivi nella schermata Widget. * * @since 3.9.0 * * @param bool $did_one Indica se almeno un widget è stato visualizzato nella barra laterale. * predefinito falso. * @param int|string $index Indice, nome o ID della barra laterale dinamica. */ return apply_filters("dynamic_sidebar_has_widgets", $did_one, $index); )Ciao amici! Come promesso, ho fatto un argomento su Barre laterali di WordPress. Questa è una piccola guida all'utilizzo e alla personalizzazione delle barre laterali sui siti WordPress.
In questo thread, voglio svelare un piccolo segreto a tutti gli sviluppatori di template: le barre laterali sono sempre state una parte importante del sistema WordPress e sono state notevolmente migliorate negli ultimi anni.
Tenendo conto dei recenti sviluppi, ti mostrerò passo dopo passo il processo di creazione e utilizzo delle barre laterali per i temi WordPress.
Cos'è una barra laterale di WordPress?
Infatti, il termine ‘barra laterale (barra laterale)’ può significare due concetti completamente estranei nel sistema WordPress:
Nella maggior parte dei casi, i modelli semplici hanno una barra laterale dinamica che carica tutti i widget posizionati dal pannello di amministrazione. Questo processo può avvenire anche secondo un altro algoritmo, ma molto spesso secondo questo schema. Tuttavia, è importante capire che una barra laterale dinamica e un modello di barra laterale sono due cose diverse. Tutto è premium, lavoro principalmente con il template Sidebar.
Di solito, il termine "barra laterale" viene utilizzato in relazione alla barra laterale dinamica, che verrà discussa in questo articolo. Tuttavia, toccherò anche il modello della barra laterale.
Ciò che mi ha deluso di più nella navigazione di molti temi è che gli sviluppatori non sfruttano appieno le funzionalità più potenti del sistema WordPress. La maggior parte dei temi ha solo una barra laterale, due al massimo. Ma dopotutto, questi temi creeranno pagine enormi con una serie di opzioni che possono essere facilmente elaborate utilizzando i widget e il loro contenuto può essere inserito direttamente nel modello. Preferisco utilizzare molte barre laterali in un tema per creare un sito flessibile e ricco di funzionalità.
Registrazione, aggiunta e creazione di una barra laterale di WordPress
Molti temi spesso non soddisfano gli standard di qualità, quindi se sei uno sviluppatore di modelli, assicurati di prendere sul serio questo problema. Creare una dinamica appropriata Barra laterale di WordPressè la parte più importante del processo, perché ciò che imposti sarà correlato a tutte le altre funzionalità della barra laterale.
Per creare una o più barre laterali, dovrai registrarle tramite un file funzioni. php Il tuo tema, ogni tema ha il proprio file che contiene tutte le impostazioni del modello. Da archiviare funzioni. php Puoi aggiungere o rimuovere le impostazioni del tema.
Il codice seguente mostra come creare una barra laterale in WordPress utilizzando la funzione register_sidebar(). In questo caso, creeremo una barra laterale chiamata "primaria" che servirà da esempio con cui lavorare.
"primary", "name" => __("Primary"), "description" => __("Descrizione barra laterale (visibile nel pannello di amministrazione)."), "before_widget" => "
", "before_title" => "", "after_title" => "
")); /* Puoi ripetere la funzione register_sidebar() per altri widget, il campo id deve essere univoco (primario, secondario, moiwidget, ecc. */ ) ?>add_action("widgets_init" , "registriruem_sidebari" ) ; funzione register_sidebari() ( /* Registra la barra laterale "primaria". */ register_sidebar( vettore( "id" => "primario" , "nome" => __("Primario") , "descrizione" => __( "Descrizione della barra laterale (visibile nel pannello di amministrazione).") , "before_widget" => "" , "prima_titolo" => " "dopo_titolo" => "" /* Puoi ripetere la funzione register_sidebar() per altri widget, il campo id deve essere univoco (primario, secondario, moiwidget, ecc. */ |
Come puoi vedere, la registrazione di una barra laterale è un compito molto semplice se hai informazioni su come farlo.
Argomenti per la creazione di una barra laterale dinamica barra laterale_dinamica()
Funzione register_sidebar() accetta un solo parametro, viene chiamato $arg e contiene una serie di argomenti che specificano come deve essere visualizzata la barra laterale con i suoi widget. Successivamente, considera esempi di come utilizzare gli argomenti manualmente.
ID
Discussione id, è probabilmente uno degli argomenti più importanti da scrivere (controlla l'esempio di codice scritto male di seguito e scopri perché dovresti assolutamente scriverlo). WordPress utilizzerà id per assegnare i widget a una barra laterale specifica e ti serviranno id per riempire ulteriormente la barra laterale - barra laterale.
Ogni id deve essere unico. WordPress, per impostazione predefinita, lo prescriverà per barra laterale-$i(Dove $i
//il nostro id widget, che viene assegnato solo una volta "id" => "primary",
Nome
Puoi scrivere qualsiasi nome che ritieni rappresenti al meglio il tuo Barra laterale di WordPress. Molto spesso, alle barre laterali vengono assegnati nomi con i quali l'utente può determinare quali aspetti dell'argomento stanno toccando (ad esempio, barra laterale sinistra o destra). Questo argomento può essere internazionalizzato (cioè localizzato per altre lingue). Quindi assicurati di scrivere il dominio di testo corretto quando prepari il tuo argomento per la traduzione. L'argomento, per impostazione predefinita, è scritto come Sidebar $i(Dove $iè il numero ordinale della barra laterale creata).
//nome widget, nell'esempio utilizzo Primary come nome del widget id "name" => "Primary",
descrizione
Discussione descrizioneè stato introdotto per la prima volta in WordPress 2.9. Questo argomento ti consente di descrivere il tuo widget, la descrizione viene visualizzata nel pannello di amministrazione nella sezione Widget. Questo argomento, per impostazione predefinita, è scritto su una stringa vuota. Può anche essere internazionalizzato (cioè scritto in cirillico o altre lingue).
//la descrizione sarà visibile nella sezione dei widget "description" => __("Widget per la colonna di sinistra del sito"),
before_widget
Discussione before_widget questo è l'elemento di apertura del widget assegnato alla barra laterale. Deve anche essere un elemento a livello di blocco HTML markup (ad esempio tag < li > , < p > , < div > eccetera.). Questo argomento ha un paio di caratteristiche in cui puoi scrivere ad esempio id="" O classe="": attributi id="" si scrivono così: (%1$s) e attributi classe="" COSÌ: (%2$s).
Per impostazione predefinita, WordPress li elencherà come voce di elenco: < li id = "%1$s" > . Non sono un fan della creazione di elementi dell'elenco dei widget della barra laterale. io uso sempre < div > . Non sono un fan della creazione di elementi dell'elenco dei widget della barra laterale. L'ultima volta che l'ho usato, perché in assenza di un widget sul sito, non vedrai extra HTML tags, tuttavia, considereremo ulteriormente come sbarazzarcene.
after_widget
Discussione after_widget abbastanza facile da creare. Questo è l'elemento di chiusura del widget assegnato alla barra laterale. Devi solo chiudere l'elemento specificato per l'argomento before_widget. Per impostazione predefinita, WordPress lo scriverà come < li > .
"after_widget" => "
[ pastello - 5e1ff7d787fb8042608178 inline = "true" ] "after_widget" => "" , |
prima_titolo
La maggior parte dei widget visualizza un titolo se l'utente lo inserisce. Discussione prima_titolo questo è l'elemento di apertura del titolo del widget. Per impostazione predefinita, WordPress lo scrive come < h2 > . Per utilizzare i tag < h2 > non ne vale la pena, in questo caso i tag andranno bene < h3 > E < h4 > . Per intuitività e leggibilità del codice, non creare nomi di classi senza trattini, in modo che sia più conveniente per te leggere tu stesso il nome, è molto importante se non lavori con il sito da tempo.
dopo_titolo
Discussione dopo_titolo questo è l'elemento di chiusura specificato nell'argomento prima_titolo. Per impostazione predefinita, WordPress lo scrive come <
/
h2
>
.
Devi assicurarti che il suo valore corrisponda al valore specificato nell'argomento prima_titolo.
"dopo_titolo" => ""
"dopo_titolo" => "" |
Visualizzazione di una barra laterale dinamica dynamic_sidebar()
Quando la creazione della barra laterale è completata, puoi iniziare a visualizzarla all'interno del tema. WordPress ha creato una funzione per questo chiamata < a title = "Funzione Codex Wordpress dynamic_sidebar()" href= "http://codex.wordpress.org/Function_Reference/dynamic_sidebar" target="_blank" > dynamic_sidebar()< / a > . Questa funzione richiede sempre un parametro $indice, che possono trovarsi contemporaneamente sia nell'argomento id, e nell'argomentazione nome(specificato durante la creazione della barra laterale). Sebbene sia tecnicamente possibile utilizzarli entrambi, è molto più sicuro utilizzare quello prescritto. id.
Usando il codice qui sotto in uno dei tuoi modelli, puoi posizionare la barra laterale primario descritto appena sopra. notare che div Con classe E id Puoi cambiare a tua discrezione e fregare vari css stili.
< div id = "id-vidgeta-primary" class = "moi-saidbar" > // chiama la funzione di visualizzazione della barra del sito
< / div > |
Di solito questo codice si trova nel file barra laterale - primaria . php, che imparerai a conoscere tra un momento quando parleremo di modelli di barra laterale. Tuttavia barra laterale_dinamica() può essere chiamato ovunque nel tuo tema.
- Facciamo e
Visualizzazione predefinita del contenuto
Alcuni sviluppatori di temi visualizzano i propri contenuti se l'utente non ha aggiunto alcun widget a una barra laterale specifica. Per verificare la presenza di widget nella barra laterale, utilizza il tag condizionale is_active_sidebar() .
Proprio come una funzione barra laterale_dinamica(), utilizzato per riempire la barra laterale, la funzione is_active_sidebar() richiede sempre un parametro $indice, che dovrebbe essere ID barra laterale che stai controllando.
Con il codice qui sotto possiamo testare la nostra barra laterale primario per i widget. Se sono presenti widget, li mostreremo noi, in caso contrario, mostreremo il contenuto che abbiamo appositamente preparato.
< div id = "id-vidgeta-primary" class = "moi-saidbar" >
< / div > |
Non visualizzare la barra laterale senza widget
La sezione precedente ti ha mostrato come posizionare il contenuto mancante quando una determinata barra laterale non è attiva, ma hai anche la possibilità di comprimere completamente (non visualizzare nulla) una barra laterale quando la barra laterale non è attiva.
Useremo ancora la funzione is_active_sidebar() per controllare la barra laterale primario per i widget.
< div id = "id-vidgeta-primary" class = "moi-saidbar" >
< / div >
|
A proposito, qui puoi pensare ad alcune cose interessanti. Ad esempio, puoi creare una larghezza della barra laterale dinamica per i tuoi contenuti in base a quali barre laterali sono attive e quali no. Maggiori informazioni su questo nei prossimi articoli.
Modelli barra laterale - Barra laterale
Abbiamo toccato tutti gli aspetti della creazione e del lavoro con una barra laterale dinamica, ma va notato che ci sono altre caratteristiche interessanti. Quindi diamo un'occhiata ai modelli di barra laterale.
Il modello della barra laterale viene utilizzato per ospitare il codice della barra laterale dinamica (vedere "Visualizzazione della barra laterale dinamica" sopra). In media, tutti i temi WordPress hanno un modello chiamato barra laterale. php. Se il tuo tema ha una barra laterale, questo modello è sufficiente.
I modelli della barra laterale vengono riempiti all'interno del tema utilizzando la funzione get_sidebar().Il codice qui sotto è quello che di solito uso per popolare un file barra laterale. php.
[ pastello - 5e1ff7d788042260898923 inline = "vero" ] |
get_sidebar() inoltre richiede sempre un parametro $ nome, che ti consentirà di inserire schemi più specifici. Ad esempio, il codice seguente richiede un file modello barra laterale - primaria . php.
[ pastello - 5e1ff7d788051693571425 inline = "vero" ] |
Per mantenere in ordine il tuo tema e per separare il codice, devi creare un modello specifico per ogni barra laterale dinamica. Ti suggerisco di creare prima due barre laterali dinamiche con unique id: primario E secondario. Per una migliore organizzazione, crea due file: barra laterale - primaria . php e sidebar-secondario. php.
Avrai bisogno del codice qui sotto per creare entrambi i modelli.
[ pastello - 5e1ff7d788066428860015 inline = "vero" ]
|
Sopra c'è il codice tradizionale che uso per creare i modelli. Puoi modificarlo leggermente per adattarlo al meglio alle tue esigenze personali. Devi ancora assicurarti di utilizzare la funzione get_sidebar() durante la compilazione del modello della barra laterale.
Tieni presente che i modelli di barra laterale non sempre visualizzano barre laterali dinamiche. Possono tecnicamente contenere contenuti utente codificati in grado di riflettere qualsiasi cosa. Ricorda inoltre che puoi inserire una barra laterale dinamica in quasi tutti i file del tuo modello da visualizzare su diverse pagine del sito.
Codice della barra laterale errato
Ci sono una serie di difetti che si ripetono da codice a codice, che non sono accettabili su buoni siti. Ovviamente non tutti sono tecnicamente errati, ma possono portare a malfunzionamenti o sono semplicemente un carico extra di codice.
Problema 1: codice disordinato scaricato funzioni. php
Se stai sviluppando temi, devi sapere che gli hook integrati di WordPress funzionano con gli hook. È necessario non solo conoscerli bene, è importante usarli. Il problema più grande che ho riscontrato è che il codice viene appena scaricato funzioni. php. Dovresti creare una funzione di registrazione della barra laterale e quindi allegarla a widgets_init. Puoi vedere un esempio di come farlo sopra nella sezione Registra e crea una barra laterale dinamica.
Come nota a margine: dovresti dimenticare che puoi semplicemente scaricare il codice in funzioni. php. Usa sempre la funzione hook in WordPress, questo assicurerà che le tue funzioni siano complete al 100%.
Problema 2: nessun ID registrato
È importante capire che se l'id non è chiaramente enunciato, ciò comporterà sicuramente alcune conseguenze. Quando usi register_sidebar() O register_sidebars() senza prescrizione di un individuo id, WordPress crea automaticamente indicatori id, contando il numero di barre laterali già create. E, sembrerebbe, tutto è meraviglioso. Ma questo è un grosso errore. Dopo tutto, quando un plugin o tema figlio crea una nuova barra laterale, alla barra laterale viene assegnato l'id 1 (se è la prima nello stream), che provoca la modifica dell'id di tutte le altre barre laterali. Quando l'utente accede alla barra laterale, vedrà che tutti i suoi widget sono assegnati a un'altra barra laterale.
I widget sono collegati alla barra laterale dinamica, secondo la sua id. Se id modifiche, anche i widget si spostano. Ecco perché è così importante prescrivere correttamente id durante la creazione della barra laterale. Sopra, nella sezione "Registrazione e creazione di una barra laterale dinamica", puoi vedere come farlo nel modo giusto.
Un altro vantaggio della scrittura chiara idè che sai esattamente cosa id destinato ad essere utilizzato in altre funzioni come barra laterale_dinamica() E is_active_sidebar function_exists() non c'è bisogno. Come accennato in precedenza in questo articolo, le barre laterali dinamiche esistono dal 2007. È possibile utilizzare questo tipo di controllo solo per la compatibilità con le versioni precedenti. Tuttavia, la maggior parte dei temi non è compatibile con le versioni precedenti e non consiglio di utilizzarla dalla versione precedente.
Uno dei tipi comuni di verifica dell'esistenza di una funzione register_sidebar() presentato di seguito. Dimentica questo tipo di controllo e crea solo una barra laterale.
if (function_exists("register_sidebar")) dynamic_sidebar include (TEMPLATEPATH . "/sidebar.php" ) ;
Questo non è il modo migliore per visualizzare una barra laterale in un tema. Il sistema WordPress ha una funzione get_sidebar(), con cui puoi farlo facilmente. Usalo sempre come mostrato nell'esempio sopra nella sezione "Modelli barra laterale". Dovresti usare questa funzione perché il file hook
A volte ci sono temi in cui è presente solo 1 barra laterale e vengono utilizzati per le esigenze del tema stesso e non è possibile inserire nuovi widget lì. Forse devi modificare un modello di tema esistente e aggiungere una barra laterale aggiuntiva, diciamo che il tema ne ha una a sinistra, ma devi aggiungerne un'altra a destra.
Risolvere questo problema non è affatto difficile. È sufficiente apportare piccole modifiche ai file del tema functions.php e al file modello della pagina in cui si desidera posizionare la barra laterale. Come scoprire quale file è responsabile della visualizzazione delle pagine
Per prima cosa devi registrare una nuova barra laterale. Questo viene fatto nel file functions.php nella cartella del modello. register_sidebar(array("name" =>"Nuova barra laterale", "id" => "area-widget-secondaria", "before_widget" => "", "after_title" => "
",));
Fatto, una nuova barra laterale è apparsa nel pannello di controllo del widget. Resta solo da personalizzare leggermente il suo aspetto nel file style.css (puoi copiare l'aspetto da quello esistente)
Cosa è cosa nel codice
Nome– il nome della barra laterale (barra laterale), verrà visualizzato nel pannello di amministrazione Widget.
id- identificatore univoco. Necessario quando si aggiunge alla pagina.
before_widget- codice o testo da inserire prima di ogni widget.
after_widget- codice o testo da inserire dopo ogni widget.
prima_titolo– codice o testo da inserire prima del titolo del widget.
dopo_titolo– codice o testo da inserire dopo il titolo del widget.
Fate attenzione all'ID, il nome della sidebar, in questo caso è "secondary-widget-area". Deve essere esattamente uguale al nome specificato durante la registrazione nel file functions.php.
La barra laterale è un campo speciale sul sito in cui sono incorporati i widget. In altre parole, è una colonna con contenuto dinamico. Quasi tutti i modelli hanno tali colonne e il loro numero può essere diverso. Spesso utilizzato da 1 a 4 colonne.
Per rendere qualsiasi template il più unico possibile, o semplicemente migliorarne l'aspetto o distinguersi, puoi cambiare la posizione delle colonne relative al campo di testo principale nei template standard, gratuiti e a pagamento per WordPress, che è quello che faremo in questo articolo.
Modifica della posizione della barra laterale e del corpo del testo
Quindi, diciamo che il template che usiamo ha una colonna per i widget, cioè una barra laterale, e una colonna principale dove è posizionato il testo dei nostri articoli e delle nostre pagine:
Lascia che la colonna con i widget si trovi sulla destra e dobbiamo spostarla a sinistra fino al bordo. Di conseguenza, la colonna con il contenuto del testo principale si sposterà a destra fino al bordo.
Per fare tutto questo, devi cambiare un po 'gli stili. Il contenuto del testo ha spesso lo stile #content, mentre il contenuto del widget ha spesso lo stile #sidebar. Tutto ciò che serve è cambiare le proprietà del primo da float:left; sul galleggiante: a destra; e in una sequenza diversa per il secondo.
Cambia la posizione della barra laterale nel tema Twenty Twelwe
Considera tutto quanto sopra sull'esempio di un tema reattivo standard per WordPress.
Barra laterale: parte di quasi tutti i siti, solitamente posizionata a sinistra, a destra dell'area del contenuto o davanti al piè di pagina (piè di pagina). Le barre laterali di WordPress non fanno eccezione. L'unica differenza è che in WordPress, una barra laterale è un'area in cui vengono visualizzati automaticamente i widget. Puoi creare un numero illimitato di barre laterali in WordPress, ma ad esempio creerò due barre laterali, a sinistra e a destra dell'area del contenuto principale.
Registrazione delle barre laterali di WordPress
Affinché le barre laterali vengano visualizzate prima nel pannello di amministrazione, dobbiamo registrarle. In altre parole, aggiungi il codice al file functions.php:
/** * Registra le barre laterali. */ function fwbs_widgets_init() ( register_sidebar(array("name" => __("Colonna destra", "fwbs"), "id" => "sidebar-1", "description" => __("Barra laterale destra " , "fwbs"), "before_widget" => " ", "before_title" => "
", "after_title" => "
",)); register_sidebar(array("name" => __("Colonna di sinistra", "fwbs"), "id" => "sidebar-2", "description" => __("Colonna di sinistra nel footer del sito ", "fwbs"), "before_widget" => " ", "before_title" => "", "after_title" => "
",)); ) add_action("widgets_init", "fwbs_widgets_init");Analizzare il codice sopra per creare barre laterali di WordPress
Non è così complicato come sembra a prima vista.
- "name" => __("Right column", "fwbs") - il nome dell'area del widget, puoi scrivere qualsiasi nome, solo con attenzione tra parentesi, guarda lo schermo puoi vedere dove è visualizzato;
- "id" => "sidebar-1" - ID è un identificatore univoco assegnato alla barra laterale, tutte le barre laterali devono avere il proprio, diverso dagli altri ID;
- "description" => __("Colonna sul lato destro", "fwbs") - descrizione, simile al nome della zona del widget;
- "before_widget" => "
- "after_widget" => "" - il tag HTML che chiude la zona della barra laterale. Come sappiamo, tutti i tag HTML, con alcune eccezioni, devono essere abbinati (apertura e chiusura);
- "prima_titolo" => "
" - il titolo del widget sarà racchiuso in un tag H4 con la classe
, puoi cambiare il significato dell'intestazione H1, H2, H3, H4, H5, H6 e assegnare le tue classi;
- "dopo_titolo" => ""- chiusuratag pair per il titolo del widget.
Ora andiamo al pannello di amministrazione, alla sezione "widget" e guardiamo il risultato. Ecco una foto di quello che ho ottenuto:
Con questo codice ho registrato due zone widget di WordPress, ora devo visualizzarle sullo schermo.
Visualizzazione delle barre laterali di WordPress
Per visualizzare le barre laterali ovunque nel modello, è logico scrivere il seguente codice nel posto giusto:
Alcune spiegazioni sul codice:
- - Codice PHP che dà un comando, se ci sono widget nella barra laterale sotto id=sidebar-1, allora dovrebbe essere visualizzato sullo schermo, se non ci sono widget, la barra laterale non viene visualizzata;
- - Codice PHP che chiama la barra laterale sotto id=sidebar-1 nel punto in cui l'hai scritta nel codice del template.
Ma come puoi vedere, nei modelli WordPress, il codice di output della barra laterale viene inserito in file sidebar.php separati, quindi il contenuto viene emesso dal file sidebar.php nel posto giusto nel modello. Poiché sappiamo che WordPress esegue il rendering dinamico dei contenuti e il modello del sito è composto da più parti, una delle sue parti è il file sidebar.php Lasciami fare.
Creazione del file sidebar.php
Crea un file come sidebar-right.php , dagli un titolo e incolla il codice sopra. Tutto insieme sarà simile a questo:
Come puoi vedere dall'esempio, ho integrato il codice con markup HTML aggiuntivo. Ora, per visualizzare l'area del widget, resta da scrivere quanto segue al posto giusto:
Per la colonna di sinistra, il file sidebar-left.php viene creato di conseguenza e visualizzato nel posto giusto del modello in questo modo:
Come si suol dire, trova una differenza nel codice.
Ecco fatto, le barre laterali sono state create, ora l'unica cosa rimasta è creare markup per loro nel modello e scrivere stili CSS.
