Este documento proporciona instrucciones paso a paso para convertir un diseño HTML en una plantilla de WordPress. Explica cómo duplicar la carpeta de temas predeterminada, identificar los archivos necesarios, agregar el diseño personalizado al archivo índice y otras páginas, y realizar ajustes de CSS para que el diseño funcione como una plantilla de WordPress.

1. COMO CONVERTIR MI DISEÑO EN UNA PLANTILLA DE WORDPRESS LUIS PALOMINO

2. INGRESA EN LA CARPETA DE TEMAS SIGUIENDO LA RUTA INDICADA Y DUPLICA LA CARPETA DEL TEMA DEFAULT PARA NO DAÑAR LA ORIGINAL

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. ABRE LAS AMARILLAS EN DREAMWEAVER

5. Es archivo INDEX obtiene usando get() los otros archivos para que formen parte de su estructura o diseño

6. INDEX. Es el archivo que se ve cuando ingresas a la web. Muestra una lista de los post publicados. SINGLE. Es el archivo que se ve cuando ingresas a ver un post. PAGE. Es el archivo que se ve cuando ingresas a una página del Wordpress. Se crean de manera independiente a los post 404. Es el archivo que se ve cuando ingresas a un post o archivo que no existe o no está disponible.

7. HEADER

8. EL ARCHIVO INDEX INCORPORA AL ARCHIVO HEADER A TRAVÉS DEL CÓDIGO get_header();

9. EN EL ARCHIVO HEADER LA INFORMACIÓN SOMBREADA ES LA ESTRUCTURA DEL DISEÑO DEFAULT. NO NOS SIRVE, POR ESO LA BORRAMOS.

10. UNA VEZ BORRADO EL CÓDIGO DEL HEADER EL DISEÑO SE MOVERÁ A LA IZQUIERDA, ESO ES NORMAL

11. INDEX

12. AGREGUEMOS DOS LINEAS DE TEXTO PARA QUE VEAS COMO ESTAS APARECEN EN EL DISEÑO

13. AGREGUEMOS DOS LINEAS DE TEXTO PARA QUE VEAS COMO ESTAS APARECEN EN EL DISEÑO

14. DENTRO DEL ARCHIVO INDEX HAY CUATRO PARTES IMPORTANTES QUE PERMITEN CONSTRUIR EL ARTÍCULO O EL POST DEL WORDPRESS TITULO DEL ARTÍCULO FECHA Y AUTOR DEL ARTÍCULO CONTENIDO TEXTO DEL ARTÍCULO INDICA LA CATEGORÍA DONDE SE ENCUENTRA EL ARTÍCULO Y SI TIENE COMENTARIOS POST META

15. TITULO FECHA Y AUTOR CONTENIDO POST META ASÍ SE VEN EN EL ARTÍCULO

16. ASÍ SE VEN EN EL CÓDIGO FECHA Y AUTOR TITULO POST META CONTENIDO

17. UNA VEZ ACABADAS LAS PARTES DEL ARTÍCULO APARECEN 4 CURACTERÍSTICAS MÁS SI HAY MÁS ARTÍCULOS QUE MOSTRAR APARECEN LOS BOTONES ANTERIOR Y SIGUIENTE END WHILE CUANDO NO ENCUENTRA EL ARTÍCULO ELSE END IF CIERRE DEL CÓDIGO get_sidebar() get_footer() CARGA LOS ARCHIVOS SIDERBAR Y FOOTER

19. LA ZONA SOMBREDA DE AMARILLO ES LA QUE PERMITE QUE WORDPRESS FUNCIONE Y SE VEA. EL get_sidebar PERMITE QUE SE VEA EL LADO

20. FOOTER

21. SELECCIONA LAS ULTIMAS DOS LINEAS DEL FOOTER: </body></html> SON LAS ÚNICAS QUE NECESITAMOS. CÓPIALAS.

22. PEGA AQUÍ EN EL INDEX LAS LÍNEAS DEL FOOTER REMPLAZANDO LA LÍNEA DEL get_footer.

23. TRAE AHORA TU DISEÑO

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

25. COPIA LAS IMÁGENES EN LA CARPETA IMAGES Y COPIA TU ESTILO JUNTO A LOS OTROS ARCHIVOS

26. EN EL ARCHIVO INDEX CORTA EL TEXTO DE LA ESTRUCTURA DEL WORDPRESS Y SÓLO DEJA LO QUE SE VE EN ESTA IMAGEN

27. PEGA LO CORTADO EN OTRO ARCHIVO, NO LO PIERDAS POR QUE LO VAS A VOLVER A UTILIZAR

28. COPIA TODA LA INFORMACIÓN QUE ESTÁ DENTRO DEL BODY DE TU DISEÑO TU ARCHIVO PRUEBA.HTML

29. PÉGALA EN EL ARCHIVO INDEX.PHP DESPUÉS DEL get_header(); ?>

30. SELECCIONA LA PARTE DE TU DISEÑO DONDE APARECE EL TEXTO Y CORTALA

31. SELECCIONA LA PARTE DE TU DISEÑO DONDE APARECE EL TEXTO Y CORTALA

32. PEGA EN EL LUGAR DE DONDE SACASTE EL TEXTO QUE DEJASTE EL CÓDIGO DEL WORDPRESS

33. V AHORA COPIA LA LÍNEA QUE HACE LINK A TU ESTILO PERO AGRÉGALE EL TEXTO: <?phpbloginfo(‘stylesheet_directory’); ?>/ COMO SE VE ARRIBA

34. EL DISEÑO SE VERÁ HASTA EL MOMENTO ASÍ

35. CSS DEL WORDPRESS

36. REALIZA LOS SIGUIENTES CAMBIOS UNO POR UNA, GRABA Y ACTUALIZA LA WEB. MIRA LO QUE GENERAN.

38. AHORA EL ARCHIVO SINGLE

39. DE MANERA SIMILAR AL INDEX APARECERÁ CON PROBLEMAS, ES POR ESO NECESARIO AGREGAR ALGUNOS PUNTOS.

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>

41. EL DISEÑO SE VERÁ HASTA EL MOMENTO ASÍ

42. CSS DEL WORDPRESS

43. REALIZA LOS CAMBIOS NECESARIOS UNO POR UNA, GRABA Y ACTUALIZA LA WEB. MIRA LO QUE GENERAN.

45. REALIZA LOS CAMBIOS NECESARIOS DE MANERA SIMILAR PARA LOS DEMÁS ARCHIVOS DEL LA PLANTILLA