Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Word Press

1,246 views

Published on

Word Press. Cómo armar tu plantilla en word Press

Published in: Design
  • Be the first to comment

Word Press

  1. 1. COMO CONVERTIR MI DISEÑO EN UNA PLANTILLA DE WORDPRESS<br />LUIS PALOMINO<br />
  2. 2. INGRESA EN LA CARPETA DE TEMAS SIGUIENDO LA RUTA INDICADA Y DUPLICA LA CARPETA DEL TEMA DEFAULT PARA NO DAÑAR LA ORIGINAL<br />
  3. 3. LOS ARCHIVOS AMARILLOS SON LAS PARTES BÁSICAS DEL DISEÑO Y LAS MORADAS SON LAS QUE PERMITEN QUE SE VEAN LAS IMÁGENES.<br />ABRE LAS AMARILLAS EN DREAMWEAVER<br />
  4. 4.
  5. 5. Es archivo INDEX obtiene usando get() los otros archivos para que formen parte de su estructura o diseño<br />
  6. 6. INDEX. Es el archivo que se ve cuando ingresas a la web. Muestra una lista de los post publicados.<br />SINGLE. Es el archivo que se ve cuando ingresas a ver un post.<br />PAGE. Es el archivo que se ve cuando ingresas a una página del Wordpress. Se crean de manera independiente a los post<br />404. Es el archivo que se ve cuando ingresas a un post o archivo que no existe o no está disponible.<br />
  7. 7. HEADER<br />
  8. 8. EL ARCHIVO INDEX INCORPORA AL ARCHIVO HEADER A TRAVÉS DEL CÓDIGO get_header();<br />
  9. 9. EN EL ARCHIVO HEADER LA INFORMACIÓN SOMBREADA ES LA ESTRUCTURA DEL DISEÑO DEFAULT. NO NOS SIRVE, POR ESO LA BORRAMOS.<br />
  10. 10. UNA VEZ BORRADO EL CÓDIGO DEL HEADER EL DISEÑO SE MOVERÁ A LA IZQUIERDA, ESO ES NORMAL<br />
  11. 11. INDEX<br />
  12. 12. AGREGUEMOS DOS LINEAS DE TEXTO PARA QUE VEAS COMO ESTAS APARECEN EN EL DISEÑO<br />
  13. 13. AGREGUEMOS DOS LINEAS DE TEXTO PARA QUE VEAS COMO ESTAS APARECEN EN EL DISEÑO<br />
  14. 14. DENTRO DEL ARCHIVO INDEX HAY CUATRO PARTES IMPORTANTES QUE PERMITEN CONSTRUIR EL ARTÍCULO O EL POST DEL WORDPRESS<br />TITULO<br />DEL ARTÍCULO<br />FECHA Y AUTOR<br />DEL ARTÍCULO<br />CONTENIDO<br />TEXTO DEL ARTÍCULO<br />INDICA LA CATEGORÍA DONDE SE ENCUENTRA EL ARTÍCULO Y SI TIENE COMENTARIOS<br />POST META<br />
  15. 15. TITULO<br />FECHA Y AUTOR<br />CONTENIDO<br />POST META<br />ASÍ SE VEN EN EL ARTÍCULO<br />
  16. 16. ASÍ SE VEN EN EL CÓDIGO<br />FECHA Y AUTOR<br />TITULO<br />POST META<br />CONTENIDO<br />
  17. 17. UNA VEZ ACABADAS LAS PARTES DEL ARTÍCULO APARECEN 4 CURACTERÍSTICAS MÁS<br />SI HAY MÁS ARTÍCULOS QUE MOSTRAR APARECEN LOS BOTONES ANTERIOR Y SIGUIENTE<br />END WHILE<br />CUANDO NO ENCUENTRA EL ARTÍCULO<br />ELSE<br />END IF<br />CIERRE DEL CÓDIGO<br />get_sidebar()<br />get_footer()<br />CARGA LOS ARCHIVOS SIDERBAR Y FOOTER<br />
  18. 18.
  19. 19. LA ZONA SOMBREDA DE AMARILLO ES LA QUE PERMITE QUE WORDPRESS FUNCIONE Y SE VEA.<br />EL get_sidebar PERMITE QUE SE VEA EL LADO<br />
  20. 20. FOOTER<br />
  21. 21. SELECCIONA LAS ULTIMAS DOS LINEAS DEL FOOTER: </body></html> SON LAS ÚNICAS QUE NECESITAMOS. CÓPIALAS.<br />
  22. 22. PEGA AQUÍ EN EL INDEX LAS LÍNEAS DEL FOOTER REMPLAZANDO LA LÍNEA DEL get_footer.<br />
  23. 23. TRAE AHORA TU DISEÑO<br />
  24. 24. LLEGÓ EL MOMENTO DE TRAER TU DISEÑO, ASEGURATE DE TENER TU HTML DE PRUEBA EL CSS QUE LO CONSTRUYE Y LA CARPETA DE IMAGES<br />
  25. 25. COPIA LAS IMÁGENES EN LA CARPETA IMAGES Y COPIA TU ESTILO JUNTO A LOS OTROS ARCHIVOS<br />
  26. 26. EN EL ARCHIVO INDEX CORTA EL TEXTO DE LA ESTRUCTURA DEL WORDPRESS Y SÓLO DEJA LO QUE SE VE EN ESTA IMAGEN<br />
  27. 27. PEGA LO CORTADO EN OTRO ARCHIVO, NO LO PIERDAS POR QUE LO VAS A VOLVER A UTILIZAR<br />
  28. 28. COPIA TODA LA INFORMACIÓN QUE ESTÁ DENTRO DEL BODY DE TU DISEÑO TU ARCHIVO PRUEBA.HTML<br />
  29. 29. PÉGALA EN EL ARCHIVO INDEX.PHP DESPUÉS DEL get_header(); ?><br />
  30. 30. SELECCIONA LA PARTE DE TU DISEÑO DONDE APARECE EL TEXTO Y CORTALA<br />
  31. 31. SELECCIONA LA PARTE DE TU DISEÑO DONDE APARECE EL TEXTO Y CORTALA<br />
  32. 32. PEGA EN EL LUGAR DE DONDE SACASTE EL TEXTO QUE DEJASTE EL CÓDIGO DEL WORDPRESS<br />
  33. 33. V<br />AHORA COPIA LA LÍNEA QUE HACE LINK A TU ESTILO PERO AGRÉGALE EL TEXTO: <?phpbloginfo(‘stylesheet_directory’); ?>/ COMO SE VE ARRIBA<br />
  34. 34. EL DISEÑO SE VERÁ HASTA EL MOMENTO ASÍ<br />
  35. 35. CSS DEL WORDPRESS<br />
  36. 36. REALIZA LOS SIGUIENTES CAMBIOS UNO POR UNA, GRABA Y ACTUALIZA LA WEB. MIRA LO QUE GENERAN.<br />
  37. 37.
  38. 38. AHORA EL ARCHIVO SINGLE<br />
  39. 39. DE MANERA SIMILAR AL INDEX APARECERÁ CON PROBLEMAS, ES POR ESO NECESARIO AGREGAR ALGUNOS PUNTOS.<br />
  40. 40. DE MANERA SIMILAR AL INDEX RETIRA EL TEXTO DEL WORDPRESS, DEJA LA LINEA get_header(), RETIRA LAS LINEAS get_sidebar() y get_footer() Y ESCRIBE AL FINAL </body> y </html><br />
  41. 41. EL DISEÑO SE VERÁ HASTA EL MOMENTO ASÍ<br />
  42. 42. CSS DEL WORDPRESS<br />
  43. 43. REALIZA LOS CAMBIOS NECESARIOS UNO POR UNA, GRABA Y ACTUALIZA LA WEB. MIRA LO QUE GENERAN.<br />
  44. 44.
  45. 45. REALIZA LOS CAMBIOS NECESARIOS DE MANERA SIMILAR PARA LOS DEMÁS ARCHIVOS DEL LA PLANTILLA<br />

×