CREIX AMB INTERNET

Funcions avanades de WordPress

Introducci ................................................................ ................................................................................................ ....................................................................................... ....................................................... 3 Els temes de WP i el seu funcionament ................................................................ ....................................................................... ....................................... 5 Installar un nou tema ..................................................................................................... 6 Installar un nou tema no incls en el repositori de WordPress ............................... 9 On cercar nous temes ...................................................................................................10 Lestructura de WordPress ................................................................ ........................................................................................... ........................................................... 11 Itinerari de personalitzaci grfica ................................................................ .............................................................................. .............................................. 13 Personalitzaci bsica ..................................................................................................13 Personalitzaci intermitja ............................................................................................13 Personalitzaci avanada ............................................................................................15 Prctica .......................................................................................................................18 Generadors de temes de WordPress..........................................................................23 Gua de Recursos ................................................................ ................................................................................................ .......................................................................... .......................................... 26

Introducci
WordPress s el gestor de blogging ms popular del mercat, com es pot apreciar en la segent grfica. La usabilitat, funcionalitats i versatilitat d'aquesta eina, aix com totes les avantatges que proporciona treballar amb programari lliure1, fan que serveixi tamb per a programar llocs web i intranets petites i mitjanes.

Font: www.pingdom.com (http://royal.pingdom.com/2009/01/15/the-blog-platforms-of-choice-among-thetop-100-blogs/)

Avui en dia tenir un bloc s disposar d'un canal de comunicaci directe amb el mercat, i s leina ms adient per a les empreses, les marques i els professionals.

Avantatges del programari lliure: - Llibertat dutilitzaci amb qualsevol propsit i per sempre en tants ordinadors com es vulgui sense haver de pagar cap mena de llicncia. - Lliure accs al codi font per estudiar-lo i adaptar-lo a necessitats particulars. - Llibertat de redistribuci per a incentivar la collaboraci. - Llibertat per a modificar-lo i publicar les millores. Aquesta ltima llibertat s la ms interessant, doncs, permet disposar de programari actualitzat i millorat grcies al treball de la comunitat de desenvolupadors que hi ha al voltant del projecte.

Per aquest motiu, la necessitat de personalitzar-lo i de que el seu disseny tamb ajudi a comunicar la personalitat de lempresa, marca o professional que hi ha al darrere. Lobjectiu daquesta cpsula s entendre el concepte de tema en WordPress i les diferents opcions existents a lhora de personalitzar grficament un bloc amb aquesta eina, aix com adquirir les nocions bsiques per a personalitzar la grfica i el full destils duna plantilla de WordPress. Lavantatge principal que t WordPress respecte els altres serveis de blocs s que permet descarregar els arxius que el formen per modificar-los (WordPress.org). Aquesta caracterstica permet els usuaris avanats un marge de personalitzaci enorme i ha generat una comunitat dusuaris que desenvolupa noves funcionalitats i plantilles que desprs posen a labast de la comunitat. Per una altra banda, lusuari novell t lopci de fer servir la versi ms bsica de WordPress a la web oficial (WordPress.com).

Font: http://www.worthytips.com/11860/top-5-blogging-platforms-judged.html

Els temes de WP i el seu funcionament

WordPress anomena temes a les seves plantilles grfiques. En el cas de WordPress.com existeixen 105 temes predefinits, i si disposem dun WordPress installat en el nostre servidor disposem de molts ms temes predefinits, a ms de lopci de pujar un nou tema.

Al WordPress se li pot canviar de manera rpida i senzilla laparena visual per mitj de temes predefinits. A ms, lusuari pot modificar al seu gust el codi XHTML, HTML i CSS de les seues pgines mitjanant leditor que inclou el gestor.

Els temes de WordPress sn els skins, laparena del bloc. Els temes permeten canviar laparena del bloc en qualsevol moment perqu no afecten la programaci de laplicaci ni els continguts. Els temes sn un conjunt darxius (grfics, fulls destil, plantilles per diferents tipus de pgines, arxius de codi...) que generen una interfcie grfica i un layout pel bloc.

Un Tema de WordPress s una collecci darxius que sanomenen arxius de plantilla. A la banda dreta de la segent captura es mostren els arxius de plantilla dun tema. Per accedir a aquesta pantalla sha danar a lopci Aparena > Editor.

WordPress installa un tema per defecte en la seva distribuci per al seu s inicial (Twenty Ten). Podeu veurel en el men Aparena > Temes. La petanya que surt per defecte s la de Gesti de Temes i all teniu tots els temes installats al vostre servidor. En la pantalla Temes teniu en primer lloc el Tema actual que s el que teniu actiu, i a sota trobareu els Temes disponibles que sn els que teniu installats al servidor: premeu lenlla Activa del tema que desitgeu i visualitzeu el lloc web. Veureu altres temes que no estan actiu sempre i quan els hagueu installat a travs de lopci Aparena > Temes i pestanya Installa temes. IMPORTANT: Per a treballar cmodament amb WordPress heu de fer servir preferentment el navegador Firefox, Opera, Chrome o Safari, i treballar amb dues pestanyes alhora, en una visualitzareu el backend del bloc (ladministrador) i en laltra el frontend del bloc (la interfcie).

Installar un nou tema

WordPress est programat per a canviar de manera fcil el tema del teu bloc. Anem a comprovar-ho afegint un nou tema que cercarem en el repositori de WordPress: 1. Anar a lopci Afegeix un nou tema del men Aparena. 2. Cerqueu per terme, autor o etiqueta el tema. Tamb podeu aplicar un filtre si considereu que algun dels filtres predeterminats s important pel disseny del vostre bloc. O cerqueu en les categories establertes per WP: Destacades | Ms noves | Recentment actualitzades 3. Llegiu les descripcions dels temes a la pantalla de resultats perqu la informaci que contenen s rellevant (si suporta o no Ginys...). 4. Abans dinstallar el tema heu de llegir les instruccions dinstallaci si en t, doncs, s possible que el tema disposi de funcionalitats especials que necessiten ser configurades. 5. En la pantalla de resultats seleccioneu lenlla Installa del tema desitjat. Sortir una pantalla de confirmaci de la installaci del nou tema.

6. Torneu a lopci Temes del men Aparena i Activeu el tema que acabeu dinstallar.

IMPORTANT: Si el tema que voleu proporciona instruccions, assegureu-vos de llegir i seguir les instruccions per a la installaci correcta del tema. Els temes poden proporcionar funcionalitats opcionals especials que poden requerir ms passos que els passos dinstallaci esmentats a dalt.

Installar un nou tema no incls en el repositori de WordPress

Com veurem en el segent punt existeixen molts llocs on trobar temes de WordPress que no pertanyen al repositori oficial del gestor. Quan cerquem un tema mitjanant el cercador existent en ladministrador de WordPress estem interrogant la base de dades oficial de temes de WordPress. Per si el que volem s installar un tema que hem aconseguit en alguna altra pgina, WordPress t prevista aquesta funcionalitat: 1. Els temes de WordPress estan en format .zip i en la pgina que trobeu aquell que us agrada us oferir lopci de baixar-lo. 2. Anar a la pestanya Installa temes del men Aparena > Temes i seleccionar Penja del men superior: cercar el tema prviament desat en el vostre ordinador i seleccionar Installa ara. Pujar larxiu anomenat tema-practica.zip que teniu disponible a la unitat com.

3. El resultat final s la rpida installaci del tema desitjat.

On cercar nous temes

Les plantilles (themes) sn les encarregades de configurar la distribuci delements en el bloc i la seva grfica. Existeix una nodrida comunitat dusuaris aficionats i professionals que desenvolupen noves plantilles per a WordPress. El gestor publica totes aquestes plantilles en la seva pgina oficial de temes (http://wordpress.org/extend/themes/) un cop han estat aprovades oficialment. Aquests temes estan disponibles dins lopci Aparena > Temes > Installa temes. A banda dels temes que podem trobar en el web oficial de WordPress, la comunitat de dissenyadors i desenvolupadors de WordPress s molt gran, aix que existeixen altres llocs web on trobar llistats de temes disponibles i descarregables per a WordPress com: WordPressTheme.com (http://www.wordpresstheme.com) FreeThemeLayouts.com (http://www.freethemelayouts.com/) TodoWordPress (http://www.todowp.org/categoria/themes/) Best WordPress Themes (http://www.bestwpthemes.com/) Theme Grade (http://www.themegrade.com/) Templatelite (http://www.templatelite.com/) Free WordPress Themes 4 U (http://www.freewordpressthemes4u.com/)

Tamb existeixen empreses de disseny que desenvolupen temes per aquest i altres gestors. Aquesta s una tendncia del mercat que va a ms. La majoria dels seus dissenys els venen a preus molt assequibles i alguns els ofereixen gratutament per a donar-se a conixer: Organic Themes: http://www.organicthemes.com/ WooThemes: http://www.woothemes.com/ Designdisease: http://designdisease.com/

Disposeu tamb duna eina que permet cercar temes de WordPress per diferents criteris: colors, layout, gratut/pagament Leina s Theme Finder (http://themefinder.wpcandy.com/). I tamb s habitual que bloggers i revistes facin articles amb llistats de temes endreats per alguna temtica determinada: Temes per a blogs corporatius: http://www.techzoomin.com/20-free-corporatewordpress-themes/ Temes per a blogs personals: http://crenk.com/17-new-wordpress-themesthat-will-rock-your-personal-blog/ 100 Excellents temes de WordPress gratuts: http://www.smashingmagazine.com/2008/01/08/100-excellent-free-highquality-wordpress-themes/

Lestructura de WordPress
WordPress divideix cada secci del bloc en arxius independents. Aquests arxius sn cridats des de larxiu mestre (index.php) per articular cadascun dels temes. Amb aquesta estructura modular saconsegueix molta flexibilitat. Lindex.php. inclou crides a les altres plantilles de la capalera, contingut, barra lateral I peu de pgina, per, a ms a ms, WordPress tamb disposa de plantilles especials pels comentaris, les categories, els enllaos, els arxius, la cerca A continuaci les crides a les altres plantilles del codi dindex.php:
1. <?php get_header(); ?> 2. <div id="content" class="narrowcolumn"> 3. <?php if (have_posts()) : ?> 4. <?php while (have_posts()) : the_post(); ?> 5. <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> 6. <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> 7. <small><?php the_time('F jS, Y') ?> by <?php the_author() ?> </small> 8. <div class="entry"> 9. <?php the_content('Read the rest of this entry &raquo;'); ?> 10. </div> 11. <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p> 12. </div> 13. <?php endwhile; ?> 14. <div class="navigation"> 15. <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div> 16. <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div> 17. </div> 18. <?php else : ?> 19. <h2 class="center">Not Found</h2> 20. <p class="center">Sorry, but you are looking for something that isn't here.</p> 21. <?php get_search_form(); ?> 22. <?php endif; ?> 23. </div> 24. <?php get_sidebar(); ?> 25. <?php get_footer(); ?>

En la lnia 4 comena el que sanomena el Loop de WordPress i acaba en la lnia 13. La lnia 4 crida les entrades (posts) del bloc, I en cas de no haver-hi cap, podem posar el missatge que desitgem que surti a la lnia 19 entre les dues etiquetes h2. En el cas de que lusuari no trobe un determinat article, WordPress inclou un cercador per defecte com es pot veure en la lnia 21 del codi.

A banda de les plantilles, WordPress t un altre element clau dins la seva estructura: les etiquetes o tags. Una etiqueta s un tro de codi en PHP que es fa servir per a demanar-li alguna cosa determinada a WordPress. Les etiquetes es fan servir dins les plantilles per a mostrar informaci dinmica, s a dir, informaci localitzada en la base de dades del gestor que s prpia de cada bloc. Una etiqueta de WordPress s una crida a una funci en PHP, que t la programaci necessria per conectar-se a la base de dades, demanar-li una informaci determinada (un comentari, per exemple) i servir-la en pantalla. Les etiquetes permeten personalitzar el bloc a nivell de funcionalitats i permeten visualitzar informaci de la base de dades, I la seva potncia ve determinada perqu existeixen moltes etiquetes disponibles per a personalitzar el bloc sense saber PHP. Teniu un llistat de les etiquetes que WordPress t disponibles a la segent adrea: http://codex.wordpress.org/Template_Tags Exemples: Incloure un calendari en la barra lateral 1. Anem a lopci Aparena > Editor Seleccionar larxiu barra lateral (sidebar.php) Afegir letiqueta calendari de WordPress: <?php get_calendar(); ?> Sota la capa <div id="sidebar"> El resultat final ha de ser:
<?php ?> <div id="sidebar"> <?php get_calendar(); ?> <ul>

I el que es veu al principi de la barra lateral s un calendari amb el mes en curs. Podeu veure altres etiquetes en el codi de la pantalla index.php mostrat abans:
<div id="content" class="narrowcolumn"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('F jS, Y') ?> by <?php the_author() ?> </small>

Itinerari de personalitzaci grfica

Personalitzaci bsica
Installar un tema que ens agradi i afegir-li el nostre logotip, ttol del bloc i descripci del mateix. Aquesta personalitzaci s imprescindible i, si el bloc s corporatiu, hem didentificar-lo clarament amb lempresa mitjanant el logotip, el ttol o la descripci... Aquesta personalitzaci bsica es pot realitzar tant en un bloc installat en servidor propi com en un bloc de wordpress.com. Els temes cada vegada disposen de ms opcions de personalitzaci predefinides per tal de facilitar lusuari la personalitzaci de la grfica sense necessitat deditar la fulla destils del tema. Quan sactiva un tema ens hem de fixar si apareix cap nova opci dins el men Aparena al final de tot. Per exemple, si installem i activem el tema Fancy i anem a lapartat que surt en activar aquest tema anomenat Fancy Theme Options, podrem canviar el color principal, el rollover, el background o la tipografia duna manera molt senzilla mitjanant mens desplegables on surtiran opcions predefinides pel creador del tema. El resultat pot ser aquest:

Personalitzaci intermitja

Cercar un tema fora personalitzable i installar-lo per canviar-li la capalera, el men, la imatge de fons... Aquesta via s la ms senzilla i rpida per aconseguir personalitzar un bloc sense saber res de llenguatge CSS. Quants ms elements personalitzables tingui el tema escollit ms podrem personalitzar el bloc. Si dissenyem una capalera i una imatge de fons amb els elements de la imatge corporativa de lempresa, personalitzem el men i modifiquem la distribuci delements en pantalla (layout), el resultat final s un bloc fora personalitzat. Aquesta personalitzaci intermitja es pot realitzar tant en un bloc installat en servidor propi com en un bloc de wordpress.com. Podem cercar una imatge per a la capalera en morgueFile (http://www.morguefile.com/) si volem un recurs gratut o en un repositori molt econmic com iStockphoto (http://www.istockphoto.com). Tant el tema que porta per defecte la nova versi de WordPress, Twenty Ten, com molts altres temes, un dels ms personalitzables en lactualitat s EvoLve, permeten ajustar molt la grfica i elements del bloc a les necessitats que pugam tindre.

Personalitzaci avanada
En aquest cas es tracta de crear un disseny a mida pel bloc amb un programa de disseny grfic i cercar una plantilla que tingui lestructura del nostre disseny per a poder aprofitar tota la collecci darxius del tema i soles haver de personalitzar els grfics i la fulla destils. Per a canviar els grfics i la fulla destils necessiteu : un programa de disseny grfic (Photoshop, Gimp, etc.) per a fer el disseny. leditor de WordPress si els canvis sn petits i un editor de text pla (Bloc de notes, NotePad ++) o un editor HTML com el Dreamweaver per editar la fulla destils. Si editeu la fulla destils en local disposareu del cercador de leditor de text o HTML que us facilitar la rpida localitzaci dels estils i lajut del codi de colors (en el cas del NotePad++ o el Dreamweaver) un programa dFTP (File Transfer Protocol) com el Filezilla o qualsevol altre que us agradi per a pujar el que feu, aix com per a realitzar les nombroses proves amb la fulla destils si lediteu en local.

Passos a seguir: 1. Cercar un tema per agafar-lo de base i dissenyar sobre ell en el programa de disseny grfic, o dissenyar laparena que volem pel bloc i desprs cercar el tema que ms saproxime. Aquest punt dependr de si el dissenyador ja t alguna cosa al cap o no. Si fem servir la primera opci (partir dun tema existent), la feina de personalitzaci grfica en principi ha de ser ms senzilla perqu el dissenyador sajustar a una plantilla mentre dissenya. 2. El bloc que farem servir dexemple s el del Centre de Informaci i Promoci del Delta del Llobregat, la Porta del Delta (http://www.portadeldelta.cat/blog/). El tema que es va fer servir de base s la versi 1.1 de Cloudy Night.

Bloc del Centre de Informaci i Promoci del Delta del Llobregat La Porta del Delta (http://www.portadeldelta.cat/blog/)

Tema Cloudy Night versi 1.1

3. Abans de comenar a personalitzar el tema el millor s fer una cpia i canviarli el nom per a no modificar lorginal i treballar sobre la cpia. Per a fer la cpia cal baixar-se mitjanant un programa FTP el tema sencer a lordinador local i canviar-li el nom a la carpeta, fer un zip i pujar-lo a travs del gestor com sha explicat en la pgina 7. Els temes sinstallen dins el WordPress al directori wp-content. All podreu veure el tema per defecte del WP i els que heu installat.

Els dos directoris ms importants sn els segents: wp-admin cont totes les funcions i arxius que es fan servir en ladministrador de WordPress. wp-content cont els temes que porta per defecte el WordPress i els que lusuari ha installat (dins la carpeta themes trobareu una carpeta per cada tema), aix com els plugins, les actualitzacions i els arxius que lusuari puja per a farcir els articles (uploads).

4. Un cop tallats els grfics els collocarem a la carpeta images del tema. Els grfics seran nous o substituiran els existents si hem agafat de base una plantilla existent. En aquest segon cas el que sha de fer s exportar els grfics amb el mateix format i nom que tenen al tema seleccionat. 5. I un cop disposem dels nostres grfics comena la feina amb la fulla destils: hem de modificar els estils existents per aconseguir el disseny personalitzat que ens hem marcat. 6. Lltim pas s validar el full destils amb alguna eina de validaci del codi CSS com http://jigsaw.w3.org/css-validator/

Prctica
1. Comparar tema original i cpia amb els nous grfics. El que farem a continuaci s installar el tema original Cloudy Night i activar-lo per fer-li una ullada. Desprs activarem el tema-practica que hem pujat abans. La diferncia s que tema-practica cont els grfics del bloc de la Porta del Delta, per tota la resta darxius sn del tema Cloudy Night.

2. Configurar els Ginys Podem comenar pel ms fcil que s configurar els ginys que necessitem. Anem a Aparena > Ginys i fixeu-se que soles disposem dun lloc per a posar-los: Barra lateral 1. Aqu hem de collocar els ginys que trobem en el bloc que volem reproduir: http://www.portadeldelta.cat/blog/

3. Modificar el full destils Per acabar de personalitzar el bloc hem deditar el full destils. Podem fer-ho amb leditor de WordPress si hem de tocar molt poca cosa, o amb un editor de text pla (Bloc de notes, NotePad ++) o un editor HTML. Si editeu el full destils en local disposareu del cercador de leditor que us facilitar la rpida localitzaci dels estils i lajut del codi de colors (en el cas del NotePad++ o el Dreamweaver). Larxiu que controla laparena dels elements HTML del tema s el full destils: style.css. Podria ser que existira ms dun full destils, per el principal sempre s style.css. El full destils cont les regles per a cada element HMTL del lloc. Una regla CSS (Cascading Style Sheet) t la segent estructura: Selector { propietat: valor;} Exemple: h1 { color: black;} Selector: element sobre el que saplicaran els estils. Existeixen diferents tipus de selectors: selectors delement, selectors de classe, selectors did... Tot el que queda dins els corxets s anomenat declaraci i poden definir tantes propietats com es vulgui dun selector en una mateixa declaraci si les separem per un punt i coma. Anem a veure algun exemple: Selector delement: p { color: black; font-family:Arial,Verdana, sans-serif;} Saplica a tots els element pargraf (p) dHTML. Selector de classe: .destacat { color: blue; border:1px solid blue;} Saplica als element dHTML marcats amb la classe destacat (class=destacat). Selector did: #capalera { color: white; background-color:black;} Saplica a lnic element de la pgina etiquetat amb lid capalera (id=capalera) En els segents llocs web podeu trobar tutorials sobre fulls destils: Web Design Group gua CSS: www.htmlhelp.com/es/reference/css/ W3 Schools CSS tutorial: www.w3schools.com/css/default.asp WestCiv CSS guide: www.westciv.com/style_master/academy/css_tutorial/ CSS 2.1 Especificaci oficial: www.w3.org/TR/CSS21/ Compatibilitat dels navegadors amb CSS: www.quirksmode.org/css/contents.html

En alguns casos tindrem clar quina regla hem de modificar per en daltres casos no s tan evident qu fa cadascuna de les regles o quina delles s la que necessitem canviar perqu es vegi lelement tal i com volem.

El primer que necessitarem ser lextensi pel navegador Web Developer Toolbar (http://chrispederick.com/work/webdeveloper) que ens permetr treballar duna manera cmoda i gil amb els estils d'un lloc. Aquesta extensi sinstalla al navegador Firefox i Chrome i permet visualitzar la informaci del full destils, les propietats de cada element i, fins i tot, fer canvis a la fulla destils i visualitzar-los en temps real sense necessitat de modificar larxiu style.css.

Lextensi sinstalla en el navegador i apareix com una barra ms del mateix (el requadre marcat en lila de la imatge anterior). T moltes funcionalitat per les que ens interessen ara a nosaltres sn aquelles relacionades amb el full destils (men desplegat de la imatge). A continuaci les esmentem: Disable Styles: Desactiva els diferents fulls destils que puguin aplicar-se a la web. Display CSS By Media Type: Carrega els diferents arixus CSS del web, si existeixen, segons el mitj (Handheld, Print y Screen). View CSS: mostra els fulls destil del lloc. View Style Information: mostra els estils aplicats a lelement seleccionat. Per a que aquesta opci funcioni el navegador ha de tenir leina DOM Inspector installada. Add User Style Sheet: mostra el lloc amb un full destils especificat per lusuari. Edit CSS: permet editar els arxius CSS del lloc i visualitzar els canvis en temps real. Use Border Box Model: renderitza el lloc aplicant el model de caixes CSS utilitzat per algunes versions dInternet Explorer, en lloc del model de caixes estndar recomanat pel W3C.

Ara anem a pel nostre full destils amb la funcionalitat de View Style Information del Web Developer activada i el Notepad ++ o Dreamweaver obert per a editar all el full destils i anar pujant per FTP els canvis que fem i poder-los visualitzar:

El primer que haurem dajustar seria el background, que t el fons negre i resta tallat. Fixarem el background i li posarem verd de fons:
body { margin : 0 auto; height : 100%; width : 100%; background : #14161f #67Bd2a url('images/bg2.jpg') no-repeat fixed center top; font-size : 12px; font-family : Verdana, Arial, Helvetica, sans-serif; }

Encara tenim el peu del disseny antic. Eliminar-lo i, un cop eliminat fer aquest espai ms petit:
#footer { background: url('im ages/foot. jpg'); border: none;} #footer { height : 200px; 50px; clear : both; margin : 0; padding : 0; background :#67bd29;}

Ara manca baixar la fulla per a veure nvols per la part de dalt. Amb la funci del veure informaci dels estils veien que lelement superior s la capa #pagetop, aix que anem a editar-la:
#pagetop {margin-top : -13px; height : 90px; 129px;}

Per continuem tenint enganxada la fulla a la part superior, aix que afegirem un marge en la part superior:
#page { background-color : white; margin-bottom: 20px; margin-top: 80px; width : 800px;}

La franja negra superior ha de tenir una mica de blanc per sobre:

#pagetop {margin-top : -13px; 0px; height : 129px;}

Ara mancaria fer visibles els dos enllaos superiors de la capalera: About i Home. Fixeu-se que sn ocults darrere la franja negra. Seleccioneu-los amb la funci del veure informaci dels estils per veure tots els estils afectats. El primer s canviar la posici:
#nav li { float : right; margin-top : 10px; 50px; list-style : none;}

Tamb hem de moure les opcions de navegaci ms a la dreta:

#nav { text-align : right; margin-right : 245px; 190px; font-weight : bold; }

Desprs canvem tamany i color. Els noms no perqu anullarem lopci de generar ms pgines esttiques. Per a posar els links de navegaci com els del bloc real sha deditar larxiu header.php I posar enllaos absoluts:
<div id="pagetop"> <ul id="nav"> <li><a href="http://www.portadeldelta.cat/blog/">Inici bloc</a></li> <li><a href="http://www.portadeldelta.cat/">Inici web</a></li> </ul></div>

Per canviar el tamany I el color:

#nav li a { color : #161822; #349bd5 text-decoration : none; font-size : 20px; margin-right : 20px; font-family : "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; Georgia, "Times New Roman ", Times, serif; }

#nav li a:hover { color : #414861; #80c0e5; text-decoration : underline; } Ara resta canviar la font I colors dels diferents estils del text:
h1, h2, h3, h4, h5, h6 { font-family : "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; Georgia, "Times New Roman", Times, serif;} h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {color : #333; #349bd5; } h2 a {font-size : 22px; margin-left : -15px; padding : 10px 45px 10px 15px; color : #161822; #0059a9; text-decoration : underline; } a, h2 a:hover, h3 a:hover {color : #14161f; #0059a9; text-decoration : none; }

Els enllaos visitats es marquen en verd en el text sn aquests:

.entry p a:visited {color : #b85b5a; #6b9144; text-decoration : underline;}

I ara restaria traduir la data i algun detall ms de langls i a ho hem de fer en larxiu index.php: Canviar el text Posted in per Creat en o el vulgau.
jS, Y') ?> per <?php the_author() ?> </small>, restaria aix: <?php the_time('j F Y') ?>.

I despus de la etiqueta the_time, canvieu el by per un per <small><?php the_time('F i el format de letiqueta the_time, que

Generadors de temes de WordPress

Tamb s possible generar un tema de WordPress sense saber res de CSS si fem servir alguna eina pensada per a tal efecte. Sempre s millor saber una mica de CSS per si hem de fer modificacions en el tema generat, per amb una metodologia de prova i error tamb ens en surtirem. WordPress Theme Generator (http://www.yvoschaap.com/wpthemegen/) s una bona eina per a generar temes senzills de manera fcil i sense coneixements de CSS, xHTML ni PHP. Permet personalitzar el background, la capalera, els colors, les fonts tipogrfiques i la distribuci delements en pantalla. Un cop configurat el tema que volem ens el descarreguem en format zip per a poder-lo pujar mitjantant el WordPress. Tamb el podem compartir i emmagatzemar i continuar editant-lo ms tard.

Templatr (http://templatr.cc/) s una altra eina que permet generar temes ms elaborats perqu ofereix la possibilitat de personalitzar ms elements de la grfica i estructura del tema. Per a fer servir aquesta eina s millor tenir nocions dHTML o algun altre llenguatge de programaci web, per no s imprescindible. Tal i com ens indica en la columna de lesquerra primer hem de triar la distribuci delements en pantalla que volen i aplicar-la fent doble clic sobre el grfic. El segon pas es pujar els grfics que vulgam fer servir en el nostre disseny, i el tercer pas s definir els estils per a cadascun dels elements del bloc amb leina que tenim a la part dreta de la pantalla. Un cop acabat el disseny el desarem i linstallarem.

El tercer pas: Use the Designer, s el ms complexe. Hem danar definint com volen que es vegin els diferents elements de lHTML, b a travs del desplegable Section triem lelement o clicant sobre la pantalla lelement que volem canviar. En el desplegable Action triarem la propietat a canviar i sota aquests desplegables apareixeran automticament els diferents atributs que podem personalitzar.

Hem de seleccionar el bot Save un cop personalitzat perqu emmagatzemi els valors que volem, i recordeu deixar seleccionat el checkbox Show Highlight Colors de la dreta perqu el que fa es mostrar amb un color destacat lelement sobre el que estem treballant i ens serveix dorientaci. A continuaci podeu veure una captura de pantalla amb lordre de capes de la plantilla de leina per a fer-vos una idea ms aproximada de la seva estructura. Recordeu que aquesta informaci i ms la teniu disponibles amb el Web Developer Tool si obriu aquest marc en una finestra o pestanya nova i seleccioneu la funci Information > Display Div Order o Display Id & Class Details. La funci Information > Display Element Information ofereix molta informaci sobre lelement que seleccioneu en pantalla.

Information > Display Div Order

Gua de Recursos
RECURSOS
Nom WordPress Documentaci oficial URL Wordpress.org http://codex.wordpress.org/es:Mai n_Page Wordpress.com Observacions Web oficial del gestor de blocs WordPress des don baixar-lo Documentaci oficial de WordPress en castell Servei gratut per donar-se dalta i fer servir el gestor de blocs sense necessitat dinstallar res en un servidor propi. T limitacions. Temes i recursos sobre WordPress Directori de temes de WordPress que permet cercar amb filtres. Directori de temes de WordPress. Directori de temes de WordPress. Comunitat en castell sobre WordPress Directori de temes gratuts de WordPress. Directori de temes de WordPress. Eina per a cercar temes de WordPress. Wiki de de Plugins i Temes en espanyol per WordPress Directori de temes gratits de WordPress Generador grfic online de plantilles Generador grfic online de plantilles Extensi per a Firefox i Chrome que facilita molt el treball dels desenvolupadors web.

WordPress.com

WPCrowd Theme Grade Templatelite Best WordPress Themes TodoWordPress FreeThemeLayouts.com WordPressTheme.com Theme Finder Plugins y Temas en Espaol Free WordPress Themes 4 U WordPress Theme Generator Templatr Web Developer Toolbar

http://wpcrowd.com/ http://www.themegrade.com/ http://www.templatelite.com/ http://www.bestwpthemes.com/ http://www.todowp.org http://www.freethemelayouts.com http://www.wordpresstheme.com http://themefinder.wpcandy.com/ http://ciberprensa.com/wiki/index .php/Portada http://www.freewordpressthemes 4u.com/ http://www.yvoschaap.com/wpthe megen/ http://templatr.cc/ http://chrispederick.com/work/we bdeveloper