Abbiamo anche aperto i relativi div e wrapper per la sezione successiva.
Disegnare l'intestazione
Se goto la tua installazione di WordPress ora, sarà simile a questa:
Ricorda che includeremo tutti gli stili di colore all'interno deepblue.css in modo che possiamo facilmente creare diversi schemi di colore in seguito. Tutto il resto andrà a style.css.
Stili generali
La prima cosa che includo sempre nel mio foglio di stile è la reimpostazione del browser, seguita da alcuni stili di base per paragrafi, elenchi, intestazioni e collegamenti.
* padding: 0; margin: 0; body font-family: Arial, Helvetica, sans-serif; p font-size: 0.9em; line-height: 1.5em; margin-bottom: 10px; ul, ol margin: 0 0 10px 10px; li dimensione carattere: 0.9em; line-height: 1.5em; list-style-position: inside; margin-bottom: 3px; img border: none; h1, h2, h3, h4, h5, h6 carattere-peso: normale; h3, h4 margine: 15px 0 2px 0; h4, h5, h6 font-weight: bold; a: link, a: visited text-decoration: none; a: hover, a: active, a: focus text-decoration: underline; contorni: nessuno;
Questo dovrebbe apparire molto semplice per chiunque abbia una conoscenza di base di HTML e CSS. Abbiamo impostato i margini e il riempimento per tutti gli elementi (*) su 0 per superare gli stili predefiniti che ciascun browser applica a una pagina. Includiamo quindi nuovi margini, dimensioni dei caratteri e altezza delle righe per gli elementi principali per aumentare la leggibilità tra di essi.
Intestazione
Successivamente, creiamo un po 'di layout:
#wrap margin: 0 auto; larghezza: 980 px; #head margin: 25px 0; overflow: nascosto; #head h1 float: left; margin-left: 20px; #head h3 font-family: Georgia, "Times New Roman", Times, serif; font-size: 0.8em; stile di carattere: corsivo; float: giusto; line-height: 1.7em; allineamento del testo: giusto; margine: 0 20px 0 0; larghezza: 500 px;
Il #wrap l'elemento è il contenitore che contiene tutto. Stiamo usando una larghezza di 980px (questo è all'incirca il più alto possibile, pur rimanendo accomodante per risoluzioni 1024x768). E noi abbiamo usato margine: 0 auto; per centrarlo nel browser.
Il titolo e gli slogan (h1 e h3 rispettivamente) vengono fatti galleggiare su entrambi i lati del contenitore.
#capo ha una proprietà di overflow: nascosto; in modo che trattiene correttamente gli elementi flottanti. In genere, un div non si avvolge attorno ai bambini fluttuanti (come abbiamo qui). Vedere l'immagine sotto come un esempio (il giallo rappresenta il margine assegnato a #capo):
Stile di navigazione
#nav border-top-left-radius: 15px; border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; border-bottom: nessuno; chiaro: entrambi; imbottitura: 0 20px; larghezza: 939 px;
Dai un'occhiata alle immagini di anteprima nella parte superiore del tutorial e noterai che utilizziamo gli angoli arrotondati nella parte superiore della sezione di navigazione. Invece di ottenere questo effetto attraverso un mucchio di immagini e tag HTML extra, useremo il nuovo CSS3 border-radius proprietà per dare un raggio di 15px ad entrambi gli angoli superiori.
Tuttavia, i browser correnti non supportano ancora questa proprietà, ma i browser basati su Mozilla e Webkit ne hanno uno proprio -moz-border-radius e -webkit-border-radius proprietà che possiamo anche usare per ottenere gli angoli arrotondati per lavorare in Firefox 3, Safari e Chrome. Internet Explorer e Opera useranno semplicemente un bordo quadrato finché non supportano border-radius.
Nota: l'utilizzo di queste proprietà specifiche del fornitore nel CSS non consente la convalida del foglio di stile. Ma dal momento che saranno solo questi che fermeranno la validazione - a chi importa?
Continuando, modifichiamo gli elementi della lista nella navigazione per visualizzare inline (orizzontalmente):
#nav ul margin: 0; #nav ul li display: inline; dimensione carattere: 1em; line-height: 1.3em; margin-right: 25px; #nav ul li a: link, #nav ul li a: visited display: -moz-inline-stack; display: blocco in linea; font-weight: bold; decorazione del testo: nessuna; imbottitura: 20px 10px; #nav ul li a: hover, #nav ul li a: active, #nav ul li a: focus outline: none;
Nota che stiamo usando display: -moz-inline-stack; sui collegamenti. Questo è puramente per Firefox 2 e seguenti, che (per qualche motivo) non supportano display: blocco in linea; - anche IE6 lo supporta!
Stiamo dando un sacco di padding ai link per aumentare l'area cliccabile (al contrario di riempire il Li anziché).
Ora dai un'occhiata alla pagina nel tuo browser e dovrebbe apparire così. Meglio, ma ora ha bisogno di un po 'di colore!
Un po 'di colore
Innanzitutto, salva la seguente immagine nel / Stili / deepblue / cartella come bg.jpg.
E questa immagine nella stessa cartella di trans.png (in realtà è un'immagine semitrasparente 1px scura).
Ora aperto /styles/deepblue.css, e scrivi:
/ * Stile di default dell'innovazione - deepblue.css * / body background: url ("deepblue / bg.jpg") no-repeat n. 101010 top center fixed; colore: # 333; a: link, a: visited color: # 5c6e80; #head h1 color: #eee; #head h3 color: #ddd; ripetizione #nav background: url ("deepblue / trans.png"); border: 1px solid # 111; #nav ul li a: link, #nav ul li a: visited color: #ddd; #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: visited background: url ("deepblue / trans.png") ripetizione; color: #eee; #nav ul li a: hover, #nav ul li a: attivo, #nav ul li a: focus color: #eee; Abbiamo impostato la grande immagine di sfondo sul corpo (e l'abbiamo aggiustata in modo che non si muova quando scorri), l'immagine trasparente viene usata come sfondo per la navigazione e abbiamo anche impostato alcuni colori dei caratteri.
Visualizzalo in anteprima e ora avrai qualcosa di simile a:
Portfolio Post
Prima di creare la parte superiore della nostra home page in cui sono presenti i nostri ultimi due elementi del portfolio, avremo bisogno di alcuni post da testare. Il tema utilizzerà alcuni "campi personalizzati" per visualizzare informazioni aggiuntive per gli elementi del portfolio:
-
Data (la data in cui il lavoro è stato completato) -
cliente (per chi era il lavoro) -
collegamento (a una versione live del tuo lavoro) -
anteprima (URL di un'immagine di larghezza 930px del tuo lavoro) -
Anteprima-pieno (versione più grande del lavoro, verrà visualizzata in una lightbox)
Crea un nuovo post sul blog, con il titolo come nome del progetto (come nell'immagine sopra) e inserisci del contenuto sul lavoro. Inserisci il post nella categoria 'Portfolio'.
Prima di salvare il post, scorri verso il basso fino alla sezione "Campi personalizzati":
Qui, inserisci ciascuno dei campi personalizzati forniti sopra. Solo il anteprima il campo è obbligatiorio. Puoi usare le seguenti immagini per il tuo anteprima campo se non ne hai ancora uno (fai clic destro e salva):
Una volta compilati i campi, è possibile pubblicare il post. Ripeti questo processo finché non hai almeno due post (preferibilmente di più).
L'homepage
Ora abbiamo tutti i prerequisiti fatti, possiamo finalmente codificare la parte principale della homepage. Nel Pagina-home.php, digitare quanto segue:
Ultimi progetti
query_posts (); è una funzione di WordPress per ottenere messaggi specifici dal database. Come puoi vedere nelle discussioni per la funzione (le parti tra parentesi), stiamo dicendo a WordPress di ottenere solo 2 messaggi dalla categoria Portfolio ($ ts_portfolio_cat sta ottenendo le informazioni dalla pagina delle opzioni che abbiamo creato).
Con mentre();, abbiamo avviato il 'WordPress Loop'. Qui possiamo dire a WordPress quale parte di ogni post di cui abbiamo bisogno.
$ Contatore ++; $ preview = get_post_meta ($ post-> ID, 'anteprima', vero); $ date = get_post_meta ($ post-> ID, 'date', true); ?>
Sulla prima riga, ne abbiamo aggiunto uno al contatore (lo useremo a breve). $ Contatore ++; è una mano breve per la scrittura $ contatore = $ contatore + 1;
Quindi usiamo il get_post_meta (); funzioni per ottenere i campi personalizzati di 'anteprima' e 'data' dal post - che sono posizionati nel $ anteprima e $ date variabili rispettivamente.
">
Sopra abbiamo creato un div con a lavoro classe per l'oggetto del portfolio in cui si terrà. Ma notiamo che stiamo anche verificando che se il nostro $ contatore uguale a 2 (ovvero questo è il secondo elemento del portfolio), aggiungiamo un'altra classe al div nominato scorso. Questa classe tornerà utile quando modificheremo questa sezione.
Successivamente, emettiamo l'immagine di anteprima:
Se esiste un'immagine di anteprima, allora ...
"> ; ?>/inc/thumb.php?src=<?php echo $preview; ?>& w = 450 & h = 210 & zc = 1 & q = 100 )
Il the_permalink (); la funzione viene utilizzata per generare il collegamento al post corrente.
Quindi, emettiamo l'immagine di anteprima. Ma lo stiamo anche eseguendo attraverso il resizer TimThumb per ridimensionare l'immagine a 450px in larghezza e 210px in altezza (dall'immagine 930px in realtà è). Nota come usiamo bloginfo ( 'template_directory'); assicurarsi che WordPress stia verificando nella nostra cartella dei temi (è un equivalente di TEMPLATEPATH abbiamo usato nella parte precedente della serie).
Ora dobbiamo solo produrre la riga di testo che va sotto l'immagine (il titolo e la data):
"> ($ Data)";?>
Questo è relativamente semplice. Noi usiamo the_permalink (); di nuovo per ottenere il link per il post corrente. il titolo(); è usato per ottenere il titolo del post corrente.
Quindi controlliamo se è stato inserito un campo personalizzato 'data' (nel file $ date variabile) per questo post. Se è così, lo stampiamo.
Share
Accentsconagua
; ?>/inc/thumb.php?src=<?php echo $preview; ?>& w = 450 & h = 210 & zc = 1 & q = 100 )
