Come installare e stile WordPress 2.5

E ‘presto sara’ il momento di ridisegnare il mio sito web per il “Web 2.0 Age”. Ho seriamente Guardò due piattaforme, Drupal e Joomla, con cui raggiungere questo obiettivo.

Drupal e Joomla offrono pacchetti completi che, nel caso di Drupal, comprende un blog e forum come moduli di base. Queste piattaforme possono essere tematizzazione realizza attraverso sia i CSS (Cascading Style Sheets) e PHP (Personal Home Page o PHP: Hypertext Preprocessor) Codice modifiche. 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 di entrambi sul mio banco di prova e sulla piattaforma internet, Ho deciso di dare un’occhiata a WordPress come una possibile soluzione alle mie future esigenze web. Sono stato sorpreso di scoprire che l’ultima versione di WordPress è facile da installare, facile da usare e facile da tema. In questo articolo, descriverò come installare e personalizzare WordPress 2.5.

INSTALLARE WORDPRESS IN CINQUE PASSI FACILI

(1) Scaricare WordPress

Il primo passo di installazione è quello di Scarica WordPress da http://wordpress.org/download/. Ho creato una directory sul mio PC chiamato “wordpress” in cui raccogliere i file e le immagini che è possibile usare per la mia installazione di WordPress e personalizzazione. Una volta che il download ha gareggiato, ho salvato il file .zip.

(2) Decomprimere WordPress

Dopo aver salvato il file, ho aperto con il programma di zip / unzip che uso, e selezionato tutti i file. Dal momento che proverà e modificando WordPress a livello locale per cominciare, “estratti” i file nella directory principale del server Apache che uso per il mio banco di prova PC.

Se dovessi installare WordPress “per reale “su un sito web dal vivo, avrei usato un client FTP per caricare il file .zip nella directory desiderata al mio servizio di hosting e appena scompattata il file lì. Firefox ha un client formidabile e * gratis * FTP, FireFTP, che può essere utilizzato per il caricamento.

(3) Creare il database

A questo punto, il database di WordPress deve essere creato . WordPress richiede un database per memorizzare il contenuto del sito e altre informazioni. Io uso MySQL per il mio server di database Sia sul mio banco di prova del PC e sui miei siti vivi. Io uso phpMyAdmin come interfaccia a MySQL.

Creazione del database è davvero semplice con phpMyAdmin. Ho semplicemente comincio phpMyAdmin, immettere il nome del database, e ha colpito il pulsante “Crea”. WordPress creare le tabelle di cui ha bisogno nel database.

(4) Creazione di wp-config.php

WordPress ha bisogno di sapere come accedere al database è stato creato-undici. Questo è ciò che il file wp-config.php è per. WordPress include un file chiamato “wp-config-sample.php.” Questo file deve essere modificato con le informazioni di accesso al database e rinominata in “wp-config.php”.

Aprire il file di configurazione con qualsiasi editor di testo. Le voci critiche sono DB_NAME, DB_USER, DB_PASSWORD, e DB_HOST.

Come misura di sicurezza avanzata, ho ottenuto un SECRET_KEY esta unico e incollato nel file. Poi ho salvato il file modificato come wp-config.php. Il testo che segue mostra il codice ho cambiato:

// ** Impostazioni MySQL ** //

define (‘DB_NAME’, ‘wordpress’); // Il nome del database

define (‘DB_USER’ ‘rtivel’); // Il nome utente MySQL

define (‘DB_PASSWORD’ ‘miapassword’); // … E la password

define (‘DB_HOST’, ‘localhost’); // 99% di probabilità che non sarà necessario modificare il valore esta

// Cambiare SECRET_KEY ad una frase unica. Non sarà necessario ricordare in un secondo momento

// così rendere lungo e complicato. È possibile visitare http://api.wordpress.org/secret-key/1.0/

// per ottenere una chiave segreta generata per te, o semplicemente fare qualcosa.

