# 108: Creazione di singoli frammenti Pagina - Trucchi CSS

Anonim

Iniziamo osservando alcuni dei lavori più pesanti che ho fatto dietro le quinte, mettendo a punto alcune cose che dovevano essere fatte. Come l'aggiunta del resto delle chiamate wp_list_pages () per visualizzare il resto dell'elenco di frammenti per ogni categoria. E anche aggiungendo nel CSS per cambiare il colore della barra che separa le categorie e gli elenchi di frammenti. Abbiamo anche cambiato i passaggi delle categorie per schiarire i colori invece del bordo bianco stupido che avevamo temporaneamente lì dentro. Letteralmente, abbiamo usato la lighten()funzione in Sass per fare il lavoro per noi.

L'obiettivo in questo screencast è però quello di dare uno stile alla visualizzazione per un singolo frammento. Se avessi creato quest'area del sito più di recente, gli snippet potrebbero essere un tipo di post personalizzato (come gli screenshot di una singola galleria), ma quelli non esistevano quando ho iniziato a farlo. In quanto tali, sono solo "Pagine" e utilizzano tutti un modello di pagina personalizzato. Non è un grosso problema, davvero, soprattutto ora che avere molte pagine non è un problema di prestazioni.

Le singole pagine di frammenti saranno molto simili ai post del blog. La struttura a griglia standard 2/3 1/3 e una normale barra laterale. Tuttavia ci sono alcune differenze. Esiste una chiara gerarchia per gli snippet, ad es

Home »Frammenti di codice» Categoria snippet »Nome snippet

Questo è perfetto per la navigazione secondaria "barra nera" che si sta evolvendo su questo sito. Il nostro plug-in Yoast SEO fornisce funzionalità breadcrumb, quindi è facile: basta chiamare una funzione.

Un'altra differenza è che restituiamo the_modified_time()invece la data di pubblicazione. In questo modo le persone conoscono l'ultima data in cui uno snippet è stato aggiornato, che è più rilevante di quando è stato pubblicato. Mi fornisce anche qualche motivazione per rivedere regolarmente gli snippet.

Andiamo un po 'a parte aggiornando un vecchio snippet solo per divertimento.

Finiamo scrivendo un po 'di JavaScript che farà funzionare le nostre visualizzazioni di sottocategoria. Queste visualizzazioni essenzialmente assomigliano alla nostra home page degli snippet, solo se ti trovi in ​​/ snippets / javascript /, gli snippet JavaScript saranno visualizzati per impostazione predefinita e la categoria JavaScript evidenziata. Che tu ci creda o no, solo poche righe di codice JavaScript con picchi di URL subdolo che dovrebbe probabilmente essere uno snippet su se stesso.