_Build Your Own Wicked WordPress Themes 2010 Traducido

1

fillBlip

Resumen de contenidos PReface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv 1. IntRoducing WoRdPRess . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2. Planificación Ynuestro Tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3. Tema Diseño 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 4. Tema FRameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 5. Avanzado Tema Construction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 6. Artefactos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 7. Tema Opciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 8. Venderse Ynuestro Tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Índice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

ESTRUCTURA YOURPOSEA WICKEDTEMAS DE WORDPRESS BY ALLAN COLE RAENA JACKSON ARMITAGE BRANDON R. JONES JEFFREY WAY

Licenciado para estupendo! el libro electrónico www.wowebook.com

3

iv

EstructuraYnuestro propio maloWoRdPRtemas de |ess| por el col de Allan, Raena Jackson Armitage, jones de Brandon R. , y JeffreyWay Derechos de autor © 2010 pt de SitePointy. Limitado. PRogRser el diRectoR: AndrésTetlaw Technical EditoR: Luis Simoneau JefeToficina de |echnical|R: Kevin Yank Imprimir historia: Primera edición: Agosto de 2010 Indexer: Federiquito Brown Editor: Kelly Steele Diseño de cubierta: Alex Walker

Anuncio de derechos Todos los derechos reservados. Ninguna parte de este libro se puede reproducir, almacene en un sistema de recuperación o transmita en cada forma o por cualquier medios, sin el previo escrito permiso de el publisheR, exceptúe en casa el caso de escrito citas personificado en casa artículos o revisiones críticos.

Anuncio de la responsabilidad El autor y editor tenga hecho cada esfuerzo para asegure el exactitud de el información en esto. HoweveR, el la información contenida en este libro es vendida sin garantíay, exprese o implique. Ni los autores y pt de SitePointy. Limitado., ni sus comerciantes o distribuidores, estará agarrado sujeto a todos los daños y perjuicios para causarse o directa o indirectamente por las instrucciones contenidas en este libro, o por los productos de software o hardware descritos en esto.

Tranuncio de |ademark| Antes que indicar cada ocurrencia de un marca registrada denomine como tal, este libro usa el denomina sólo en una moda editorial y al beneficio del dueño de marca registrada sin la intención de la infracción del marca registrada.

Publicado por el pt de SitePointy. Limitado. 48 calle de Cambridge Collingwood VIC Australia 3066 Web: www.sitepoint.com Correo electrónico: [email protected] ISBN 978 - 0 - 9804552 - 9 - 8 Impreso y limitado a Canadá

Licenciado para estupendo! el libro electrónico www.wowebook.com

v

