Creare un template WordPress è più facile di quanto tu possa pensare. Per fare ciò, non è necessario avere una vasta esperienza nello sviluppo del design o nella programmazione di siti Web. In questo articolo, ti guideremo attraverso le basi per creare i tuoi temi WordPress da zero.
Perché hai anche bisogno di creare il tuo modello WordPress quando puoi utilizzare i modelli disponibili nel database? Ecco i motivi che potrebbero portare a questo:
- Puoi ottenere un sito Web o una pagina di destinazione unici diversi dai tuoi concorrenti. Considerando i milioni di blog costruiti su questo CMS, ogni progetto di esempio viene utilizzato almeno un centinaio di volte.
- Completa libertà di azione in fase di sviluppo. Puoi aggiungere la tua funzionalità con gli elementi di lavoro di cui hai bisogno.
- È possibile applicare diversi design per diverse sezioni del sito, il che è impossibile quando si utilizza un modello già pronto.
- Puoi creare diversi tipi e fornire ai visitatori la possibilità di passare da un argomento all'altro, il che aumenterà l'interesse e la fedeltà alla risorsa web.
- La facilità di lavorare su WordPress lo rende accessibile a molti (i tutorial video su Internet aiuteranno). Ciò significa che il tuo sviluppo del tema principale o la creazione di un tema figlio farà risparmiare denaro nell'attirare designer e programmatori di terze parti.
- È possibile sfruttare la funzionalità dei temi figlio quando vengono apportate modifiche ai duplicati del foglio di stile style.css e il file principale rimane intatto. Ciò consente di ripristinare rapidamente le modifiche se non hanno esito positivo, nonché di non perdere lavoro durante l'aggiornamento del tema principale.
Breve istruzione
Ovviamente, ottenere un tutorial completo su come creare un modello di pagina non funzionerà con un solo articolo. Innanzitutto, è importante comprendere le basi: come vengono realizzati gli argomenti più semplici. Sulla base di questi, puoi già fare "creatività" e creare una pagina di destinazione o un sito Web secondo i tuoi desideri. Ora ti forniremo un breve cheat sheet con istruzioni dettagliate: ti aiuterà a capire come viene creato il sito web.
Fase uno: lavoro preparatorio
Prima di iniziare a lavorare, devi assicurarti di avere un editor di testo (il più semplice è Blocco note o Nodepad ++, soprattutto perché puoi scaricarli gratuitamente). Il prossimo passo è installare il motore WordPress e la suite Denwer sul tuo computer locale. Denver è un toolkit essenziale per i programmatori. Con il loro aiuto, il processo di sviluppo e modifica dei siti è notevolmente facilitato e accelerato. Come installarlo, questo video ti dirà:
Passaggio due: crea una nuova cartella di temi
Vai alla directory desiderata. Molto spesso ha il seguente percorso: ... Tutti i temi sono memorizzati qui, sia quelli standard che quelli personalizzati. Entriamo e creiamo una nuova cartella. Chiamiamolo, ad esempio, "MyFirstTheme".
Ora vai in una nuova cartella e assicurati di aggiungere due file creati tramite Nodepad ++ o un altro editor. Questi sono index.php e style.css. Per ora lasciamo che questi documenti rimangano vuoti, poi continueremo a riempirli. Aggiungi anche la cartella delle immagini a "MyFirstTheme" qui. dove puoi aggiungere immagini per progettare un modello.
Successivamente, a "MyFirstTheme" possono essere aggiunti template per le singole parti del sito: sidebar (sidebar.php), site (header.php), post sulle pagine (single.php), commenti (comments.php), ecc. A l'insieme di file aggiuntivi dipende dalla struttura che pianifichi per la tua risorsa web.
Terzo passo: riempire index.php
La prima cosa da fare è compilare il file indice (index.php). Ecco un esempio del codice più semplice per un sito con quattro aree: intestazione, principale, barra laterale e piè di pagina.
Titolo del sito
Nel file puoi scrivere tutti gli elementi che vuoi vedere sul tuo sito. Maggiori informazioni sulla scrittura del codice index.php per creare temi in WordPress possono essere ottenute dal video:
Fase quattro: compila anche style.css
Ora devi aprire style.css, aggiungere e compilare i seguenti campi (inserisci le tue informazioni sul sito e sul proprietario invece di ***). I dati inseriti verranno visualizzati nel pannello di amministrazione.
/ * Nome del tema: ***
URI del tema: http: // ***
URI dell'autore: http: // ***
Descrizione: ***
Successivamente sarà possibile inserire in questo file vari dati e regole che determinano l'aspetto delle pagine. Ad esempio:
(le informazioni in /**/ sono commenti, non parti di codice)
In questa fase, è troppo presto per impostare parametri di stile rigorosi, ma questo tutorial video tornerà utile per ulteriori lavori con il file:
Passaggio cinque: dividere i file
Tutti gli elementi specificati in index.php devono essere duplicati in file separati. Nel primo passaggio dell'esempio, oltre alla parte principale principale, sono stati specificati intestazione, barra laterale e piè di pagina, quindi per loro creiamo i nostri documenti in formato .php.
Ad esempio, crea un file header.php, apri index.php. trova il pezzo di codice corrispondente e incollalo in un nuovo file. Sarà:
Titolo del sito
Lo stesso viene fatto per il resto delle parti. Questo dovrebbe essere fatto per una navigazione più semplice. Quando ci sono molti elementi del sito futuro, file separati ti aiuteranno a navigare meglio per controllare o apportare modifiche.
Affinché il file indice principale sia coerente con quelli aggiuntivi, è necessario scrivere quanto segue in index.php sotto i blocchi per ciascuna parte:
Di seguito è riportato un elenco dei file modello standard utilizzati da WordPress. Non puoi usarli o aggiungere le tue sezioni:
- Intestazione - lo stile dell'intestazione del tuo sito.
- Commenti: un modello per la creazione di commenti.
- Home - tema per la home page.
- Pagina: determina il tema se crei pagine separate sul sito
- Categoria - modello per la categorizzazione
- Data: definisce lo stile di visualizzazione della data e dell'ora.
- Archivio - modello per la sezione archivio con vecchi materiali.
- Cerca - un file che specifica i parametri per la ricerca sul sito.
- 404 è un modello per una pagina che riporta un errore 404 Not Found.
- Piè di pagina: determina lo stile del piè di pagina del tuo sito.
Quando in seguito perfezioni ogni elemento, avrai bisogno di un video tutorial visivo. Ecco alcune selezioni che potrebbero aiutarti:
Intestazione in header.php:
Aggiunta di contenuti:
Commenti sullo stile:
Seminterrato sul sito:
Come puoi apportare modifiche senza paura
Quando è necessario apportare modifiche alle pagine del sito, c'è il rischio di scrivere qualcosa di sbagliato e di non poter "ripristinare" indietro. Può anche succedere che le voci del foglio di stile scompaiano quando il tema principale viene aggiornato.
Per evitare che ciò accada, puoi creare un tema WordPress figlio (argomento secondario): è un duplicato del file style.css che non influisce sul file principale (le modifiche in uno non annullano gli aggiornamenti nell'altro).
Creare un tema figlio di WordPress è facile. Dobbiamo creare una nuova cartella nella directory principale C: \ WebServers \ home \ localhost \ www \ NOME_SPECIFIED_IN_INSTALLATION \ wp-content \ temi... Nella nuova cartella, creiamo il nostro file style.css con il seguente contenuto:
Nome del tema: NOME DEL TEMA
Modello: NOME DELLA CARTELLA IN OGGETTO BAMBINO
URI del tema: COMPILA
Descrizione: COMPILA
URI dell'autore: COMPILA
/ * importa gli stili del tema principale * /
@import url ("../ TITLE / style.css");
/ * I tuoi stili aggiuntivi * /
Pippo (colore: rosso;)
Ora puoi andare su "Aspetto› Temi "nel pannello di amministrazione e attivare il modello figlio. In futuro, puoi lavorare in un nuovo file. Inoltre, un piccolo video di presentazione sull'argomento dei modelli figlio:
Oggi daremo un'occhiata più da vicino al processo di creazione di una pagina delle impostazioni per un tema WordPress utilizzando il meraviglioso WooFramework come esempio.
Quindi, complicheremo un po' l'attività utilizzando le capacità di jQuery e miglioreremo leggermente la funzionalità della pagina.
WordPress è di gran lunga il sistema di gestione dei contenuti (CMS) più popolare. Molti sviluppatori scelgono WordPress come CMS, indipendentemente dal tipo di progetto.
Il sistema è molto facile da usare, ma puoi renderlo ancora più semplice abilitando pannelli di controllo utente aggiuntivi. Invece di aprire file modello PHP e manipolare il codice, gli utenti possono utilizzare la normale pagina delle impostazioni nel pannello di controllo per gestire il tema WordPress.
Ad esempio, se il tuo tema ha combinazioni di colori rosso, blu e verde, ciascuna associata a un file CSS specifico, sarebbe molto più semplice se l'utente potesse selezionare il colore desiderato dall'elenco a discesa. Pertanto, oggi, esaminerai il processo di creazione e miglioramento della pagina delle impostazioni aggiuntive per il pannello di amministrazione di WordPress.
Passo 1
Prima di iniziare a costruire la nostra dashboard, abbiamo bisogno di un tema. Quindi scarica, con i file sorgente. Vedrai un tema WordPress classico leggermente modificato. Copia la cartella "nettuts" (questo sarà il nome del nostro tema) nella cartella wp-content/temi. La cartella dovrebbe contenere i seguenti file:
- functions.php (vuoto)
- index.php
- commenti.php
- footer.php
- header.php
- rtl.php
- sidebar.php
- stile.css
- screenshot.png
- cartella di immagini contenente due file
La maggior parte del nostro codice si troverà nel file functions.php.
Il tema può facoltativamente utilizzare un file di funzione situato all'interno della cartella del tema denominata functions.php. Questo file agisce come un plugin e, se incluso nel tuo tema, viene caricato automaticamente durante l'inizializzazione di WordPress (sia pagine esterne che pannello di amministrazione).
Questo file dovrebbe essere utilizzato per:
- descrizioni delle funzioni utilizzate nei vari file modello del tuo tema
- Installazione di pannelli di controllo aggiuntivi che consentono agli utenti di personalizzare colori, stili e altri aspetti del tema.
Passo 2
Ora che hai scaricato e installato il tema suggerito, vai alla pagina "Aspetto" - "Temi" e attiva il nostro tema nettuts.
Ora, dobbiamo pensare al markup html per il nostro pannello di controllo. Useremo la seguente struttura:
Lascia che ti spieghi tutto qui. I gruppi di impostazioni verranno racchiusi in un blocco con la classe "rm_wrap", quindi in un blocco con la classe "rp_opts". Quindi, all'interno di questi blocchi, apriamo il tag del modulo, all'interno del quale verranno inseriti tutti gli input necessari. Ogni sezione delle impostazioni (impostazioni generali, impostazioni della home page, impostazioni del blog, ecc.) si troverà in un blocco separato con il nome della classe "rm_section". Questo blocco conterrà il nome (per la sezione delle impostazioni) e diversi blocchi con ingressi. Utilizzo di classi speciali per blocchi come
La parte più importante di tutto questo è che non dovremo scrivere tutto questo codice a mano: utilizzeremo le funzionalità di PHP ove possibile. Non ha senso scrivere codice a mano quando abbiamo dei loop a nostra disposizione.
Passaggio 3
Apri il file functions.php con il tuo editor di codice preferito (sto usando NotePad ++) e incolla il seguente codice:
Queste sono due variabili PHP che contengono il nome del tuo tema (nel nostro caso, Nettuts) e l'alias che specifichi (nel nostro esempio, nt). L'alias viene utilizzato come prefisso per i nomi di tutte le impostazioni del tema ed è solitamente univoco per ogni tema.
Successivamente, creeremo un paio di righe di codice per generare automaticamente un elenco di categorie wordpress, invece di costringere l'utente a inserire manualmente il proprio ID. Incolla il seguente codice, subito dopo il precedente:
$ categorie = get_categories ("hide_empty = 0 & order_by = nome"); $ wp_cats = array (); foreach ($ categorie come $ category_list) ($ wp_cats [$ category_list -> cat_ID] = $ category_list -> cat_name;) array_unshift ($ wp_cats, "Seleziona una categoria");
Questo frammento di codice utilizza la funzione wordpress incorporata get_categories per ottenere tutte le categorie e quindi utilizzare un ciclo foreach per memorizzarle nella variabile $ wp_cats. Quindi l'opzione "seleziona una categoria" viene aggiunta all'array.
Passaggio 4
Ora è il momento di creare un elenco di impostazioni per il nostro tema. Incolla il seguente codice nel tuo file functions.php:
$ options = array (array ("nome" => "Impostazioni", "tipo" => "titolo"), array ("nome" => "Impostazioni di base", "tipo" => "sezione"), array ( "type" => "open"), array ("name" => "Color scheme", "desc" => "Seleziona schema colori del tema", "id" => $ shortname. "_color_scheme", "type" = > "select", "options" => array ("blue", "red", "green"), "std" => "blue"), array ("name" => "Logo URL", "desc" => "Inserisci un collegamento all'immagine del logo", "id" => $ shortname. "_Logo", "type" => "text", "std" => ""), array ("name" => " Custom CSS "," desc "=>" Vuoi usare il tuo codice CSS? Incollalo in questo campo "," id "=> $ shortname." _custom_css "," type "=>" textarea "," std " =>" " ), array ("tipo" => "chiudi"), array ("nome" => "Pagina iniziale", "tipo" => "sezione"), array ("tipo" => "apri" ), array ("name" => "Immagine nell'intestazione, nella pagina principale", "desc" => "Inserisci l'URL dell'immagine che verrà utilizzata nell'intestazione", "id" => $ shortname. "_ header_img", "type" => "text", "std" => ""), array ("name" => "intestazione della home page", "desc" => "Seleziona un'intestazione in cui verranno pubblicati i post", "id" => $ shortname. "_feat_cat", "type" => "select", "options" => $ wp_cats, "std" => "Seleziona una categoria"), array ("type" => "close"), array ("nome" = > "Piè di pagina", "type" => "section"), array ("type" => "open"), array ("name" => "Copyright text", "desc" => "Inserisci il testo che sarà situato sul lato destro del seminterrato. Puoi usare HTML "," id "=> $ shortname." _ Footer_text "," type "=>" text "," std "=>" "), array (" name "=> " Google Analytics code ", " desc "=>" Qui puoi inserire il codice di Google Analytics, o qualsiasi altro contatore "," id "=> $ shortname." _ Ga_code "," type "=>" textarea "," std "=>" ") , array ("name" => "Favicon", "desc" => "Favicon è un'icona pixel che rappresenta il tuo sito. Incolla l'URL nell'immagine con l'estensione .ico", "id" => $ shortname. " _ favicon", "type "=>" text "," std "=> get_bloginfo (" url ")." / favicon.ico "), array (" name "=>" Feedburner URL "," desc "=> " Feedburner è un servizio Google che gestisce i feed RSS. Incolla qui l'URL di Feedburner per consentire ai lettori di vederlo nel tuo sito web "," id "=> $ shortname." _ feedburner "," digita "=>" text "," std "=> get_bloginfo (" rss2_url ")), array (" digita "=>" chiudi "));
Questo era un pezzo di codice abbastanza grande che merita un piccolo chiarimento. Così:
- La variabile PHP $ options contiene l'intero elenco di opzioni per il nostro tema.
- L'elenco delle impostazioni è composto da diversi array, ognuno dei quali contiene una chiave "tipo" per definire il tipo di impostazione e come verrà visualizzato.
- Il nostro elenco di impostazioni inizia con un array "type" => "title" - che verrà utilizzato per visualizzare il nome del tema e il titolo nel titolo della pagina.
- Ogni sezione (Impostazioni di base, Home Page, Piè di pagina) ha un elenco separato di impostazioni.
- Iniziamo una nuova sezione chiudendo una delle sezioni precedenti e dichiariamo la nuova sezione utilizzando l'array array ("nome" => "Piè di pagina", "tipo" => "sezione").
- Ogni opzione può contenere le seguenti impostazioni:
nome: Il nome della casella di testo.
desc: Una breve descrizione del campo, per l'utente.
ID: ID campo, preceduto dall'alias. Sarà utilizzato sia per registrare l'impostazione che per accedervi.
genere: tipo di input: testo, selezione o area di testo
opzioni: utilizzato per dichiarare un array di impostazioni per un campo a discesa.
standard: il valore del campo predefinito se non viene specificato nessun altro valore.
Passaggio 5
Prova ad accedere alla dashboard di WordPress. Non troverai le impostazioni che abbiamo specificato da nessuna parte, come possiamo visualizzarle? Aggiungi il seguente codice al file functions.php:
Funzione mytheme_add_admin () (global $ themename, $ shortname, $ options; if ($ _ GET ["page"] == basename (__ FILE __)) (if ("salvato" == $ _REQUEST ["action"]) (foreach ( $ opzioni come $ valore) (update_option ($ valore ["id"], $ _REQUEST [$ valore ["id"]]);) foreach ($ opzioni come $ valore) (if (isset ($ _REQUEST [ $ value [ "id"]])) (update_option ($ value ["id"], $ _REQUEST [$ value ["id"]]);) else (delete_option ($ value ["id"]);)) header (" Location: admin.php? Page = functions.php & save = true "); die;)) else if (" reset "== $ _REQUEST [" action "]) (foreach ($ options as $ value) (delete_option ($ value ["id"]);) header ("Location: admin.php & page = functions.php & reset = true"); die;) add_menu_page ($ themename, $ themename, "administrator", basename (__ FILE__), "mytheme_admin"); ) function mytheme_add_init () ()
Questa funzione viene utilizzata sia per aggiornare le impostazioni stesse, sia per aggiungere una pagina al pannello di controllo. Se le impostazioni sono state salvate (determinate utilizzando la variabile nascosta salva), tutte le impostazioni vengono aggiornate con i valori specificati. Se, tuttavia, le impostazioni sono state ripristinate (determinate utilizzando un altro ripristino variabile nascosto), tutte le impostazioni vengono eliminate.
L'ultima riga della funzione aggiunge una pagina di menu - parametri in ordine: nome e titolo, livello di diritti utente per visualizzare la pagina, pagina di salvataggio e funzione utilizzata per visualizzare / salvare le impostazioni (nel nostro esempio, si chiama mytheme_admin).
Notare che la funzione mytheme_add_init è vuota? Lascia che rimanga così com'è, ci torneremo più tardi.
Passaggio 6
La pagina delle impostazioni non appare nel pannello di controllo? Ma non abbiamo ancora completato la funzione mytheme_admim, menzionata sopra. Per creare questa funzione, abbiamo bisogno del codice dei passaggi 6, 7 e 8. Cominciamo.
Funzione mytheme_admin() (global $ themename, $ shortname, $ options; $ i = 0; if ($ _ REQUEST ["action"] == "save") echo "
impostazioni del tema ". $ nometema." sono stati salvati
impostazioni del tema ". $ nometema." sono stati lasciati
Impostazioni
Per una gestione dei temi più comoda, puoi usare il menu qui sotto
Utilizza un ciclo foreach php, ogni tipo di impostazione è determinato individualmente per ogni caso. Per questo useremo un'istruzione switch. La variabile nell'istruzione switch è il tipo corrente del parametro, case è il tipo previsto del parametro. Probabilmente hai notato l'istruzione "break" dopo ogni caso? Questa espressione viene utilizzata per impedire l'elaborazione errata di una condizione. Quando il valore di case corrisponde a una variabile, verranno eseguiti anche tutti i casi successivi. Cioè, se abbiamo definito case3 , oltre ad esso verranno eseguiti anche case4, case5, ecc. Ma non ne abbiamo bisogno, quindi usiamo break per terminare l'istruzione switch.
Se il valore corrente del parametro è “aperto”, non succede nulla. Se il valore corrente è “chiudi”, vengono posizionati due blocchi di chiusura. Il valore del parametro "titolo" viene utilizzato una sola volta, nel testo introduttivo prima delle impostazioni del tema. Per ogni tipo "testo" (tipo di input = "testo"), "seleziona" (elenco a discesa) e "area di testo" (il nome parla da solo) - viene visualizzato l'input corrispondente. Attenzione al blocco
Passaggio 8
Ci stiamo avvicinando alla fine di questa caratteristica piuttosto grande. Incolla il seguente codice:
Caso "seleziona":?>
/functions/images/trans.gif "class =" inactive "alt =" "/>
!}
Per il tipo di impostazione "sezione", utilizziamo la variabile contatore $ i. Ciò consente di tenere traccia del numero di sezione e collegarlo al nome del pulsante di invio, ottenendo così un nome univoco per ogni pulsante. Inoltre, viene aggiunto un modulo alla fine della sezione per ripristinare tutte le impostazioni. L'immagine verrà utilizzata per ulteriori fiction jQuery. Questo è l'ultimo pezzo di codice che metterà in azione le nostre funzioni:
Aggiungi_azione ("admin_init", "mytheme_add_init"); add_action ("admin_menu", "mytheme_add_admin");
Questo codice aggiunge una pagina extra alla dashboard di WordPress.
Passaggio 9
Ottimo, ora abbiamo la nostra pagina di controllo, con una voce di menu separata. Tuttavia, dopo aver visitato questa pagina, vediamo che non tutto è buono come vorremmo. Ma non importa, abbiamo un grande aiuto: i CSS! Crea una nuova cartella "funzioni" all'interno della cartella netuts. All'interno di questa cartella, crea un nuovo file - functions.css e incollaci il seguente codice:
Rm_wrap (width: 740px;) .rm_section (border: 1px solid #ddd; border-bottom: 0; background: # f9f9f9;) .rm_opts label (font-size: 12px; font-weight: 700; width: 200px; display : block; float: left;) .rm_input (padding: 30px 10px; border-bottom: 1px solid #ddd; border-top: 1px solid #fff;) .rm_opts small (display: block; float: right; width: 200px ; color: # 999;) .rm_opts input, .rm_opts select (width: 280px; font-size: 12px; padding: 4px; color: # 333; line-height: 1em; background: # f3f3f3;) .rm_input input: focus, .rm_input textarea: focus (background: #fff;) .rm_input textarea (width: 280px; height: 175px; font-size: 12px; padding: 4px; color: #333; line-height: 1.5em; background: # f3f3f3;) .rm_title h3 (cursor: pointer; font-size: 1em; text-transform: maiuscolo; margin: 0; font-weight: grassetto; color: # 232323; float: left; width: 80%; padding: 14px 4px;) .rm_title (cursor: pointer; border-bottom: 1px solid #ddd; background: #eee; padding: 0;) .rm_title h3 img.inactive (margin: -8 px 10px 0 2px; larghezza: 32px; altezza: 32px; background: url ("images / pointer.png") no-repeat 0 0; galleggiante: sinistro; -moz-border-radius: 6px; bordo: 1px solido #ccc; ) .rm_title h3 img.active (margin: -8px 10px 0 2px; larghezza: 32px; altezza: 32px; background: url ("images/pointer.png") no-repeat 0 -32px; float: left; -moz- border-radius: 6px; -webkit-border-radius: 6px; border: 1px solid #ccc;) .rm_title h3: hover img (border: 1px solid # 999;) .rm_title span.submit (display: block; float: right; margin: 0; padding: 0; width: 15%; padding: 14px 0;). clearfix (clear: entrambi;) .rm_table th, .rm_table td (border: 1px solid #bbb; padding: 10px; text- align: center;) .rm_table th, .rm_table td.feature (border-color: # 888;)
Penso che questo codice non richieda alcun chiarimento, tutto è estremamente semplice e diretto. Ovviamente puoi modificarlo a tuo piacimento.
Passaggio 10
Ora che abbiamo un file CSS già pronto, come possiamo collegarlo alla pagina se non abbiamo accesso diretto a una sezione del documento
? Ricordi che abbiamo creato una funzione vuota mytheme_add_init()? Ecco lei è proprio quello che ci aiuterà. Modificalo come segue:Funzione mytheme_add_init () ($ file_dir = get_bloginfo ("template_directory"); wp_enqueue_style ("funzioni", $ file_dir. "/ Functions / functions.css", false, "1.0", "all");)
Questo codice includerà il file functions.css nella sezione del documento
... La posizione del file è determinata dalla cartella del modello.
Passaggio 11
Dai un'occhiata alla nostra pagina. Sembra abbastanza buono, non resta che aggiungere funzionalità alle icone più nelle intestazioni delle sezioni. Useremo jQuery per questo. Crea un nuovo file rm_script.js all'interno della cartella nettuts/functions/. Incolla il seguente codice:
JQuery (document) .ready (function () (jQuery (". Rm_options"). SlideUp (); jQuery (". Rm_section h3"). Fare clic su (function () (if (jQuery (this) .parent (). Next (".rm_options"). css ("display") === "none") (jQuery (this) .removeClass ("inactive"). addClass ("active"). children ("img"). removeClass (" inattivo "). addClass (" attivo ");) else (jQuery (this) .removeClass (" attivo "). addClass (" inattivo "). children (" img "). removeClass (" attivo "). addClass (" inattivo ");) jQuery (this) .parent (). next (". rm_options "). slideToggle (" slow ");));));
Cosa fa questo codice? Dopo che il DOM è stato caricato, tutti i blocchi con la classe "rm_options" vengono compressi. Quindi, quando si fa clic sull'icona più, la classe "inattiva" viene rimossa e viene aggiunta la classe "attiva", che sostituisce l'icona con un segno meno. Quando si fa nuovamente clic su questa icona, si verifica il processo opposto. Per piegare / aprire i blocchi, viene utilizzata una funzione jQuery slideToggle abbastanza semplice. Per connettere questo script alla pagina, utilizzeremo la già familiare funzione mytheme_add_init(), modificandola come segue:
Function mytheme_add_init() ($ file_dir = get_bloginfo ("template_directory"); wp_enqueue_style ("funzioni", $ file_dir. "/ Functions / style.css", false, "1.0", "all"); wp_enqueue_script ("rm_script", $ file_dir. "/ functions / script.js", false, "1.0");)
Dopodiché, lo script dovrebbe funzionare. Controlla come appare sulla pagina:
Passaggio 12
Ora che la nostra pagina delle impostazioni è completamente pronta, c'è ancora qualcosa da dire sull'utilizzo delle impostazioni stesse. Il codice per l'utilizzo dei parametri è simile al seguente:
$ var = get_option ("nt_colur_scheme");
Con il suo aiuto, saremo in grado di implementare un cambiamento nella combinazione di colori del sito. È piuttosto semplice:
/ * Modifica il file CSS in base al colore selezionato * / /.css "/> / * Visualizza il testo a piè di pagina, puoi usare i tag HTML * /
Lo scopo è limitato solo dalla tua immaginazione.
Con questo articolo, continuo una serie di tutorial sulla creazione di siti Web sul motore WordPress. Dopo aver installato un nuovo tema sul blog, dovremo personalizzarlo in base alle nostre esigenze. Questo non è affatto difficile da fare. Ma per modifica del modello WordPress, devi almeno sapere come funziona e quali file sono responsabili di cosa. Dopo aver esaminato Struttura del modello di WordPress e con una conoscenza di base di HTML e CSS, puoi già modificare il template del tema, cambiandone l'aspetto e le funzionalità. Ma prima le cose principali.
Immediatamente dopo aver installato un nuovo tema, è improbabile che il tuo blog sembri attraente. Per risolvere questo problema, devi personalizzare il tuo tema WordPress aggiungendo e organizzando tutti gli elementi necessari nelle pagine del tuo blog. Quindi scendiamo a personalizzazione del modello del tuo tema WordPress.
Configurazione di un tema WordPress (modello).
Entriamo Barra degli strumenti() WordPress e continueremo a studiarlo, esaminando nel dettaglio tutti i punti della sezione "Design", che è responsabile dell'aspetto e della modifica del template WordPress:
La scheda successiva è "Widget". Quando si passa ad esso, la seguente immagine si aprirà davanti a noi:
Sul lato sinistro vediamo tutto” Widget disponibili“: RSS, Archivi, Calendario, Trova, Tag Cloud, Ultimi post, Categorie, Testo, ecc. La barra laterale del blog è schematicamente indicata sulla destra. A seconda della struttura della struttura del template di WordPress, possono essere presenti una o più barre laterali. Su un blog, sembra una barra laterale situata a destra o a sinistra e possibilmente su entrambi i lati contemporaneamente.
Per riempire la barra laterale con i widget necessari, dobbiamo solo selezionare il widget richiesto con il tasto sinistro del mouse e, tenendolo premuto, trascinare il widget sulla barra laterale di cui abbiamo bisogno. Allo stesso modo, puoi spostare i widget in alto o in basso nella barra laterale stessa.
Ciò che rappresenta ciascuno dei widget è abbastanza chiaro dai loro nomi. Il widget "Testo" merita un'attenzione speciale. Spostandolo nella barra laterale si apriranno i campi di immissione dati e titolo. Qui puoi inserire sia testo normale con immagini che vari codici HTML. Ad esempio, contatori di statistiche, unità pubblicitarie e banner, moduli di iscrizione, ecc. Dopo aver compilato o modificato il widget "Testo", fai clic sul pulsante "Salva" per rendere effettive le modifiche. Puoi eliminare i widget non necessari facendo clic sul pulsante "Elimina" o trascinandoli di nuovo nel " Widget disponibili“. Se hai bisogno di disabilitare temporaneamente un widget, mentre salvi tutte le sue impostazioni per un uso futuro, trascina questo widget a sinistra in basso fino a " Widget inattivi“. Puoi restituirlo in qualsiasi momento.
Segue la scheda "Menu". Aprendolo, arriviamo alla pagina per la creazione del menu del tuo blog con una descrizione dettagliata di come farlo. Nel menu è possibile includere categorie, pagine e collegamenti arbitrari disponendoli nell'ordine richiesto semplicemente trascinandoli. Facendo clic sul pulsante "Salva menu", verrà creato il menu del blog.
Affinché il menu creato appaia nella barra laterale, devi andare alla scheda "Widget" e trascinare il widget " Proprio menu"Nella barra laterale. Di conseguenza, se hai attivato i widget "Categorie" e "Pagine" sul tuo blog, puoi disattivarli. Devo dire che poche persone usano il menu del blog.
L'ultima scheda "Editor" ti consente di modificare i file modello di WordPress. Aprendolo, sulla destra vedrai un elenco di tutti i file modello di WordPress, ovvero la sua struttura. Quando fai clic su uno di questi file, il suo contenuto si aprirà in una finestra per la modifica. Dopo aver apportato le modifiche necessarie, non dimenticare di confermarle facendo clic sul pulsante "Aggiorna file".
Quindi, abbiamo studiato la sezione "Design" nel pannello di amministrazione del nostro blog e scoperto le impostazioni per il tema WordPress (modello).
Vale la pena notare che quasi tutti i temi moderni hanno le proprie opzioni di personalizzazione. Di solito vengono inseriti nel pannello di amministrazione in una sezione separata con il nome dell'argomento.
A volte le impostazioni personalizzate per un modello di tema WordPress si trovano come elementi separati nella sezione "Design".
Come personalizzare un tema particolare dovrebbe essere descritto in dettaglio sul sito Web dello sviluppatore o del localizzatore di modelli da cui è stato scaricato. La personalizzazione del tema WordPress consente di modificare facilmente, senza interferire con il codice sorgente del modello, gli elementi di design del sito (logo, sfondo, caratteri, posizioni della barra laterale, ecc.), inserire banner, pulsanti di social media e RSS, contatori di statistiche, blocchi di annunci e molto altro ancora. ... Ti consiglio di studiare attentamente queste impostazioni, soprattutto se sei nuovo di HTML e CSS.
Attenzione! È importante sapere che se hai apportato modifiche alle singole impostazioni del modello, quando installi un nuovo tema, queste impostazioni devono essere riportate al loro stato originale. Di solito per questi scopi ci sono i pulsanti "Reset" o " Ripristina le impostazioni predefinite“, A seconda del tema WordPress scelto.
Vediamo ora in quali file è composto il template del tema, esaminarne la struttura.
Ciascuno dei file modello di WordPress è responsabile dello stile dei singoli blocchi sulla pagina web del sito web. Quindi, come un costruttore, questi blocchi vengono assemblati in un'unica intera pagina del blog. Poiché i temi (modelli) di WordPress sono creati da sviluppatori diversi, la struttura di questi modelli può essere diversa. È necessario che alcuni file modello di tema siano presenti in ogni pagina Web, altri vengono visualizzati solo in determinati casi.
Nell'immagine qui sotto, puoi vedere la struttura approssimativa di un template WordPress.
Ecco un elenco dei file che si trovano comunemente in tutti i modelli e la loro breve descrizione:
- header.php (header) - presente su tutte le pagine web ed è responsabile della visualizzazione della parte superiore del sito.
- index.php - responsabile della visualizzazione del contenuto della pagina principale.
- single.php - Visualizza ogni articolo specifico.
- page.php - il contenuto della pagina statica del sito.
- category.php - file per l'output di post di una determinata categoria.
- tag.php - visualizza un archivio di post per tag.
- archive.php - archivio temporaneo di articoli (per un mese o un anno). A volte questo file sostituisce category.php e tag.php.
- search.php - Visualizza i record dei risultati di ricerca del sito.
- commenti.php - file modello di commenti.
- sidebar.php - la barra laterale del sito in cui si trovano i widget. Potrebbero essere presenti diverse barre laterali, a seconda della struttura del modello WordPress. Questo file è presente in tutte le pagine del sito.
- 404.php è un file di errore 404 che appare se viene inserito un indirizzo di pagina Web errato o non esiste.
- functions.php - questo file di solito contiene funzioni che vengono chiamate quando il sito viene visualizzato o quando si lavora con il pannello di amministrazione.
- footer.php (footer) - il footer del sito, è presente in tutte le sue pagine. Abbiamo già esaminato questo file modello di WordPress quando abbiamo rimosso quelli indesiderati da esso.
- style.css - un file di foglio di stile responsabile della progettazione esterna del sito.
ora sapendo Struttura del modello di WordPress e di cosa è responsabile ciascuno dei suoi file, è possibile modificare l'aspetto e la funzionalità di una determinata parte del sito.
È importante capire che senza almeno una conoscenza di base di HTML e CSS, è meglio non provare a modificare i file del tema (modello) di WordPress. E nel caso in cui sia ancora necessario modificare qualsiasi file modello, assicurati di crearne prima una copia di backup. Quindi, se qualcosa va storto, puoi sempre ripristinare il file originale.
Da solo noto che modifica il modello WordPressè più conveniente non dall'area di amministrazione del blog, ma aprendo il file in Notepad ++ utilizzando una connessione al server di hosting tramite un client FTP. Puoi leggere come farlo nell'articolo ““.
E per oggi è tutto. Ora il sito che hai creato sembrerà molto più attraente. Ci vediamo sulle pagine del blog.
Lascia i tuoi commenti e non dimenticare di fare clic sui pulsanti dei social media in fondo all'articolo, in questo modo aiuterai lo sviluppo di questo blog. Grazie in anticipo!
Abbiamo pubblicato un nuovo libro, "Content Marketing sui social media: come entrare nella testa degli abbonati e innamorarsi del tuo marchio".
Il funzionamento dei temi bambino ("figlie") si basa sulla loro relazione con i genitori ("genitori"). È importante tenere conto del fatto che i temi gratuiti ea pagamento sono inizialmente i genitori, quindi la figlia copia i loro parametri e proprietà e riceve anche un set standard delle sue funzioni. In futuro, tenendo conto delle esigenze di una specifica risorsa Internet, l'insieme di queste opzioni potrà essere ampliato.
Se tocchiamo la terminologia, allora stiamo parlando di un argomento speciale che assume i significati di un altro, che funge da genitore. Perché vengono creati? Per modificare i temi WordPress esistenti e quindi aumentare il loro numero.
Qual è la differenza tra "figlia"
Il tema figlio di Wordpress apre la possibilità di apportare le modifiche e gli aggiustamenti necessari. Successivamente, vedremo come crearlo, ma prima diamo un'occhiata alle sue differenze chiave:
- Le modifiche apportate alla modifica padre non influiscono sul figlio. Ne consegue che dopo lo sviluppo sono indipendenti l'uno dall'altro.
- Il derivato funziona solo se il genitore è installato e la sua attivazione avviene successivamente.
- Le società controllate sono legate solo alla propria base e non sono interconnesse né con l'una né con l'altra.
È comodo lavorare?
Un tema WordPress per bambini è un'ottima idea con molti vantaggi. Personalmente, lo consigliamo come pacchetto standard con prodotti premium. Ecco solo alcuni dei vantaggi:
- Salvano automaticamente le tue regolazioni. Grazie a questo, puoi apportare modifiche direttamente al codice, senza il rischio che le impostazioni vengano perse o perse durante l'aggiornamento.
- Lavorare con loro è un'ottima preparazione per il passaggio alla scrittura del codice principale per le varianti padre.
- Il flusso di lavoro è migliorato. Con un solo framework tematico a tua disposizione, puoi creare siti di varia complessità e funzionalità.
Poiché questa è una continuazione del genitore, l'insieme di caratteristiche e funzioni è identico qui. Componenti principali:
- Directory (cartella/posizione dei componenti del file).
- "Style.css", dove vengono specificate le proprietà di base e aggiuntive.
- "Functions.php", dove è scritta la definizione delle funzioni.
Non ci sono restrizioni sull'aggiunta di modelli, ma i componenti elencati sono obbligatori in qualsiasi.
Funzionamento
Le figlie sono localizzate in una cartella separata e vantano functions.php e style.css separati. È sempre possibile scrivere file ausiliari, ma questa coppia è responsabile del corretto funzionamento, senza intoppi e problemi.
Con l'uso corretto di questi formati, è possibile modificare quasi tutti i parametri iniziali, inclusi lo stile, i singoli elementi dei formati, gli script e così via.
Il dispositivo del tema è simile ai livelli dell'editor degli editor di foto. Se un utente visita la tua risorsa Internet, una "figlia" si apre di fronte a lui, quindi le opzioni e gli stili già mancanti vengono caricati dal genitore. In definitiva, la maggior parte del codice viene trasmessa dal genitore, ma deve essere modificata per riflettere le impostazioni del bambino prima di essere utilizzata.
Come creare
Innanzitutto, controlla se hai tutto ciò di cui hai bisogno. Vale a dire, accesso a FTP o file manager, accesso aperto al pannello di controllo di WordPress stesso. Quindi iniziamo.
Passo 1. Creazione di un tema figlio di WordPress
Questo è un processo abbastanza semplice. Se segui le istruzioni in dettaglio, qualsiasi utente lo padroneggerà.
Prima di tutto, creiamo una cartella per nostra figlia nella directory standard. Per mantenere in ordine la directory e organizzare i contenuti, è meglio nominare la cartella come "Nome padre + desinenza figlio". Per comodità, puoi aggiungere il nome di un progetto per il quale stiamo creando un tema. La cosa principale è che il nome della directory non ha spazi, altrimenti potrebbe causare errori. Un file manager o un client FTP ti aiuterà a creare una nuova cartella. Oggi, un client FTP come FileZilla si è dimostrato efficace.
Ad esempio, prendiamo come base "Twenty Seventeen", che è familiare a molti. Preferisco lavorare con il File Manager, quindi il mio percorso alla cartella creata è simile a questo:
Facciamo quanto segue:
Sicuramente sei convinto che la creazione sia un processo facile. È solo necessario seguire rigorosamente le istruzioni e lavorare con l'approccio corretto.
Passo 2. personalizzazione
Per iniziare, modificare, integrare, adattare alle richieste e ai requisiti del tuo sito "figlia", devi configurare correttamente le impostazioni. Lo sistemeremo in ordine.
- Per prima cosa devi personalizzare l'aspetto.
Per fare ciò, apporteremo le modifiche a "custom.css", che si trova nella directory. Questo può essere fatto tramite un client FTP, un normale editor di testo, un file manager o un editor speciale Wordpress (puoi trovarlo aprendo "Aspetto", quindi "Editor"). Qui avrai bisogno almeno di una conoscenza minima delle regole per l'uso dei CSS, così come l'abilità di controllare gli elementi del sito attraverso il browser. Ad esempio, per cambiare il colore di sfondo in "style.css", scriviamo la seguente regola CSS:
L'immagine successiva mostra come cambierà il design del sito dopo le modifiche apportate. Lo sfondo è diventato verde chiaro:
Pertanto, puoi modificare qualsiasi elemento esistente sul sito.
2. Lavorare con le funzioni.
Usare e lavorare con "figlie" offre anche un vantaggio come la capacità di mantenere due "funzioni.php" indipendenti. Ricordiamo che questi file vengono utilizzati per rimuovere vecchie e aggiungere nuove funzioni. Se sono lì, non devi preoccuparti della sicurezza o dei problemi nel lavoro del documento. Anche se la base viene rinnovata, rimarrà invariata.
Per aggiungere una nuova opzione, al file viene aggiunto un nuovo codice PHP. Ad esempio, il codice seguente rimuoverà l'opzione di ricerca di WordPress.
Servizi speciali per facilitare il lavoro dello sviluppatore
Per facilitare il processo di creazione, puoi utilizzare una serie di plugin speciali. La libreria di WordPress offre un'ampia varietà di plugin, molti dei quali sono gratuiti. L'utilizzo dei plugin semplifica notevolmente il processo di sviluppo. Diamo un'occhiata ai plugin più popolari.
- Themify bambino.
È il plugin più semplice e facile da usare con un'interfaccia intuitiva. Molte impostazioni qui possono essere eseguite con il clic di un pulsante.
2. Tema figlio configurato.
Qui puoi anche creare una "figlia", e bastano solo un paio di clic. L'editor CSS è abbastanza potente da consentire la personalizzazione avanzata. Il plugin identifica automaticamente le regole CSS chiave e non le influenza durante la modifica.
3._caldaia tema bambino.
Ecco i modelli già pronti per la formazione di "figlie". Il modello si chiama semplicemente "_child" ed è progettato specificamente per semplificare le cose. Il modello offre un tema intuitivo, tutto ciò che devi fare è fornire un collegamento al "genitore". Questo tipo di modello ti consente di creare opzioni professionali: qui sono già stati creati 2 file già pronti, lo standard "functions.php" e "style.css".
Il primo ha una funzione speciale chiamata "aa_enqueue_styles ()". Questa opzione ti consente di creare una coda di fogli di stile, con prima i genitori e poi i figli. Di conseguenza, lo stile di quest'ultimo è sempre determinato per primo.
La maggior parte degli sviluppatori raggruppa queste tabelle in CSS, ma questo fa più male che bene. Il browser inizia a caricare il sito per molto tempo, perché è necessario caricare gli stili prima dal "genitore" e poi dal derivato. Separare i fogli di stile renderà il compito del browser più semplice e la velocità di caricamento più veloce.
Ecco il codice per aggiungere questa opzione:
Il secondo file ha un'intestazione di base contenente informazioni specifiche. Queste informazioni consentono a WordPress di riconoscerlo come un foglio di stile "figlia". Pertanto, è particolarmente importante scrivere il codice per "style.css":
Riassumiamo
Non importa il livello di abilità di programmazione, così come l'esperienza con Wordpress. È facile creare un tema figlio di WordPress e non c'è rischio che le impostazioni vengano eliminate all'uscita. Scrivendo un piccolo codice o apportando modifiche al già scritto ed eseguendo semplici azioni con la directory, puoi cambiare il tuo sito. La cosa principale è seguire le istruzioni, passando gradualmente da un punto all'altro. Non dimenticare quanto segue: se ci sono aggiornamenti per il "genitore", "figlia" non cambia, questa regola si applica alle modifiche al contenuto, alle impostazioni e così via.
Sperimenta, prova diverse opzioni e cerca la migliore per te.
Se utilizzi temi scaricati, probabilmente hai incontrato una pagina del genere che è disponibile nel pannello di amministrazione e con il suo aiuto puoi personalizzare il tema senza modificare il codice del tema stesso.
Tali pagine vengono spesso create per semplificare la vita agli utenti di un determinato argomento. Grazie alla pagina delle impostazioni del tema, l'utente può mostrare e nascondere determinati blocchi, modificare la posizione della barra laterale, combinazioni di colori, aggiungere i propri stili, indicare il percorso di nuove immagini, ecc. Tutto è limitato solo dall'immaginazione di colui che ha creato una tale pagina per il tema.
Se stai creando un argomento per la vendita o vuoi semplicemente semplificarti la vita, questo metodo potrebbe esserti utile. In una delle lezioni ho scritto che è possibile visualizzare metriche (contatori visitatori), pubblicità, ecc., tramite widget, creando luoghi speciali per loro. Utilizzando la pagina delle impostazioni del tema, puoi creare gli stessi campi in cui puoi inserire qualsiasi testo, codice o link.
In generale, avrai opzioni di temi aggiuntive che puoi fare da solo senza un plug-in. Sembra qualcosa del genere:
Scriverò su diversi elementi di tale pagina e spiegherò come usarli. Ho creato una pagina da un mucchio di altri. Ne ho trovati molti diversi, ma in ognuno c'era qualcosa che non mi andava bene o che non funzionava. In uno non c'erano caselle di controllo, caselle di controllo, nel secondo non c'era alcun messaggio che le impostazioni fossero state salvate, un mucchio di testo extra, ecc. Dopo essermi seduto per un po' e aver capito cosa stava succedendo, ho ottenuto la mia pagina su cui puoi aggiungere e rimuovere elementi senza problemi.
Passiamo alla creazione della nostra pagina delle impostazioni.
Per cominciare, devi decidere esattamente come collegare il codice della pagina. Ci sono due opzioni.
Il primo è semplice, aggiungiamo tutto alla fine del tuo functions.php dopo ?> È tutto.
Il secondo modo: devi creare un file settings.php e aggiungi tutto il codice ad esso, dopo averlo collegato a functions.php nel seguente modo.
Includi ("/ settings.php");
Quando creerai? settings.php, prima di aggiungere il codice, assicurati che sia salvato nella codifica corretta - UTF-8 senza BOM... La modifica dei file viene eseguita al meglio con Notepadd ++.
Ora iniziamo ad aggiungere il codice stesso. Per prima cosa, registriamo la nostra funzione.
Ora aggiungiamo la nostra pagina al pannello di amministrazione nel menu a sinistra.
// Aggiungi la pagina delle impostazioni alla funzione di menu add_settings_page () (add_menu_page (__ ("Opzioni del tema"), __ ("Opzioni del tema"), "manage_options", "settings", "theme_settings_page");) // Aggiungi azioni add_action ("admin_init", "theme_settings_init"); add_action ("admin_menu", "add_settings_page");
Ora, quando entri nella parte di amministrazione, vedrai tale elemento nel menu di amministrazione. Questa sarà la nostra pagina delle impostazioni.
Aggiungiamo le azioni e la funzione di salvataggio delle opzioni della nostra pagina
// Save settings function theme_settings_page () (global $ select_options; if (! Isset ($ _ REQUEST ["settings-updated"])) $ _REQUEST ["settings-updated"] = false;?>
Iniziamo ora ad aggiungere il codice che visualizzerà gli elementi della nostra pagina. Crea un div e aggiungi blocchi al suo interno.
Il primo elemento sarà il nome della pagina, che verrà visualizzato all'inizio, quindi un blocco, all'interno del quale apparirà un messaggio che informa che le impostazioni sono state salvate.
Personalizzazione del tema
le impostazioni sono state salvate
Ora l'intero codice è
Personalizzazione del tema
le impostazioni sono state salvate
La pagina delle impostazioni è pronta. Puoi guardare il risultato finale. Successivamente, dobbiamo visualizzare i risultati nei posti giusti nell'argomento, quindi cosa selezioneremo o inseriremo nelle opzioni.
Per fare ciò, devi prima abilitare la nostra funzione
Questa riga deve essere scritta ogni volta prima di visualizzare l'opzione.
Immediatamente dopo l'avvio, aggiungi l'output dell'opzione stessa. Sembra quasi lo stesso per i campi di testo e i campi di input, l'importante è specificare i nomi corretti, di cui ho già scritto molto sopra.
Per un logo come questo:
Il risultato finale sarà così
Penso che questo sia chiaro. Se vogliamo emettere il valore dalla pagina delle impostazioni, inserire il codice sopra nel posto giusto, specificando solo i nomi correttamente. Quindi mostriamo per la metrica e il banner, cambiando solo i nomi in monitoraggio e banner, beh, o quelli che ti vengono in mente, l'importante è che coincidano con quelli nella pagina delle impostazioni.
Puoi ancora fare un altro trucco. Utilizzando l'opzione - Testo nel piè di pagina come esempio, suggerisco di aggiungere una condizione - Se... La linea di fondo è questa: inizialmente il testo nel piè di pagina è registrato per impostazione predefinita, ma se l'utente inserisce qualcosa nella pagina delle impostazioni, al posto del testo predefinito verrà visualizzato ciò che l'utente ha specificato.
Per fare ciò, dobbiamo scrivere il seguente codice:
/ "titolo =" (! LINGUA:"rel =" homepage ">... Tutti i diritti riservati. Qualsiasi utilizzo dei materiali è consentito solo con un collegamento attivo alla fonte
Per visualizzare il contenuto se la casella è selezionata, è necessario scrivere il seguente codice. Simile al testo nel piè di pagina, ma solo nella prima metà del codice
Contenuto se la casella è selezionata.
Puoi aggiungere qualsiasi contenuto. Nascondi il pavimento del sito, se necessario.
Ora resta da visualizzare solo il contenuto di ciò che l'utente seleziona dall'elenco. L'abbiamo fatto posizionare il blocco a sinistra o a destra
Qui, come con il testo nel piè di pagina, useremo la condizione - Se... Ci sono solo due elementi nella mia lista, quindi la condizione è la seguente: se l'elemento numero uno (a sinistra) è selezionato, mostriamo un blocco con una proprietà negli stili - galleggiante: sinistro;, altrimenti mostriamo un blocco la cui proprietà è - galleggiante: a destra;.
Blocco sinistro
Blocco a destra
In linea di principio, tutto, ho mostrato le basi. Puoi aggiungere e rimuovere elementi, cambiare tutto per te stesso e creare qualcosa. La lezione non è facile e la cosa principale qui è non confondersi, ma dopo aver capito e studiato bene, puoi facilmente creare tali pagine per tutti gli argomenti.
Questo è tutto, grazie per l'attenzione. ?
