è molto presto sarà il momento di ridisegnare il mio sito web per il “Web 2.0 Age.” Ho guardato seriamente in due piattaforme, Drupal e Joomla, con la quale per raggiungere questo obiettivo.
Drupal e Joomla offrono pacchetti completi che, nel caso di Drupal, comprende un blog e forum come moduli di base. Tematizzazione di queste piattaforme può essere fatto sia attraverso i CSS (Cascading Style Sheets) e PHP (Personal Home Page o PHP: Hypertext Preprocessor) modifiche al codice. Tuttavia, queste piattaforme sono complesse e imparare abbastanza da installare, gestire e personalizzare queste piattaforme può essere un compito arduo.
Dopo aver studiato le due piattaforme, compreso l’uso dei due sul mio banco di prova della piattaforma e su Internet, ho deciso di dare un’occhiata a WordPress come una possibile soluzione per il mio futuro ha bisogno di web. Sono rimasto sorpreso di scoprire che l’ultima versione di WordPress è facile da installare, facile da usare e facile da argomento.
In questo articolo, descriverò come personalizzare WordPress 2.5.
STYLING WordPress – design Jakob
Il design attuale del mio sito personale, SelectDigitals.com, sito si basa sul lavoro e la filosofia di Jakob Nielsen, http: //www.useit com /. Il lavoro di Nielsen è stata dedicata allo sviluppo di siti web utili che offrono contenuti che è facile da trovare e facile da leggere.
Il design del sito Nielsen (e il mio sito, con il permesso) è semplice ed elegante ed ha l’obiettivo principale di distribuzione di contenuti. WordPress ha anche l’obiettivo di distribuzione di contenuti. Pertanto, il mio progetto prima di WordPress si adopererà per mantenere l’aspetto dei nostri luoghi con la caratteristica aggiunta di interattività visitatore. Mi riferisco a questo come la progettazione di Jakob
Ci sono sei componenti principali che compongono l’aspetto del blog di default WordPress:.
1. grafica Header
2. titolo del blog
3. Lema
4. Page
5. background e
6. Piè di pagina
Al fine di rendere i carichi blog rapidamente Jakob, ha deciso di non utilizzare un’intestazione o piè di pagina grafica; e dal momento che il progetto è essenzialmente il tema WordPress di default con un cappotto nuovo, solo un po ‘di lavoro di progettazione grafica da fare. Infatti, solo necessario per creare un grafico per generare la pagina blog con l’effetto di due colonne. pagina del blog si “galleggiare” incentrata su un blu * corpo * sfondo scuro che servirà per inquadrare la pagina.
La creazione di un’immagine
Uno sguardo alla directory dell’immagine per le immagini WordPress tema di default vengono visualizzati di default Kubrick utilizzato per cercare. Per ora, c’è solo un file di particolare interesse: kubrickbgwide.jpg. Jakob per la progettazione, non sono necessarie altre immagini di Kubrick, ma sarà richiesto per “Fantasia”, un disegno più complesso.
La pagina del blog è stato creato da un “taglio” attraverso il centro del nuovo design. Il taglio è un’immagine larghezza della pagina del blog stretta.
Ho iniziato il mio progetto mettendo una pagina di base (760px x 600px) in Adobe Illustrator. Mi piace usare la grafica di Illustrator per questo, anche se potevano usare altri programmi.
mi ha riempito con il colore di sfondo della pagina di base della pagina (da non confondere con il blu scuro * corpo * sfondo). Il colore della retroilluminazione è quello di “show-off” testo a colori come il titolo e il sottotitolo del blog.
pagina sovrapposto con due rettangoli, o “colonne”. La sinistra, 510px intera colonna viene riempita con un giallo pastello; la colonna di destra, 230px di larghezza, è riempito con un blu pastello. Le due colonne si inseriscono all’interno della pagina di base con un fondo 10px bordo della pagina che li circonda.
In Illustrator, poi mi hanno messo una 760px X 40px rettangolo sulla pagina e lo utilizza per fare una fetta. Una fetta è solo una parte rappresentativa di una più grande, in questo caso, di immagine design. Ho salvato la fetta come kubrickbgwide.jpg. Kubrickbgwide.jpg viene utilizzato per generare lo sfondo Blog-pagina. Come nuovo contenuto viene aggiunto alla pagina del blog, le copie delle sezioni sono impilati verticalmente per “crescere” sfondo di due colonne. Questa è l’unica immagine che si ha bisogno di un browser per generare home page del blog. Il blog, quindi, il carico molto rapidamente.
Abbastanza facile finora, giusto? Il resto del disegno è ottenuta attraverso file di tema CSS e / o tramite l’interfaccia di amministrazione di WordPress.
Cambia CSS
Il file CSS di default si trova nella directory wp-content_themes_default. Il testo viene visualizzato CSS style.css modifiche al codice. Prima di apportare modifiche al file di default CSS, sempre che faccio e mantengo una copia dell’originale. file CSS può essere aperto e modificato con qualsiasi editor di testo. Testo da cancellare è tra parentesi. il corpo testi nuovi o modificati
{
[background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);]
sfondo viene visualizzato senza parentesi quadre
/ * Inizia la tipografia e colori * /
:. # 636f89; / * Impostare il colore di sfondo blu corpo * /
}
#page {
[background-color: white;]
[border: 1px solid #959596;]
border: none;
}
[I#encabezado{
background: # 73a0c5 url ( ‘images / kubrickheader.jpg’) no-repeat centro in basso;
}
#headerimg {
margin: 7px 9px 0;
Altezza: 192px;
width: 740px;
}]
#footer {
[background: #eee url(‘images/kubrickfooter.jpg’) no-repeat top;]
Background: fffef2 #; / * Molto luce gialla * /
}
H1 H1 uno H1 a: hover, H1 a: visited, #headerimg [.description] {
text-decoration : none;
[color: white;]
colore: rosso; / * Rendere il titolo rosso * /
padding-bottom: .5em; / * Metti un po ‘di spazio tra il titolo e il sottotitolo * /
}
.description {
text-decoration: none;
Colore: Blu; / * Rendere lo slogan blu * /
text-align: center;
}
/ * Fine della tipografia e colori * /
/ * Begin struttura * /
#page {
[background-color: white;]
background-color: fffef2; / * Molto luce gialla * /
[border: 1px solid #959596;]
border: none;
}
# intestazione {
[background-color: #73a0c5;]
background-color: # fffef2; / * Molto luce gialla * /
}
/ * fine * Struttura
Dopo aver effettuato e salvare le modifiche nel file style.css, la pagina del blog / nuovo design si svolge
STYLING WordPress -. Fancy Dress design
Anche se mi piace la semplicità del blog di design Jakob, si non piacere a tutti. Ci sono molte persone che amano “brillare”. Il prezzo di un abito fantasia WordPress blog è spesso un carico più lento senza aumentare l’usabilità. Tuttavia, per coloro che vogliono “vestire” l’aspetto del tuo blog, qui ci sono altri modi in cui questo può essere realizzato.
In primo luogo, si deve rilevare che la parte inferiore della pagina di default di WordPress utilizza intestazione (kubrickheader.jpg) e piè di pagina grafica (kubrickfooter.jpg). Questi grafici non vengono riempiti con un colore pieno e design Jakob, ma con pendenze. Sembra anche essere una piccola ombra sotto la pagina.
A causa della complessità della pagina predefinita, la grafica sono necessari ulteriori e, di conseguenza, sono necessari più sezioni. Inoltre, quando un corpo di fondo più complessa in cui “galleggiare” che si desidera pagina un’immagine di “seme” per questo (questo è ciò che l’immagine è per kubrickbgcolor.jpg) può anche essere necessario.
Come prima, ho creato un disegno della pagina del blog in Illustrator. Pagina, con angoli arrotondati, che galleggia in background di default WordPress ha un gradiente di giallo, e ha una piccola ombra.
per la prima volta ha creato un piano di lavoro rettangolo di 760px X 600px in Illustrator. Ho riempito questo rettangolo con il colore di sfondo (C: 8, M: 6, Y: 6 K: 0).
Poi, usando lo strumento Rettangolo arrotondato, che ha attirato un rettangolo di 736px X 584px e riempito con gradiente di colore giallo. In sostanza, ho fatto la pagina più grande possibile sullo sfondo, lasciando spazio sufficiente per ombra parallelo.
Infine, mi ha dato il rettangolo arrotondato una piccola ombra.
Al fine di garantire che le fette sono perfettamente fuse nel corpo * fondo, ho creato un 60px x 60px piazza dello stesso colore (C: 8, M: 6, e 6, K: 0) e ho salvato come kubrickbgcolor.jpg. La piccola immagine sarà utilizzata per “vernice” fondo del corpo. Questo è un passo importante in quanto il fondo utilizzato per il corpo e utilizzato per lo sfondo pagina deve corrispondere perfettamente per il design di lusso.
Creazione di fette
Con lo strumento Rettangolo, ho messo un rettangolo 760px X 200px sulla parte superiore della disposizione sopra descritta. Ho messo questo rettangolo sulla parte superiore della mano e usato per fare una intestazione grafica fetta. Prima di fare questo, ho tratto disabili e riempimento.
salvato la fetta come kubrickheader.jpg.
Ho creato fette piè di pagina e la pagina in un modo simile e rinominati rispettivamente kubrickfooter.jpg e kubrickbgwide.jpg,. Kubrickfooter.jpg è 760px X 63px e 760px X 40px kubrickbgwide è
Ci sono altre due immagini di Kubrick nella directory delle immagini:. Kubrickbg-ltr.jpg e kubrickbg-rtl.jpg (da sinistra a destra e da destra a sinistra). Pertanto, due copie di I kubrickbgwide.jpg e rinominato di conseguenza.
Cambia CSS
Il file CSS di default si trova nella directory wp-content_themes_default. Il testo viene visualizzato CSS style.css modifiche al codice. Parentesi indicano che il codice per cancellare e il nuovo codice è mostrato senza parentesi. Prima di effettuare il cambiamento, ho copiato e salvato il file originale. . Per la progettazione di lusso, cambia CSS sono minimi
/ * Inizia la tipografia e colori
corpo * / {
[background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);]
background: # e7e7e7 url ( ‘images / kubrickbgcolor.jpg’);
}
#page {
[background-color: white;]
[border: 1px solid #959596;]
}
#header {
[background: #73a0c5 url(‘images/kubrickheader.jpg’) no-repeat bottom center;]
background: # e7e7e7 url ( ‘images / kubrickheader.jpg’) non inferiori è centrale parte ripetibilità;
}
#footer {
[background: #eee url(‘images/kubrickfooter.jpg’) no-repeat top;]
background: # e7e7e7 url ( ‘images / kubrickfooter.jpg’) no-repeat top;
}
H1 H1 uno H1 a: hover, H1 a: visited, #headerimg [description] {
[color: white;]
Colore : rosso; / * Rendere il titolo del blog rosso * /
padding-bottom: .5em; / * Metti un po ‘di spazio tra il titolo e il sottotitolo * /
}
.description {
text-decoration: none;
Colore: Blu; / * Effettuare il blog blu slogan * /
text-align: center;
}
/ * Fine della tipografia e colori * /
/ * Inizia Struttura * /
#page {
[background-color: white;]
background-color: # e7e7e7;
[border: 1px solid #959596;]
border: none; }
# intestazione {
[background-color: #73a0c5;]
background-color: # e7e7e7;
}
/ * fine * Struttura /
Dopo la progettazione e CSS lavoro, WordPress mostra i suoi nuovi vestiti a tutti Internet
STYLING WordPress -. NO-GRAPHIC DESIGN
ogni Nulla va male quando un browser carica una pagina Web, giusto? Anche se questo fosse davvero il caso, è ancora consigliabile considerare come una pagina viene visualizzata se la grafica non può essere trovato.
Nel caso del design Jakob, se kubrickbgwide.jpg non scaricato, per qualsiasi motivo, la pagina potrebbe non essere visualizzati in modo accettabile. Poiché la retroilluminazione viene utilizzato per l’intestazione e il piè, di solito sono visualizzati sullo sfondo di colore blu scuro assegnato al corpo. Tuttavia, il contenuto della pagina diventa difficile da leggere: quasi perso nel sfondo blu scuro. Uno sfondo più chiaro per il corpo avrebbe potuto essere una scelta molto più saggio.
Il creatore del progetto Kubrick ha risolto questo problema assegnando i colori di sfondo alternati da utilizzare se la grafica non erano disponibili. Le assegnazioni sono fatte all’interno del file style.css:
body {background: url # d5d6d7 ( ‘images / kubrickbgcolor.jpg’); }
# intestazione {background: # 73a0c5 url ( ‘images / kubrickheader.jpg’) non siano inferiori a parte ripetibilità centrale; }
#footer {background: url #eee ( ‘images / kubrickfooter.jpg’) no-repeat top; }
Se le immagini non sono disponibili, verrà utilizzato il valore RGB del colore alternativo.
Se la grafica non sono disponibili, il blog WordPress di default rimane presentabile e utilizzabile. Per una pagina iniziale riprogettazione, a partire dalla Kubrick disegno di base, senza grafica, potrebbe essere un buon punto di partenza. Ciò può essere ottenuto attraverso la semplificazione degli stati di cui sopra:
body {background: # d5d6d7; }
# intestazione {background: # 73a0c5; }
#footer {background: #eee; }
I colori possono essere modificati per testare diverse combinazioni di colori blog. Basta cambiare i codici di colore RGB, salvare il file CSS e aggiornare il browser per vedere immediatamente le modifiche.
Distinti per un blog più successo
Royce Tivel