Share
Quando la maggior parte delle persone pensa a WordPress, pensa ai blog. Se guardi la prima pagina di WordPress.org, parlano molto anche di blog. Quello che non ti dicono è che WordPress raddoppia anche come un CMS molto potente; devi solo configurarlo correttamente. Può anche essere un po 'complicato ottenere il setup e il funzionamento nel modo desiderato. È qui che vengo. In questa serie di tutorial in 3 parti, ti illustrerò i tre passaggi dell'utilizzo di WordPress come CMS.
Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.
La prima parte sarà la progettazione di un semplice layout in Photoshop. La seconda parte includerà la codifica del sito Web come un modello HTML statico e l'ultima parte ti guiderà attraverso la configurazione di WordPress e l'applicazione del nostro nuovo tema al suo sistema di template.
Se sei uno sviluppatore web esperto, queste prime due parti potrebbero essere noccioline per te, ma fai un favore a te stesso e sfoglia il contenuto. Non si sa mai, si può cogliere qualcosa di nuovo o un modo diverso di fare le cose.
Probabilmente sei stufo di leggere quindi sporcarci le mani!
Apri Photoshop e crea una nuova tela bianca. Di solito scelgo solo 1024 x 768 dal menu a discesa.
Sono andato avanti e ho creato una rapida tavolozza di colori e l'ho bloccato come strato superiore. In questo modo posso farvi riferimento senza dovermi preoccupare di perderlo nella mischia.
Riempi il tuo sfondo con il colore più chiaro e preparati a creare delle guide.
Creeremo delle guide in modo da poter pre-impaginare l'aspetto del nostro sito prima di iniziare a definire elementi grafici. Se non hai i righelli accesi, vai avanti e premi ⌘-R per accenderli.
Se passi il mouse sopra il righello, fai clic e vai via, il tuo cursore cambierà e ci sarà una linea orizzontale o verticale che segue il mouse. Questa è una guida. Lascia andare andare a creare.
Stiamo andando a delineare la barra laterale, l'intestazione e la sezione del contenuto principale. Fai sembrare le tue guide come le mie, o in qualche modo come le mie. Abbiamo disposto i bordi della barra laterale e il padding che vogliamo includere.
Ogni sito ha bisogno di un logo. Il logo si posizionerà sopra la barra laterale. Se hai un logo, mettilo lì ora, altrimenti creeremo un logo a fumetto. Perché? Mi piacciono i fumetti.
Ho aggiunto un po 'di ombreggiatura solida direttamente sotto di esso per un po' di stile. Diamo un nome al nostro sito. Lo chiamerò Gear'd e uso una piccola icona dell'ingranaggio.
I nostri utenti hanno bisogno di un modo per navigare nel nostro sito. Inseriremo la nostra navigazione sopra i nostri contenuti principali e li allineeremo a destra. Prendi il nostro strumento di testo e scrivi alcuni elementi di navigazione.
Faremo finta che stiamo vendendo un servizio. Supponiamo che gear'd sia un'app Web e che gli utenti possano registrarsi per acquistare diversi livelli di iscrizione.
La nostra navigazione includerà Informazioni, piani e prezzi, domande frequenti e contatti. Vogliamo che l'utente sappia su quale pagina sono attualmente attivi, quindi rendiamo attivo sia lo stato al passaggio del mouse per i nostri pulsanti di navigazione.
Per questo ho appena creato un quadrato arrotondato con un'opzione di testo colorata più chiara. Lo stato di passaggio del mouse ha un colore chiaro, leggermente più grande del colore dello sfondo.

La nostra app Web offre alcuni livelli di iscrizione che l'utente dovrebbe essere in grado di navigare. Non vogliamo veramente avere 100 diversi oggetti di navigazione principale perché è brutto. È qui che entra in gioco la barra laterale.
Assumiamo lo stesso stile usato per la navigazione principale, il passaggio del mouse e gli stati attivi e li applichiamo a una navigazione nella barra laterale. La barra laterale di navigazione manterrà la nostra navigazione secondaria per la pagina principale in cui ci troviamo. Questo include informazioni su prezzi e registrazioni, o su diverse aree di circa o contatto.
La pagina sembra un po 'vuota, aggiungiamo alcuni contenuti.
Abbiamo aggiunto del testo dell'intestazione e del testo dell'intestazione mini sotto. Solo un'altra indicazione visiva di dove si trova attualmente l'utente.
Successivamente abbiamo aggiunto una casella arrotondata per l'intera larghezza dell'area del nostro contenuto e abbiamo gettato un'immagine al suo interno.
Infine, abbiamo aggiunto il nostro corpo del testo.
Il nostro sito sta iniziando a venire insieme bene. Abbiamo aggiunto tutti i nostri elementi tranne uno, il nostro piè di pagina.
Il nostro footer conserverà il nostro copyright e alcune altre pagine che non richiedono realmente uno spazio di navigazione principale.
Aggiungi un'interruzione di riga per dividere un po 'la pagina e poi lascia entrare del testo protetto da copyright e allinearlo completamente alla guida sinistra.
I termini e le condizioni e l'informativa sulla privacy sono alcune pagine a cui l'utente deve poter accedere ma che non necessariamente ha bisogno di vedere in faccia. La bellezza di un footer è che possiamo ancora fornire all'utente queste informazioni, ma nascondetele bene: P
Abbiamo appena creato un sito semplice che ora possiamo convertire in un modello HTML e CSS. Sentitevi liberi di aromatizzare il template ma, per motivi di velocità e facilità d'uso, passeremo da qui.
Accentsconagua