Sobre col de Allan Allan Col sea A red diseñador y desarrollador basado en casa Brooklyn, NY. Él especializa en casa de fin delantero usuario experiencia yWpersonalización de ordPress. Allan está desarrollando corrientemente un negocio pequeño arraigue en la costumbreWordPress diseña y el desarrollo llamado el |fthrwght| ( emplumeWocho, http://fthrwght.com/). Se puede encontrar en línea a su sitio de cartera(http://temp.fthrwght.com/ ) y suWordPress blog (http://allancole.com/wordpress/ ).

Sobre Raena Jackson Armitage Raena Jackson Armitage es un desarrollador de red australiano con una base en manejo satisfecho, el habla público, y entrenamiento. Cuando ella's no pensamiento casi el Web, ella amores tejido, juego, todo-día desayunos, y ciclismo. Raena'la s personal sitio Web está a http://raena.neT.

Sobre la bRjones de R. de |andon| De soleado Dialecto del Sur California, Brandon Jones tenga sido arte de diseñar, dibujo, fotografiar, y codificación el mundo alrededor de él para el pasado varios años. Voto en contra para picar unos medios y pegue se con ello, Brandon tiene una parte ancha rango de talentos eso tenga permitido para trabajo en proyectos alcance de grungy digital arte equipos para Fortuna 500 creación de prototipo de software. Wel |ith| una base fuerte en diseño gráfico, ilustración digital, y diseño de interfaz de usuario ( así como un |smat| -- |tering| de los lenguajes de programación de fin delantero ), Brandon ha disfrutado de trabajo con una variedad de estudios de adjudicación de beneficios ganador por su |caree| jovenR. Ha un grado de la universidad de California politécnico a Pomona en el diseño gráfico, pero cuentas se como un grandemente autodidacta y propio-motive el diseñador con un deseo para jugar un papel más grande en el |communit| de diseñoy. Su sitio personal se puede encontrar a http://makedesignnotwaR.com/.

5

Sobre GodofredoRey Way Jeffrey Wlos trabajos de |ay| para Envato, donde él maneja una plaza del mercado de código llamado CodeCanyon, y corre una red popular desarrollo seminario sitio, Nettuts+. Él gaste A lote de su libere tiempo escritura, la mayor parte de el recientemente con el liberación de Photoshop a HTML(http://rockablepress.com/books/photoshop-to-html/). Más allá de código, Jeffrey ama para jugar guitarra y avergüence su esposa en entrenamiento, Allie, cerca jugar Acero Dragón canciones ruidosamente con el las ventanas enrolladas abajo en el frente de los teatros de película. Yel |ou| puede hacer una visita su sitio Web y decir hola al |ww| w.jeffrey-way.com.

Sobre elTeditor de |echnical| Louis Simoneau joined SitePoinT yon 2009, afteR traveling atrásm holas native MontréaL To Calgary, Taipei, und finalmente Melbourne. He ningúnw consigas To spend holas días learning abouT arrulloL nosotrosb tecnologías, An activity thaT had previamentesido relegado esta noche y los fines de semana. Disfruta alimento de salto sofisticado, aromático, y todos los individuo de acciones grotescas y desalmadas de cosasy. Su sitio Web personal es http://louissimoneau.com/ y su último proyecto de |blog| es http://growbuycookeat.com/.

Sobre el jefeTfuncionario de |echnical| Como el jefeTechnical Officer for SitePoint, Kevin Yel |ank| permanece al tanto de todo ese está nuevo y excitando en el | technolog| de redy. Mejor conocido para su libro, Estructura Ynuestro Posea Base de datos Manejado Web Sitio Usar PHP & MySQL, él también

Licenciado para estupendo! el libro electrónico www.wowebook.com

vi

de co autor simplemente JavaScript con Cameron Adán y toda cosaYel |ou| conoce CSS esWrong! con Rachel Andrew. En casa adición, Kevin anfitriones el SitePoint Podcast y coescrituras el SitePoint Tech Times, A libere envie por correo electrónico el boletín de noticias que sale a más de 240,000 subscriptores a nivel mundial. Kevin vidas en casa Melbourne, Australia y disfrutan habla a conferencias, como bien como visita amigos y familiar en Canadá. Él'la s también apasionado sobre tocar un instrumento musical improvise el teatro de comedia con Impro Melbourne ( http://www.impromelbourne.com.au/) y piloteando encienda aeronave. Kevin'el |blog| personal de la s esYees, soy canadiense (http://yesimcanadian.com/ ).

Sobre el sitioPoint SitePoint especializa en casa edición diversión, práctico, y fácil de comprender contenido para Web profesionales. Visit http://www.sitepoint.com/ para acceder nuestros |blogs|, libros, boletines de noticias, artículos, y foros de comunidad.

Agradecimientos especiales El engranaje de patín de hielo usado en el tiro de cubierta es la cortesía del oleaje azabachado, Greensborough.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Mis capítulos son dedicados a ese tipo o gal que decidieron para vaya exterior en A miembro, y figura exterior A vía para tomar el control de su propio |destin|y. -Allan Cole Para Leanne, bagazo, Mathew, y Mike. -Raena Jackson Armitage que esto es para todos allá afuera que esté trabajando para hacer que elWel |eb| un lugar abierto y en conjunto maravilloso para aprender, trabaje, y |pla|y. -BRjones de R. de |andon| To the little guy who quietly rested undeR my oficinasilla para horas sobre horas mientras que YO trabajado en este libro. Aquí's para usted perrito. -GodofredoRey Way

Licenciado para estupendo! el libro electrónico www.wowebook.com

7

Tcapaz de contenidos Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv que Deba Lea Esto Libro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv lo que's en casa Esto Libro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi WheRe para Hallazgo Ayuda. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii el SitioPoint Foros. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii El Libro's Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii el SitioPoint NewsletteRs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii el SitioPoint Podcast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii Ynuestro Realimentación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii reconocimientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii Raena Jackson Armitage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii Allan Desfiladeroe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix bRandon R. Jones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix GodofredoRey Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix convenciones Usado en casa Esto Libro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx código Muestras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx Propinas, Notas, y Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi

El capítulo 1 .... 1

introduciendo WordPress. . . . . . . . . . . . . . . . . . . . . . . . . .

A Escrito Historia de WoRdPRess . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ........2 WoRdPRess Today . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Porque WoRdPRess? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 3 WoRdPRess.com y WoRdPRess.oRg. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Lo que sea A ¿Tema? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Porque llegue a ser A WoRdPRess tema ¿diseñador? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Y finalmente … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......7

planificación de capítulo 2 Ynuestro Theme. . . . . . . . ........................ 9 Lo que haga usted principio ¿con? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Pedades y Posts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

x

Licenciado para estupendo! el libro electrónico www.wowebook.com

Medios y Enlaces. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

9

Costumbre Campos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Categorías y Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Comentarios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Artefactos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 El Lazo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Menús . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Definir Success . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Arrendamiento Ynuestro Contenido Dirección el Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Acción Ynuestro ReseaRch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Tema ReseaRch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Plugin ReseaRch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Caligrafía ReseaRch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Keep en Scouting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Evitar FeatuRe Empastamiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Planificación para el Audiencia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Planificación para PublisheRs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Planificación para ORganization y Apresure seRARchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 El Tema Mapa del sitio y WiRefRame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 El Mapa del sitio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 El WiRefRsere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Sólo Reencauchaje … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

tema de capítulo 3 Diseño 101. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 El Principios de WoRdPRess Tema Diseño. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Color. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 BRanding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 TypogRaphy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Visual Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Esquema y Composición. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

El Anatomía de A WoRdPRess Tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 El HeadeR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 El Navegación Hombresu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Licenciado para estupendo! el libro electrónico www.wowebook.com

xi

El Lazo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Pagination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 SidebaRs y Artefactos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 El FooteR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 El Inicio Pedad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 El StandaRdPedadTemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 El Sencillo Post Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 El ARcebollino, AuthoR, Category, y Tag Pedad Templates . . . . . . . . . . . . . . . . . . . . . . 67 El MarRch Resultados Pedad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 El 404 Pedad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 StandaRd Estilo para HTML Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

70 ExtRA FeatuRees. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 No haga Permiso Algo Exterior ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Dirigirse Ello Todo Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

tema de capítulo 4 Frameworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Porque uso A fRamework? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Niño Temas: El Dolor punzante Way para Estructura en A FRamework . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Cómo haga escojo una gRcoma fRamework? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 FRameworks Worth Comprobación Exterior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 FReebies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Payuda FRameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Así que fRamework sea el ¿mejor? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Edificio A Simple Niño e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 PReparing Ynuestro Lona. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 CRcomida Ynuestro Niño Tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Mirar Stylish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Keep Paprobar Lejos a Ésos Estilos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 A FRame para Work Ingenioh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

El capítulo 5 se

adelantaba Tema Construction. . . . . . . . . . . . . . . . . . 99

Cómo Templates Wok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Licenciado para estupendo! el libro electrónico www.wowebook.com

xii

Rápido y sucio Template Apresure seRARchy RefeRence . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 El Template Apresure seRARchy y Niño Temas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Temático's Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Edificio A Estilo de revista Inicio Pedad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Desembarazarme de Eso Barra lateral. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Incluyendo Archivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Modificarme el Peatón. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Ganchos y FilteRs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Sumar A Favicon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Temático's Ganchos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Dirigirse Ello Todo Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Tiempo para A BReak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Alcahuetear Ynuestro Niño Tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Sumar A Social Medios Botón para Ynuestro Posts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Exhibición un Autor Bio en A Post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Posts con Extractos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Calentado al rojo Sugerencias para TemaRs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Comentarios, Comentarios, Comentarios ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 A Lugar para Toda cosa, y Toda cosa en casa Su Place . . . . . . . . . . . . . . . . . . . . . . . . . 129 A Caso de Equivocado Identidades. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

13

Keep En Explorar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

Capítulo 6

Widgets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

UndeRposición Artefactos y Widget-Ready AReas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Omisión Artefactos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Temático'Widget- de sRA de |eady|Reas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Artefacto Aumento de precio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Sumar A Costumbre Widget-Ready ARea para Ynuestro Tema. . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Registrarse A Widget-Ready ARea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Mostrar un Widget-RA de |eady|Rea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Quitar Widget-Ready AReas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Sumar Costumbre Artefactos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 IntRoducing el Artefactos API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Licenciado para estupendo! el libro electrónico www.wowebook.com

xiii

CRcomida el Artefacto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Resumen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

tema de capítulo 7 Opcións . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 CRcomida un Opciones Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Colocación el GRoundwork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Añadir un AdminPanel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 El Opciones Forma. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Usar Opciones en casa Ynuestro Tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

Alterar CS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Alterar Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Alterar Funcionalidad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Sumar Color Variants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 El Opciones Forma. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Sumar el Estilo Hojas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Costumbre Pedad Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Shortcodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Edificio Ynuestro Posea Shortcodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Adaptado a las especificaciones Menúes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Con GRcoma Pdeba … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

Capítulo 8

de venta Ynuestro Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

177 UndeRposición el GPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 You'Re No Sólo Venderse el Tema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Apoyo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Video Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Convenience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Dual Licencia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Lo que Marcas A Tema Venta? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Múltiple Color Plans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Costumbre ConfiguRation Opciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 FReebies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

Licenciado para estupendo! el libro electrónico www.wowebook.com

xiv

EmbRmarcar de un golpe el Último Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

15

Kel |eep| que ello el estudiante, simple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Tirón En casa el Riñones y Resuelva PRoblems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Te, Te, Te. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 BRowser Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Plugin Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Educar el Comunidad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 ThRee Avenidas para Venderse Ynuestro Temas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 UnoWebsite Ptema de e. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Ynuestro Posea Plaza del mercado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Escoger un Existir, Respetable Plaza del mercado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Empapada Ello Todo Subida. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

195

Licenciado para estupendo! el libro electrónico www.wowebook.com

PReface

WordPress es fácilmente la mayoría ampliamente la plataforma de |blogging| usado en elWeb. Aún más | impressivel|y, administró para alcanzar este punto en sólo seis años-sin embargo, para ser el |fai|R, eso'la s una vida en elWmundo de |eb| ! agradezca a un |communit| próspero y vibrantey, WordPress ha florecido de un tenedor de una plataforma de |blogging| vieja, llame b2, en un fácil de usar, frecuentemente actualice, y el osadura altamente extensible. While años ago yoT wasn'T uncommon To spend ciens of dólars on A powerfuL contenT manejosistema,WordPress es el 100% libere para todos. Lo que's más, lo'la s abre fuente, licenciado bajo la licencia (GPL) pública general. Yel |ou| tendrá gusto en oir decir que, asumiendo tiene una comprensión modesta de PHP, construir su primero WordPress tema sea realmente bastante fácilmente-alegremente easy, en casa hecho ! With tal comodidad, uno pueda asuma incorrectamente que el nivel de flexibilidad o energice proveído porWordPress falta. Luckily, esto está lejos de ciertamente. Sin embargo podría se haber creado inicialmente específicamente para las aplicaciones de |blogging| ,WordPress'la s energiza se haya enjaezado desde por los diseñadores y desarrolladores de talentoso, construyendo toda cosa de foros para comercio electrónico aplicaciones. WordPress sea sólo limitado cerca nuestro imaginaciones y conjuntos de habilidad, agradezca a una infraestructura de |plugin| poderosa y flexible. Para los diseñadores de red, aprendiendo cómo desarrollarse paraWordPress hace accesible las oportunidades enormes. En uno mano, usted puede sea capaz para proporcione clientes con dinámico sitios eso sea robusto y fácilmente para actualización a una fracción de lo que puede el gasto para un sistema (CMS) de manejo de la empresa satisfecho. Por otra parte, usted puede también tenga el habilidades para desarrolle se general propósito temas para venta en el Web. El mercado en hecho listoW¿los temas de ordPress han detonado en los últimos años, así por qué no entrar en el efecto?

Que deba leer este libro Este libro es dirigido a los diseñadores de red de fin delantero mirar a ampliar las actividades de construir sitios estáticos o los proyectos con base en PHP simples en el mundo deWdesarrollo de tema de ordPress. You deba ya tenga a menos intermedio conocimiento de HTML y CSS, como ésos las tecnologías son como importante paraWtemas de ordPress como ellos es los sitios Web estáticos. Wla e asumirá también que

17

sabe A poco pedacito de PHP; mientras que allí's ningún requerimiento para usted para sea A programación zumbido, usted deba comprender al menos los conceptos tal como si las declaraciones, curvas, funciones y variables, y la vía PHP genera el HTML para la salida. Mientras que usted puede acomodar según especificaciones desde luego un tema sin usando ningún PHP, los rasgos más avanzados mostrados en el segundo la mitad del libro requieren cierta familiaridad con estas bases.

Licenciado para estupendo! el libro electrónico www.wowebook.com

xvi

Lo que's en este libro Cerca el fin de esto libro, usted puede sea capaz para estructura atractivo, versátil, y poderoso WordPress temas. Yel |ou| tendrá también una comprensión buena de lo que hacen que un que tema exitoso y cómo vender sus |effectivel| de temasy. Esto libro comprende el ir detrás ocho capítulos. You pueda lea de comienzo para fin para A de ganancia complete comprensión de el asunto, o salto alrededor si usted sólo necesidad A refresco en A tema particular. Capítulo 1: IntroducirWordPress Antes que nosotros buceamos en aprender todos los pormenores de arte de diseñar y edificio su tema, nosotros tendremos una mirada rápida a lo que exactamente WordPress es y lo que lo'la s hecho de. Wla e cubrirá también porque usted tuvo quiera ser un diseñador de tema en primer lugar. Capítulo 2: PlanificaciónYnuestro tema Tla o construye un tema verdaderamente utilizable, debe comprender las necesidades de las personas que lo estarán usando: ambas esas visita el sitio, y esas edición el contenido. Brandon R. Jones, el desarrollador de varios de el Web's con calor-vendiéndose temas, pueda paseo usted completamente lo que usted deba considere antes que aún empieza su diseño. Capítulo 3: Diseño de tema 101 Edificio en el |chapte| previoR, Brandon ahora le toma en la fase de diseño en serio. Mostrará usted cada aspecto del tema de WordPress que necesita considerar en sus diseños, con una galería de los ejemplos mejores de la Web para servir de inspiración. Capítulo 4: Osaduras de tema YOn recenT años, WordPress e osaduras have cañahejasT onto the escena; they're ningúnw consideradola mejor vía para construir los temas poderosos rápidamente sin tener que reescribir los mismos archivo template sobre y |ove|R. En este |chapte|R, Raena Jackson Armitage de nuez de WordPress presenta todas las razones usted deba sea usar A osadura, paseos usted completamente algunos de el la mayor parte de el popular opciones, y le introduzca para el un estaremos usando para el

resto del libro: Temático. Capítulo 5: Construcción de tema avanzada A WordPress tema's grandeza sea más que superficialmente. En casa esto chapteR, Raena toma usted más allá de CSS simple desollando y muestran que usted cómo tener inclinaciónWordPress'aumento de precio de s para su puede, agradezca a Thematic'conjunto de s de ganchos, filtros, y plantillos. Capítulo 6: Widgets Uno deWordPress'los rasgos de asesino de s son su |functionalit| de artefactoy, que proporcionan usuarios con elability To easily anunciod dynamic contenT To various áreas yon the sitio. YOn this chapteR, Thematic expertoAllan Cole muestra usted cómo hacer su tema leído del artefactoy, así como cómo crear sus propios artefactos a la medida para empacar con ello.

Licenciado para estupendo! el libro electrónico www.wowebook.com

xvii

Capítulo 7: Opciones de tema Los más exitosos temas en el mercado permiten usuarios para enteramente acomodar según especificaciones les para convenir un sitio'propósito de s. Si ello'la s que crea unas página de opciones a la medida para permitir usuarios para modificar su tema'|behavio| de sR, sumar color y esquema variantes, proporcionar alternativa página plantillos, o desarrollar sus propios |shortcodes| a la medida, Allan mostrará usted cómo volver su tema en un camaleón verdadero. Capítulo 8: VenderseYnuestros temas Como coloque el gerente de elWeb'la s más grandeWplaza del mercado de tema de ordPress, JeffreyWel |ay| sabe algo acerca de que hacenWlos temas de ordPress se van a la carrera el proverbialy virtual-estantes. En este |chapte|R, él dará le los secretos que ayudará a tomar sus temas a la parte superior de los mapas.

WheRe a Find Help SitePoint tenga A medrar comunidad de red diseñadores y desarrolladores listo y espera para ayuda usted exterior si continúe con contratiempo. We también mantiene una lista de las errores conocidos para este libro, que puede consultar para las últimas actualizaciones; los |follo| de detalles

El sitioPforos de |oint| El foro de SitePoints1 sean los foros de discusión donde puede hacer preguntas sobre algo relacionado con red desarrollo. You mamáy, de curso, respuesta preguntas también. Eso's cómo A discusión foro trabajos de sitio-ciertas personas preguntan, cierto |answe| de personasR, y la mayoría hace algo de ambos. Compartir su conocimiento beneficia otros y fortalece el |communit|y. una gran cantidad de diseñadores y desarrolladores interesantes y experimentados de red habitan allí. Ello's un buen trecho para aprender nuevo material, tienen preguntas respondidas en un |hurr|y, y tenga una ráfaga.

El libro'sWebsite Localizado a http://www.sitepoint.com/books/wordpress1/, el sitio Web que soporta este libro dará le acceso

19

a lo siguiente instalaciones.

El A de códigoRchive Como progresa por este libro, notará varias referencias al archivo de código. Esto es un archivo de ZIP descargable que contiene cada línea del código fuente de ejemplo eso'la s imprimida en este libro, así como otros documentos justificantes. Si usted quiera practicar fraude ( o ahorre se del síndrome de túnel carpiano ), adelante y descargue el archivo.2

1 2

http://www.sitepoint.com/forums/ http://www.sitepoint.com/books/wordpress1/code.php

Licenciado para estupendo! el libro electrónico www.wowebook.com

xviii

Actualizaciones y eRata Ningún libro es perfecto, y esperamos que los lectores vigilantes serán capaz de mancharse al menos un par de equivocaciones antes del fin de éste. La página de erratas3 registrado'el sitio Web de s siempre tendrá la última información sobre conozca tipográfico y codifican errores.

El sitioPboletines de noticias de |oint| En casa adición para libros semejante esto uno, SitePoint publica libere correo electrónico boletines de noticias, tal como el SitePoint Tech Times, SitePoint Tribune, y SitePoint Diseño Vpor ejemplow, para denomine A few. En casa , usted puede lea sobre las noticias últimas, las liberaciones, tendencias, propinas, y técnicas de producto para todos los aspectos de desarrollo de red. Firme a unos o más boletines de noticias de SitePoint a http://www.sitepoint.com/newsletter/.

El sitioPoint Podcast Join the SitePoinT PodcasT tém foR noticias, entrevistas, opinión, und fresh thinking foR nosotrosb desarrolladoresy diseñadores. Wla e discute los últimos tópicos de industria de red, los portavoces de huésped presentes, y entreviste alguno del mejor tiene cuidado en el |industr|y. Yel |ou| puede adquirir en el último y los |podcasts| previos a http://www.sitepoint.com/podcast/ , o subscriba por la via de yoTun.

Y nuestra realimentación Si no pueda encontrar una respuesta por los foros, o si desea avisar nos para cualquier otrorazón, the seanT place To escritoe yos [email protected]. We have A de |staffe| buenod emaiL supporT sistemaconjunto subida para huella su preguntas, y si nuestro apoyo equipo miembros sea incapaz para respuesta su inquiera, ellos puede envie ello directamente para . Sugerencias para mejoramientos, como bien como

anuncios de cualquier equivocaciones usted puede encontrar, es especialmente de bienvenida.

Acknowledgments Raena Jackson Armitage En primer lugar, agradecimientos para todos a SitePoint-pero especialmente Andrew, Luis, Kelly, Georgina, y Shayne, todo de a quién jugado su parte para látigo mi material en forma y marca ello todo sonido más dolor punzante. Agradecimientos también para Lukas y Cindy y todos en Jarrett Calle; para Mathew y Tim para ser alentar; paraAvi, Beth, Dan, donna, ed, Karl, dR. Mike, y para todos que alentaron un pollito curioso, tímido para tomar IT seriamente como un |caree|R.

3

http://www.sitepoint.com/books/wordpress1/errata.php

Licenciado para estupendo! el libro electrónico www.wowebook.com

xix

Allan Cole En primer lugar, he querido agradecer Luis Simoneau y el resto de los tipos de SitePoint para siendo paciente y un - |derstanding| con los plazos. sé che debe ser duro para coordinar y poner todo de este |togethe|R. he querido agradecer mis ricardos de Adria amigos por inspirarme para escaparse de mi comodidad divide en zonas y hace algo fuera de la norma. Ella es útil también con algo de la corrección de pruebas temprano en, que sea sido subido de precio grandemente. Gracias a pequeño grupo de árboles en una pradera de Ashley Moore y Sabrina Smith, para sus propinas en escribir un lote entero en un poco de cantidad del tiempo. Gracias a Ian Stewart además para proporcionar tal vía fácil paraWlos individuos de acciones grotescas y desalmadas de ordPress se como para aprender y compartir código con el |communit|y. Lastly, un montón de agradecimientos salga a mis padres, Godofredo y col de Rese; Darien Birks, Lorenzo Atoigue, y el restoof my Tolerarn und Maryland/Washington family foR theiR continúed supporT yon alL of my esfuerzos.

BRjones de R. de |andon|

Gracias a elWordPress descorazona grupo de desarrollo: sin usted tipos y gales, ninguno de esto aún es posible. Agradecimientos también a JeffreyW|ay| y los enteros Envato provee de personal; los autores imponentes a ThemeForest; Nettuts; WooThemes; los Shane y Peter Inc. cantaron; todos los diseñadores y desarrolladores imponentes cuyo trabajo era incluido en casa esto libro; y todos de otro modo trabajar para marca el Web un lugar abierto y en conjunto maravilloso para trabajar.

GodofredoRey Way Ten no lo sido para la instrucción masiva que yo recibir después de ser contratar por Envato en 2008 , yo nunca tenga sido afrontado el habilidad conjunto, deje sólo el opportunity, para escritura para SitePoint. YO sea para siempre agradecido a CollisTa'eed, Cyan Ta'eed, Skellie, y Jasón Ellis por enseñarme tanto como tienen. Secondly, aprendí un montón, mucho, bastante de un gran número de diseñadores fantásticos de red en ThemeForest.net,

21

que enseñado exactamente lo que ello toma para sea A exitoso y provechoso Wcódigo de ordPressR. Muchas de sus trucos y técnicas han hecho su vía en el último capítulo de este libro.

Licenciado para estupendo! el libro electrónico www.wowebook.com

xx

Convenciones usadas en este libro Yel |ou| puede el anuncio que hemos usado ciertos estilos tipográficos y de esquema a lo largo del libro para significar los tipos diferentes de la información. Esté atento lo siguiente artículos.

Muestras de código Código en este libro será mostrado usando una fuente de anchura fija, quiera así: el día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfectoel día de un verano perfecto era un día hermoso para un walk in el parque. Los pájaros estuvieron cantando y los niños eran toda la parte posterior a la escuela.

Si el código va a ser encontrado en el libro'la s codifica archivo, el name del archivo aparecerá en la parte

superior del listado de programas, así: example.css

.peatón{ color de base: #CCC; superior fronterizo: #333 de sólido de 1px; }

Si sólo parte del archivo es mostrada, esto se indica por la palabra extracto: example.css(extracto)

superior fronterizo: #333 de sólido de 1px;

Si adicional código sea para sea insertado en un existir ejemplo, el nuevo código pueda sea mostrado en casa negrita: funcione anime () { nuevo_la variable = " hola"; }

Licenciado para estupendo! el libro electrónico www.wowebook.com

xxi

Donde el código existente es requerido por el contexto, antes que la repetición todo el código, una elipsis vertical se mostrará: funcione anime () { ⋮ retorne nuevo_variable; }

Ciertas líneas de código son propuestas para ser comenzar una línea, pero les hubimos tenido que enrollar debido a las limitaciones de página. A➥ indique una rotura de línea que existe para el formato propone |onl|y, y se deba ignorar: URL.open ( " http://www.sitepoint.com/blogs/2007/05/28/user-style-she

23 ➥los etes-venga-de-edad/");

Sugerencias, Notas, yWarnings fillBlipfillBlipély, You! Tip le darán los indicadores pequeños útiles.

fillBlipfillBlipAhem,

me excuse …

Las notas son los apartes útiles que son relacionados-pero no crítico-al tema a la mano. Considera les como los bocados extras de la información.

fillBlipfillBliphaga

SuReY|ou| siempre …

… preste atención a estos puntos importantes.

fillBlipfillBlipWexterior

de |atch| !

Wlos |arnings| realzarán cadas |gotchas| que son probable que el viaje que usted se levanta a lo largo del |wa|y.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Licenciado para estupendo! el libro electrónico www.wowebook.com

IntRoducing WoRdPRess

1

25

por JeffreyWay Así, usted ha sido tomar el rancho casi con sitios Web para A poco mientras que ningún, y usted ha decidido para tome la zambullida y aprenden cómo diseñar temas para WordPress. Tal vez usted es un |blogger| se, y usted quiere tomar el próximo paso por cambiar el diseño de su sitio, o tal vez ha oído que allí'la s un mercado fuerte para hecho listo temas de WordPress y quiere entrar sobre el terreno |floo|R, por decirlo así. Yel |ou| es probablemente que siente comezón para empezar construir su primer tema de WordPress, pero antes que nosotros saltamos a, una idea buena para considerar porque somos aquí, y cómo llegamos. Este capítulo dará le algo de la base enWordPress por lo general y temas de WordPress en el |particula|R. En casa el ir detrás dos capítulos Brandon pueda tome usted completamente el proceso de planificación y diseñar su tema; entonces Raena se hará cargo de introducirlo al código detrás temas de WordPress y el Temático osadura, que pueda marca su vida como A desarrollador mucho más agradable. Después de eso, Allan le tomará por los tópicos ligeramente más avanzados de artefactos y las opciones de tema a la medida; y finally, ello's de nuevo, Jeffrey, atrás para proporcione algunos perspicacia en cómo para venta su temas y beneficio desde ellos. Aquí vamos !

Licenciado para estupendo! el libro electrónico www.wowebook.com

2 estructura de nuestro propio tema de WoRdPRess

una historia breve deWoRdPRess Hombrey of you mamáy be unaware thaT WordPress yos based on A blogging platform ingenioh A modosT adopcióníndice-A few thousand instalaciones-builT yon a mediados de 2001 und called b2.1 RemoloneeL Valdrighi, ellos developeR, el desarrollo manejado para ásperamente dos años antes de la plataforma'los usuarios de s empezaron al anuncio que tuvo aparentemente abandone el proyecto. Afortunadamente para miles sobre miles de usuarios de WordPress, un ventilador de b2 de detalle eran Mateo Mullenweg, el creador deWordPress. Agradecimientos para el conveniencia de en línea archivos, nosotros pueda rastro el inicio de WordPress atrás para un |entr| de |blog| sencilloy,2 hecho por Mullenweg el 24 de enero, 2003: [… Mi b2 de software de tala no ha sido actualizado durante meses, y la parte principal de - el |veloper| ha desaparecido, y yo puede sólo esperanza que'|oka| de sy. Lo que para ? Wana, Textpattern buenas apariencias semejante toda cosa YO alguna vez necesidad, pero ello no parece a lo'la s yendo para licenciarse debajo algo políticamente pude estar de acuerdo. Fortunately, b2/cafelog sea GPL, que medios eso YO uso el existir | codebase| para cree A tenedor, integrar todo el fresco material eso Michel sea trabajar en

en este momento si sólo era alrededor. El trabajo nunca está perdido, como si yo tala de la cara del planeta un año de ningúnw, cualquier código que hice tiene libertad para el mundo, y si alguna otra persona quiera picarlo levante se que ellos. he decidido que este el curso de efecto yo tuve semejante para vaya en, ahora todo YO necesidad sea A denomine. Lo que deba ello ? Wana, ello pueda ser delicado para tenga el flexibilidad de MobiliarioType ( ataque ), el análisis de TextPattern ( ataque ), el |hackability| de b2 , y la comodidad de la estructuración de BloggeR. Someday, ¿derecho? -Mateo Mullenweg Esta fecha marca WordPress'cumpleaños de s-al menos de forma retrospectiva ! en ese de dos párrafos corto informando, llamado " el dilema de software de Blogging, " Mateo siembra una idea ése volverá finalmenteinto WordPress. OveR the course of 2003, along ingenioh Mike Poco, EsteraT did indeed parak b2 und prepare sela primera liberación deWOrdPress, que sea sido sido locutor finalmente el 26 de diciembre.

WoRdPRess Today Si nosotros salto adelante seis años, WordPress tenga ahora sido instalado arriba 22 millón tiempos, fácilmente hacer que ello la más popular plataforma de |blogging| en el mundo entero. Debido a su | extensibilit|y, literalmente miles de los |plugins| han sido construidos encima del osadura, tener en cuenta aumentó |functionalit|y, incluyendo el manipulación de sitios semejante trabajo tablas y wikis. Y, la mayor parte de el importantemente para , miles de los temas han sido desarrollados para darWOrdPress casi cualquiera mirada imaginable.

1 2

http://www.cafelog.com http://ma.tt/2003/01/the-blogging-software-dilemma/

Licenciado para estupendo! el libro electrónico www.wowebook.com

IntRoducing WoRdPRess 3

Mateo tenga desde entonces formado Automattic-WordPress's padre compañía-y tenga sido nombrado uno de el la mayor parte de las 50 personas importantes en elWeb3 por PCWorld. WordPress se sustentado por corrientemente ásperamente una docena descorazona los desarrolladores, y una plétora de los contribuyentes activos en el |communit|y, incluyendo el creador de b2 , MichelValdrighi.

PorqueWoRdPRess? A pesar de todo ese soplido de cuerno, porque escojaWordPress sobre el conjunto de otras plataformas de | blogging| excelentes y CMSes disponible alrededor el Web, incluyendo Mobiliario Type y Blogger? Seguramente ¿ellos tienen un número igual de los |stats| impresionantes para borbotar, correcto? Wana, usted podría escogerWordPress para una variedad de razones:

27

■ Ello'la s libera. Si está construyendo un |blog| personal simple, o un sitio Web de negocio de alto nivel para el A 500 |compan| de fortunay, trabajar conWordPress puede el gasto que usted nada. ■ El osadura de b2 original es sido licenciado debajo el GPL ( el público general licencia ), y y así seaWordPress. El GPL permite desarrolladores el libertad para modifique se y redistribuya el software, mientras proporciona otros mismas libertades. Esta trae varias ventajas, incluirWOrdPress ser activamente desarrollado por su comunidad así como el núcleoWequipo de ordPress. ■ Ello'la s conoció para su de 5 minutos increíblemente simple instale.4 ■ Existe un número enorme deWrecursos de ordPress disponible en elW|eb|, incluyendo los temas libres y un gran número de ambos escritos y seminarios de video. ■ ElWdocumentación de ordPress-llamado el códice5-no sea segundo de nadie. ■ WordPress ha corrido mundo por siete años, así que nosotros puede pierda cuidado que's aquí al |sta| y, y continúe desarrollarse activamente durante años para venir. ■ El WordPress equipo organice se comunidad meetups, como bien como conferencias llamado WordCamps. El meetups sea más casual en casa naturaleza, y generalmente consista de equipo y comunidad los miembros hablando casi toda cosa de nuevo rasgos en casa el último versión de WordPress, para sugerencias y trucos. WordCamps consiste de las conferencias de ambos desarrolladores de núcleo y miembros de comunidad. Tla o aprende más, visite http://central.wordcamp.org/. Como con cualquier tecnología elección, el decisión para uso WordPress finalmente venga abajo para preferencia personal. Pero con todo ésos razones, y A plataforma eso's continuamente cultivo en casa popularity, ello's realmente más una pregunta de, " porque no desea le el usoWordPress?"

3

http://www.pcworld.com/article/129301/the_50_la mayor parte de el_importante_personas_en_el_web.html http://codex.wordpress.org/Installing_WordPress#Famous_de 5 minutos_Instale 5 http:// codex.wordpress.org/ 4

Licenciado para estupendo! el libro electrónico www.wowebook.com

4 estructuraYnuestro propio maloWoRdPRtemas de |ess|

WoRdPReess.|com| yWoRdPReess.oRg Si usted es totalmente nuevo para WordPress, el diferencia entre wordpress.org y wordpress.com ymighT be A dosT confusing AT primero. The abetosT sitio, wordpress.org, yos the home of the free und abran fuente plataforma de software de WordPress. Si su intención es desarrollar los temas a la medida y hospedar el CMS en su propio saqueR, wordpress.org sea la opción sóla. WordPress.com, entretanto, sea A comercial entidad operado cerca Automattic, que proporciona hospedado

blogging using the WordPress plataforma. Ello's free To uso, though ele are A numbeR of premium rasgosdisponible por unos honorarios. Aquí está el pro y el contra de cada uno: WordPress.org pros ■ acceso a miles de temas a la medida ■ uso de los artefactos a la medida y |plugins| ■ retención del control de 100% sobre el aumento de precio ■ acceso a la base de datos de MySQL, debe necesita hacer revisiones o crear nuevas mesas WordPress.org contras ■ responsable para adquirir su propio anfitrión, a un gasto ■ la instalación manual del software exigió ■ descargue requerido de los |plugins| necesarios prevenir que los correos electrónicos no deseados ( tipicamente Automattic'la s popular Akismet plugin) WordPress.com pros ■ hospedado y manejado por Automattic gratis ■ hospedado en cientos de los servidores, resultando en virtualmente tiempo productivo de 99% ■ prepare, correos electrónicos no deseados de comentario, y base de datos retroceden el ups ejecutado de forma automática gratis WordPress.com contras ■ el acceso limitado a temas (alrededor de 100), y los temas a la medida no admita ■ incapaz para modificar el código de PHP fundamental ■ los |plugins| a la medida no pueden ponerse en práctica ■ inicial inscripción como A subdomain de wordpress.com, tal como mysite.wordpress.com, sin embargo ello'la s posible para combinar su propia dirección de campo a este URL Para el propósitos de esto libro, usted puede necesidad para uso el software descargado de wordpress.org, yinstalled eitheR on ustedR desktop cómputoR, nosotrosb saqueR, oR virtuaL máquina. Head oveR To wordpress.org

Licenciado para estupendo! el libro electrónico www.wowebook.com

IntRoducing WoRdPRess 5

y descarga el último version6 ( 3.0 a el tiempo de escribir ), entonces instale ello acordar para el |instruc| -- | tions| en el códice.7

¿Qué es un tema?

29

No confunda el contenido-las páginas y postes-con el tema; son no relacionados. En realidad, esta separación es lo que hacenWOrdPress y tema tan poderoso! WordPress es unA Cosa dura que proporciona toda la funcionalidad para RSS, comentando, buscando, inquiriendo el base de datos, mostrar postes, crear páginas, y el semejante. El tema, en el otro mano, es el piel: cómo ello buenas apariencias, el esquema de el diseño, el CSS, añadido funcionalidad, e imágenes. Porque cada ganchos de tema en WordPress' la s descorazona funciones y filtros en el mismo |wa|y, usted puede cambiarse entre temas con A clic de A botón. Cualquier WordPress de potencia sitio pueda instantáneamente don su tema y roca un total nueva mirada. Cada tema reside dentro de un subdirectorio de su instalación de WordPress llamada temas. Si cierto nuevo tema-como el un empezaremos el edificio en capítulo 5-sea llamado "W|icked|, " se puede encontrar within wp-content/themes/wicked. This separation of the presentation atrásm the system archivos yos incred -- ib útil; hace che las actualizaciones futuras para elWordPress framework easy, después que puede actualizar el núcleoWarchivo ordPress sin cambiar el tema. Los temas se dividen esencialmente en tres componentes: Presentation un archivo llamado style.css contenga todo el estilo gobierna que será aplicado a su tema. Content los archivo Template describen lo que el contenido debe ser la salida en cada uno de WordPress páginas de su listas de postes, los postes, resultados de la búsqueda sencillos, y así en. Logic un archivo llamado functions.php contenga cualquiera lógica adicional sus necesidades de tema a fin de, bien, la función. Como veremos en los capítulos posteriores, esto es donde usted tener incluya la funcionalidad parecida a |plugin| en casa su tema: nuevo costumbre artefactos, o A de tema específico admin panel para acomodar según especificaciones el plan de color y esquema. Este archivo se carga inmediatamente duranteWordPress'inicialización de s, y también puede estar modificado para definir las funciones comúnes que son usadas a lo largo de su tema. Cuando descarga usted e instale WordPress, está presente con el osadura bajo, y el tema implícitoTwenty Tel ene, mostrado en figura 1.1.

6 7

http://wordpress.org/download/ http://codex.wordpress.org/Installing_WordPress

Licenciado para estupendo! el libro electrónico www.wowebook.com

6 estructuraYnuestro propio maloWoRdPRtemas de |ess|

FiguRe 1.1. La omisiónWoRdPRtema de |ess| ,Twenty Tene

Visiting su sitio's tema administración página ( de el Tablero de instrumentos, clic Appearance, entonces Themes),you'lL see A selection of alL the temas you've instalado-oR leyT the defaulT ene yof you've yeT To instalecualquier-y puede activar alguno de ellos por hacer clic sobre el Activate enlace. Tla o prueba el exterior unos cuantos temas diferentes y consiga un feel for cómo modifican el sitio'apariencia de s, escoge los temas de Install lóbulo y agarre se cierto nuevo un. Yel |ou| verá cómo completamente pueden cambiar el |blog|'mirada de s, pero usted puede también principio para piense de vías ellos sea mejorado, o de el tipo de tema usted tuvo semejante para estructura. Tiempo perfecto !

Porque convierta en AWoRdPR¿diseñador de tema de |ess|? Wana, ha comprado ya este libro, tan se sobreentiende que quiere convertirse en uno ! HoweveR, si es todavía entre dos aguas, podría ser beneficioso para preguntarse: " lo que haga que yo deseo fuera de WordPress?" Haga usted oido el idea de usar otro diseñador's tema en su ¿sitio? Haga usted hallazgo ese ninguno de el corrientemente disponible temas traje el necesidades de su blog o ¿negocio? Ésos sea ambos razones excelentes para aprender cómo construir su propio tema. Cierto otros pueden incluir es capaz de: ■ acomode según especificaciones los temas existentes ■ convierta sus propios diseños de sitio Web en plantillas de WordPress ■ venda sus diseños de tema para el beneficio ■ sume diseño de tema de WordPress a su agencia' servicios de diseño ■ devuelva a la comunidad con los diseños únicos Si identifique con cualesquiera de estas razones, hace que el sentido perfecto para bucear de primero principal en diseño de tema de WordPress. Afortunadamente para usted, la curva de aprendizaje es bastante razonable.

Licenciado para estupendo! el libro electrónico www.wowebook.com

IntRoducing WoRdPRess 7

Si su objetivo principal es volver este en un negocio, ello puede ser un lucrativo si juegue sus tarjetas enderece se. Ciertos autores de tema en ThemeForest8-el sitio de plaza del mercado de tema que yo manejo-ceda $cada 25,000 mes sencillo ! por supuesto, toma tiempo para construir edificios en su catálogo, pero una vez que usted hace, automatización y el compuesto efectos de venderse múltiple temas pueda producto resultados, como ventas revuelva en cada día sin ningún esfuerzo adicional en su parte.

Y finalmente … Allí'la s una razón porque arriba 20 millones de personas han instalado WordPress: ello'|eas| de sy, libere, extensible, tema, provechoso, y, la mayor parte de el importantly, diversión para uso. Como A red designeR, usted ya tenga muchas de las habilidades requerido para construya su propio temas de wordPress. Así deje'la s lo hace !

31

8

http://themeforest.net/

Licenciado para estupendo! el libro electrónico www.wowebook.com

Licenciado para estupendo! el libro electrónico www.wowebook.com

2

33

PlanificaciónYnuestro tema por Brandon R. Jones Antes usted aún fuego subida Photoshop o su favorito código editoR, ello's importante para defina algunos metas para el tema de wordPress que estará construyendo. ¿Qué funcione lo puede servir de sus visitantes? ¿Cómo debe auxiliar los autores o editores satisfechos que lo estarán usando? Responder estas preguntas temprano en salvarán tiempo, |energia, y dinero a la larga. Esto capítulo pueda ayuda para refine se su visión para A tema en A inclinación, promedio, enfocado conjunto de las directivas, convirtiéndose en su mapa de carreteras personal durante el proceso de diseño (que saltaremos en en el capítulo próximo). Una vez que ha diseñado el tema de wordPress, allí'la s mucho que esté ausente de su control. Los autores individuales usarán su tema en vías que son imposibles para predecir. los Visitadores exigirán los rasgos eso usted nunca aún considerado, o sea confundido cerca rasgos eso usted pensamiento sea útil. Seguro, puede soltar actualizaciones a su tema para tomar esas solicitudes y sugerencias, pero establecer A estrategia para su tema adelante de tiempo pueda, a el muy menos, dé usted A conjunto de tierra reglamentos para lo que su tema debería intentar a hacer. En un |wa|y, esto es parte del desafío particular y excitación de diseñar el AWtema de ordPress. Lo mejor que puede hacer es subir con una visión clara de lo que usted quiere el tema para ser, y el diseño con ese ideal en la mente. Al mismo tiempo, debe siempre recordar que lo que está construyendo es una herramienta que otros se adaptan y tienen inclinación a sus propósitos.

Licenciado para estupendo! el libro electrónico www.wowebook.com

01 estructuraYnuestro propio maloWoRdPRtemas de |ess|

¿Con qué empieza? Antes que empieza planear su costumbre tema de WordPress, una idea buena para familiarizarse con la omisión estructura y la jerarquía del sitio wordPress. Por enterarse con todos sus componentes, usted se situará en una posición conveniente mejor para decidir cómo que usted les quiere organizar en su tema, de cierta manera que lo distingue de una instalación de vainilla. Si usted haya trabajado con WordPress en el pasado y sea ya familiar con su partes, usted pueda la mayor parte de el probablemente salto esto sección y vaya directamente a la sección llamada el "éxito definidor". A su núcleo, WordPress es un motor de |blogging|, así la página principal implícita muestra que un la lista de postes recientes. De allí, usuarios pueden navegar a páginas que listan post por el |categor|y, quede cerca ( nosotros examinaremos la diferencia entre etiquetas y las categorías en breve ), o el mes ( estas páginas de inscripción mensuales son llamados los archivos en casa WordPress). You pueda también clic en el título de A poste para extensión su página, a lo largo con A lista de los comentarios y una forma para

informar un nuevo comentario. WordPress también acomoda las páginas estáticas que puede existir en una jerarquía; por ejemplo, un sitio dado podría tener una página sobre, las páginas embarazadas llamado nos avise y nuestro personal. De curso, esto omisión estructura pueda sea acomodado según especificaciones endlessly, pero cerca comprensión lo que usted principio con, sabrá lo que necesitan cambiando y lo que se deba mantenerse. Deje'la s examina cada uno de estos componentes en algo más detalle.

Plas edades yPosts Las páginas y postes son los dos tipos principales del contenido que proporcionará en el AWtema de ordPress. Postes sea el pan y mantequilla de el WordPress tema. You pueda tenga como muchos de como usted necesidad, y son normalmente listados en revierta la orden cronológica en el |blog| lista páginas. General, los postes se publican periódicamente y usan para cada tipo de tiempo contenido tales como artículos de noticias, entradas, episodios de |blog| de un |podcast|, embellecen con historias, y así en. las páginas de WordPress son diferentes de postes, en que son estáticos y no de fecha sensitiva. Autores normalmente usan páginas para el contenido quiera sobre información o el contacto EE.UU. un tema puede tener tantas páginas como los deseos, y editores de autor pueden aún usar |subpages| para establecer jerarquía de página; howeveR, la mayoría de uso de sitios sólo un puñado de páginas a nivel superior a lo más. La excepción es un sitio de negocio que usos WOrdPress como un CMS (sistema de manejo satisfecho) antes que un motor de |blogging|.

Medios y enlaces YOn addition To páginas und blog postes, WordPress permitas editors To create two otheR formas of contenido: mediA und enlaces. Enlaces are leyT eso: hipervincules pointing To otheR páginas on the Internet. Traditionally, esta funcionalidad estuvo acostumbrado a permitir |bloggers| para mantener un |blogrol|L-es decir, una lista de otros |blogs| que ellos disfrutaron.

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema

11

Los medios se refieren a cualquier tipo de imagenes, archivo audio, y archivo video que son cargadas al AWsitio ordPress, y posteriormente pueden ser usadas en páginas o postes de |blog|. La manipulación implícita de los medios y enlaces son bastante satisfactorios para muchos sitios. Cuando usted alcanza el diseño fase, sin embargo, usted puede necesidad para considere cómo diferente tipos de medios sea mostrado y manten les consistente con el resto del tema'el tacto visual de la s.

Campos a la medida WordPress también permite autores para sume costumbre campos para su postes. Para ejemplo, en la película sitio de revisión, el contenido editor pueda cesionario A clasificación para cada uno película en casa adición para el revisión se. Entonces, todo el editor necesidad haga sea entre A llave ("clasificación") y A valor ( " 3 las estrellas " )

35

en el costumbre campos al crear su poste. Ynuestro tema pueda no dependa pesadamente en costumbre campos, pero usted necesidad para a menos proyecto para su presencia posible para el causa de diseño consistency. Eso diga, si usted es arte de diseñar A de propósito especial tema, usted puede usar los campos a la medida como una vía para poner en práctica un rasgo dado.

Las categorías yTags Los postes son el tipo satisfecho primario de la mayoría sitios wordPress, y es normalmente bastante numeroso. Como consecuencia, WordPress incluye A pocos rasgos para ayuda editores organice se postes, elaboración más fácil para lectores para encontrar. Las categorías son un método jerárquico de organizar el sitio'postes de s. Por ejemplo, si usted tiene un sitio que se ofrecen repasan en los automóviles, sus categorías probablemente incluyen " automóviles, " Tlas multitudes, " MotoR- los ciclos, " y " recreativoVehicles."Yel |ou| puede tener los |subcategories| también; por lo tanto, bajo " automóviles, " usted puede tenga "Sillas de manos," "Luxury," "Deportes," y "Híbridos." Un autor pueda cesionario A poste para cualquier número de categorías. Tlos |ags| son una vía de adjuntar palabras claves a los postes de |blog|. A diferencia de las categorías, etiquetas no son organizadas enuny sorT of jerarcay. Essentially, ely allow you To be more granulaR yon ustedR classification of contenido. Usar el previo ejemplo, A poste sea archivado debajo el categoría de "Automóviles," y entonces sea marcado con " azul, " Sunroof, " y " V8." Por regla general del pulgar: las categorías organizan contenido, mientras que etiquetas rotulan contenido. Cualquier WordPress tema deba habilite contenido editores para uso también método de organización, y deba ser indulgente para ambos en el diseño de tema.

Comments A llave componente de la mayor parte de el blogs sea A comentario sistema para visitantes para permiso mensajes casi el postes que ellos compitaw. Normalmente páginas eso contenga A sencillo poste rasgo A lista de al corriente comentarios y A comentario

Licenciado para estupendo! el libro electrónico www.wowebook.com

12 estructuraYnuestro propio maloWoRdPRtemas de |ess| forma. En las páginas de poste múltiple ( tal como la página principal, o una categoría o inscripción de archivo ), a menudo lo que'la s mostrada es sólo el número de comentan el poste ha recibido. Comentarios pueda también sea threaded, que medios A comentario pueda sea al corriente en casa réplica para A previo uno. Esto se indica visual por tener la réplica forme una muesca debajo del comentario dirige, sin embargo puede subir con su propia vía de representarlo.

Widgets WordPress también permite editores para añadir y arreglar fácilmente el contenido de barra lateral usando artefactos. Las más recientes versiones deWordPress incluye enlaces de draga y gota que permiten autores para configurar simplemente los tipos diferentes del contenido que se debe mostrarse en cada |sideba|R. Deje'la s toma un atisbo a lo que este enlace mira como enWordPress 3.0, mostrado en figura 2.1.

FiguRe 2.1. El artefacto interactúa en casaWoRdPRess

A sustancia pegajosad WordPress e should enable editors To e As hombrey artefactos As ely necesidad, und incluyaen varias áreas en el sitio sin romper el tema'estilo de s o esquema. Esto tiene en cuenta más flexibilidad y aumente el valor unos ganancias de |blogger| del tema. Wla e examinará mucho más detalle sobre cómo incluir los artefactos a la medida y preparar secciones de su tema para artefactos en capítulo 6; entretanto, sólo recuerde que ciertas partes de sus páginas deben ser reservadas para la colocación de artefacto.

El lazo Páginas en su tema que muestran los postes de |blog|-por ejemplo, una página que lista todos los postes en un | categor| dadoy, o todo postes publicado en casa A cierto mes-dependa en A rasgo de WordPress llamado El Loop. Ello'la s una de las partes más importantes de un plantillo-tal negocio grande, en realidad, esoWlos individuos de acciones grotescas y desalmadas de ordPress quieren para capitalice se su denomine. Wla e puede sea cubierta esto en casa A lote más detalle en casa Capítulo 5; para ningúnw, todo usted

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema 13

necesidad para sepa sea eso cerca omisión, postes sea siempre mostrado usar esto mecanismo en casa esencialmente el mismo |wa|y. Esto es, por supuesto, infinitamente adaptado a las especificaciones, pero el comportamiento implícito es que simple. Ello'la s llamada el lazo porqueWordPress se enlaza por todos los postes de |blog| que va a ser mostrado, y rinda cada un el mismo |wa|y.

Menus Wel apoyo añadido de ordPress 3.0 para el usoR-los menúes definidos, haciendoWordPress aún más poderoso como unos usuarios de CMS. puede crear sus propios menúes, compuesto de páginas, categorías, o cualesquiera otros enlaces que tuvieron quieren. Pueden reorganizar también los artículos de menú a un capricho. Ynuestro tema puede aún incluir |dif| múltiple -- localizaciones de menú de |ferent| , del mismo modo que puede incluir áreas de artefacto múltiples, para permitir sus usuarios aún más controlan sobre su sitio'navegación de s. Allan pueda sea exhibición usted cómo para tome ventaja de costumbre menúes en casa su tema en casa Capítulo 7, peroello's hierbah keeping yon mínimod thaT ustedR usuarios wilL potentially have fulL controL oveR the sitio's navegación. Esto medios eso usted es incapaz para dependa en A fijo número de enlaces o menú artículos, así su el diseño tiene que ser flexible. Ahora eso usted sepa lo que A WordPress tema comprende, ello's tiempo para principio pensamiento casi

37

su tema, y cómo quiere che ello para mirar y actuar.

Definir éxito WordPress sea un increíblemente flexible plataforma para diseño foR. Como A tema diseñador y developeR, usted ha A rango de disponible opciones: usted pueda incluya todo tipos de JavaScript wizardry, gaste horas en minucias tipográficas, o incluya una balsa de las opciones a la medida para sus usuarios. Como consecuencia, arte de diseñarWlos temas de ordPress son tantos sobre decidir omitir como qué poner en casa. Y esto puede ser difícil hacer si carezca de una visión fuerte del propósito que coloca usando su tema servirá a sus visitantes. Debido a esto, su primer trabajo como un diseñador de tema es considerar lo que desear che su tema para realizar. ¿Qué puede toma para su tema para ser exitoso? ¿Qué características su tema completado debe poseer? El éxito definidor puede tan simple como un haciendo una declaración sobre sus intenciones para el tema. Ello puede parecerse a cualquier de estos: ■ " EL My e wilL focus on delivering A new und exciting layouT foR blogs ingenioh guía de texton contenido." ■ "yo quiero construir un tema que permito fotógrafos para mostrar sus imagenes en un diseño alisado, mínimo." ■ " nuestro meta sea para desarrolle se A tema para con base en video sitios con A incorporado colección de robusto herramientas de reparto."

Licenciado para estupendo! el libro electrónico www.wowebook.com

14 estructuraYnuestro propio maloWoRdPRtemas de |ess| ■ "El propósito de este tema es ofrecer un plantillo simple para los sitios Web de negocio pequeño." Lo que pueda ser la definición del éxito para su detalleW¿tema de ordPress? Si usted no pueda explicar en casa uno escrito declaración lo que su tema's metas sea, el diseño proceso pueda sea semejante tirar juego de dardos a oscuras. La cosa bella sobre declarar una declaración misional para suWel tema de ordPress es ése cuando es confrontado con A difícil diseño decisión más tarde en, usted pueda siempre vaya atrás para eso declaración para ayudarle fuera. Por ejemplo, imagine que usted está tratando de decidir incluir un fresco nuevo cursor de imagen para su tema. Si su declaración misional era el primero un listé antes de, oportunidades son buenas que'| unnecessar| de sy, a menos que usted pueda resulte eso personas sea ida para necesidad ello. La mayor parte de el bloggers usar su el tema probablemente será más interesado en hacerlo fácil para sus visitantes para encontrar el contenido que ellos estar pareciendo |fo|R. MoreoveR, porque estos postes son improbables para incluir las imagenes, dedicando su diseño y tiempo de desarrollo para tal rasgo son una

idea mala. Ningún composición cómo complejo su diseño o codificación desafíos llegue a ser en casa el más tarde fases, su la declaración misional debe ser la luz de guía que toda cosa debe |follo|w.

Planear piedra miliaria ■ ¿Qué es la declaración misional para su tema?

ArrendamientoYnuestra dirección satisfecha elWay Escoger el tipo del contenido que su tema se enfocará en no es ninguna decisión superficial; jugará A significativo papel en casa el diseño decisiones usted marca, y el rasgos usted escoja para incluya. Para la mayoría parte, que puede dejar hacer su contenido. Planear un conjunto de rasgos para complementar su contenido es tan fácil como dejar ese brillo satisfecho. Allí sea un extensivo variedad de contenido tipos disponible, con un aún más grande número de híbridos eso existe. Usar el cuatro muestra misión declaraciones nosotros esbozado en casa el último sección, aquí sea el contente los tipos cada uno servirá primariamente: El tema de Blog El arquetipo de |blog| clásico esoWordPress era diseñar está construido alrededor del contenido de texto eso'la s frecuentemente actualizado. V|isitors| a este tipo del sitio quieren acceder el contenido que están en busca de |easil|y. Esto sea artículos, seminarios, diarios, revisiones, o cualquier otro forma eso primariamente usen el texto para comunicarse. Autores picarán un tema con base en texto porque hace che lo fácil de publique su escritura, y porque lo hace fácil para sus lectores para encontrar el contenido que ellos estar pareciendo |fo|R.

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema 15

Wel |ith| este tema, la propia tipografía se convierte en un rasgo clave: el |juic|, grandey, el texto legible es más de A lujo-ello's necesidad fundamental para el tema's éxito en casa reunión el demandas de su espectadores. T|ext| -- los temas conducidos a menudo lleva una gran cantidad de postes de |blog| además, así que valdría considerando varios métodos que permiten usuarios para encontrar el contenido pertinente. Wla e discutirá organización en más la profundidad luego en este |chapte|R. El tema de imagen céntrica Fotógrafos, diseño estudios, ilustradores, y de imagen rica revistas sea sólo algunos de el tipos de negocios que quieren publicar satisfecho eso'la s centrada alrededor de las imagenes. Vlos |isitors| son probable que venga a estos sitios para las imagenes grandes, atractivas, y para las herramientas que hacen que ello fácil de examinar estas imagenes. Autores pueden generalmente escoger un tema que abastece hacia este tipo de contenido, el que da imagina una gran cantidad de eminencia en el esquema.

39

An |centri| de imagenc e necesidads To consideR the size of the main contenT columna, As this determinael máximo anchura de imagenes. Ello's también importante para medite de imagen pertinente rasgos tal como un | lightbox| , una imagen hace galerías en plantillo, uñas del pulgar a la medida, y un cursor de imagen en la primera plana. ElVtema de sitio de |ideo| Video sea un cada vez más popular medios para dar contenido en el Web. En casa muchos vías, el diseño metas y limitaciones de A video tema pueda sea similar para ésos de un de imagen céntrica el tema, sin embargo usted habrá el beneficio de un tamaño satisfecho más consistente y adapte a |fo| de diseñoR. Ynuestro visitante de sitio típico apreciará la habilidad compartir videos fácilmente con sus amigos, y editores busque el apoyo fácil para varios jugadores de video empotrados populares. El |blog| de video necesitará un esquema acomodado según especificaciones y rasgo ponga al traje las necesidades del contenido de video. El esquema debe hacer la actividad de mirar los videos como fácilmente como sea posible. Dé a cierto pensamiento para donde el jugador de video ( o los jugadores ) estará localizado en el esquema. Permitir visitantes la habilidad para examinar fácilmente para los videos similares podría ser un excelente rasgo. Los enlaces de reparto de medios sociales deben ser fáciles de acceder además, de modo que visitantes puedan compartir los videos con sus |directl| de amigosy. El tema de sitio de negocio Sin embargo inicialmente desarrollado como A blogging plataforma, WordPress sea también muy apropiado para serusod As A contenT managemenT system foR A business oR otheR promotionaL sitio Web. As negociosreconozca la importancia de integrar manejo satisfecho poderoso y las herramientas de medios sociales en su sitios Web, esto tipo de Wcon base en ordPress sitio pueda sólo llegue a ser más frecuente. Contenido en este tipo del sitio incluirá sobre y se tocan páginas, sin embargo allí deba ser también el apoyo bueno para |blog| o contenido de noticias. Cuando viene a esta forma de tema, comodidad de personalización y herradero es crucial, como elcompany wilL pálidoT To ensure the esperae reflejes ellos professionaL identity. Key rasgos often incluyaaltamente adaptado a las especificaciones colores, espacio reservado para A negrita misión declaración en el inicio página, y

Licenciado para estupendo! el libro electrónico www.wowebook.com

16 estructuraYnuestro propio maloWoRdPRtemas de |ess| abundancia de vías para organice se A firma's núcleo negocio contenido en A forma eso más estrechamente asemeje un prospecto impreso que su |blog| de texto de norma. Por supuesto, la mayor parte de los clientes estarán mirando a publicar un mix de los tipos satisfechos. Por ejemplo, un estudio de fotografía pequeño puede estar buscando un tema ése hace ello que simple para crear estático atractivopáginas, yon addition To the rasgos common To |centri| de imagenc temas, like galleries oR cursores. Bloggers normalmente quiera la habilidad para incluir fácilmente imagenes o videos en sus postes, mientras que muchos negocios quieren tener el |blog| contente en sus sitios. Dado estas variaciones, teniendo una idea buena de la cosa fundamentalcontenT type ustedR e objetivos To deliveR wilL

enable you To give such contenT particulaR eminencia,y haga su trabajo más fácil al escoger rasgos para su tema. En cada uno de estos cuatro ejemplos, la llave apunta a recuerde es que estamos dejando el contenido haga la planificación para . You pueda siempre sume o quite rasgos basado en su único tome en el arquetipotardeR en. AT this poinT yon the planning proceso, you should estrellaT by creating A de hueso desnudos lisT of rasgoseso es esencial para el contenido teclee y comisione declaración.

Planear piedra miliaria ■ Lo que es su tema'¿la cosa fundamental de s contenta el tipo? ■ ¿Necesita planear para cualesquiera otros tipos del contenido que será incluido en el mix? ■ Lo que es los rasgos claves requeridos para dar el tema'¿la s descorazona el contenido? ■ ¿Qué el esquema completo de diseño se parecerá a?

AcciónYnuestro ReseaRch Arte historiadores sea tierno de el dicho, " excelente artistas parada sobre el espaldas de su predecesores." el mismo vaya para WordPress tema creadores. El mejor themers escoja no para principio de cuadrado uno. Ellos miran a lo que's ya allá afuera, entonces añada su propia mezcla única de la innovación. Como tal, haciendo un poco de reconocimiento (el término militar para explorar el exterior el campo de batalla) es una parte crucial del proceso de diseño para varias razones: ■ Ello le dirá lo que'la s ya ser haciendo en el campo. Nadie quiere gastar días haciendo un tema especializado sólo para encontrar una oferta similar en la existencia. ■ Yel |ou| aprenderá lo que'la s desaparecido en el mercado. Manchar un nuevo tipo de tema de nicho o rasgo que tiene todavía que ser fabricado ( o no haya sido construido bueno ) pueda a menudo resultar en un golpe de bomba de demolición. ■ YOT wilL telL you lo que's working und whaT no sea. A menudo, temas wilL have discussion tablas |wher| anexoe you can Ad usuarios' realimentación. Why waiT untiL ustedR e yos done before you estrellaT reunirme¿información sobre cómo las personas lo usarán? Ahora que sabe porque debe hacer su recon, deja'la s clava un poco de |deepe|R.

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema 17

Resea de temaRch Uno de los aspectos bellos sobre trabajar conWordPress es que existen miles de temas ya en la existencia: algunos están excelente, otros menos así. T|ake| algún tiempo para examinar elW|eb| para los temas eso sea similar para lo que usted es probar para realice. Si usted es edificio A con calor nuevo video tema, verifique el conjunto de los temas que se enfoca en el video. Allí'la s una oportunidad buena que será capaz de producir una lista de el rasgos

41

eso usted amor-como bien como rasgos eso usted odio-y cualquier cambios eso usted tuvo quiera parar su propia nota particular carga con un tema de video. ElWordPress theme library1 tenga mucho al |offe|R, sino debe parecer también adicional en el campo. Algunos dethe seanT temas are premium ofertas vitrinad on outside sitios Web. Abran up ustedR favorite búsquedamotor y comience a cazar para los temas que comparte su tema'mercado destino de s. Una vez que tiene un biengrasp on the state of asuntos foR ustedR particulaR nicho, you can estrellaT making An eduqued lisT of rasgosy diseñe elementos para tomar en la fase de diseño.

Plugin ReseaRch Plugins sea otro razón porque trabajar con WordPress sea así mucho delicado que trabajar con otro en línea edición plataformas. With arriba diez mil plugins en casa el funcionario plugin directorio sólo, lo's duro para subir con una idea eso'la s sin embargo para ponerse en práctica en cierta forma. El autores requeridos al uso exterior plugins con su tema sea generalmente A mal idea, desde entonces ello marcas su tema dependiente de un tercero; en muchos casos puede duplicar el rasgo detrás del |plugin| y vuelta que ello en una parte enteramente sostenida de su tema. Tel |aking| el tiempo para examinar cualquier pertinente |plugins| proporcionarán le con un curso intensivo de los rasgos existentes que está disponible. Este ejercicio también proporciona un verdadero tesoro hallazgo de realimentación desde entonces la mayor parte de el de éstos plugins exhibición clasificaciones y comentarios de los usuarios. Deje'mirada de s a un ejemplo de investigar |plugins| para ayudarle tema de proyecto a. Si estuvo construyendo un tema de fotografía, síguese que usted tuvo busque para existir los |plugins| tratando sobre la funcionalidad relacionada con la imagen tal como lightboxes y galerías. Aquí sea sólo tres hipotético vías de usar investigación de tema: ■ Yel |ou| encuentra ciertas ideas que vale incluyendo en su propio tema a la medida. Gastando justo A corto mientras que buscar para lightbox plugins, usted es capaz para proyecto exterior exactamente lo que usted necesidad en su propio tema'|lightbox| de s. ■ Yel |ou| halla que allí'la s ningún |plugin| actual para cierto rasgo que tuvo pensado-así planea en construirlo directamente en su tema. Esto le habilita para dirigir la funcionalidad esoWlos usuarios de ordPress podrían estar yendo buscando. Luego puede usar este rasgo único para promover su tema.

1

http://wordpress.org/extend/themes/

Licenciado para estupendo! el libro electrónico www.wowebook.com

18 estructuraYnuestro propio maloWoRdPRtemas de |ess| ■ You hallazgo eso el imagen galería sistema eso usted era ida para uso sea irritar gran cantidad de editores. Por hacer unos cuantos ajustes basado en esta realimentación de usuario, usted puede hacer que ello más útil a editores.

Resea de caligrafíaRch Finally, buscar lo que'la s nuevo en el mundo entero de JavaScript es a menudo un ejercicio valioso al cazar para nuevo vías para dé en su tema's metas. En casa la mayor parte de el casos, allí's ningún necesidad para sea un expertoyon uny particulaR certificadoT language To be able To e caligrafías inside ustedR tema. Semiconductor de óxido metálicoT caligrafías are licenciadobajo el GPL ( que significa les puede distribuir en sus archivo theme2), y la mayoría es buena - documentado, de modo que instalando y usando les sólo requieren seguir las instrucciones suministradas. A esto punto, usted deba también dé algunos pensamiento para que JavaScript bibliotecas ( para ejemplo, jQuery oR El prototipo ), yof uny, ustedR e wilL uso. Depending on ustedR leveL of JavaScripT proficiency, bibliotecaspueda hacer la tarea de desarrollar los rasgos a la medida y los artefactos brillantes mucho |easie| R. La investigación de caligrafía puede ser una gran cantidad de diversión, porque imagine nuevos efectos y rasgos están siendo constantemente de - |veloped| cerca el codificación comunidad a grande. Mientras que usted haga necesidad para asegure eso el caligrafías usted incluya trabajo en todos los principales visores, en la mayor parte de los casos los autores de caligrafía habrán hecho ya el comprobación para usted.

K|eep| en la exploración Obviously, allí's un montón de la investigación que puede ser hecha más allá del alcance de temas existentes, |plugins| , y caligrafías. Yel |ou| puede buscar afanosamente también ejemplos de la funcionalidad en otras plataformas, y modelos del diseño inteligente en los medios de alternativa ( imprima, cine, y arquitectura uniforme puede ser las fuentesof la inspiración ). The underlying principle behind this exercise yos simple: ningúnw thaT you've cristalizadolas metas primarias para su tema, salen y ven si existe las vías mejores para poner en prácticales que ha previamente previsto.

Planear piedra miliaria ■ Haga reconocimiento fuera elW|eb| para nuevas ideas. Haga una lista de las caligrafías, |plugins| , y temas que quiere; entonces vuelva a su lista de rasgo previa y revisión como usted tiene por conveniente.

Evitar FeatuRempastamiento de e Y¿el |ou| puede pensar para sus adentros, " por qué no diseñar sólo un tema que pueda manejar cada tipo concebible del contenido?" mucho como un automóvil que prueba también para ser un |helicopte|R, barco azabachado, y el avión de línea comercial comercial todo a una vez, el idea de el armario " el suizo Ejército knife" tema sea A peligroso uno. Cerca dejar prendido ligeramente cada rasgo y diseño elemento usted pueda imagine, usted fin subida crear Frankenstein's monstruo; tempranoR than succeeding AT toda cosa, ustedR e vientos up failing To be particularly sustancia pegajosad AT algo. 2

FoR more on the GPL und ellos relationship To WordPress temas, see the section called "Understanding the GPL" yon ChapteR 8.

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema 19

43

Este tipo del empastamiento de rasgo puede llevar a varios problemas en el AWtema de ordPress: ■ El contenido puede confundirse, haciendo que ello difícil para usuarios para encontrar lo que están pareciendo |fo| R. ■ Los rasgos podrían causar conflictos con otros |plugins| , guiar para frecuentar insectos o un esquema poco serio. ■ Brillante herramientas pueda domine el diseño, elaboración ello duro para editores para sorteo atención para su contenido. ■ La cantidad de las opciones de personalización puede hacer que ello difícil para editores al uso. RemembeR, WordPress yos conjetured To make the vivas of autors und visitantes easieR. YOf A e incluyedemasiados los rasgos, usando les en una base regular se está pesado. El hecho sencillo es que'la s a menudo más simple para picar un tipo del contenido a que su tema puede sobresalir, y perverarse en algo. Si encuentre situaciones donde absolutamente debe añadir un nuevo rasgo, puede hacer esas decisiones en un caso-por-embale la base, según su tema'declaración de misión de s. Allí siempre están las razones buenas a las excepciones hechas, pero estar hincado a su tema'metas primarias de s cuando el |cre| - a su conjunto de rasgo final parará rasgo hinche se a la larga.

fillBlipfillBlipel arte de diseñar basado en el contenido es DiffeRf de |ent|Rel |om| apoyando lo Uno importante punto para nota aquí sea eso mientras que usted deba evite arte de diseñar A tema eso focos en todos los tipos concebibles de contenido, lo'la s importante que al menos soportan todos los tipos del contenido. Esto puede parezca semejante A contradicción, pero YO asegure usted yo soy no sólo hendimiento pelos. Arte de diseñar A tema para todo tipos de contenido sea distraer; apoyar todo tipos de contenido sea sólo bien práctica. Si un autor de un |blog| de texto decide incluir video o imagenes en un poste, y su tema'los estilos de s miran rompa se o la exhibición incorrectamente-su tema ha fracasado. Ello'la s innecesario para tener un plantillo a la medida para todos y cada tipo del contenido allá afuera; sólo asegure que las formas más comúnes de los medios tienen al menos cierto apoyo de estilo básico.

Planear piedra miliaria ■ Wel |ithout| disminuyendo el tema'la meta primaria de la s, lo que los rasgos adicionales debe su tema incluye para mejorar un visitante'¿experiencia de s?

Licenciado para estupendo! el libro electrónico www.wowebook.com

20 estructuraYnuestro propio maloWoRdPRtemas de |ess|

Planificación para la audiencia Las personas que visitarán los sitios que usan su tema son, |ultimatel|y, su audiencia. Mientras que ello es imposible predecir exactamente el tipo del usuario que'la s yendo para estar haciendo el uso del contenido en sus temas, ello'el valor de s empleando algún tiempo considerando la experiencia ideal de visitante. Esto pueda sonido obvio, pero usted tuvo sea sorprendido cómo pocos tema autores verdaderamente piense casi el A de vías visitoR wilL actually interacT ingenioh theiR tema. Sue are some ejemplos of sitios thaT have previstocomportamiento de visitante y planee adelante para ello con los rasgos cuidadosamente bien considerados: Nettuts+ (http://net.tutsplus.com/) Esto sitio Web abastezca para red desarrolladores cerca proporcionar paso por paso seminarios. Como tal, el sitio en -- |cludes| A lote de código ejemplos donde el código de el seminario sea en realidad mostrado interior el poste de |blog|. Al prever |behavio| de usuarioR, Nettuts+ incluya el |inline| codifica ejemplos en cajas que no solo induce al texto a parecerse al código ( complete con la sintaxis realzando ), pero incluya botones paracopying the certificadoT To the usuario's portapapeles; this marcas following the tutoriaL A peors experiencia. una muestra codifica el recorte de Nettuts+ muestre se en figura 2.2.

FiguRe 2.2. Los recortes de código en los Nettuts+ sitio

WineLibraryTV (http://tv.winelibrary.com/) Esto sitio Web da revisiones de vino en casa A estilo eso's ambos cómico y educacional. El los videos a menudo toman de 20 a 30 minutos para repasar un puñado de vinos; howeveR, el anfitrión normalmente gastará sólo unos cuantos minutos en cada detalle beben vino. Debido a esto, usuarios a menudo quieren saltar directamente al sitio en el video que repasa el vino en que son interesados. Como un indicador del bien planeando,WineLibraryTV usa un jugador de video que tiene en cuenta marcadores de libro en el video, de modo que los visitantes pueden encontrar instantáneamente el contenido están pareciendo |fo|R, como visto en figura 2.3.

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema

FiguRe 2.3. Jugador de video en el WineLibRsitio aryTV

Psdtuts+

21

45

This website rasgos A loT of contenT catering To nosotrosb und graphic diseñadores. Because the audienciasea el |savv| de redy, muchos visitantes son deseosos para compartir su contenido en las redes sociales que usan. Como otro ejemplo bueno de la preparación, los dueños de sitio han construido en una barra de medios social al fondo de su postes, elaboración información reparto como simple como posible. Esto ejemplo, mostrado en figura 2.4, reciba la bonificación apunta porque incluye también una sección que ayuda los usuarios encuentra el contenido adicional.

FiguRe 2.4. Los botones sociales de medios en Psdtuts+

Licenciado para estupendo! el libro electrónico www.wowebook.com

22 estructuraYnuestro propio maloWoRdPRtemas de |ess| Planificación para la audiencia supone más de sólo previendo el tipo de contenido que ellos buscan; ello esactively preparing ahead foR the terreno llanoT usoR experience posible. YouR GoaL should be To prevealas tareas de sus visitantes, y entonces les haga como fácil de realizar como sea posible. Lo que estos medios desde el punto de vista de un tema'el diseño de s variará en un caso-por-embalan base, |naturall|y. Por estudiar los tipos de sitios Web eso usted piense realice similar metas para el suyo, usted pueda figura exterior adelante lo que trabajos para la audiencia.

Planear piedra miliaria ■ Lo que pueda el ideal sitio visita usar esto tema mirada ¿quiera? Contorno A pocos tareas eso A visitante de su tema podría querer realizar.

Planificación para los editores Ahora eso usted ha ponga algunos pensamiento en el visitante experiencia para sitios de potencia cerca su tema, ello'tiempo de s para considere el dirija usuarios de su tema: el editores. WordPress sea primariamente A ediciónplataforma. Planning foR the autors who wilL e ustedR e To publish theiR contenT yos leyT As órganos vitales-sino más así-al éxito de su tema como considerando los visitantes de los sitios. Como con su objetivo audiencia, ello's imposible para punta de alfiler el tipo de autor que's ida para sea usar su tema. Aún dentro de un grupo específico ( deja'|sa| de sy, los fotógrafos casuales ), habrá un conjunto deautors ingenioh varying nivels of experiencia. FoR caso, some fotógrafos wilL be renunciee cómodollenar exterior varios campos de costumbre en un poste de |blog| , teniendo los años de experiencia usando su propio HTML a la medida y CSS. Otros, howeveR, pueda sea duro en apuros para figura exterior cómo para publique A simple poste. Por regla general, deba planear su tema para el usuario experimentado menor-dentro de lo razonable, decurso. YOf you're planning A fotografíay tema, ello's safe To assume thaT semiconductor de óxido metálicoT autors wilL comprendapara algunos grado cómo digital imagenes trabajo ( para ejemplo, A concepto como básico como cómo A uña del pulgar la imagen es diferente de A de tamaño completo imagine ). HoweveR,

ello sea mejor no para tome para otorgado eso el el fotógrafo medio comprende cómo inducir a una imagen pequeña a apretar el gatillo un |lightbox| de JavaScript para revelar una imagen más grande. Así si incluye este tipo del |functionalit|y, ello'la s importante que hace que ello fácil de usar, e incluir las instrucciones claras en su tema empaque (el tema del material de instrucción será cubierto en mayor detalle en el capítulo 8). Ttiempo de |ake| para investigar los rasgos que piensa autores que usan su tema deseará. Considere los tipos del diseño al que son probable que son dibujados. Y, en lo posible, soporte tal idea genial con la investigación; por ejemplo, pregunte las personas que sabe que ajustan su perfil de autor de objetivo lo que ellos tuvieron desee en un tema.

Planear piedra miliaria ■ Lo que le pueda esperar razonablemente su tema'¿los editores de s para conocer corredor un sitio Web? ■ ¿Sea usted planeando en incluir rasgos que puede ser más allá la extensión del autor medio?

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema 23

Planificación para la oR|ganization| y apresure seRARchy A esto punto en casa el planificación proceso, usted deba tenga A bastante bien idea de el contenido su el tema puede sobresalga a dar, como bien como el diseño y rasgos eso mejor complemento el contenido. Yel | ou| ha gastado también el tiempo considerar cómo servir idealmente el tema'audiencia de s y sus usuarios. Finally, ha investigado los temas, |plugins| , y caligrafías corrientemente en el mercado para refinar esas ideas de diseño en una visión más unificada, preferiblemente con una lista de rasgo bien definida. Lo que esta información asciende a es un conjunto de rasgo que distinguirá su tema de cualquier |othe|R. Ahora ello'tiempo de s para deducir cómo volver que rasgo pone en un |wireframe| organizado para el proceso de diseño. Deje'principio de s por poner el exterior unos cuantos principios básicos de un útilWtema de ordPress. A pesar de su AR- chetype, éstos contenido guía pueda sea pertinente. Ynuestro contenido deba adhiera se para éstos principios: Fácil de navegar Si su tema sea prometido para arrellanarse, multi-autores blogs o pequeño, de cinco páginas los sitios de negocio, el contenido de núcleo tienen que ser fáciles de encontrar y navegar. Vlos |isitors| debe ser capaz de sin demoraunderstand how To navigate the esperae within segundos of llegar. The contenT on each page debatenga una jerarca visual claray, y el sitio'las páginas de s deben ser asociadas en una estructura organizativa lógica. Fácil de comprometerse con Cuidadosamente considere que los rasgos interactivos que usted quiere incluir, tales como comentarios, los enlaces de porción de medios sociales, y algo más que ayuda visitantes se

47

comprometen con el sitio'contenido de s. Fácil de organizarse Plan foR the effective e und display of categorías, etiquetas, und search functionality. Visitors debasea capaz para hallazgo A detalle blog poste o página en casa su tema sin tener para recurso para Google. Organization yos alL abouT how you're going To slice und dice the contenido. YOn this phase of the planificación,usted deba retorno para el perturbación de A WordPress tema's componentes eso nosotros vea en casa el ¿la sección llamado " lo que le haga empezar con?" y decida cómo quiere poner ésos juntan los pedazos de para formar un tema de sitio funcional. A fin de hacer que, querrá empezar dibujar un mapa del sitio que se muestra cómo las varias páginas se unen, y |wireframes| mostrando lo que el contenido está presente en cada uno de estas páginas. A lo largo de este proceso, mantenga los tres principios de la organización afrontan y centran en su mente, y uso ( a lo largo con su tema's misión la declaración ) para guía usted con cualquier decisiones.

El mapa del sitio de tema y WiRefRame Crear mapas del sitio y |wireframes| paraWlos temas de ordPress son un poco diferentes de diseñando les para A norma sitio Web porque, en casa A WordPress tema, el final contenido sea incógnita. Ello's imposible para prever cuántos páginas, |subpages| , o postes de |blog| se necesite acomodar, y usted puede

Licenciado para estupendo! el libro electrónico www.wowebook.com

24 estructuraYnuestro propio maloWoRdPRtemas de |ess| be unable To plan foR the exacT contenT on specific páginas oR yon particulaR regións of the página. HoweveR, usted todavía tenga para sorteo exterior su tema's núcleo contenido estructura y proyecto adelante para donde piezas individuales del contenido sacarán a luz en cada página. Estas dos tareas son el campo del mapa del sitio y el | wireframe| , |respectivel|y.

El mapa del sitio La mayor parte de elWlos mapas del sitio de ordPress miran bastante |simila|R, pero cómo usted organiza el contenido es lo que será único para su tema. Evidently, usted deba proyecto para el variación eso individuo editores pare su tema. Recuerde que serán capaz de añadir muchos postes en muchas categorías, por no decir nada de muchas páginas y |subpages|. Algunos de los questions que usted necesitará considerar es: ■ Wmal usted tenga blog postes en el inicio ¿página? Wmal blog postes sea presentado en casa enteramente, con ¿extractos, o único como una lista de títulos? ■ ¿Cómo usuarios navegarán de la primera plana a cada página o poste de |blog|? ¿Cómo ellos se moverán entre postes? ■ Sea allí cualquier costumbre rasgos en su lista eso necesidad para sea incluido en casa el ¿mapa del sitio? Para

caso, usted pueda exija ambos A puestas poste sitio como bien como A costumbre categoría lazo en el inicio página. Si un rasgo afecta los intermedios que el contenido es organizado, haga que la nota de ello en el mapa del sitio. A mapa del sitio sea también A excelente lugar para principio grabación que costumbre página plantillos usted necesidad para incluya. Ciertos ejemplos podrían ser una galería de imagen a la medida folie plantillo, un plantillo de anchura completa (sin la barra lateral), u otra forma de especialice contente esquema. Allí está un número casi ilimitado de vías que puede acercarse a su tema'mapa del sitio de s, pero deja'la s toma un atisbo a las dos ejemplos por el bien de realzar diferenciares, en figura 2.5 y figura 2.6.

FiguRe 2.5. Un ejemploWoRdPRmapa del sitio de |ess|

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema 25

FiguRe 2.6. Un mapa del sitio de alternativa

YOn the two sitemap ejemplos, notice how usuarios arrive AT the blog contenT differently. YOn the mapa del sitiomostrado en figura 2.5 , la página principal sirve de un eje para todo el contenido de |blog|. Conversely, en el mapa del sitio en figura 2.6 , todo el contenido de |blog| es esconder en una sección de |blog| , que alcance se por hacer clic sobre un link on la página principal. Lo que usted hace con su propio mapa del sitio dependa de finalmente cómo quiere guiar usuarios por su tema.

El WiRefRame Cuando edificio wireframes para A WordPress tema, usted necesidad para esbozo exterior el secciones de el el esquema que es reservado para los tipos particulares del contenido. Esto influirá en directamente el primer paso en sudesign fase, so be As accurate As posible. You can be As avanced As you necesidad, buT yon my experienciausted necesita al menos cuatro |wireframes| el exterior trabajado antes que puede comenzar a diseñando usted, para ser usado para: ■ la página principal ■ una vista de página implícita ■ una vista de poste sencilla ■ listas de postes ( por ejemplo, páginas, resultados de la búsqueda de archivo, o categoría o páginas de etiqueta ) En cada uno de estos cuatro descorazonan |wireframes|-mostrado en la figura 2.7 completamente a la figura 2.10tome notas que el núcleo esquema apenas cambios. Generally, el sólo aspecto cambiar de uno wireframe para el después sea la estructura del interior satisfecho la columna principal.

49

Licenciado para estupendo! el libro electrónico www.wowebook.com

26 estructuraYnuestro propio maloWoRdPRtemas de |ess|

fillBlip FiguRe 2.7. un |wi| de página principalRefRame

FiguRe 2.8. una lista de poste folia |wi|RefRame

fillBlip FiguRe 2.9. un de poste sencillo folie |wi|RefRame

FiguRe 2.10. AWoRdPRess page wiRefRame

Yel |ou| puede crear también los |wireframes| para cada costumbre folie el plantillo que usted quiere incluir, además de los esbozos de esquema para todos los rasgos a la medida ( tales como |lightboxes| o hacen galerías en ) que podría necesitar una vez

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema 27

entra la fase de diseño. Deje'la s echa una mirada a un par de los |wireframes| de página principal diferentes para el propósito de ilustrar justo cómo simple un |wireframe| puede ser ( así como cómo diferente dos |wireframes| únicos pueden mirar ). Wla e puedejuego de naipesk AT ene wireframe foR A |heav| de textoy blog yon Figure 2.11, und anotheR foR A fotioo blog yon Figure 2.12. Anuncio eso, mientras que ambos wireframes sea bastante simple, cada uno ilustra A único esquema eso direcciones el tipo del contenido que cada |blog| se enfocará en. Wla e se estará concentrando en la fase de diseño del proceso de creación de tema en el |chapte| próximoR, así en este punto sus |wireframes| pueden ser como simple y directo como usted tuvo semejante. Si ello sienta deseos de falte en este punto, no irrite: estaremos cavando en los detalles arenosos lendrosos lo que componen AWtema de ordPress después!

fillBlip FiguRe 2.11. un |wi| de página principalRefR|ame| para un tema de texto pesado FiguRe 2.12. A inicio página wiRefRame para A con base en foto tema

Reencauchaje justo … Planning ustedR e using this process yos A valuable way To clarify ellos majoR elementos before principiola fase de diseño. Allí'la s ninguna necesidad para planear ser especialmente longitudy, o aún organizado en cualquiera vía formal-un |notepad| , |edito| de textoR, o la servilleta hará la multa justa-pero debe anotar al menosustedR proyectos. This yos particularly true yof ello's ene of ustedR abetosT custom temas. To be franco, some personas'splanificación sea limitado para idea genial en el molino de rueda de andar a el gym. Personally, YO todavía marca extensivo

Licenciado para estupendo! el libro electrónico www.wowebook.com

28 estructuraYnuestro propio maloWoRdPRtemas de |ess| notas después de tener los 100 temas creados, pero a la larga usted deba usar cualquier circuito de producción hacen que usted siente más que cómodo. A pesar de que el método que usted escoge, deba establecer lo siguiente antes que empieza el proceso de diseño: ■ su tema'meta de parte principal de s ■ el tipo(s) de contenido que su tema se enfocará en ■ una lista de rasgos que querría incluir en su tema ■ conocimiento del tipo de editores y audiencia que usará su tema ■ una estrategia para cómo su tema manejará los postes, páginas, categorías, etiquetas de |blog| , y los campos a la medida ■ una idea de lo que el contenido será mostrado en cada uno del tema'la parte principal de s folia tipos Antes nosotros movimiento en para el diseño fase, deje's revisión algunos ideas para reflexione en cada parte el planear proceso: Defina éxito ¿Qué es la declaración misional para su tema? Deje enseñar el camino su contenido ¿Qué es la cosa fundamental contente el tipo yendo para ser para su tema? Wmal está incluyendo un mix de otro tipos de contenido eso necesidad para planeado ¿para? Lo que sea el llave rasgos eso deba sea incluido para dar el tema'¿la s descorazona el contenido? Cómo pueda su sitio'¿el apoyo de esquema general de la s que el contenido? W¿el mal que tiene dos columnas? ¿Tres columnas? T|ry| para ser como específico como sea posible. Aanule el rasgo se hincha Without apartar de su cosa fundamental meta, lo que adicional rasgos deba su tema ¿incluya? Proyecto para la audiencia Lo que puede el visitante ideal'¿vía de s por este tema se parece a? Esboce unas cuantas tareas rápidas que un

51

visitante de su tema podría querer realizar, y planearía adelante para hacer esas tareas como fácil de realizar como sea posible. Proyecto para los editores ¿Qué le puede esperar razonablemente sus autores de objetivo para saber? ¿Sea usted planeando en incluir rasgos que podrían ser tan duros para usar que confundirán el autor medio? ¿Está allí cualesquiera autores de rasgos querrá que ha descuidado? Haga cierta investigación Haga reconocimiento el exterior la Internet para nuevas ideas. Haga una lista de las caligrafías, |plugins| , y temas que quiere; entonces vuelva a su lista de rasgo previa y revisión ello según sea necesario.

Licenciado para estupendo! el libro electrónico www.wowebook.com

PlanificaciónYnuestro tema 29

Proyecto para organización y jerarquía Cómo haz le proponga organizar el contenido adentro que suW¿tema de ordPress? ¿Dónde páginas irán dentro del esquema? ¿Cómo puede postes de |blog| son tratados? W¿el mal que usted tiene especializaron cualquier categoría o curvas de etiqueta en cualquier parte? ¿Qué otras notas de organización o jerarquía a la medida debe hacer? El mapa del sitio de tema y |wireframe| Cree A tema mapa del sitio y A pocos wireframes eso usted pueda referencia durante el diseño proceso. Si usted tenga respuestas para todo éstos preguntas, felicidades ! Yel |ou| es bien en su vía para desarrollar A excelente WordPress tema. No haga tirón exterior su código editor sólo sin embargo, sin embargo: allí's todavía más diseñe el trabajo para hacerse. En el |chapte| próximoR, nosotros estaremos tomando la guía nosotros nos desarrollábamos en este capítulo y volviendo les en un enteramente carne-el diseño ausente.

Licenciado para estupendo! el libro electrónico www.wowebook.com

53

Licenciado para estupendo! el libro electrónico www.wowebook.com

Chapter

Diseño de tema101 por Brandon R. Jones

3

Wel |ith| su tema planeó exterior y un conjunto de |wireframes| ásperos entre manos, ello'tiempo de s para empezar la fase de diseño. Esto sea mi favorito parte de el entero proceso, porque ello's donde usted marca su visión vuelva en sí vida ! El meta de el diseño fase sea para fin subida con A enteramente comprendido conjunto de mockups para su tema para usar como una base para la fase de desarrollo. Esto capítulo pueda sea roto subida en dos parte principal secciones: en primer lugar, nosotros puede revisión cómo el tradicional |prin| -- |ciples| del diseño web bueno específicamente se relacionan conWordPress; entonces, discutiremos la anatomía del AWtema de ordPress, con ejemplos de cómo puede acercarse al diseño de cada componente de su tema.

ElT|ools| de elTrade

Antes que empieza intrigante, usted querrá decidir en un método favorito de la subida burlón sus ideas. Muchos diseñadores ( me incluya ) use Photoshop de adobe como su software de la elección, pero podría ser negligente para sugerir que esto es la herramienta sóla allá afuera. Además de usar un buen número otro | com| -- |petent| de creación gráfica aplicaciones, usted pueda también teóricamente haga todo de su arte de diseñar directamente por codificar el CSS al vuelo (que ciertos codificadores ultra-rápidos prefieren). yo aún he visto los diseñadores mofe de la subida toda cosa a mano.

fillBlipfillBlipcualquiera método usted pico sea Bien, pero ello's valor notar eso allí sea algunos llave ventajas para usar Photoshop ( o un programa similar ) para diseñar su tema:

■ Ello's el industria norma. Yel |ou| puede fin subida con un norma de industria archivo eso usted pueda dé para las personas que usan su tema, que lo hacen fácil para ellos para poner en práctica cambios.

Licenciado para estupendo! el libro electrónico www.wowebook.com

32 estructuraYnuestro propio maloWoRdPRtemas de |ess| ■ Ello's more organizado. You'lL be able To quickly organize ustedR image estratos into carpetas. YO personalmenteuse una carpeta diferente en mis archivo Photoshop para cada plantillo de página en mi tema, de modo que puedo proveer la junta de codillo rápidamente el diseño de página yo estoy trabajando en. ■ Ello marcas cambiar el diseño de A brisa. Crear A nuevo piel de el tema pueda sea como fácilmente como crear ciertos colocadores duplicados y acomodando según especificaciones les.

ess|

Los principios deWoRdPRdiseño de tema de | El ir detrás sección sea prometido para sea A rápido impresora en cómo núcleo diseño principios pueda juego en el AWtema de ordPress. Ello'el valor de s mencionando que existe ciertos libros terríficos que discuten estos principios en casa A lote más detalle que yo puede vaya en aquí. Erótico Web Design1 y El Principios de Galán --tifuL Web Diseño2 are two excellenT starting puntos atrásm SitePoint. YOf you're new To the design proceso,yo tuve altamente recomiende cavadura en casa A poco profundidad para familiarice se con el principios de diseño. Wel |ith| que dijo, esta sección debería servir de una revisión sólida para lectores de todos los niveles de la experiencia.

Proyecto para la personalización a menos que está diseñando AWtema de ordPress para un sitio Web de uso sencillo, que ello'la s siempre una estrategia buena a diseño con la personalización en la mente. La mayor parte de los editores que usan su sitio querrán hacer que ello su posea, también cerca sumar su logo y ajustaje A pocos colores, o cerca volver a arreglar el barra lateral y los menúes, por ejemplo. fillBlipfillBlip

Aunque la codificación es reservada para un |chapte| posteriorR, ello'la s todavía importante para considerar a este paso que porciones de su tema diseño pueda sea fijo ( el esquema, contenido estructura, y así en ) y que porciones pueda sea variable ( colores, fuentes, y el quiera ). You pueda marca su tema más flaco separandome el núcleo, inmutable elementos de el superficial, variable uno. Si el editor deseen marca A cambio, ellos no poder necesidad para vaya cavadura en casa su tema's núcleo; ellos puede sólo necesidad

55 para trueque una piel archivo para anotheR. OR, mejor sin embargo, usted pueda marca el piel selección A costumbre opción en casa su tema'administración de s sección (Allan pueda sea cubierta esto en casa Capítulo 7). Aún si usted es arte de diseñar A tema para un sitio sencillo, esta práctica de separación es todavía una idea buena: ello hará cambios abajo el camino mucho |easie|R.

Color Entero libros tenga sido escrito casi color theory, así yo puede evite ida en también mucho detalle aquí. Ello'la s asumida que usted escogerá un plan de color armonioso que trabaja con su visión para el tema. Lo que composiciones en un diseño de tema no son sobre el tipo del color proyecte le uso, pero más bien cómo usted lo pone en práctica en su tema.

1 2

http://www.sitepoint.com/books/sexy1/ http://www.sitepoint.com/books/design1/

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 33

El color ha un importante las funciones desde el punto de vista de marcar cada sitio Web. Si el color juega un papel dominante en el tema ( por ejemplo, si el sitio'la base de s es un color rojo vibrante ), editores desearán probablementehave controL oveR thaT coloR To suiT theiR own salvadod colores. Figure 3.1 exhibicións An example of A plantillodiseñe que tenga en cuenta la personalización del color sin ningún cambio al esquema de núcleo.

FiguRe 3.1. El tema icónico entra una variedad de colorean opciones

Anuncio cómo el color a la medida es usado en varios lugares en el tema: el color de base del título y |foote|R, los botones grandes en la parte superior de la primera plana, y el |colo| de enlace de normaR. Además de teniendo en cuenta las circunstancias cómo color es utilizado para los elementos importantes de la página, puede hacer también su "chasquido" de tema sólo por cambiar el color de los elementos decorativos: usar horizontal colorea rayas, balas, presentaciones de información para las imagenes, los elementos de barra lateral llenos de colorido, y las salpicaduras valientes del color en el |foote|R, por ejemplo. Allí's más para colorear que ser decorativo, sin embargo. Figura 3.2 y figura 3.3 son ejemplos de temas en que el color toma un papel más central en el tacto completo del diseño.

FiguRe 3.2. Daina Reed'la s purpura colores

Licenciado para estupendo! el libro electrónico www.wowebook.com fillBlip34 estructuraYnuestro propio maloWoRdPRtemas

de |ess|

BRanding

FiguRe 3.3. El |emb| de sitio BountyBevRas el azul de color

Si usted es arte de diseñar A tema eso pueda sea usado cerca A ampliamente rango de editores, ello's importante eso usted considera la marca de papel puede el |pla|y. El logotipos entra una amplia gama de tamaños, colores, y formatos. Asegure de que su diseño tienen en cuenta editores para usar su propio logo ( o añada texto para su sitio titula cuando no tienen una imagen ). Esto pueda parezca semejante obvio consejo, pero el consideración aquí sea eso el tema's logo espacio deba tener en cuenta una

57

variedad de posibilidades. Muchos sitio dueños necesidad para incluya A prominente frase de efecto o misión declaración ( casi uno para dos padre - |tences| mucho tiempo ) para el |blog| o la compañía eso'la s prominente en la primera plana. Asegura se le planee para este al construir su diseño. Additionally, usted pueda necesidad para considere diferente fuente pilas para permita editores para cambio el sonido de su sitio por escoger un |typeface| de alternativa.

TypogRaphy PorqueWlos sitios ordPress a menudo usan una gran cantidad de texto, usted debe estar dedicando cierto pensamiento serio para su tema's typography. Mientras que allí sea probablemente diez de miles de único visual las combinaciones factible por la fuente de CSS estilo, existen unos cuantos puntos principales que debe |conside|R.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 35

Uniformity A pesar del estilo de fuente usted escoge, lo'la s importante que es fijo en su tratamiento de fuente en cada parte su tema. Usar varios fuentes pueda marca su tema mirada desorganizado y unprofes - Sión. Ello pueda también saque para confunda editores casi que fuentes para uso en casa que contextos. El mejor tipográfico sistemas uso uno o dos typefaces para desarrolle se sofisticado y legible encasillados de texto en cada página.

Apresure seRARchy Use el tamaño y estilo de su tipo para desarrollar la jerarquía en cada uno de su tema'plantillos de s. Tel |raditional| imprime el diseño es un lugar ideal de qué dibujar inspiración. Considere un periódico: la primera plana mostrará osadamente los titulares principales, los artículos menores recibirán |smalle|R, pero titulares todavía legibles, y la copia de cuerpo siempre serán pequeños y uniformes de artículo a artículo. Como la mayoría de los editores de periódico a nivel mundial, el nuevoYork Tlos |imes| han reservado el tipográfico jerarquía de el impresión publicación para su sitio Web, como mostrado en casa Figura 3.4. Anuncio que allí está tres embellezca con historias los tamaños de fuente de titular: uno para el |stor| de rasgoy, otro para la historia secundaria en la primera columna editorial y los rasgos salientes de foto, y un tercero para otros resumenes en la primera plana. También, mirada a cómo tipografía está acostumbrado a establecer una jerarquía en la inscripción de sección en el menú lejos izquierdo: puede relatar de un vistazo que " libros " y "cine" es subdivisiones de " letras."

FiguR3.4. de eTypogRel |aphic| se apresuraRAR|chy| en El nuevoYel |ork| cronometra sitio Web

Licenciado para estupendo! el libro electrónico www.wowebook.com

36 estructuraYnuestro propio maloWoRdPRtemas de |ess| Deje'la s lleva esta metáfora arriba para suWtema de ordPress. El plantillo de página principal de su tema debe dejar saber usuarios rápidamente que ellos son y lo que el sitio'el contenido de cosa fundamental de s es. Poste y página títulos deba sea fácilmente para hallazgo, lea, y clic en. Subtítulos deba sea menos dominante y etcétera, hasta usted tenga intitulado el cuerpo policíay, que deba sea simple, legible, y consistente a través de todas las partes del sitio. Yel |ou| puede usar por supuesto otros elementos de diseño visuales para organizar satisfecho en sus páginas, pero está atento al power que tipo tiene que comunicar jerarca de informacióny. En casaWtemas de ordPressespecially, ello's A powerfuL way To ensure thaT contenT yos comunique sed claramente-vísperan yof you're insegurolo que va a ser ese contenido.

Raye longitud, espaciamiento de carta, y raye altura Estos elementos del diseño son a menudo descuidados, tan las omisiones de visor son generalmente vistas como ser " el sustancia pegajosad bastante." BuT paying CLOSe attention To how the smalL detalles wilL complemenT ustedR tema'sesquema y visual estilo sea a menudo el diferencia entre A bien diseño y uno eso sea verdaderamente imponente. Tel |ext| debería tener bastante habitación para respirar, y las líneas del texto deba evitar ser tan mucho tiempo que'la s difícil para el ojo para escudriñe atrás para el comienzo de el siguiente línea. Esto segundo punto sea particularmente pertinente a los esquemas de anchura flexible: considere cómo el texto se estirará si el sitio se está mirando en un |monito| muy anchoR.

Sustitución de fuente T|ypography| en elWel |eb| ha sido recientemente experimentando una forma del renacimiento. Previamente los diseñadores eran limitado para depender en A usuario's instalado fuentes para CSS estilo, o reemplazar el texto con un imagine o (temblor) la película de Flash; ningúnw, varias nueva sustitución de fuente y empotrando tecnologías se convierten en disponibles, permitiendo le el uso de virtualmente cualquiera fuente, mientras que los términos de licencia lo permiten. Yel |ou| debería abstenerse de usar sustitución de fuente para el texto de cuerpo; en vez, limita lo a títulos, títulos, | blockquotes| , y el semejante. una fuente a la medida puede dar a su tema un |personalit| distintoy. Aquí están pocos otros reglamentos del pulgar ( les rompa se a su propio riesgo ): ■ Aanule usando fuentes que son duras para leído. ■ No use más de una fuente mire como una sustitución de fuente a menos que tiene una razón muy bien. ■

Marca seguro eso visores pueda todavía tributo legible tipo cuando el fuente sustitución no haga occuR. This promedios paying attention To line altura, fonT coloR, und letteR espaciamiento. The same reglas discutidoen la mayor parte la sección de tipografía se aplica a la sustitución de fuente.

■ Considere las implicaciones de usar un |typeface| específico en los sitios de idioma no ingleses. Si su tema sea

59

probable que está usado con un idioma que requiera los caracteres desaparecido de ese |typeface| , necesita planear para una reserva o fuente de alternativa.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 37

Deje's mirada a A pocos sitios eso marca inteligente uso de fuente sustitución. Figura 3.5 sea A excelente ejemplo: las dos fuentes de título distintas complementan mutuamente con precisión y contribuya al estilo visual del sitio.

FiguRe 3.5. Fuente complementariaR|eplacement| en el SewWeekly

El sitio mostrado en casa Figura 3.6 también usos A pocos bien escogido costumbre fuentes para contribuya para el tacto y estilo del diseño.

FiguRe 3.6. Fuentes a la medida en diseñar InformeR, simplificado

Licenciado para estupendo! el libro electrónico www.wowebook.com

38 estructuraYnuestro propio maloWoRdPRtemas de |ess|

Estilo visual ColoR, typography, y la textura combina para crear un estilo visual único para su tema. Por tener una idea clara desde el principio de lo que está tratando de triunfar, será mejor capaz para combinar las partes distintas en un total cohesivo. Considere el sonido y contexto que está tratando de triunfar al llegar un estilo visual. Figura 3.7 y figura 3.8 ilustran dos estilos visuales individuales. Considere el mensaje que cada estilo transporta sin leer ningún de las palabras en las páginas.

FiguRe 3.7. El tema de Los Angeles

FiguR|ww| de 3.8. de ew.Rekkiabilly.com

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 39

As vean aquí, the visuaL style of ustedR e can mueva en círculoe atrásm clean und minimaL To bold und ilustrativo ( y toda cosa en casa entre ). Si usted es arte de diseñar A tema eso A rango de personas pueda uso, usted deba limitar los visuales estilo a los elementos simples, discretos, como éstos son mucho fáciles de acomodar según especificaciones. Conversely, yof you're designing A e foR A specific nicho, you'lL have A loT more room To maneuveR.

Esquema y composición

A el fin de Capítulo 2 , YO discutido el importancia de dibujo wireframes eso mapa exterior el el contenido en cada página de su tema, y cómo que contenido se organizará. Ahora que hemos alcanzado el diseño fase, ello's tiempo para mapa exterior el tema's esquema en casa más detalle. Escoger el esquema de su tema es una de las decisiones más cruciales para hacer durante el proceso de diseño.

La relación áurea Determinación de la antigüedad de vuelta al período artístico de renacimiento, la relación áurea es simplemente una relación matemática eso'la s extendido en existencia, y que tienden a dar a composiciones un equilibrio estética agradable. Toda cosa de una pintura al óleo a un diseño web puede usar la relación. La relación es bastante cerca de ( pero no exactamente ) unos dos tercios a un tercero hendidura, como se ilustra en figura 3.9.

FiguRe 3.9. El áureoRatio

En el AWtema de ordPress, la relación áurea normalmente aparece como la relación de la columna satisfecha principal para el barra lateral columna; ello pueda también sea aplicado para subcolumns, o para el altura de elementos en casa el título o footeR. Deje's mirada a A práctico ejemplo de lo que esto pueda promedio para su tema esquema. A el esquema de sitio típico es mostrado en figura 3.10.

Licenciado para estupendo! el libro electrónico www.wowebook.com

40 estructuraYnuestro propio maloWoRdPRtemas de |ess|

FiguRe 3.10. El áureoRel |atio| se aplicaba a un esquema de sitio

Esto wireframe en realidad usos el áureo relación para guía su columna y fila proporciones. El columna de 470px sea equilibrado contra el 270px columna, que en casa vuelta sea equilibrado contra el 160px columna. En casa el headeR, el dos secciones sea también proporcione a para el áureo relación. Anuncio cómo agradar estolayouT yos To the ojo. Alguna vezy column und row trabajos yon harmony ingenioh the otheR elementos yon the plantillopara crear un equilibrado, sin embargo interesando, la estructura visual.

Fijo o fluido

61

Porque las páginas de red son miradas en varios examinar sistemticamente tamaños y resoluciones, ello'valor de s considerando cómo el tema pueda adapte se para todo de el vario opciones. La mayor parte de el buró examinar sistemticamente tamaños sea arriba 1000px ampliamente por 600px alto (después que usted quita el visor y cromo de sistema operativo). Visores móvilesnaturally have A loT lesbianas piedrecillan AL estate To work con, though algunoslike the iPhone-compensepor ampliar el exterior entero de página para probar el screen.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101

41

Ynuestro tema pueda tenga A fluido anchura-eso sea, ello pueda adapte se se para el tamaño de el visor ventanaoyoT can be A fixed anchura. Ele are profesionals und contras sociod ingenioh eitheR acercamiento, though de anchura fijadiseños parezca para sea crecer en casa popularidad como a todo lo ancho de extremo monitores llegue a ser más frecuente. Son también un poco fáciles de código: no más preocuparme sobre su esquema rompiendo a un tamaño de ventana dado. Pero, como con todo diseñan decisiones asociadas con su tema, el esquema que pica dependerá de su tema'las metas de s y la declaración misional.

Opciones de esquema Después considerando su esquema en abstracto, necesitará escoger las dimensiones para su tema. En la mayor parte de los casos una anchura máxima de 960px es aconsejable, porque ello mostrará en la mayoría de examinar sistemticamente tamaños: su tema será mirar en un monitor con una resolución de 1024x768px, sin ningunos | scrollbars| horizontales detestables. Aún si haya escogido para construir un tema con una anchura fluida, debe todavía empezar la fase de diseño con un conjunto de dimensiones en mente, de modo que usted pueda establecer las proporciones implícitas de varios elementos. Allí están unas cuantas opciones tradicionales de qué picar cuando considerando su esquema. La mayoría campo común uno alrededor sea su jardín variedad de dos columnas y de tres columnas esquemas, que adapte bueno para A número de usos; para simple sitios, sin embargo, A de columna sencilla esquema pueda sea utilizable. Ejemplos de estos esquemas (en la orden numérica) muestre se en figura 3.11, las figura 3.12 , y figura 3.13.

FiguRe 3.11. un esquema de columna sencilla

Licenciado para estupendo! el libro electrónico www.wowebook.com

42 estructuraYnuestro propio maloWoRdPRtemas de |ess|

FiguRe 3.12. un esquema de dos columnas

FiguRe 3.13. un thResquema de columna de |ee|

Estos esquemas convencionales son atractivos y funcionales además. HoweveR, allí'la s ningún se necesite limitar por la convención! allí'la s una multitud de nuevoWlos temas de ordPress ése es verdaderamente fuera de la mayoría's percepciones de A WordPress tema. Figura 3.14 y Figura 3.15 sea ejemplos de Wlos temas de ordPress que usan los esquemas originales y poco convencional.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 43

FiguRe 3.14. El tema de flexión utiliza un esquema de rejilla flexible

FiguRe 3.15. Brizk el sitio Web de diseño usa una navegación fija y un verticalmente |sc|Rsección de grueso de |olling|

Mantener personalización en mente, podría también querer planear para los esquemas múltiples y permite sus usuarios para pico el uno ellos prefeR. You también proporcione A pocos costumbre página esquemas eso su los usuarios pueden aplicarse a las páginas específicas en sus sitios ( esto se discutirá además en el capítulo 7 ).

Licenciado para estupendo! el libro electrónico www.wowebook.com

44 estructuraYnuestro propio maloWoRdPRtemas de |ess|

La anatomía del AWoRdPRtema de |ess| En casa Capítulo 2 , nosotros vaya completamente el tema planificación proceso y terminado subida con A mapa del sitio y A pocos |wireframes|. Ningúnw, con la ayuda de los principios de diseño nosotros hemos visto en este capítulo así faR, estaremos volviendo sus |wireframes| en los bits y piezas reales de que el AWel tema de ordPress es hecho. Pero sólo lo que sea ésos bits y ¿piezas? Semejante muchos otro contenido manejo plataformas, WordPress trata la mayor parte de las páginas y postes en un |wa| muy del móduloy. Esto significa que la barra lateral en una página se casi siempre parecerá a la barra lateral en otra página. Mismo mensajero el | heade|R, footeR, yotheR elementos. Ele are severaL of the módulos thaT come togetheR To param A complete WordPress tema, und ello's importanT thaT you understand und address each ene yon the design

63

fase. YOn adición,existe varias páginas específicas ese poco más o menos cada sitio necesitará, y éstos deben ser parte de su tema: 404 páginas y resultados de la búsqueda de error folian, por ejemplo. Si usted deja uno o más de estos componentes involuntario, usted será forzado para subir con unappearance foR elm on the fly when you estrellaT coding ustedR CSS; this can often pradod To aunquee elementostener A pobremente definido visual estilo, o apariencia a desigualdad con el resto de su diseño. Cerca dirigir cada componente en la fase de diseño, asegurará que su tema tendrá un tacto consistente eso'capa aceitosa de s y profesional. A few of the core componentes of A standard WordPress home page template are exhibiciónn yon Figure 3.16.

FiguRe 3.16. La anatomía del AWoRdPRpágina principal de |ess|

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 45

Wla e examinará ahora cada componente a su vez, y mostraré usted ciertos ejemplos de multa del diseño esoshould inspire you ingenioh ideas abouT how To implemenT elm yon ustedR tema. AfteR eso, we'lL direcciónel diseño de cada una de la página teclea en nuestro mapa del sitio. A finales de esta sección, su cabeza estará girando con ideas, y usted debe deseoso del principio en su propio tema'diseño de s.

El título Mata de impresiones de primeroR. Ser los primeros visitantes de elemento ven cuando ellos alcanzan un sitio, el título es crucial para establecer el sitio'sonido de s y mensaje. un título limpio, uncluttered es una vía segura para ir, pero ello'la s lejos de ser el único, como veremos en breve. El título pueda casi siempre incluya el sitio's herradero, logo, y posiblemente su misión declaración. Depender en su sitio's esquema, el título pueda también incluya A navegación menú, A búsqueda baR, o otros elementos quieren enlaces para RSS comen, medios sociales, entrada en el sistema y registro, así como el anuncio sobresaliente se mancha. Figura 3.17 completamente a figura 3.23 se muestra cómo versátil un título de sitio puede ser.

FiguRe 3.17. Este título incluye la navegación de sitio, |functionalit| de entrada en el sistemay, y una declaración misional valiente

FiguRe 3.18. Este título claramente pone el énfasis en el sitio'declaración de misión de s

FiguRe 3.19. un título mínimo conteniendo navegación sóla y bRy es adecuado para el anchoR|ange| de sitios

Licenciado para estupendo! el libro electrónico www.wowebook.com

46 estructuraYnuestro propio maloWoRdPRtemas de |ess|

FiguRe 3.20. una mucha laRel título de ge que incluye una declaración misional y |featu|R|ca| de eRousel

FiguRe 3.21. Un ejemplo de un |mo|R|cente| de meta de eRtítulo de ed con un par de las llamadas claras al efecto

FiguRe 3.22. Este título usa color y bRy elementos para establecer el sitio'la s de fase codificadaRsonality

FiguRe 3.23. un |mo|Rla e envolvió título con navegación multinivel y un sitio de anuncio sobresaliente

Take A momento para nota lo que conjuntos cada uno título aparte de el siguiente en casa éstos ejemplos. Sea el título'¿meta de s simplemente para poner el sonido de diseño y buscar tentando el sitio? Tla o transporta el sitio'¿la s comisiona la declaración? O

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 47

¿es lo para alentar el usuario para hacer una tarea específica, quiera pida una cita o comparta el sitio con sus amigos? El truco es usar el título para realzar satisfecho eso'la s importante a sus propias metas de tema. Asegure se eso ello trabajos en casa armonía con su en conjunto misión declaración para el resto de el tema. Remem - esR, ello es su trabajo como A diseñador para ayuda guía usuarios para el la mayor parte de el pertinente contenido. A exitoso título inmediatamente dice usuarios donde son y qué tipo del contenido encontrarán al sitio; ello debe hacer también que ello simple para encontrar el más importante contenido. Si su diseño de título realiza esas metas, el resto está helando en el pastel.

El menú navegación Todas las cabecillas previas mostradas en este capítulo incluyeron el sitio'navegación de parte principal de s. Como la navegación tal A requisito parte de A sitio, deje's gaste algunos tiempo enfoque en navegación menúes en casa particulaR. Traditionally ellos aparezca a el por arriba de el página-horizontalmente-pero su

65

tema pueda incorpore se muchas exhibiciones de navegación, de una barra lateral verticalmente listada a un menú elegante que revelan se cuando el ratón revolotea sobre ello. Tenga presente que así como los enlaces a nivel superior, también necesitará diseñar para los |subpages| y sub los |subpages|. Caiga-abajo menúes son a menudo una solución perfecta para éstos envolvieron jerarquías; unos cuantos ejemplos son mostrados en figura 3.24 y figura 3.25.

FiguRe 3.24. El tema de InFocus incluye d de jQuery animadoRoperativo-abajo menúes para todos los |subpages|

Licenciado para estupendo! el libro electrónico www.wowebook.com

48 estructuraYnuestro propio maloWoRdPRtemas de |ess|

FiguRe 3.25. una d similarRoperativo-abajo menú en el tema de CleanCut

un menú de navegación puede incluir también extras como categorías (como se muestra en la figura 3.26), el | blogroll| , o cualesquiera otros enlaces que piensa será útil a visitantes. Mientras que ello'la s importante que evita tener su sitio's parte principal menú atropellado con también muchos opciones, allí's ningún necesidad para límite se a las páginas justas.

FiguRe 3.26. El tema de Los Angeles incluye un artículo de menú de navegación para las categorías

Cómo usted trata los visuales estilo de la navegación es también una consideración significativa. A menudo, las señales visuales sirven para ayudar a orientar usuarios haciendo lo obvio que folie que ellos están corrientemente en. un ejemplo claro, donde los lóbulos son usados para este propósito, se muestra en figura 3.27. Aún si lóbulos o botones son impropios a su tema'estilo de s o esquema, ello'la s importante para asegurar que su navegación es fácil de encuentre, lea, y el uso.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 49

fillBlipel

lazo

FiguR|deliba| de 3.27. de eRapp.com usen lóbulos para dar al sitio'la navegación de s un tacto físico

Esto sea discutiblemente el la mayor parte de el órganos vitales pieza de su entero WordPress tema. El Lazo sea el elemento esoWordPress usa para mostrar postes, si en la página principal, páginas de lista, o sencillo informa páginas. El lazo pueda generalmente incluya el título de el poste, su contenido ( o un extracto de ello ), y algunos el |metadata| tales como etiquetas, categorías, el autor denomina, y la fecha del poste. La figura 3.28 muestra que el la vía el lazo es diseñada en casaWordPress 3.0'tema de omisión de s,Twenty Tene. Ello'la s bastante básico, pero todos los elementos están allí, así que ello'la s un punto de partida bueno para su diseño.

67

FiguRe 3.28. La f de lazoRel |om| la página principal en elTwenty Ttema de ene

En casa A sencillo viejo vainilla tema, todo postes en casa El Lazo pueda mirada el mismo. Pero vida no sea sencillo viejo la vainilla, y ni haga suWordPress Loop necesita ser. Yel |ou| puede crear los diseños a la medida para el lazo para varios tipos del contenido; por ejemplo, un esquema para un poste de texto y otro para un poste de video, o tal vez los estilos diferentes para cada |categor|y.

Licenciado para estupendo! el libro electrónico www.wowebook.com

50 estructuraYnuestro propio maloWoRdPRtemas de |ess| Cuando considerando su propio diseño para el lazo, retorne a su declaración misional y decida lo que piezas de contenido sea pertinente para su tema's éxito. Si usted es arte de diseñar un imagen blog, usted podría optar para mostrar una uña del pulgar y un título con unas cuantas etiquetas. Alternatively, si usted está diseñando elJuego de naipesp foR A e comprising mainly texT contenido, additionaL metadatA such As the poste's fecha, authoR, categorías, und etiquetas can be helpfuL foR usuarios seeking contenT relevanT To theiR intereses. The ejemplosen la figura 3.29 completamente a la figura 3.30 muestre se lo que puede hacer con el lazo.

FiguRe 3.29. El lazo con una uña del pulgar de poste

FiguRe 3.30. una pRfecha de |ominent| y Continúe A de botón ReadingR|mo| de eRp de eRagmatic featuRees

FiguRe 3.31. Tla o facilita reparto, élRla e el lazo incluyeT|weet| este y corto URL vincula

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101

51

FiguRe 3.32. Las posibilidades de diseño adicionales incluyen laR|featu| de geRlas imagenes de e y |textu|R|backg| de edRounds

Pagination

Dondequiera que los postes son listados,WordPress puede partir de forma automática la lista en páginas si existe más de A conjunto cantidad. El paginación controles sea el enlaces eso permita usuarios para navegue atrás y delante por estas páginas de lista. El control de paginación es normalmente puesto al fondo de la página, después del lazo a menudo ello puede el rasgo a ambas parte superior y ponga fondo a. Puede compuesto de los enlaces próximos y previos, tan en figura 3.33 , o una lista numerada de páginas, como en figura 3.34.

FiguRe 3.33. un próximo simple/pRevious pagination contRol

FiguRe 3.34. un |mo|Rel sistema de paginación complejo de la e

Éstos ejemplos rasgos salientes eso usted necesidad para considere más que sólo el apariencia de el controles de paginación: usted también necesita considerar cómo que ellos trabajarán. Los enlaces próximos/previos de norma trabajan bien para los sitios simples y mantienen el |tid| de diseñoy, pero cuando usted tiene una cantidad grande del contenido, ello'sadvisable To give usuarios A more direcT way To aletad oldeR contenido, tempranoR than hitting the Previous botón 20 veces en un |ro|w.

Licenciado para estupendo! el libro electrónico www.wowebook.com

52 estructuraYnuestro propio maloWoRdPRtemas de |ess|

Comments WordPress'el sistema de comentario de s es un sorteo grande para los editores, así que debe prestar atención claramente a esta parte de su tema ! para muchos lo colocan será el punto primario del compromiso entre el sitio y sus lectores, así que ello'el valor de s empleando el tiempo un poco extra diseñando lo. Existen dos componentes al sistema de comentario que necesitan ser dirigidos en un tema. El primero es el forma eso visitantes pueda uso para poste comentarios, rasgo el denomine, correo electrónico dirección, sitio Web URL, y, por supuesto, campos de texto de comentario. El ejemplos yonFigura 3.35 para Figura 3.38 exhibición acercamientos para el forma's diseño, alcance de el extremadamente simple al más complejo.

fillBlip FiguRe 3.35. una forma de comentario simple y claramente ausente puesta FiguRe 3.36. Ahora para un |mo|Rla e de fase codificadaRtacto Hijo

FiguRe 3.37. Note esta forma'la s envia por correo electrónico el |checkbox| de notificación yRequiRcampos de ed

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 53

69

FiguRe 3.38. ÉlRuso de eRA de sRla e capaz a la pRel |eview| sus postes por adelantado, así como esRemembeRed

Como el posterior ejemplos resulte, allí sea desde luego A pocos campanas y silbatos a su disposición para vista con esmero el sencillo viejo comentario forma. You necesidad para sea consciente eso editores usar su tema pueda necesidadTo employ the rasgos, und plan foR elm yon the design fase. The Subscribe To Comentarios plugin,3que sume el Notifique de subida de seguimiento comentarios checkbox visto en casa Figura 3.37 y Figura 3.38 sobre, es uno altamente popular ejemplo. Allí sea también A número de plugins eso proporcione comentario |functionalit| de vista previay, así ello'el valor de s incorporando este rasgo práctico también. El componente principal de segundo deWordPress'el sistema de comentario de s es, por supuesto, los Comments les - propio. Cada comentario debería mostrar el name del cartel-normalmente como un enlace de vuelta al sitio Web URL que han proveído-así como la fecha el comentario era al corriente y el texto real de comentario. WordPress marcas uso de el Gravatar4 autor uña del pulgar servicio cerca omisión, así usted deba proyecto para mostrar avatares con los comentarios.

3 4

http://wordpress.org/extend/plugins/subscribe-to-comments/ http://en.gravataR.com/

Licenciado para estupendo! el libro electrónico www.wowebook.com

54 estructuraYnuestro propio maloWoRdPRtemas de |ess|

fillBlipfillBlipthRcomentarios

de |eaded|

Roscado comentando, un relativamente nuevo rasgo paraWOrdPress, permiten visitantes para contestar a los comentarios previos. Como consecuencia, las réplicas a menudo serán mostradas dente bajo el comentario de "padre" , antes que en una lista alineada cronológica. Ello'la s altamente aconsejable que su tema al menos el apoyothreaded comentar; individuaL editors mamáy selecT To operativoT ouT of this rasgo, buT As ello's normaen casaWordPress, usted necesitará asegurar que ello trabaja para editores que opta por permitirlo.

Deje's tome A mirada a algunos bien diseñado comentario listas en casa Figura 3.39, Figura 3.40, y Figura 3.41. Yel | ou| puede anuncio el claro separación entre comentarios, como bien como autor uñas del pulgar y botones de réplica prominentes.

FiguRe 3.39. Diseño de comentario claro y legible

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 55

FiguRe 3.40. Este comentario lista |featu|Rel |backg| alternante de las eesRound coloRs entre postes y grande Replybotones

FiguRe 3.41. El sitioPoint blogs use an arR|ow| para mostrar thRcomentarios de |eaded|

Licenciado para estupendo! el libro electrónico www.wowebook.com

56 estructuraYnuestro propio maloWoRdPRtemas de |ess| A menudo comentarios por el autor del poste eso'la s ser comentando en es intitulado diferentemente de otro comentarios, en casa orden para parada exterior, como visto en casa el último ejemplo. Esto sea A campo común bastante el rasgo que muchos editores seleccionan, así que ello'la s bien de valor investigando para la inclusión en su tema.

Barras laterales y artefactos

El término barra lateral tenga A cosa especial significado en casa WordPress: más bien que referirse específicamente para A columna de una parte de una página, la barra lateral es en realidad justa una sección en su esquema que puede contener usoR- artefactos especificados. La barra lateral es un área increíblemente flexible, así que ello'el valor de s empleando el tiempo en el diseño. El en conjunto apariencia deba sea consistente con el resto de su esquema, pero el los artefactos individuales se pueden más acentuado que están en casaWordPress'tratamiento de omisión de s. En primer lugar, sólo para poner a tierra su comprensión lo que examina AWordPress sidebaR, deje'la s mira versión a lo más básica del |sideba|R, realzado en figura 3.42.

FiguRe 3.42. La barra lateral en la omisiónTwenty Ttema de ene

El anuncio que la barra lateral incluye dos elementos: los títulos de artefacto y contenido de artefacto. Recuerde esos dos elementos básicos como echamos una mirada a otros estilos de barra lateral en figura 3.43 a la figura 3.48.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 57

71

fillBlip FiguRe 3.43. una barra lateral de estilo de marcador de libro FiguRe 3.44. una barra lateral diseñó paraRepRel |esent| un sobre

fillBlip FiguRe 3.45. una barra lateral limpia, mínima diseña FiguRe 3.46. Ciertos artefactos hábilmente diseñados a la medida en una barra lateral

Licenciado para estupendo! el libro electrónico www.wowebook.com

58 estructuraYnuestro propio maloWoRdPRtemas de |ess|

fillBlip FiguRe 3.47. Hacer el uso bueno del |typog|Raphy

FiguRe 3.48. Los artefactos de barra lateral parecen flotar sobre el sitio'|backg| de sRound

Ahora que hemos visto unos cuantos ejemplos creativos, deja'la s toma algún tiempo para disecar el |sideba|R. Ante todo, una barra lateral debe ser no menos que de 160 pixeles de ancho para explicar el conjunto de artefactos allá afuera. Cualquier más estrecho que ese y usted arriesga compactación en demasiado contente para ello para ser legible, o aún rompiéndose el esquema de algunos artefactos. Algunos barras laterales pueda sea como grande como 300 pixeles o más, que sea útil si necesite ajustar las unidades de anuncio de norma, tal como el anuncio de 300x250px popular. Tenga presente que el más espacie le dar al |sideba|R, el menos que usted habrá para el contenido.

fillBlipfillBliplas barras laterales que el ARla e no salga como negocio extra RemembeR, una barra lateral es sólo un espacio que puede tener un artefacto. Wel |ith| un poco de código obteniendo arguyendo, puede tener fácilmente estas áreas de artefacto listo en el |foote|R, el |heade|R, o aún a mediados del lazo. LeyT remembeR the reglamentos: make yoT A minimum of 160 pixeles, style the widgeT títulos, und prepare omisiónestilos para el contenido de artefacto.

WordPress proporciona sobre 20 artefactos implícitos, pero allí está un número casi ilimitado de los artefactos de | plugin| allá afuera-de folian listas y calendarios a medios sociales vinculan y se tocan formas. Yel |ou| puede aún incluir sus propios artefactos a la medida en su tema (Allan estará mostrando le cómo hacer esto en el capítulo 6). Ello's imposible para proporcione A costumbre diseño para cada uno artefacto exterior allí, pero el núcleo barra lateral elementos siempre permanecerán el mismo. Si dirija los elementos básicos del tamaño de fuente, relleno, margenes, artefacto títulos, y artefacto partidores, oportunidades sea usted puede fin subida con A exitoso barra lateral eso pueda

asidero todo género de artefactos que un editor podría querer usar. Ese antes mencionado, lo'el comprobación todavía de valor de la s su tema con tanes artefactos como usted puede para ver cómo miran.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 59

El peatón Como el name sugiere, el peatón del AWel tema de ordPress saca a luz al fondo de cada página, después de el contenido. Para algunos sitios, A convencional colorado barra con derechos de autor información y A pocos los enlaces puede sea aproprie de, pero esto sea sólo A fracción de lo que pueda sea logrado con A peatón; ello pueda proporcione visitantes con cierto contenido único u oferta otras vías de navegar el sitio. El peatón se parece una sorpresa convite para usuarios que tenga hecho ello todo el vía para el por abajo de el página, premiar su interés en el sitio. Si han hecho lo esta faR, ¿por qué no proporcionar les con cierta diversión y los enlaces útiles? Deje's principio cerca comprobación exterior peatones eso inclinación hacia el simple y convencional estilo. Figura 3.49, Figura 3.51 , y figura 3.50 son todo contraídas del sitio popular de temaWooThemes.com.5

FiguRe 3.49. F de simplicidad de peatónRom WooThemes

FiguRe 3.50. una variación en la pR|evious| conWooThemes' PostcaRtema de d

FiguRe 3.51. Wel tema de lona de ooThemes el peatón lo pone levantar un poco

Estos peatones muestran información de derechos de autor, un recordatorio del sitio marca, y uno ha un artefacto áreas. Son simples y exponga inadecuadamente, en conformidad con los estilos visuales de los temas de que son contraídos. Ahora al otro fin del espectro, donde veremos ciertos ejemplos más extravagantes de los diseños de peatón en la figura 3.52 completamente a la figura 3.56.

5

http://woothemes.com/

Licenciado para estupendo! el libro electrónico www.wowebook.com

60 estructuraYnuestro propio maloWoRdPRtemas de |ess|

73

FiguRe 3.52. Este |inspi|Rel peatón de ed diseña pRlas vías adicionales de Ovidio para el |visito|Rs al |inte|Racto con el sitio

FiguRe 3.53. Cubo ovalado'|offe| de peatón de sRla s vincula a postes, noticias, yTactualizaciones de ingenio

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101

61

FiguRe 3.54. Esta p de peatón expansivaResents an arR|ay| del contenido adicional e información de contacto

FiguRe 3.55. NumeRg de opciones de |ous|Rel |eet| el visitante queRcada el |ecoki| coloca peatón

Licenciado para estupendo! el libro electrónico www.wowebook.com

62 estructuraYnuestro propio maloWoRdPRtemas de |ess|

FiguRe 3.56. Aserrador Hollenshead'la s coloca el peatón combine artefactos y enlaces para el |inte|Rusuario de |ested|

Los peatones más avanzados sólo caracterizados, así como ser altamente creativo, se ofrecen los rasgos ese |com| el |plement| el sitio contenta. Estos rasgos pueden servir para reexpedir usuarios a otro contenido o herramientas de interacción que es del interés para ellos-los usuarios que de otra manera puede estar listo para dejar el sitio.

La casaPage Ahora que hemos cubierto todos los componentes del AWpágina de tema de ordPress, ello'tiempo de s para mirar a todas las páginas que constituye un tema. Deje'¿la s sale fuera del comienzo, puede que nosotros? El inicio página, frente página, aterrizaje página, salpicadura página-llamada ello lo que usted quiera, ello's el página eso su tema llamará la casa, el primer lugar que visitantes verán cuando ellos llegan su tema por el frente dooR. El vía usted acercamiento el frente página diseño sea atado para el mensaje eso usted necesidad al |delive|R. Saque a relucir sus rasgos mejores importantes, y usuarios sabrán inmediatamente porque quieren estar cerca. Si su tema va a enfocarse en las imagenes, vitrina les. Si su tema va a concentrarse en video, incluya un jugador de video en la primera plana. Si se proponga dar contenido de texto pesado, haga su página fácil de escudriñar.

El frente página diseño pueda también conjunto el sonido y estructura para su otro plantillos, así cierre atención para detallar aquí dará resultado, como la figura 3.57, Figura 3.58 , y figura 3.59 atestiguan.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 63

FiguRe 3.57. Dar golpes, negrita imagina gRel |eet| el visitante al tema de Unite'página principal de s

FiguRe 3.58. ElWooTube theme featuRlas ees un jugador de video considerable en la fRpágina de |ont|

Licenciado para estupendo! el libro electrónico www.wowebook.com

64 estructuraYnuestro propio maloWoRdPRtemas de |ess|

FiguRe 3.59. La p de página principal de tema de holaResents moRe como una revista que un sitio Web

El StandaRdPedadTemplate La norma o el plantillo de página implícito son el esquema eso'la s usada para el tema'la s folia contenido, talAs An AbouT página. Semiconductor de óxido metálicoT temas treaT the defaulT page template conservatively, since the contenT sesea bastante estático y cualquier cosa especial estilo pueda estar distrayendo. El plantillo tradicional de página incluye mismo |heade|R, sidebaR, y peatón eso'la s vista en la página principal. El Aspire tema y el Concepto tema, mostrado en casa Figura 3.60 y Figura 3.61 respectively, ambos plantillos de página bien diseñados de la vitrina. Los elementos principales son todo dirigidos: un |heade| uniformeR, sidebaR, footeR ( ningúnT mostrado ), und page contenT área. Notice the particulaR automóvile dén To the aparienciade subtítulos, las imagenes, listas, y el semejante. Los editores son capaz de usar estos elementos fácilmente dentro de sus páginas, haciendo les ajustar transparentemente con el resto de su sitio.

75

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 65

FiguRe 3.60. El diseño sagaz en el AspiRtema de e'|standa| de sRplantillo de página de d

FiguRe 3.61. El tema de concepto'la omisión de s folia plantillo

Licenciado para estupendo! el libro electrónico www.wowebook.com

66 estructuraYnuestro propio maloWoRdPRtemas de |ess|

El sencilloPost Template El plantillo sencillo de poste está acostumbrado a mostrar un poste de |blog| individual en su |entiret|y. Donde un plantillo de página tipicamente muestra sólo la página contenta, el plantillo sencillo de poste normalmente mostrará el | metadata| asociado con el poste, tales como etiquetas, categorías, |trackbacks| (un tipo del |linkback|), comentan, y el semejante. Recuerde eso mientras que El Lazo pueda a menudo sólo exhibición un extracto de el poste en su lista páginas, el sencillo poste plantillo pueda exhibición ello en casa enteramente. Algunos de el personalizaciones usted pueda instrumento pueda tomar la forma de las imagenes de poste a la medida, separadamente los citas de tirón, listas diseñados de los artículos relacionados, y único plantillos para diferente tipos o categorías de postes. Deje's tome A mirada a A complete blog plantillo de poste en figura 3.62. Este ejemplo de un plantillo de poste sencillo viene del tema de espectro cercaWooThemes.6

FiguRe 3.62. Sólo una f de ejemploRel |om| el espectro de sencillo informa temas disponibles

6

http://woothemes.com

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 67

El ARcebollino, AuthoR, Category, yTag PedadTemplates WordPress usos éstos plantillos para exhibición listas de postes eso sea filtrado en algunos criterio; esto pueda ser un |categor|y, quede cerca, |autho|R, o fecha. Como usted verá en la sección llamado " rápido y sucioTla jerarquía

de |emplate| referencia " en capítulo 5 , si su tema carece de un |categor|y, authoR, o marque con etiqueta el plantillo, el plantillo de archivo con base en fecha de norma estará acostumbrado a mostrar esas páginas. Esto es a menudo suficiente, como las necesidades de todos los esos tipos de página son mismo |simila|R. HoweveR, puede desear dar a uno o más de estos plantillos un estilo específico, yWordPress da le la flexibilidad hacer eso. Éstos plantillos sea muy flexible, y allí sea A número de vías usted pueda uso para presente los postes. Las exhibiciones de figura 3.63 un |possibilit|y, de los |blogs| de SitePoint.

FiguRe 3.63. La categoría aRcebollino en el sitioPlos |blogs| de |oint| muestran extractos de cada poste

Licenciado para estupendo! el libro electrónico www.wowebook.com

68 estructuraYnuestro propio maloWoRdPRtemas de |ess|

El marRresultados de |ch|Page Este plantillo maneja la tarea de dar resultados para las preguntas de búsqueda entradas por el usoR. Y no haga preocupación: allí's ningún requerimiento para usted para sepa algo casi búsqueda algoritmos-WordPress hace el duro trabajo para usted! Todo usted tenga para decida en sea cómo para exhibición el resultados. El diseño parathis page yos likely To be similaR To the archive plantillo-afteR todo, you're displaying A lisT of postes-peroyou aleso nacidad To accounT foR uny otheR param of contenT thaT mighT be retornado, like autores, categorías,o páginas. Ello'la s de mérito considerando personalizaciones que hace la búsqueda folia más útil a usuarios por mostrar el contenido adicional que podrían ser pertinentes a un que de búsqueday. Por ejemplo, deja'la s verifica las página de resultados de la búsqueda del sitio ThemeShaper en figura 3.64. Note que la barra lateral contiene un racimo de sugerido informan, en embalar el buscador no logró encontrar lo que estuvieron pareciendo |fo|R.

FiguRe 3.64. ThemeShaper'mar de sRch Rpágina de |esults|

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 69

Los 404Page WordPress proporciona la manipulación incorporada de " no folie encuentre " (404) errores. Antes que los usuarios de transmisión justos de vuelta a donde vinieron de, una 404 página utilizable ayudará usuarios por incluir una forma de búsqueda para hallazgo el contenido ellos vaya buscando, y sugerir cómo para informe el problema si ellos llegado por la via de un enlace interno. Yel |ou| podría considerar usar también esta página para mostrar el contenido popular del resto del sitio-después de todo, allí'la s ninguna razón para ellos para dejar el sitio

77

inmediatamente ! Figura 3.65 y figura 3.66 muestran cierto hábilmente diseñado 404 páginas de error.

FiguRe 3.65. La 404 eRo página fRom WooThemes

FiguRe 3.66. una 404 página f estilizadaRom El itálico valiente7

7

http://thebolditalic.com/

Licenciado para estupendo! el libro electrónico www.wowebook.com

07 estructuraYnuestro propio maloWoRdPRtemas de |ess|

StandaRla d estilo para los elementos de HTML Un a menudo descuide pero la pieza crucial de elWla anatomía de tema de ordPress que debe ser dirigida en la fase de diseño es un HTML de norma pruebe página. Esto es sólo un regularWordPress folia cuyo propósito sea para prueba estilo para todo de el comúnmente usado HTML elementos: títulos, párrafos, forme elementos, listas, imagenes, enlaces, blockquotes, y así en, para asegure eso ellos no haga rotura el esquema y que el estilo es consistente con el resto del tema. El tema de lona cercaWooThemes ha un muy completo página de prueba, mostrado en figura 3.67. Note que el diseñadores tenga tomado cuidado para incluya ambos ordenado y desordenado listas, como bien como cada nivel de el título; esto es el nivel del detalle deba apuntar |fo|R.

FiguRe 3.67. El elemento de HTML prueba página fRom Wel tema de lona de ooThemes

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema10171

ExtRun FeatuRes Ello's hierbah contemplating furtheR additionaL rasgos during the design fase. Adelgacek of the tradicionalWordPress tema ser semejante un anatómica corrija body, y éstos extras como el fresco cyborg partes. Ello'la s imposible para listar todos los rasgos añadidos que están ausente allí, pero aquí está algunos de los más populares.

FeatuRcursores de e Los cursores de rasgo son llamados también |leaderboards| dinámicos, los cursores, tiovivos de imagen, parte rotatoria satisfechos, cajas de rasgo, y probablemente mil otro denomina. A pesar de lo que usted opta por llamarlo, su propósito sea para rasgos salientes A selección de puestas contenido. Ello normalmente exhibiciones subida en casa A prominente ubicación sólo debajo del título de sitio y se enlaza por los artículos puestas, a menudo haciendo el uso de un JavaScript - efecto de potencia. Existe varios acercamientos para diseñando este en cierta medida el rasgo; dos son realzados en figura 3.68 y figura 3.69.

FiguRe 3.68. un |featu| de panel corredizoRcaja f de eRel |om| el sitio SlideDeck

FiguRe 3.69. Una f de cursor de imagenRom the Atlantica Ptema de |ortfolio|

Licenciado para estupendo! el libro electrónico www.wowebook.com

72 estructuraYnuestro propio maloWoRdPRtemas de |ess|

CostumbrePedadTemplates Cuando arte de diseñar para A WordPress tema, allí's ningún razón para parada a sólo uno norma página plantillo. Yel |ou| puede incluir un puñado de extra folian plantillos para editores para escoger de, debe quieren hacer su mirada satisfecha un poco diferente de la página a la página. Plantillos de anchura completa, imagen hacen galerías en plantillos, y plantillos de producto es unos cuantos campo común unos. Two alternativa página plantillos de el mismo tema sea mostrado en casa Figura 3.70 y Figura 3.71 ( para comparación, vimos este tema'la s tiene como valor predefinido la página en la figura 3.60 ).

FiguRe 3.70. El AspiRtema de e'plantillo de galería de s

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 73

79

FiguRe 3.71. El plantillo de anchura completa (sin la barra lateral) la fRom the AspiRtema de e

Encasillados publicitarios Un publicidad encasillado sea simplemente A espacio eso sea predefinido en casa su tema esquema para sea usado para adveR- |tising| o promociones. Ello'ideal de s para editores que quiere amonedar sus sitios, pero los encasillados de anuncio también trabajan sólo multa para los |bloggers| de norma para sus propias promociones. Las exhibiciones de figura 3.72 varios encasillados de anuncio pusieron en la barra lateral y sobre el contenido de poste.

FiguRe 3.72. Psdtuts+ |seve| de vitrinasRla costumbre de al anunciando se manchan en su plantillo de sitio

Licenciado para estupendo! el libro electrónico www.wowebook.com

74 estructuraYnuestro propio maloWoRdPRtemas de |ess|

Lightboxes A lightbox sea esencialmente A JavaScript plugin eso permite usuarios para carga grande imagenes interior A revolotearcontaineR. This feature has crezcan steadily yon popularity foR fotografíay und otheR dependiente de imagensitios. Al diseñar su tema, deba considerar si un |lightbox| podría ser apropiado para usuarios. Si usted decida eso ello sea útil, usted es entonces de cara con escoger lo que forma ello toma; esta es donde su investigación de caligrafía del último capítulo entrará manualy. ejemplo de norma de fillBlipA de un |lightbox| es mostrado en figura 3.73. El |plugin| de prettyPhoto 3.0 usa jQuery para presentar imagenes en un formato de galería. Note las imagenes pequeñas a lo largo del fondo, así como la navegación de flecha.

Medios sociales añadidos

FiguRe 3.73. La pRettyPhoto 3.0 plugin

Allí sea A ampliamente variedad de libere plugins eso permita usuarios para incluya social medios enlaces en casa A Wsitio ordPress con la riña pequeña. Yel |ou| puede cocer también estos rasgos directamente en un tema, derivación la necesidad de un |altogethe| de |plugin|R. Los artefactos de barra lateral y una lista de los botones de medios sociales-paraTwitteR, Facebook, Digg, Delicioso, y el semejante-a el por abajo o por arriba de A poste sea el la mayor parte de el campo común vías de incluir tales rasgos, pero puede integrarles también en el título o peatón de su tema. Figura 3.74 y Figura 3.75 sea dos ejemplos de el tipo de funcionalidad usted pueda considere; ambos se toman de los |blogs| de SitePoint.

Licenciado para estupendo! el libro electrónico www.wowebook.com

Diseño de tema101 75

FiguRe 3.74. un artefacto de medios de la barra lateral social

81

FiguRe 3.75. El reparto de medios social al final de cada poste

No deje algo el exterior ! Lo que deba levantar la mesa de este capítulo es lo siguiente: WordPress tiene un fijado el número de partes para que debe diseñar. A fin de tener un tema robusto, útil, usted necesite explicar todos estos. Aún si usted no tiene ningún se proponen usar todos y cada elemento de texto, forma, o artefacto en su versión del tema, editores usando su tema podría desear -así para ignorar el arte de diseñar para ellos puede impulsar sólo esos editores para ir en otra parte porque no logra darles lo que necesitan. A diferencia de A estático sitio Web donde usted sepa exactamente lo que elementos usted es arte de diseñar foR, ello's importante para explicar toda cosa en el AWtema de ordPress. Asegura se le mire a todos los elementos comúnes de HTML,Wlos plantillos de artefactos de ordPress, y de página cuando es en el paso de |mockup|.

Ponerlo todoTogether Ahora que hemos repasado los principios de núcleo del diseño que afecta AWtema de ordPress, así como los elementos básicos que un tema no puede vivir sin, lo'tiempo de s para usted para ir al trabajo en su propio diseño. Los próximos pasos en el circuito de producción de este libro le caminarán por construir en realidad su tema, pero espero que deja este capítulo con una impresión mejor de cómoWtemas de ordPress sea estructurado y diseñado. A su núcleo, WordPress temas sea A lote semejante cualquier otro diseño de sitio Web. Cerca ir detrás el fundamentos discutido en casa esto chapteR, usted deba sea aldabonazo exterior sus propios temas malos en un dos por tres !

Licenciado para estupendo! el libro electrónico www.wowebook.com

Licenciado para estupendo! el libro electrónico www.wowebook.com

Chapter

4

83

F de temaRameworks por Raena Jackson Armitage Una vez usted tenga un idea de cómo usted tuvo semejante su blog para appeaR, ello's tiempo para principio hurto de información contenida en ordenadores en el el tema mismo. Typically, AWel tema de ordPress necesita varios archivo core para funcionar-archivos para la página de índice, postes sencillos, páginas estáticas, y todos los bits y piezas ese viva adentro, tales como comentarios y barras laterales. WordPress'tema de núcleo de s,Twenty Tene, contiene 22 archivos en el total, y eso'la s excluyendo las imagenes. Allí seguro es una gran cantidad de trabajo allí dentro! Los desarrolladores de sentido común saben que volviendo a inventar la rueda es para succionadores, y cuando quiere partir a la derecha avance rápido, lo'la s a menudo rápidamente y fácil de basarse en la parte superior de un osadura. los desarrolladores de PHP han osaduras como CakePHP o CodeIgniter; Los individuos de acciones grotescas y desalmadas de color de rubí tienen el rubí en los rieles; .los desarrolladores de NET han ASP.NET. ElWla comunidad de tema de ordPress no es ninguna excepciónlos osaduras de desarrollo de tema se han levantado para hacer que ello más simple para usted para crear su propio tema. WordPress tema desarrollo osaduras mirada sólo semejante parroquiano regular temas-desafío nosotros say, aún A horadación de pedacito pequeña-sin embargo debajo de sus fachadas modestas yazca la funcionalidad poderosa que actúa como un andamio para su propio desarrollo de tema. En este |chapte|R, nosotros miraremos a porque los osaduras es tal idea excelente, cómo escoger el mejor osadura de tema para usted, y cómo aumentar que el osadura con nuestros propios estilos eróticos y el |functionalit| a la mediday.

Licenciado para estupendo! el libro electrónico www.wowebook.com

78 estructuraYnuestro propio maloWoRdPRtemas de |ess|

Porque use una fRamework? apuesto es el ómnibusy, ¿derecho? Yel |ou| es excitado probablemente también para empezar su desarrollo de tema tan pronto como les sea posible. Y como su carrera de tema crezca, apreciará algo que puede le ayudar a salvar algún tiempo. Los osaduras de desarrollo de tema están aquí para hacer su vida un |easie| de lote enteroR. Osaduras proporcione aumento de precio, funcional elementos, y a menudo algunos básico CSS, todo de

que usted pueda usar como una fundación para su propio tema. Para |themers| de principiante, usando un osadura significa que puede gastar puesto menor de tiempo en conjunto su código, y más cronometre concentrandome en su diseño. Ello's también una excelente vía para aprender sobre cómoWlos temas de ordPress son puesto el |togethe|R, especialmente si usted es bastante nuevo a PHP. Más tarde en, una vez usted ha establecido se como A de renombre mundial WordPress tema roca staR, encontrará que usando un osadura le salva cronometrar: usted gastará el tiempo menor en hacer el trabajo repetitivo que cada tema exige, y más en los detalles más finos de su nueva obra maestra.

Temas hijos: El dolor punzanteW|ay| para basarse en A FRamework Parte posterior en días antiguos de |ye| , si quisiera modificar la salida del AWtema de ordPress, usted hubo tenido queediT the e directly. Ele nosotrose vy few opportunities To alteR A tema's markup oR funcionalidadsin cambiar los archivo template. Si el tema que empezó de ser sido mejorado, usted hubo entonces tenido que gastar el tiempo cuidadosamente integrante sus alteraciones retroceden en el original recientemente actualizado-apenas el más productivo uso de su tiempo. WordPress 2.7 cambiado todo eso cuando ello introducido el concepto de A niño theme-A tema eso ex -asista las capacidades de otro tema. A un mínimo, un tema hijo necesita sólo una hoja de estilo (style.css) dentro de su propio directory, y otro tema especificó como el padre. CuandoWordPress construye una página, ello tomará la hoja de estilo del tema hijo, y los plantillos del tema matriz. Pero para el más aventurado, niño temas pueda ayuda usted vaya aún furtheR, con dos vías para haga caso de el comportamiento de el padre. Allí's un adicional archivo, functions.php, eso's disponible para sumar su propio código al tema. Lo que's más, los archivo template almacenados dentro del tema hijo'la directorio s hará caso de esos del padre. Esto significa que si desea el cambios hechos para el tema matriz'aumento de precio de s o |functionalit|y, todo lo que usted necesita hacer es la escritura una función a la medida, o haga que su propia versión del plantillo pertinente-y |voilà| , el control completo. Aquí'la s el mejor pedacito: mientras que elWla comunidad de ordPress ha desarrollado varios de rasgo ricoosaduras especially foR this propósito, uny e can actinioT As A padre. YOf ustedR favorite e pasestransformación en su licencia, tiene libertad para ir inmediato derecho y lo use como un osadura para su hermoso nuevo tema, sin editar el original en ningún |wa|y.

Licenciado para estupendo! el libro electrónico www.wowebook.com

F de temaRameworks

79

Allí's nada comparado con prevenir que usted de directamente modificando un osadura de tema, si eso'la s lo que ponga su barco, pero el dolor punzante dinero's en usar A niño tema como a menudo como usted pueda. Siempre que su tema matriz'el desarrollador de s hace que un actualización a su tema, poniendo al día el suyo es tan simple como instalar la versión fresca del padre. Ynuestro tema hijo se actualizará instantáneamente al mismo tiempo, significando que gasta el tiempo menor preocupandome sobre incorporar sus cambios.

85

En este |chapte|R, estaremos manteniendo una máxima muy importante en la mente: manos del tema matriz ! lo'la s los más limpios, simple la vía para basarse en un tema y evite que ágil sobre sus propios dedos del pie.

Cómo haga escojo una gRcoma fRamework? Como YO mencionado más temprano en casa esto chapteR, usted pueda uso cualquier tema como A osadura-proporcionar, de el curso, que su licencia le permite hacer así. Eso a menudo significa que un premio-o pague-el tema es una elección pobre para todo el mundo que necesidades para distribuya su temas para libere. Aquí sea algunos importante puntos para examinar. HTML limpio, semántico un tema con el HTML válido, semántico significa que será una subida de estilo de breeze to su tema con su propio CSS. si su tema en perspectiva ha un |demo| folie, lo corra por el |validator| de W3C1y vea lo que caídas exterior. You deba también subsistencia un ojo exterior para abundancia de clase ganchos para usted para cuelgue su CSS en, como esto hará su trabajo mucho más fácil cuando ello viene tiempo para crear su tema hijo. ejemplos de CSS un osadura bueno vendrá idealmente con cierto CSS mínimo usted puede usar como un iniciador para su propio estilo. A excelente osadura pueda tenga A número de esquemas disponible para usted para uso; ideally, ello tendrá también estilístico diferente concernir tal como |typograph|y, coloR, y el esquema llegó entre los tres primeros en archivos separados, hacer que ello simple para usted para ser quisquilloso de las omisiones. SEO se beneficia Si ha soñado de ver su tema en miles de los |blogs| populares, puede apostar que SEO será más alto en las mentes de esos |bloggers|; deba tener razón ascendente allí en el suyo, también. Ynuestro osadura's aumento de precio deba seguimiento bien SEO prácticas, tal como A sensato uso de títulos y elementos semánticos, el título descriptivo los elementos, y uso bueno del meta elementos. Widget-ready Ynuestro osadura deba incluya abundancia de lugares para WordPress artefactos. Ynuestro usuarios pueda sea menos de impresionado si su tema sólo pases artefactos en casa barras laterales. Delicado bloggers mirada para temas eso apoyo artefactos arriba y abajo postes, en casa cabecillas y peatones, y en realidad en cualquier parte pueden hacer entrar apretando sus artefactos favoritos y dulces.

1

http://validatoR.w3.org/

Licenciado para estupendo! el libro electrónico www.wowebook.com

80 estructuraYnuestro propio maloWoRdPRtemas de |ess| Juegos bien con los |plugins|

Ynuestro elección de osadura deba, ideally, juego con precisión con popular plugins. Algunos osadurasalready include CS foR the semiconductor de óxido metálicoT populaR plugins, und AT the vy menos, the framework desarrolladorhaya debido examinar el tema en un |blog| con bastantes |plugins| instaló. Documentación y apoyo un osadura de tema bueno tendrá documentación y una avenida para apoyo, si eso'la s un foro, |wiki| , lista de distribución, o aún un apoyo rotula sistema. Tel |ake| una mirada alrededor de y vea lo que el comunidad's semejante-sea ellos útil ángeles o caprichoso ¿repeticiones? Esto sea especialmente ciertamente si está comprando un tema pagado; ¿por qué deja caer todo ese dinero en efectivo para el apoyo andrajoso o no existente?

FRameworks Wexterior de comprobación de |orth| Aunque cualquier tema de un modo imaginable sea usado como A osadura, algunos notabilidad ejemplos tenga sido diseñado especialmente para este propósito. Wla e echará una mirada a estos ningúnw, así como ciertos temas hijos ése ha sido creado desde ellos.

FReebies Aquí está sólo algunos de los osaduras libres excelentes en el |offe|R.

Thematic Ian Stewart's Temático, mostrado en casa Figura 4.1 , sea uno de el mejor conocido tema osaduras exterior allí, y para bien razón: ello jactancias miles de usuarios, ello tenga sido ensayado con docenas de popular | plugins| , y allí's abundancia de útil, libere comunidad apoyo. You pueda garfio Temático de ThemeShapeR,2que sea también inicio para A enorme colección de seminarios casi edificio niño temas, como bien como crear su propio osadura.

FiguRe 4.1. un |demo| temático sencillo, usando los estilos implícitos

2

http://www.themeshapeR.com/

Licenciado para estupendo! el libro electrónico www.wowebook.com

F de temaRameworks

81

Los temas hijos temáticos son abundantes: Figura 4.2 , figura 4.3, andFigure 4.4 muestre sólo cómo flexible este osadura puede ser.

FiguRe 4.2. ThemeShaper usa un tema hijo temático

FiguRe 4.3. Comuna, por Cristian Antohe3

87

3

http://www.cozmoslabs.com/2009/04/07/green-anyone-try-commune-thematic-child-theme/

Licenciado para estupendo! el libro electrónico www.wowebook.com fillBlip82 estructuraYnuestro propio maloWoRdPRtemas

Hybrid

FiguRe 4.4. El Neutica+4 tema hijo, por el col de Allan de coautor

de |ess|

Justin Tadlock's Híbrido, mostrado en casa Figura 4.5, jactancias abundancia de documentación y apoyo, y ello'la s libera y abre fuente. Yel |ou| encontrará también una colección de traducciones de idiomas, bastantes temas hijos para descarga y try, y Específico híbrido plugins para mejore su uso de esto excelente libere tema. Acceso a una colección extensiva de los gastos de seminarios y foros en profundidad un razonable US$25.

FiguRe 4.5. Híbrido en el efecto

4

http://fthrwght.com/neuticaplus/

Licenciado para estupendo! el libro electrónico www.wowebook.com

F de temaRameworks

83

Yel |ou| puede descargar híbrido del híbrido de tema.5 Mientras que está allí, eche una mirada a alguno del hermoso niño tema ejemplos cerca Justin; screenshots de dos de pueda sea visto en casa Figura 4.6 y figura 4.7.

FiguRe 4.6. ShaRla e sus pensamientos con el mundo, con Life Collage

FiguRe 4.7. Ello'la s bromea, lo'la s construye un techo a cuatro aguas, lo'la escuela vieja de la s

5

http://themehybrid.com/

Licenciado para estupendo! el libro electrónico www.wowebook.com

84 estructuraYnuestro propio maloWoRdPRtemas de |ess|

Carrington fillBlipCrowdFavorite'Carrington de s6 el osadura es fuente abierta, y entra cuatro sabores: uno con cierto diseño gráfico puesto en casa(La figura 4.8 ), un sin el aumento de precio a todo, un diseñe especialmente para los dispositivos móviles, y la vainilla vieja sencilla. Allí'funcionario de s y comunidad soportan disponible, y bastante documentación para el código curiosoR.

89

Pf de ayudaRameworks

FiguRe 4.8. El |blogger| - y Carrington Blog de miembro amigable de desarrollador

Éstos pagado osaduras venga con pilas de campanas y silbatos, A fuerte empresa y SEO enfoque se, y el apoyo de primera calidad.

Thesis El osadura de tesis de los temas de DIY7 prometa poner fin a todo su SEO se preocupa, con bastantes opciones para usuarios finales y desarrolladores de tema de profesional igualmente. En tesis, usted hace transformaciones para A costumbre CSS y funciones archivo dentro el tema se, más bien que usar el método de tema hijo mencionado arriba, pero ello's todavía un osadura de roca sólida no obstante. En el momento de la escritura, Tesis sea $87 para nota particular uso y $164 para desarrolladores, y allí's A medrar plaza del mercado para las pieles de tesis.8 La piel implícita de tesis es mostrada en figura 4.9.

6

http://carringtontheme.com/ http://diythemes.com/ 8 http://thesisthemes.com/ 7

Licenciado para estupendo! el libro electrónico www.wowebook.com

F de temaRameworks

FiguRe 4.9. ElRf de tesis de |ock| sólidoRamework

La tesis maneja varios |blogs| populares; verifique algunos de sus usuarios de perfil alto en la figura 4.10 y |belo| de figura 4.11w.

FiguRe 4.10. Sobrecarga linda-para el más fino en las imágenes lindas

Licenciado para estupendo! el libro electrónico www.wowebook.com fillBlip86 estructuraYnuestro propio maloWoRdPRtemas

de |ess|

85

91

Genesis

FiguRe 4.11. El contenido obligatorio de CopyBlogger

StudioPress'osadura de génesis de s9 proporcione un tema sencillo, servible con numerosos esquemas incluidos, y requiera sólo un poco CSS amar para realmente brillar. Ciertos artefactos de génesis específica ayudan a extender esto tema bien más allá alternativa ofertas. Ello's US$59.95 para su posea uso, y allí's una plaza del mercado de tema de génesis oficial para vender sus temas hijos. Figura 4.12 y figura 4.13 muestran algunas de las variaciones frescas que usted puede triunfar con el osadura de génesis.

FiguRe 4.12. Mirar el |demo| de tema de génesis

9

http://www.studiopress.com/

Licenciado para estupendo! el libro electrónico www.wowebook.com

F de temaRameworks

FiguRe 4.13. Esta génesis hijo tema es verdaderamente emprendedor

Así que la fR¿el |amework| es lo mejor? C'mon, SitePoint, nos sólo diga que es lo mejor! Wana, el mejor osadura de tema para usted para usar es, por supuesto, totalmente hasta usted y sus

87

necesidades. En realidad, usted podría decidir que ninguno de ellos tiene razón para usted, y que tuvo más bien revuelva su propio. Cualesquiera trabajos para usted ! Para nuestra parte, nosotros trabajaremos por los cuatro capítulos próximos usando el osadura temático libre. Produce cierto aumento de precio terrífico lleno de las clases semánticas para ayudarle a hacer milagros con CSS, y tenga un SEO amistoso presentación y abundancia de posibilidades para sumar su posea costumbre código. Ello'la s sido creado especialmente para el método hijo de tema hemos recomendado en este libro, y es diseñado con los desarrolladores de tema en la mente. Ello'la s también libre, que hacen ello que fácil para usted para dar en conocedor de los ejemplos de este |chapte|R.

Construir un niño Theme simple Teoría bastante-apuesto está tascando el freno absolutamente para empezar en su tema. Deje'la s hace un tema hijo simple.

PReparing Ynuestra lona Tprincipio de o con, asumiremos que ha agarrado ya una copia deWordPress al uso para el desarrollo de tema y comprobación, como sugerido en casa Capítulo 1. Wla e puede también asuma eso usted ha poblado su |blog| de desarrollo con cierto maniquí contenta.

Licenciado para estupendo! el libro electrónico www.wowebook.com

88 estructuraYnuestro propio maloWoRdPRtemas de |ess|

Lo que'¿la s todo este sobre el contenido postizo? Ello'la s importante al camino pruebe su tema con una variedad buena del contenido. Por supuesto, si usted tiene su propioW|blog| de ordPress, pudo exportar su |blog|'la s contenta como el AWordPress exporta el archivo ( deTools fillBlipfillBlip>exportación), y lo importe en su |blog| de |dev| ( navegando paraTools > Import, y entonces hacer clic en elWordPress vincule ). Otra opción es crear que pruebe el contenido a mano, asegurando que usted ha en - |cluded| gran cantidad de diferente contenido: grande y pequeño imagenes, ordenado y desordenado listas, |blockquotes| , paginaron informan, y el semejante. Pero el rápidamente vía de todo sea para garfio algunos maniquí contenido y importación ello. A bien vía para haga así 10 sea conWordPress'el archivo unit testing de tema muy propio de la s, que puede agarrar del códigox -llenará su |blog| con postes de todos los formas y tamaños, páginas, etiquetas, categorías, y aún ciertas ataduras. Yel |ou| pudo probar 11 también el |plugin| de contenido de maniquí de WP, que pueden añadir y quitar números astronómicos de postes con unos cuantos abotonan fácilmente prensas.

Agarre una copia de temático de su página de descarga,12 o use el visor de tema en suWinstalación de ordPress, y instale ello en casa su WordPress wp-content/themes directory. Tacto libere para vaya adelante y activa lo como su tema en este momento-ello'la s una excelente oportunidad para ver cómo un tema temático implícito mira y trabajan. View el fuente de su blog's inicio página, y usted puede vea lo que marcas Temático's aumento de precio excelente: ello'la s atiborrada con la clase útil denomina, yods, |microformats| , y más. Aquí'la s el cuerpo elemento de mi |blog| de prueba:

93

Y aquí'la s unos para los div el elemento que rodea el primer poste en la página:

Ély, nosotros le advertimos que era relleno ! apuesto se está preguntando lo que toda esta clase es es el |fo|R, y yo soy alegre usted preguntado. Lo que marcas Temático's HTML salida así útil para themers sea eso allí'susually A class foR uny purpose you can adelgacek de, und thaT promedios you can achieve A loT of arrulloL efectossin los necesitan modificar los plantillos en ningún |wa|y. Imagina le quiera decorar su informan cabecillas con un poco de corazón cada vez le usar la etiqueta " ame."Wana, eso'|eas| de sy, porque temático cree una clase para cada etiqueta y exagere el poste'di de sv.

10

http://codex.wordpress.org/Theme_Desarrollo_Checklist#Theme_Unidad_Te http://wordpress.org/extend/plugins/wp-dummy-content/ 12 http://themeshapeR.com/thematic/ 11

Licenciado para estupendo! el libro electrónico www.wowebook.com

F de temaRameworks

89

Para nuestra muestra informe sobre nosotros tenemos un untagged clase porque el poste tuvo ningún marcan con etiqueta anexo a ello, pero para postes eso tenga etiquetas usted puede vea classees eso mirada semejante tagtagname. Así nosotros somos mirar para los postes de objetivo con la clase tag-love: .poste.amor de etiqueta.título de entrada{ base: |url| (heart.gif) centre ninguna repetición de izquierda }

Haga usted necesidad el primero poste en su inicio página para tenga grande ¿texto? Fácilmente ! Temático dé cada A de poste poste número class, y allí's A inicio clase en el cuerpo etiqueta cuando usted es mirar el inicio página. Así queremos hacer esto: body.home.p1{ tamaño de fuente: 1.5em}

Deba el título sea más alto en A específico ¿página? Temático exhibiciones usted A clase para cada poste o página's ID, así que ello'la s una cincha: body.pageid-14 #header{ altura: 500px; }

¿Sufrimiento de un caso terrible de los estilos de jazz de IE6? Guarde esos caballos de alquiler evasivos; Temático'la s examinaR, versión, y clase es de plataforma le tienen cubrir:

body.ie6 #branding{ /* el material específico de Internet Explorer 6 aquí */ }

T|ake| algún tiempo para examinar temático'aumento de precio de s y aprenda sobre alguna de la clase es útil proporciona. Las oportunidades son que temático'las s de id y clase es dinámicas de la s permitirán hace che cierto estilo muy específico cambia sin el necesite cortar ausente al aumento de precio. En este punto, lo'la s también valor pareciendo dentro del temático directorio para ver lo que lo hacen marcar con una contraseña. Deje'verificación de s ello exterior: nosotros vea A número de PHP plantillo archivos, algunos directorios, A readme archivo, y, de curso, el CSS para este tema. La mayor parte de los nombres de archivo deben ser bastante que se explica por sí mismo: el |heade|R.php buenas apariencias de archivo después título lógica, post.php relacione se para cómo postes sea mostrado, y así delante. Interior el |folde| de bibliotecaR, encontrará una colección de los ayudantes prácticos-más CSS, JavaScript, y archivo PHP-ese temático use para trabajar algunas de su magia. Wla e encontrará que estos útil luego, pero si es el tipo curioso, no tenga inconveniente en fisgonear y vea alguno del código que maneja este tema. Y ély, lo que's eso a el por abajo ¿allí? Temático tenga aún suministrado su posea muestra niño tema para empezarnos de la derecha avanza rápido, convenientemente el |thematicsamplechildtheme|llamado. Adentro lo, allí'la s un archivo style.css, A functions.php archivo, y A práctico readme, invitar para principio de puntapié nuestro niño tema con estos archivos. pienso che que nosotros haremos justo ese!

Licenciado para estupendo! el libro electrónico www.wowebook.com

90 estructuraYnuestro propio maloWoRdPRtemas de |ess|

CRcomidaYnuestro niño Theme Copie el |thematicsamplechildtheme| el directorio sostiene al contenido de |wp|/temas directory, y da lo A nuevo denomine. YO proyecto para llamada mi nuevo niño tema "Wicked," así yo he nombrado esto carpeta apropiadamente: wicked. Después, necesitaremos hacer ciertos cambios a la información de tema, que está todo guardado dentro del tema'la s style.css archivo. Abre lo levante se en su |edito| de texto favoritoR, y eche una mirada a lo que's allí: capítulo_04/v1/wicked/style.css(extracto)

/* El tema denomina: un niño Theme temático Tema URI: Descripción: Use este tema para empezar su desarrollo de niño Theme temático. Autor: Ian Stewart Autor URI: http://themeshaper.com/ plantillo: temático Versión: 1.0 Etiquetas: Temático . Temático es © Ian Stewart http://themeshaper.com/ . */

95 ⋮

Lo que'¿la s sucediendo aquí? Wana, ese encasillado de comentario grande al mismo comienzo del archivo ejecuta un trabajo muy importante: define el tema'título de s, |autho|R, URI, descripción, etiquetas, y |numbe| de versiónR. Esta información aparece a lo largo de cada tema en suWinstalación de ordPress'apariencia de s > Temas elija jurado, mostrado en figura 4.14. Allí sea dos artículos que sea ausiente se de el Conducción Temas panel, howeveR. El línea a partir del plantillo: relateWOrdPress ese temático es nuestro tema matriz, así que deba usar los plantillos de temático en rebeldía. La otra línea con la declaración de derechos de autor se excluye también de elWordPress admin sección; esto sea A lugar para ponga comentarios, instrucciones, o aún A bien chiste de golpe de golpe-algo que usted quiere.

Licenciado para estupendo! el libro electrónico www.wowebook.com

F de temaRameworks

91

FiguRe 4.14. Los temas de conducción el panel en casaWoRdPR|ess| 3, mostrándoseTwenty Tene y temático

Deje's personalice esto tema's información ningúnw. Ello's aprobación si usted ha todavía para decida en A denomine o A descripción; nosotros pueda vaya atrás y cambio esto siempre que nosotros quiera, pero para ningúnw, definir A denomine a el muy menos sea un principio bueno: capítulo_04/v2/wicked/style.css(extracto)

/* El tema denomina: Tema malo Tema URI: http://example.com/themes/wicked Descripción: un tema hijo temático ése es sólo para los puntapiés. Autor: Raena Jackson Armitage Autor URI: http://example.com/themes Plantillo: temático Versión: 0.1 Etiquetas: Los tres columnas, azul, temáticos, encanezca, encanezca . Este tema es © 2010 Raena Jackson Armitage. . */

⋮

Licenciado para estupendo! el libro electrónico www.wowebook.com

92 estructuraYnuestro propio maloWoRdPRtemas de |ess|

fillBlipfillBlipKel

|eep| que ello comprime !

Línea roturas composición para WordPress y éstos artículos pertenezca en uno línea cada uno. Si su descripción sea tan mucho tiempo que ello requiere un nuevo párrafo, usted puede querer considerar editando lo.

Ahora que hemos nombrado nuestro tema, deja'la s dirige los temas de conducción panel otra vez. Si usted se haya ejecutado cada uno de éstos pasos correctly, usted puede vea su tema sentarse a lo largo cualquier otro temas instalados, con su denomine, la descripción, e información adicional como mostrado en figura 4.15.

FiguRe 4.15. Ély, eso'la s mi tema !

Todo parezca que está en servicio aquí. Deje'la s activa nuestro tema y lo empiece estilo levantarse!

Pareciendo elegante FoR ningúnw, we'lL estrellaT by adjusting the CS To suiT ouR design A little betteR. Thematic helpfully proporcionaun racimo de excelente restablecen los estilos, esquemas preempaquetados, |typograph|y, y otros ayudantes de CSS; si usted mira adicional abajo en casa el styles.css archivo, usted puede vea eso ellos han sido importado en nuestro muestra niño tema. Aquí'la s lo que el resto del tema'la s style.css buenas apariencias quieren:

Licenciado para estupendo! el libro electrónico www.wowebook.com

F de temaRameworks

capítulo_04/v2/wicked/style.css(extracto)

⋮ /* Restablezca las omisiones de visor */ @importe el |url| ( "../thematic/library/styles/reset.css'); /* Aplique los estilos de tipografía básicos */ @importe el |url| ( "../thematic/library/styles/typography.css'); /* Aplique un esquema básico */ @importe el |url| ( "../thematic/library/layouts/2c-r-fixed.css'); /* Aplique los estilos de imagen básicos */ @importe el |url| ( "../thematic/library/styles/images.css');

93

97

/* Aplique los estilos y colores de tema implícitos */ /* Es mejor para copiar en realidad sobre default.css en este archivo ( o vincule a una copia en su tema hijo ) si usted vaya a hacer algo atroz */ @importe el |url| ( "../thematic/library/styles/default.css'); /* Prepare tema para los |plugins| */ @importe el |url| ( "../thematic/library/styles/plugins.css');

fillBlipfillBlipno

sude el estilo envuelve en sábanas !

Los que están en el poder y fuera de cómo trabajar con CSS es más allá el alcance de este libro-figuramos que si usted es interesado en casa WordPress tema, usted ya tenga algunos comprensión de cómo para uso CSS. para un introducción para el desierto y prenda de lana mundo de el estilo hoja, ello's duro para vaya pasado Estructura Ynuestro propioWel |eb| coloca el derechoWel |ay| usando HTML y CSS, 2 edición ( Melbourne: SitePoint, 2008 ) y los prácticos referencian en línea texto, referencia de SitePoint CSS.13

Mientras que los temáticos básicos de diseño proporcionan es … bueno, delicado, lo resultar insuficiente desde luego en las estacas de encanto. Deje'la s hace ciertos cambios al |typograph|y, colores, y esquema. El primero cambio sea fácilmente: a el momento esto tema lugares A barra lateral en el derecho, pero yo tuve prefiera ello en el izquierda. Temático's library/layouts carpeta proporciona A racimo de esquemas nosotros aplique se para nuestro tema: de dos columnas izquierda (2c-l-fixed.css) o derecho (2c-r-fixed.css), de tres columnas con A barra lateral en también lado de el contenido principal ( 3c-fixed.css), o de tres columnas con ambas barras laterales enderece se ( 3c-r-fixed.css y |primar| de 3c de R fijadoy.css, que difiera en la orden de las barras laterales ).

Cambiar el omisión sea como fácilmente como recolección exterior el uno nosotros necesidad, y cambiar el referencia para ello en nuestro style.css archivo. En este caso, yo deseo 2c-r-fixed.css para mover mi barra lateral en la izquierda:

13

http://reference.sitepoint.com/css/

Licenciado para estupendo! el libro electrónico www.wowebook.com

94 estructuraYnuestro propio maloWoRdPRtemas de |ess|

capítulo_04/v3/wicked/style.css(extracto)

/* Aplique un esquema básico */ @importe el |url| ( "../thematic/library/layouts/2c-l-fixed.css');

fillBlipfillBlipsentir

tipo de pluma en?

Por supuesto, si ninguno de estos estilos importados convenga sus ideas, tiene libertad para quitar las declaraciones de @import y estructura su posea esquema, typography, o omisión restablezca estilo hojas. RemembeR, está en el control !

Después, deje's piense casi coloR. Haga usted anuncio el útil poco comentario casi default.css en casa el ¿codifique el ejemplo sobre? Ello'la s recordando nos copiar el default.css archivo a nuestro propio tema si nosotros nos proponemos hacer algo atroz. Lo que estamos a punto de hacer somos apenas atroces, pero el consejo para copiar el archivo sobre está sólido: deje'la s hace que ningúnw, y cambie nuestro @import declaración para reflejar su nueva ubicación. Copie el default.css archivo de el temático directorio en su niño tema's directory, entonces cambio el @importación accordingly. Tacto libere para cambio su denomine; usted pueda necesidad para permiso se A comentario para recuerde se eso ello'la s una copia del original. Para los propósitos de miWtema de |icked| , yo he nombrado de nuevo el archivo newstyles.css: capítulo_04/v3/wicked/style.css(extracto)

/* Aplique los estilos y colores de tema implícitos -- Esta es una copia de los temáticos default.css */ @importe el |url| ( 'newstyles.css');

fillBlipfillBliptemático'la

s CSS y el GPL

Temático ponga en circulación bajo la licencia pública general; si copia su CSS para uso en su tema hijo su CSS también será destinado por los términos de esta licencia. Mientras que esto puede no presentar ningún problema para usted ( la abundancia de exitoso comercial temas sea GPL licenciado ), si usted proyecto en distribuir su tema y prefiera A más restrictivo licencia para su clientes ( vea el sección llamado " el dual Li - incensar " en el capítulo8), necesitará escribir su propia hoja de estilo desde el principio.

El archivo es un grande-demasiado desee mucho reproduzca se en este libro-pero aquí'la s un extracto de ello. Tel | ake| su tiempo y lo examine cuidadosamente; verá que los seleccionadores son agrupados según el propósito, y allí'la s un estilo para poco más o menos cualquier elemento que piensa que podría usar. Wla e empezará por chapotear algo de la pintura en el tema's título; nosotros somos mirar para A sección servicialmente marcado =Header. Aquí's lo que encontramos allí: #título{ z-index:2; }

Licenciado para estupendo! el libro electrónico www.wowebook.com

#herradero{ padding:88px 0 44px 0; } #título de |blog|{ font-family:Arial, sin línea de pie; font-size:34px; font-weight:bold; line-height:40px; }

F de temaRameworks

95

99

#A de título de |blog|{ color:#000; text-decoration:none; } #a:active de título de |blog| , #a:hover de título de |blog|{ color: #FF4B33; } #descripción de |blog|{ color:#666; font-size:13px; font-style:italic; }

Cambiar los colores es simple: he escogido un azul oscuro para la base, y esto significa que el texto y colores de enlace también necesitan cambiar: capítulo_04/v3/wicked/newstyles.css(extracto)

#título{ z-index:2; base: #07426c; } ⋮ #A de título de |blog|{ color:#fff; text-decoration:none; } #a:active de título de |blog| , #a:hover de título de |blog|{ color: #f47920; }

Licenciado para estupendo! el libro electrónico www.wowebook.com

96 estructuraYnuestro propio maloWoRdPRtemas de |ess|

#descripción de |blog|{ color:#eee; font-size:13px; font-style:italic; }

Cómo'¿la s que mirando? Deje'la s descubre: el resultado es mostrado en figura 4.16.

FiguRe 4.16. Tener mucho cuidado

Como YO sume y ajuste más estilos, mi tema empiece para tome forma. Wla e puede omita todo el cubierto de sangre coagulada detalles de este libro, pero si es curioso para ver lo que subí con, no tenga inconveniente en bucear en el archivo de código 14

y examine mi CSS.

Keep Paprobando ausente a esos estilos ¿Parezca razonablemente directo, correcto? Ello's simplemente un composición de examinar el tema'aumento de precio de s, y hallazgo A vía para traiga su diseño para vida con su aguja muy delgada CSS habilidades. With algunos endecha CSS, y A pocos horas' fisgar, aguijonear, y refrescarse, usted deba tenga A que parece agudamente plantillo. You pueda ver lo que YO logrado en casa Figura 4.17 usar sólo CSS cambios. You pueda golpe completamente el estilos YO usado en el v4 carpeta en el archivo de código para este |chapte|R.15

14 15

Agarre el archivo de http://sitepoint.com/books/wordpress1/code.php La imagen de título es licenciado las cámara baja debajo creativas http://creativecommons.org/licenses/by-sa/2.0/ por el usuario de Flickr

Seo2. http://www.flickr.com/photos/seo2/

Licenciado para estupendo! el libro electrónico www.wowebook.com

F de temaRameworks

97

FiguRe 4.17. Malo !

UNA FR|ame| paraW|ork| con We've learned how easy yoT yos To abucheosT ouR e developmenT esfuerzos ingenioh A e osadura-usarun osadura salvará nos pilas del tiempo de estructuración tedioso, dejando nos liberar para bucear en la parte divertida de haciendo que ello parece todo excelente. Muchos themers pueda hallazgo eso simplemente modificarme el CSS sea todo ello toma para cree A nifty, original tema hijo. Pero lo que si usted necesidad para esparza su alas A poco ¿adelante? En casa el siguiente chapteR, nosotros puede explore cómo añadir más funcionalidad a un tema.

101

Licenciado para estupendo! el libro electrónico www.wowebook.com

Licenciado para estupendo! el libro electrónico www.wowebook.com

Chapter

Construcción de tema avanzada por Raena Jackson Armitage

5

En casa el previo chapteR, nosotros explorado cómo para cree A nuevo niño tema de el Temático el osadura usando unos cuantos archivan y ciertos dolor punzante de CSS. Ahora es probablemente asombrado cómo hacer que el tema hijo trabaja algo más duro para usted y ponga su propio sello encima. Si es así, esto es el capítulo para usted ! Antes que empezamos metiendome en código, |howeve|R, ello'tiempo de s para reiterar lo que aprendimos en capítulo 4: manos del tema matriz ! aún si usted decide le absolutamente deteste la vía una parte particular de sus trabajos de tema matrices, y es desesperado para cambiar lo, lo'mejor de s para evitar cortar las agallas fuera del tema matriz. Wla e ha vías para modificarlo en una moda segura, simple. Comprensión cómo hacer así primero requiere que cierta explicación de cómoWordPress considera sus plantillos-aquí'la s el |backstor|y.

CómoTemplates Work Tlos archivo emplate son una mezcla de HTML y PHP y pueden contener su propio código, así como llamadas paraWordPress'|functionalit| de núcleo de sy. Al desarrollar su tema, una de sus tareas principales serán examinar su tema matriz'los plantillos de s y encuentre los lugares donde el aumento de precio que quiere modificarse se están generando. A fin de hacer eso necesita tener cierto conocimiento

103

de base de cómoWtrabajo de plantillos de ordPress, así que empezaremos allí. CuandoWordPress rinde una página, verifica en el tema activo'directorio s para el plantillo derecho al uso para el tipo de contenido que ello'la s yendo al |displa|y. ¿Cómo sabe que el archivo template para escoger? Ello depende en el tipo de página ser rendido a el tiempo, y que plantillos sea disponible para uso.

Licenciado para estupendo! el libro electrónico www.wowebook.com

100 EstructuraYnuestro propio maloWoRdPRtemas de |ess| WordPress verificará para los archivo template con muy específico denomina, en un |orde| muy específicoR, antes de finalmente cayendo de vuelta a index.php ; esta sirva de un tipo de captura-todo para rendir páginas cuando ninguna papáR- los plantillos de |ticular| son definidos.

Rápido y sucioTel |emplate| se apresuraRARRefe de |chy|Rence Aquí'la s una referencia rápida a los nombres de archivoWordPress mira para cuando ello rinde cada tipo de la página.

InicioPage En casa WordPress 3.0 , A blog administrador pueda especifique si para exhibición el último postes o A estático folie como el |blog|'página principal de s. Los plantillosWordPress looks foR, en el |orde|R, sea: 1. front-page.php 2. page.php o home.php, en dependencia de lo que era escogido en el |blog|'colocaciones de s 3. index.php Wlas faltas de ordPress 2.x este rasgo, así la orden simplemente serán: 1. home.php 2. index.php

SencilloPosts 1. single-posttype.php, donde |posttype| represente uno deWordPress 3.0'la s informa tipos. Por ejemplo, si su |blog| estaba sobre recetas, y usted tiene un tipo de poste llamado recetas,WordPress busca un plantillo llamado singlerecipes.php. 2. single.php 3. index.php

SencilloPages 1. WordPress puede el primero busca un plantillo especificado en la página'colocación de plantillo de s-más en este tardeR. 2. page-slug.php, donde haragán sea el haragán especificado en el página. Para ejemplo, si usted tenido A página llamado Casi,WordPress primero busca page-about.php.

3. page-id.php, being the numeric YOD of the página. YOf ustedR AbouT page had An YOD of 2, eln the plantillo WordPress busca es page-2.php. 4. page.php 5. index.php

Attachments 1. MIMEtype.php, donde MIMEtype represente el tipo ancho de su atadura-quiera audio.php , image.php, text.php, o video.php

Licenciado para estupendo! el libro electrónico www.wowebook.com

101

Construcción de tema avanzada

2. attachment.php 3. index.php

fillBlipfillBliplo que el ARla e actúa como mimo hacer en casaWoRdPRess? En Internet, el formato de la misma clase de datos, tal como un documento o una página Web, especifique se por el AheadeR called A MELINDROSOE tipo. MELINDROSOE paradas foR Multipurpose InternoT MaiL Extension, although MIMOlas cabecillas son en uso por más del correo justo. MIME de campo común teclea para los documentos familiares incluyen el texto / html para documentos de HTML, aplicación/cierre para ZIP documentan, imagen / |gif| para GIF imaginan, y así en.

Categoría ARchives 1. 2. 3. 4. 5.

category-slug.php, donde haragán sea la categoría'haragán de s. category-id.php, donde id sea la categoría'el ID numérico de la s. category.php ARchive.php index.php

TA de |ag|Rchives 1. 2. 3. 4. 5.

tag-slug.php, donde haragán sea la etiqueta'haragán de s. tag-id.php, donde id sea la etiqueta'el ID numérico de la s. tag.php ARchive.php index.php

TA de |axonomy|Rchives Las taxonomías a la medida no conocerWordPress 3 , así estos plantillos son nunca llamados porWordPress 2. 1. taxonomy-taxonomyname-term.php, donde |taxonomyname| represente el haragán del impuesto a la medida - |onom| y, y término representa eso de el término. Si su taxonomía era llamado Quesos y su el término era Brie, entoncesWordPress buscará taxonomy-cheese-brie.php al listar artículos de ese término.

105 2. 3. 4. 5.

taxonomy-taxonomyname.php, similar al arriba, pero sin el término. taxonomy.php ARchive.php index.php

Licenciado para estupendo! el libro electrónico www.wowebook.com

102 EstructuraYnuestro propio maloWoRdPRtemas de |ess|

A de autorRchives 1. author-nicename.php, donde |nicename| sea el autor'el |username| de s hizo adecuado para URL-toda la minúscula, con espacios transformado en guiones. Si un autor's username era Kelly Steele, entonces el plantilloWordPress busca es author-kelly-steele.php (WP3). 2. author-id.php, donde el id sea el |autho|R. Si Kelly'el ID de s era 3, entonces author-3.php pueda ser el plantilloWordPress escogería (WP3). 3. authoR.php 4. ARchive.php 5. index.php

A con base en fechaRchives 1. date.php 2. ARchive.php 3. index.php

MarRch Pages 1. marRch.php 2. index.php

404Page 1. 404.php 2. index.php Eso seguro sea A lote de material para remembeR. Fortunately, Rami de trucos de |wp|1 tenga hecho A limpio diagrama2 eso explique el plantillo jerarquía visually. You pueda semejante para impresión ello y uso ello como A tramposo hoja !

fillBlipfillBlipsiempre en movimiento es el FutuRe

Nuevas versiones deWordPress llega ásperamente cada tres a cuatro meses, y nuevo plantillo denomina pueda ser añadido a cualquier de las liberaciones próximas. Verifique elWordPress CodexTpágina de jerarquía de |emplate|3 para el último y máximo.

ElTel |emplate| se apresuraRARlos temas de |chy| y de niño Cuando usted es usar A niño tema, el plantillo jerarquía llegue a ser A poco más complejo. WordPress puede el primero busca el más específico plantillo en su tema hijo, entonces al padre, entonces de vuelta a

1

http://www.wp-tricks.co.il/ http://codex.wordpress.org/images/1/18/Template_Jerarcay.png 3 http://codex.wordpress.org/Template_Jerarquía 2

Licenciado para estupendo! el libro electrónico www.wowebook.com

103

Construcción de tema avanzada

el niño para el siguiente la mayor parte de el específico, entonces atrás para el padre de nuevo-todo el vía abajo el línea hasta que recurre a finalmente el padre'la s index.php archivo. ¿Es su hila principal sin embargo? Aquí'la s un ejemplo. Deje'la s dice que usted tiene unFpágina de AQ con un haragán del |faq| y un ID de 12.WordPress puede el primero verifica si haya especificado un plantillo en la página'colocaciones de s; de lo contrario, ello verifica por lo siguiente archivan que está en servicio: 1. 2. 3. 4. 5. 6. 7. 8.

el tema hijo'la s page-faq.php el padre'la s page-faq.php el niño de nuevo para page-12.php el padre'la s page-12.php el niño'la s page.php ¿( es que nosotros detectando un modelo aquí?) el padre'la s page.php el niño'la s index.php finally, el padre'la s index.php

Por supuesto,WordPress puede hacer todo este en el parpadeo de un ojo.

Temático'sTemplates Como nosotros aprendimos retroceda en el capítulo4, Temático es un excelente osadura porque lo'la s empaquetada con el |functionalit| frescoy. To mejor comprenda cómo para estructura en su plantillos, nosotros deba gaste algunos tiempo descubrir cómo son puestos |togethe|R. Deje'la s echa una mirada de nuevo dentro de temático'directorio s; verá una pila de archivo template, y si estuvo pagando la atención cercana a la sección previa, muchos de éstos deben ser familiares a usted: ■ 404.php ■ ARchive.php

107 ■ ARchives.php ■ attachment.php ■ authoR.php ■ category.php ■ comments.php ■ footeR.php ■ functions.php ■ headeR.php ■ index.php ■ links.php ■ page.php ■ marRch.php ■ marRchform.php ■ sidebar-index-bottom.php

Licenciado para estupendo! el libro electrónico www.wowebook.com

104 EstructuraYnuestro propio maloWoRdPRtemas de |ess| ■ sidebar-index-insert.php ■ sidebar-index-top.php ■ sidebar-page-bottom.php ■ sidebar-page-top.php ■ sidebar-single-bottom.php ■ sidebar-single-insert.php ■ sidebar-single-top.php ■ |subsidiar| de barra lateraly.php ■ sidebaR.php ■ single.php ■ tag.php Allí's aleso A de |lookin| curiosog directory, libraRy, which yos filled ingenioh directories foR estilos, lenguajes,caligrafías, y así en. El la mayor parte de el interesar subdirectorio en casa allí sea extensions-ello contiene todo el atiborre que hacen que temático haga el vodú que hace. Erm, haga. Aquí'la s lo que'interior de s: ■ comments-extensions.php ■ content-extensions.php ■ discussion.php ■ dynamic-classes.php ■ footer-extensions.php ■ header-extensions.php ■ helpers.php

■ shortcodes.php ■ sidebar-extensions.php ■ theme-options.php ■ widgets-extensions.php ■ widgets.php The denomines of each of the archivos should give you A clue As To whaT ely deaL con: footer-extensions.php obviamente relacione con los peatones, comments-extensions.php a los comentarios, y así en.

Construir un estilo de revista a casaPage Ahora que hemos adquirido cierta comprensión de cómoWordPress negocia con los plantillos, deja'la s pone que el conocimiento en la práctica y comience a acomodar según especificaciones nuestro tema. La omisión mira y comportamiento de temático es, bien, el tipo del |bloggy|-nada contra |blogs| , le presta atención a, pero queremos che nuestro tema para tener algo más zumbido. A lo largo del resto de este | chapte|R, modificaremos la página principal por desembarazarme de ese |sideba|R, crear un área para listar los extractos e informan uñas del pulgar de algunos de los postes más recientes, y añadiendo un elemento de peatón de página inicial específica

Licenciado para estupendo! el libro electrónico www.wowebook.com

Construcción de tema avanzada

105

esa repite la inscripción de página. Wla e añadirá también los enlaces de medios sociales y un |bio| de autor para cada poste, dondequiera que se encuentra por casualidad mostrado.

Desembarazarme de esa barra lateral Cuando usted es trabajar con A tema osadura, el simple vía para estructura su posea tema el plantillo es copiar el archivo pertinente del padre y ponerlo en su tema hijo. Como hemos visto sólo, cuando WordPress sea versión A página, ello pueda verificación el niño tema en primer lugar, así cualquier plantillo nosotros ponga en nuestro tema hijo haga caso del plantillo equivalente en temático. Para nuestro truco primer, nosotros queremos quitar la barra lateral de la página principal. CuandoWordPress quiere rendir la página principal, ello puede el primero verificación el colocaciones para vea si el blog administrador tenga especificado A página para acto como el página principal; de otra manera, ello buscará el home.php plantillo. Temático carecen de un home.php archivo a la policíay, pero index.php convenga nuestros propósitos con precisión como incluye corrientemente todos los elementos de página deseamos, así como una lista de los postes recientes. Copia lo de temático, lo ponga en su tema hijo, y lo nombre de nuevo para home.php. Aquí'la s el nuevo plantillo íntegramente: capítulo_05/v1/wicked/home.php

'; }

Alrededor de línea 13 , temático_peatón aparezca: esto controla la exhibición del texto de peatón, que usted puede poner en las opciones elija jurado temático proporciona para elWordPress admin section. Wla e aprenderá más sobre

las opciones a la medida elija jurado y cómo puede crear uno para su tema hijo en capítulo 7. Ningúnw, para poner la lista de páginas en casa: WordPress'|wp| de s_lista_páginas5 la función hará exactamente eso. La mayor parte de el tiempos when you aletad yourself wanting To include some additionaL contenT yon ustedR tema, WordPress pueda tenga A función listo para proporcione el información usted necesidad. Sólo tenga A mirada alrededor el Códice: la mayor parte de las funciones tienen denomina que dé a una idea clara de lo que hacen. We paf wp_lista_páginas derecho allí en casa nuestro nuevo inicio página peatón plantillo, y ello tuvo todo multa de trabajo. Pero como un punto de manejo de la casa bueno, lo'la s una idea mejor para esconder este lejos en nuestro archivo functions.php. functions.php tienda a servir de una captura-todo para la funcionalidad a la medida aumenta su tema hijo. Por almacenar nuestra página liste el generador allí dentro, aseguramos que si nosotros alguna vez necesitamos visitar lo en alguna otra parte de nuestro plantillo, nosotros podemos encontrar ello fácilmente y lo refiera a en una moda simple. Eche el claro que functions.php archive y escriba su primera función a la medida: capítulo_05/v2/wicked/functions.php

" ¿name= " : " ¿value= " " />

Licenciado para estupendo! el libro electrónico www.wowebook.com

159

" ¿id= " " value= "verdadero" />

Licenciado para estupendo! el libro electrónico www.wowebook.com

160 EstructuraYnuestro propio maloWoRdPRtemas de |ess|