define ( ‘SECRET_KEY’ ‘diq` ~ @ | CH6) l @ u> x; hA> 1ew1maZ /) le dita dei piedi e il%}} ZYAI = V ^ L () eooB k8LJa 0V + Eh !!!!’); // Cambiar Esto una frase unica.

(5) Eseguire il programma di installazione di WordPress

Dopo aver completato la modifica del file wp-config.php, ho iniziato script di installazione inserendo l’URL ESTA al mio server Apache nel mio browser:

localhost / wordpress / wp-admin / install.php

Per un sito vivo, l’URL potrebbe essere qualcosa di simile:

yourdomain.com/wordpress/wp-admin/install.php

The prima schermata di installazione chiede il nome del blog e contatti e-mail l’indirizzo.

La schermata successiva annuncia una corretta installazione e fornisce un nome utente e la password per l’amministratore. Assicurarsi di salvare la password!

L’installazione è completata. Ora posso accedere a WordPress e iniziare a gestire il blog, personalizzare il tema, o l’aggiunta di contenuti.

O, posso fare clic sul link nella parte superiore della schermata di accesso e andare alla home page del blog.

Se non si crea manualmente un file wp-config.php, WordPress chiederà le informazioni necessarie e cercare di completare l’installazione.

Questo è tutto! . WordPress dovrebbe ora essere installato

STYLING WORDPRESS – LA PROGETTAZIONE JAKOB

Il disegno corrente per il mio sito web personale, SelectDigitals.com, è basata sul lavoro e la filosofia di Jakob Nielsen, http: //www.useit.com/. Il lavoro di Nielsen-è stato dedicato a rendere i siti web usabili che offrono contenuti che è facile da trovare e facile da leggere.

Il design del sito di Nielsen (e il mio sito, per concessione) è elegantemente semplice e ha l’obiettivo primario di distribuzione di contenuti. WordPress ha anche l’obiettivo primario di distribuzione di contenuti. Quindi, il mio primo progetto di WordPress si impegna a mantenere l’aspetto grafico dei nostri siti Con la caratteristica aggiunta di interattività visitatore. . Mi riferirò a questo come il disegno di Jakob

Ci sono sei principali componenti che costituiscono l’aspetto del default blog WordPress:

1. Graphic Header

2. Blog Titolo

3. Messaggio personale

4. Pagina,

5. Sfondo e

6. . Piè di pagina

Al fine di rendere il carico blog Jakob Rapidamente, ho deciso di non utilizzare un’intestazione o piè di pagina grafica; e dal momento che Essenzialmente il design sarà il tema WordPress di default con un cappotto nuovo, solo un po ‘di lavoro di progettazione grafica deve essere fatto. In realtà, ho solo bisogno di creare un grafico per generare la pagina del blog Con i suoi due effetto colonne. La pagina di blog “galleggiare” centrato in un blu scuro * corpo * fondo che servirà a inquadrare la pagina.

Creare la grafica

Uno sguardo nella directory delle immagini per il default di WordPress tema mostra le immagini predefinite utilizzate per il look Kubrick. Per ora, c’è solo un file di particolare interesse: kubrickbgwide.jpg. Per la progettazione Jakob, le altre immagini di Kubrick non sono necessari, ma saranno necessari per la “Fancy”, design più complesso.

pagina del blog sarà creato da una “fetta” attraverso il centro del nuovo design . L’immagine fetta è di ridurre la larghezza della pagina del blog.

ho cominciato il mio disegno di layout di una pagina di base (760px X 600px) in Adobe Illustrator. Mi piace usare Illustrator per un’opera di questo tipo ,, anche se potrebbe essere utilizzati altri programmi, anche.

Ho riempito la pagina di base con il colore di sfondo della pagina, (da non confondere con il blu scuro * corpo * sfondo). Lo sfondo di colore chiaro sarà sarà “show-off” testo colorato ,: come titolo e il sottotitolo del blog.

Ho sovrapposto la pagina con due rettangoli o “colonne”. La sinistra, 510px di larghezza colonna viene riempita con un pastello di colore giallo; la colonna di destra, 230px di larghezza, è riempita con un colore blu pastello. Le due colonne si adattano All’interno della pagina di base con uno sfondo di bordo di pagina 10px intorno a loro.

In Illustrator, ho messo poi a 760px X 40px rettangolo sulla pagina e usato per fare un esta fetta. Una fetta non è altro che un pezzo rappresentativo di un’immagine più grande, in questo caso, del disegno blog. Ho salvato la fetta come kubrickbgwide.jpg. Kubrickbgwide.jpg verrà utilizzato per generare lo sfondo del blog-pagina. Come nuovo contenuto viene aggiunto alla pagina del blog, le copie della fetta saranno impilati verticalmente per “crescere” il fondo due colonne. Questa è l’unica immagine necessaria da un browser per generare home page del blog. Il Blog sarà, dunque, carico molto rapidamente.

Abbastanza facile finora, giusto? Il resto del design è realizzato attraverso file CSS del tema e / o attraverso l’interfaccia di amministrazione di WordPress.

Cambia CSS

Il file CSS di default si trova nella directory wp-content_themes_default. Il testo CSS seguente mostra le modifiche al codice per style.css. Prima di apportare modifiche al file CSS predefinito, faccio sempre e salvare una copia dell’originale. Il file CSS può essere aperto e modificato con qualsiasi editor di testo. Testo da cancellare viene visualizzato tra parentesi quadre. . Nuovo o testo modificato nel periodo senza parentesi quadre

/ * Iniziare Typography & Colori * /

body

[background: # d5d6d7 url (‘images / kubrickbgcolor. jpg ‘);]

background: # 636f89; / * Impostare il colore di sfondo, di blu corpo * /

#page

[background-color: white;]

[confine: 1px solid # 959596;]

border: none;

[# intestazione

background: # 73a0c5 url (‘images / kubrickheader. jpg ‘) no-repeat centro in basso;

#headerimg

margin: 7px 9px 0;

Altezza: 192px;

width: 740px;

]

#footer

[sfondo: #eee url (‘images / kubrickfooter.jpg’) no-repeat top; ]

sfondo: # fffef2; / * Molto luce gialla * /

h1, h1, h1 a: hover, h1 a: visited, #headerimg [.description]

testo- decoration: none;

[color: white;]

Colore: rosso; / * Rendere la rete titolo * /

padding-bottom: .5em; / * Mettere un po ‘di spazio tra il titolo e il sottotitolo * /

.description

text-decoration: none;

colore: blu ; / * Verificare lo slogan blu * /

text-align: center;

/ * Fine Typography & 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 Structure * /

Dopo aver effettuato e salvare queste modifiche al file style.css, la pagina del blog di nuova concezione . si realizza

STYLING WORDPRESS – IL VESTITO OPERATO DI PROGETTAZIONE

Anche se mi piace la semplicità del disegno blog Jakob, esso non piacerà a tutti. Molte persone amano “sfarzo”. Il prezzo di un abito fantasia è spesso WordPress di blog carico più lento senza alcun aumento in termini di usabilità. Tuttavia, per coloro che vogliono “vestire” l’aspetto del loro blog, qui ci sono altri modi questo può essere realizzato.

Prima di tutto, va notato che sfondo della pagina utilizza il default di WordPress intestazione (kubrickheader.jpg) e piè di pagina (kubrickfooter.jpg) grafica. Questi grafici non vengono riempiti con un colore uniforme, come nel disegno Jakob, ma con pendenze. Anche Sembra che ci sia una piccola ombra sotto la pagina.

A causa della complessità della pagina predefinita, la grafica sono necessari ulteriori e, quindi, saranno necessari più fette. Inoltre, quando un corpo di fondo più complessa desiderata in cui si “galleggiare” la pagina di “seme” Anche immagine per questo potrebbe essere necessario (questo è ciò che l’immagine è per kubrickbgcolor.jpg).

Ace prima, ho creato un disegno della pagina del blog in Illustrator. La pagina con angoli arrotondati, galleggia sul default di WordPress fondo, ha una sfumatura di colore giallo, e ha una piccola ombra.

ho creato una 760px X 600px rettangolo sulla tavola da disegno di Illustrator. Ho riempito rettangolo esta Con il colore di sfondo (C: 8, M: 6, Y: 6 K: 0).

Successivamente, utilizzando il Rettangolo arrotondato strumento, ho disegnato un 736px X 584px rettangolo e riempì Con il gradiente giallo. In sostanza, ho fatto la pagina il più ampio possibile all’interno del fondo, lasciando spazio sufficiente per l’ombra.

Infine, ho dato il piccolo rettangolo arrotondato con ombra.

Al fine di assicurare che le fette si fonderanno perfettamente nel corpo * * sfondo, ho creato un 60px 60px x piazza dello stesso colore dello sfondo (C: 8, M: 6, Y: 6 K: 0) e salvato come kubrickbgcolor.jpg. La piccola immagine sarà utilizzata per “disegnare” il corpo di fondo. Questo è un passo importante utilizzato come sfondo per il corpo e lo sfondo utilizzato per la pagina deve corrispondere perfettamente per la progettazione Fancy.

Creare il Fette

Utilizzare lo strumento Rettangolo, ho messo su 760px X 200px rettangolo superiore del formato descritto sopra. Io está rettangolo Posizionato nella parte superiore del layout e usato per fare una fetta per la grafica di intestazione. Prima di fare questo, io tratto disabili e riempimento.

ho salvato la fetta come kubrickheader.jpg.

Ho creato il piè di pagina e fette in modo simile e li rinominato come kubrickfooter.jpg e kubrickbgwide.jpg rispettivamente. . Kubrickfooter.jpg è 760px X 63px e kubrickbgwide a dire 760px X 40px

Ci sono altre due immagini di Kubrick nella directory immagini: kubrickbg-ltr.jpg e kubrickbg-rtl.jpg (da sinistra a destra, e sinistra per sinistra). Queste immagini sono le stesse kubrickbgwide.jpg. Così, ho fatto due copie di kubrickbgwide.jpg e rinominato di conseguenza.

Cambia CSS

Il file CSS di default si trova nella directory wp-content_themes_default. Il testo CSS seguente mostra le modifiche al codice per style.css. Le parentesi quadre indicano codice che eliminare e il nuovo codice è mostrato senza parentesi. Prima di effettuare il cambiamento, ho copiato e salvato il file originale. . Per la progettazione fantasia, le modifiche CSS sono minimi

/ * Iniziare Typography & Colori * /

body

[background: # d5d6d7 url (‘images / kubrickbgcolor .jpg ‘);]

background: # e7e7e7 url (‘ images / kubrickbgcolor.jpg ‘);

#page

[ background-color: white;]

[border: 1px solid # 959596;]

# intestazione

[sfondo: url # 73a0c5 (‘images / kubrickheader.jpg’) no-repeat centro in basso;]

background: # e7e7e7 url (‘images / kubrickheader.jpg’) no-repeat centro in basso;

#footer

[sfondo: #eee url (‘images / kubrickfooter.jpg’) no-repeat top;]

background: # e7e7e7 url (‘images / kubrickfooter.jpg ‘) no-repeat top;

h1, h1, h1 a: hover, h1 a: visited, #headerimg [descrizione]

[color: white;]

Colore: rosso; / * Rendere la rete titolo del blog * /

padding-bottom: .5em; / * Mettere un po ‘di spazio tra il titolo e il sottotitolo * /

.description

text-decoration: none;

colore: blu ; / * Rendere la tagline blog blu * /

text-align: center;

/ * Fine Typography & Colori * /

/ * Inizia Struttura * /

#page

[background-color: white;]

background-color: # e7e7e7;

[border: 1px solid # 959596;]

border: none;

# intestazione

[background-color: # 73a0c5;]

background-color: # e7e7e7;

/ * Fine Structure * /

Dopo la progettazione e CSS lavoro, WordPress mostra che è vestiti nuovi per tutta Internet.

Distinti per una più blog di successo,