Come iniziare ad imparare i CSS e il tema dello sviluppo?

Question

Quali potrebbero essere i vostri suggerimenti per l'apprendimento e lo sviluppo CSS tema WordPress?

Sono stato con WordPress per oltre 4 anni, ma non ho mai davvero ottenuto agio con CSS o disegno tema (ho potuto modificarlo qua e là, ma che non è davvero facendo molto). Mi piacerebbe essere in grado di fare queste, ma non so da dove cominciare. La maggior parte delle guide mi sono imbattuto non sono WP specifici, e temo mi piacerebbe andare attraverso il materiale superfluo.

Grazie

Answer 1

Prima di tutto differiva tra la roba. WP non è CSS e CSS non è WP. Ma i temi WP fanno uso di CSS. Quindi, se si impara a conoscere i CSS si sta in fondo non facendo male (cosa buona con i CSS è, è comune tra le tutti siti web). L'altra parte è HTML. E poi ci sono PHP.

Quindi questi sono tre linguaggi di programmazione che vengono utilizzati con l'altro:

• un linguaggio di programmazione: PHP
• un linguaggio strutturale: HTML
• un linguaggio specifico dominio: CSS

Poi si dispone di un'architettura di rete multi-layer: PHP viene eseguito sul server e HTML e CSS è fornito dal server, ma di lettura / elaborati dal browser sul computer client

.

Quindi, anche se i temi potrebbe sembrare semplice, con WP tutto questo ottiene intercambiabili mista e si deve mettere se stessi pezzi di nuovo la roba.

PHP è in "tema" (PHP) File, HTML è generato (e pure è) all'interno di questi file a tema, CSS è nel file CSS.

Quindi, in pratica è necessario decidere che cosa si vuole imparare. La maggior parte delle risorse differiscono tra PHP e HTML / CSS.

In base alla tua domanda posso solo suggerire a voi per imparare i CSS. E 'molto potente dopo aver capito completamente il Cascade. È necessario conoscere HTML dritto (non PHP, solo HTML). Alla fine CSS è assolutamente importante per la rappresentazione visiva di un sito web, è uno strumento di potere per decorare qualsiasi sito web. Così si può utilizzare quello con tutto, anche i temi wordpress;)

Go for it. Se non si è capito fino ad ora dopo 4 anni, spendere un bel po 'di istruzione. Suggerisco qualche libro come http://oreilly.com/catalog/9780596101978 che è perfetto per l'auto-educazione (accanto a praticare).

CSS è molto ben deined dal W3C, così come è HTML. La definizione non è molto facile da usare, ma è corretto così con un po 'vi si può imparare molto anche lì. W3Schools è bello fatto così (e che in qualche modo lo rende sito nel corso degli anni, sguardi almeno alcuni cervello è dietro di esso). HTML / CSS, che è il WWW, afferrare la vostra fonte: D

Per PHP c'è php.net. Per WordPress, beh, è ??sempre in evoluzione e consuma le risorse della tua carriera personale, in modo da non concentrarsi troppo su di esso. La sua ben tenuto sviluppato comunque così, basta guardare per che cosa è bene per voi, non si concentrano su WordPress troppo.

Answer 2

Per quanto riguarda i CSS va, non c'è un sacco di cose specifiche WordPress in questo settore. Vai a w3schools e passare attraverso le loro esercitazioni. Per quanto riguarda imparare a costruire un tema, i due migliori risorse che posso consigliare sono sezione tema sviluppatore del codice e il tema di default (a partire da ora, Twenty Ten). Leggere pagina tema Sviluppo il ed il pagina Modelli per ottenere una buona conoscenza di base. Poi, basta leggere il codice sorgente del tema di default, utilizzando la documentazione per gli sviluppatori (in particolare il Template Tag funzione di riferimento pagine) come riferimento.

Spero che questo ha aiutato!

Answer 3

Passaggio 1: Creare un tema figlio di un buon tema genitore solido. A. Installare il tema tematica. B. seguire le loro istruzioni per fare un tema bambino. (Spostare la cartella tematico-campione-bambino-tema al di fuori della cartella tematica, sotto wp-content / themes. Ora dovrete / Wp-content / themes / tematico, e / Wp-content / themes / tematico-campione-bambino-tema. C. Rinomina quest'ultima directory al nuovo nome del tema preferito. D. Go lo schermo aspetto, e attivare il vostro nuovo tema.

Passaggio 2: Modifica styles.css, e sperimentare con i CSS. A. Per esempio, aggiungere:

#primary, #secondary {
   background-color: #e8e8d6;   
   margin-right: 10px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   padding:18px 0 0;
}

#branding {
    background: url(http://example.com/wp-content/uploads/2010/09/example.jpg) top left no-repeat;
}

E 'più semplice per iniziare semplicemente cambiando colori e caratteri, allora si può entrare in cose più elaborate, come gli angoli arrotondati, div galleggianti, ecc

Fase 3: Utilizzare lo style.css originale nella / themes directory / wp-content / tematica come la vostra guida. Davvero studiare che style.css. Utilizzare un riferimento come ad esempio http://reference.sitepoint.com/css per aiutare a capire ogni regola.

Con un tema bambino che si può cambiare poco o tanto quanto ti piace. Per esempio, alcuni saranno solo cambiare il logo #brand, come indicato sopra. Quanto più si cerca, più imparerete.

Answer 4

La cosa più importante che puoi fare è creare un locale di WordPress installazione che si può giocare con. (Istruzioni per: Mac | di Windows | Linux ) Questo vi permetterà di sperimentare e gli errori make senza il resto del mondo a guardare.

Il modo più veloce per imparare è modificando i temi esistenti e la creazione di temi bambino per i vari quadri . Di questi, il mio preferito è tematica . E 'molto difficile iniziare da zero, in modo da queste risorse può aiutare a colpire la terra in esecuzione.

Per saperne di CSS, w3schools.com è il risorsa. Per molti designer, Firebug è uno strumento indispensabile. Non uscire di casa senza di essa!

Answer 5

Kylan citato Firebug per Firefox.

E 'davvero un ottimo strumento per vedere come gli altri hanno costruito i loro temi.

Scarica alcuni fresco guardando temi e quindi utilizzare Firebug per esplorarle. Questo mi ha aiutato un sacco quando ho iniziato.

Answer 6

questi ragazzi mi hanno aiutato molto (e ancora lo fanno) http://digwp.com/ I loro bookis Handson davvero e facile da capire e quindi è il loro blog!