Share
Finora in questa serie abbiamo trattato gli elementi costitutivi di Thesis e come gestire le impostazioni del tuo sito, ma ora vogliamo passare alla costruzione della struttura e dell'aspetto generale del tuo sito web, o "Skin" come indicato nel Thesis Framework. Per fare questo, passeremo la maggior parte del nostro tempo all'interno di Thesis Skin Editor.
Per iniziare, avrai bisogno di:
Thesis 2.0 è disponibile in magazzino con due skin pre-costruiti, Thesis Classic e Thesis Blank. Alcune persone preferiscono partire da Thesis Classic perché già disponibile in stock con diverse combinazioni di layout, ma per chi desidera un look più "personalizzato" potrebbe optare per Thesis Blank, che è essenzialmente una skin completamente vuota, priva di funzioni personalizzate, stili, ganci, ecc.
Ai fini di questo tutorial, costruiremo dalla skin Thesis Blank inclusa in Thesis Framework e creeremo una home page a 2 colonne molto semplice che include una query per i post recenti e una barra laterale. Una volta che hai appreso i modelli di costruzione e hai lavorato con Thesis Query Box, vedrai come sarà facile creare più modelli per supportare altre pagine di cui potresti aver bisogno in futuro.
Per costruire con la skin vuota, dobbiamo prima selezionarlo. Per selezionare la pelle vuota,
Una volta selezionato, vai su Skin Editor per iniziare lo sviluppo. Puoi arrivarci andando in Tesi> Skin> Skin Editor. Quando fai clic per la prima volta su Skin Editor, noterai che viene visualizzata una finestra a comparsa contenente il tuo sito Web, insieme al dashboard di Skin Editor. Questa finestra è una schermata di "anteprima" del tuo sito web. Puoi aggiornare questo schermo durante lo sviluppo per vedere come stanno prendendo forma le cose.
Ora che siamo nell'Editor della pelle, dobbiamo fare clic su HTML dall'alto (dovrebbe essere predefinito nella sezione HTML, ma nel caso, assicurati di essere nel posto giusto).
Nella casella vuota la scatola del corpo dovrebbe essere completamente vuota. Questa posizione è dove stiamo andando a costruire la nostra struttura HTML. Iniziamo costruendo la struttura della nostra home page.
Per costruire ogni "contenitore" o "elemento" sulla nostra pagina useremo le scatole. Nell'Editor della pelle vedrai alcune caselle predefinite, oltre a una sezione di "Aggiungi caselle" appena sotto di essa, sulla destra dello schermo. Aggiungeremo scatole per costruire la nostra struttura.
Thesis viene fornito con nove opzioni pre-costruite tra cui scegliere.
Loro sono:
Per la struttura del nostro sito web, ci concentreremo principalmente sulla creazione di scatole "Container". La nostra struttura andrà in questo modo:
Per creare ciascuna casella, attenersi alla seguente procedura:
Una volta strutturata la struttura, dobbiamo assegnare una classe o un ID a ciascun elemento della nostra struttura.
L'assegnazione di una classe o di un ID a un elemento casella viene eseguita semplicemente passando con il mouse sopra la casella e facendo clic sull'icona a forma di ingranaggio visualizzata (molto simile all'aggiornamento delle impostazioni del sito). Quando si fa clic sull'icona dell'ingranaggio, viene richiesto di compilare alcune opzioni:
È importante ricordare quali classi hai nominato ogni elemento, perché avrai bisogno di queste informazioni quando saremo pronti a modellare ogni scatola.
Di seguito sono riportati i seguenti selettori CSS strutturali utilizzati per la home page di questa particolare pelle:
Accentsconagua
#wrapper #contenitore #intestazione #site_title (Tesi generata id)#site_tagline (Tesi generata id)# Menu principale .contenuto principale .column_1 .COLUMN_2 .sidebar .widget di #footer Successivamente abbiamo bisogno di aggiungere alcuni "modelli" per far funzionare tutto correttamente sulla nostra pelle. Dobbiamo ancora creare un modello di pagina e un singolo modello di post. Poiché vogliamo mantenere lo stesso layout generale per ogni pagina, possiamo utilizzare la funzione build in template di copia di Thesis per copiare gli elementi della home page e applicarli agli altri modelli.
Per creare un altro modello per le singole pagine del post, procedi nel seguente modo:
Questo processo copierà le informazioni del tuo modello su un nuovo modello. Successivamente, dobbiamo scambiare i nostri post recenti per le singole informazioni di post / pagina. Per effettuare questa operazione, attenersi alla seguente procedura:
Ripeteremo la stessa procedura per creare il nostro modello di pagina interno, ma invece di copiare il modello Home, copieremo il modello singolo considerando che abbiamo solo bisogno di recuperare lo stesso tipo di contenuto (ad esempio titolo, contenuto, ecc.).
Per le pagine di archivio, assicurati di inserire il tuo contenuto "post" all'interno di una casella WP_Loop (che può essere creata nello stesso modo in cui tutte le altre caselle possono essere create.Questa casella WP_Loop funziona allo stesso modo del loop nelle pagine di archivio o di tassonomia.)
Finora abbiamo creato tutti i nostri elementi strutturali contenuti nella nostra pelle di Thesis. Ora dobbiamo applicare un certo stile a loro. Nel prossimo articolo, vedremo come modellare la tua pelle usando la sezione CSS per Skin Editor per creare "Pacchetti" per ciascuno dei selettori CSS che abbiamo assegnato in precedenza.
