Share
I piè di pagina sono spesso un aspetto trascurato della progettazione di un sito - quando possono effettivamente essere un po 'pratico e informativo. In questo tutorial vedremo alcune opzioni che puoi avere per il tuo sito WordPress.
Come al solito, con questi tutorial, avrai bisogno di una directory WordPress. Ormai, se li hai già fatti, dovresti già avere una configurazione! In caso contrario, ci sono tutorial sull'esecuzione locale di Wordpress qui per Windows, e qui per OS X.
Vedremo come creare un footer statico con tutte le informazioni necessarie, quindi lo renderemo dinamico in modo da poterlo modificare tutto tramite il backend di WordPress!
Scaricare queste immagini e metterle in una nuova cartella in wp-content / themes. Assegna un nome alla cartella "WPFooter".
Inserisci rapidamente questo codice in un nuovo file 'style.css' nella nuova cartella WPFooter:
/ * Nome tema: URI tema WPFooter: http://net.tutsplus.com/ Descrizione: un pratico piè di pagina per WordPress. Versione: 1.0 Autore: Harley Alexander Autore URI: http://www.baffleinc.com/ * /
Se apri la tua directory WordPress in un browser, vai su wp-admin / themes.php e seleziona il nuovo tema!
"
Mostreremo solo una breve intestazione e un semplice loop per questo. Più avanti nel tutorial, vedremo più Sidebar (uno per la barra laterale, uno per il piè di pagina). Inizieremo con una base facile:
<?php bloginfo('name'); ?><?php wp_title(); ?> ">
So che è molto, ma è tutto molto di base, e in realtà oltre al punto di cui tratta il tutorial, quindi non è un grosso problema. Fondamentalmente alcune informazioni di intestazione per un blog WordPress, una breve intestazione (che diventerà una bella immagine di intestazione) e un breve loop per visualizzare il contenuto.
Successivamente, inseriremo una barra laterale statica. Sostituisci il commento "sidebar here" con:
Questo è solo, ancora una volta, la tua barra laterale normale. Le pubblicità che faremo più avanti nel codice CSS ... Ora abbiamo bisogno della parte interessante: il piè di pagina.
Come ho detto sopra, sta diventando sempre più importante per i siti Web avere più footer informativi e utili, piuttosto che una semplice barra del nome di Copyright. Quindi, invece, lo riempiremo di contenuti per indirizzare i lettori ad altre pagine. Dopotutto, il contenuto è re, giusto? Questo è il piè di pagina:
archivio
messaggi recenti
Di
Ciao, questo blog parla di un sacco di spazzatura. In effetti, la descrizione è piuttosto auto-esplicativa: . Goditi il tuo soggiorno e speriamo di rivederti!
link
Finalmente qualcosa di interessante!
Abbiamo già un footer interessante. Al momento non sembra un footer, quindi passiamo al CSS!
Facciamo andare un po 'di grazia. Apri style.css e prendi il codice!
* margine: 0; padding: 0; contorni: 0; body background-color: # e3e3e3; imbottitura: 30px 0; carattere: 12px "Lucida Grande", Lucida, Verdana, sans-serif; .clearfix display: block; chiaro: entrambi; larghezza: 1px; #wrapper width: 960px; margine: 0 auto; sfondo: #fff; imbottitura: 30px 0;
Iniziamo con alcune informazioni di base 'reset', che allinea tutto, rende il testo normale e definisce una classe che è il nostro 'clearfix'.
Ora sistemeremo l'intestazione. Ricorda la cartella delle immagini che hai decompresso all'inizio? C'è un'immagine lì chiamata "mywebsite.png". Ero pigro e ho creato un'immagine con alcuni effetti per questa parte.
Non mostrerà il nome del tuo blog, ma mostrerà "Il mio sito web". Questa tecnica mostra in che modo la sostituzione dell'immagine viene effettuata tramite CSS in modo sicuro ...
h1 margin: 40px auto 0; larghezza: 930 px; posizione: relativa; inizio: -30px; h1 a color: # b3b7ba; decorazione del testo: nessuna; blocco di visualizzazione; larghezza: 203 px; altezza: 38 px; text-indent: -999em; background: url (images / mywebsite.png) no-repeat in alto a destra; float: giusto;
Come puoi vedere, la 'a' è stata espansa e bloccata per adattarsi all'immagine di sfondo dell'immagine 'Il mio sito web'. Questo è un modo veloce e sporco per farlo - anche io credo nel cross browser!
Andando avanti, modifichiamo la sezione del contenuto:
#content padding: 30px; fluttuare: a sinistra; larghezza: 650 px; h2 letter-spacing: -2px; text-transform: maiuscolo; font-size: 16px; margin-bottom: 10px; .entry margin-bottom: 20px; .entry a color: # 164774; decorazione del testo: nessuna;
Il layout inizia già a formarsi, ma Sidebar e Piè di pagina richiedono ancora un po 'di lavoro e de-squash!
Possiamo fare un po 'di stile sulla sidebar, ma non su tutto. Visto che miriamo a widget universali, la maggior parte dello stile per i widget della sidebar può essere eseguita insieme al piè di pagina.
#sidebar float: left; larghezza: 220 px; margine: 0 10px; padding-top: 30px; #sidebar> ul> li margin-bottom: 10px! IMPORTANTE; #ads li display: inline-block; larghezza: 100%; sfondo: # f7f7f7; altezza: 50 px; allineamento del testo: centro; margin-bottom: 10px; colore: grigio; altezza della linea: 50px; bordo: 1px solido;
Se aggiorni, noterai che è ancora un po 'schifoso. Risolviamolo con un po 'di stile per il piè di pagina e la sidebar
#footer clear: both; #footer div, #sidebar> ul> li float: left; larghezza: 220 px; margine: 0 10px; background: url (images / modalBox.png) repeat-y center top; colore: #fff; #footer p padding: 10px; #footer a, #sidebar a color: #fff; decorazione del testo: nessuna; #footer h3, #sidebar h3 margin-bottom: 10px; background: url (images / modalBoxHeader.png) top senza ripetizione; altezza: 14px; font-size: 12px; allineamento del testo: centro; colore: #fff; font-weight: normal; text-shadow: # 000 1px 1px 3px; #footer ul, #sidebar ul> li> ul list-style: none; imbottitura: 10px; background: url (images / modalBoxFooter.png) no-repeat center bottom; #footer ul li padding-bottom: 5px;
Questo è un diavolo di un blocco! Ma ora il tuo blog WordPress dovrebbe sembrare molto più interessante! Questo divide anche le sezioni di 4 piedi in 4 colonne - per un'interfaccia utente bella e ordinata!
Tutto fatto! Questa è la parte manuale del sito fatta. Ora che ciò è stato fatto, faremo un ulteriore passo avanti e renderlo gestibile al 100% tramite WordPress Admin.
Le barre laterali dinamiche sono una fantastica funzione integrata di WordPress. Sono facili da usare e offrono fondamentalmente un modo per gestire più contenuti tramite un'interfaccia Web. Facciamo il nostro index.php sidebar-compatibile.
In primo luogo, sostituiremo gli enormi blocchi di codice che componevano la nostra sidebar e il piè di pagina con codice dinamico. Sostituisci tutto all'interno del #sidebar div> ul con:
E sostituisci tutto tra il #footer div con:
Se aggiorni la tua pagina, tutto sparirà. Crea un nuovo file nella directory chiamata functions.php, e prendi il codice!
Dobbiamo creare due funzioni: "register_sidebar ()". Registra uno per la barra laterale effettiva e una per il piè di pagina.
"Barra laterale", "before_widget" => "
Quegli array sono la serie di informazioni da allegare a ciascuna barra laterale. Il nome (in modo che possiamo selezionare i diversi in WordPress Admin), e le informazioni da mettere prima / dopo (contenitore) ogni widget, e prima / dopo ogni intestazione. Poiché il nostro codice è specifico per h3s, dobbiamo dirlo per avvolgere in h3s. Le nostre sezioni footer sono div, quindi è necessario raggrupparle in div anziché in lis predefiniti. Semplice! Se aggiorni, potresti trovare o meno dei contenuti che ti aspettano. In caso contrario, lo risolveremo nel passaggio successivo.
Come ho già detto, potrebbe esserci o non essere contenuto in attesa. Questo è il modo in cui lo modifichi. Vai alla WP Dashboard e visita la pagina dei widget tramite il design (per WP 2.3+) (Dashboard> Design> Widget). Nella colonna di destra, dovrebbe esserci la tua barra laterale!
Ora puoi saltare da una parte all'altra, salvare le modifiche, rivisitare la tua pagina e fare in modo che il contenuto venga modificato facilmente tramite un'interfaccia Web invece di navigare attraverso il codice! Assicurati solo che la sidebar 'Footer' abbia solo 4 widget max, altrimenti inizierà a sanguinare sulla riga successiva.
Quindi qui prende la tua ultima scusa per non avere un footer interessante - ora sai come farlo facilmente. È essenzialmente una barra laterale in più. Questo salva anche un sacco di spazio prezioso nella barra laterale che puoi riempire con cose molto più importanti come feed, avvisi, ecc. Se hai un interessante footer, faccelo sapere!
Accentsconagua