Pasos para convertir tus archivos PSD a WordPress
Alrededor de una cuarta parte de todos los sitios web se crean en WordPress, como sabemos es la plataforma más recomendada para crear nuestros blogs en línea. Esto lo convierte en uno de los sistemas de gestión de contenido de código abierto más populares del planeta. La gran mayoría de los diseñadores web todavía usan Photoshop para diseñar un sitio web, lo que implica que deben buscar formas de convertir sus archivos PSD a WordPress.
Este procedimiento no es tan fácil como parece, pues debes tener conocimientos sobre lenguaje de desarrollo web front-end como HTML, CSS y JavaScript, aparte del lenguaje de programación. Es por eso que en este artículo buscamos la forma más fácil de explicarte cómo puedes convertir tus archivos, en solo 5 pasos.
Crea el diseño de tu página para organizar y convertir archivos PSD a WordPress
Lo primero que debes hacer si aún no lo tienes, es crear el diseño de tu página web para organizar la distribución de secciones y poder fácilmente convertir tus archivos PSD a WordPress. Recuerda que hacer un sitio web es más que crear un logotipo y poner un menú, una barra lateral, un pie de página y el contenido juntos. El diseño web que crees debe ser el equilibrio perfecto entre forma y función ofreciendo la mejor experiencia de navegación al usuario.
Una vez creado esto, lo primero que debes hacer en Photoshop es utilizar las cuadrículas basadas en columnas para que se vea ordenado y alineado que permitirá más adelante desarrollar el HTML y CSS en su diseño optimizado y receptivo para tablets y teléfonos inteligentes. Recuerda que debes mantener los archivos de diseño PSD organizados en capas con los títulos correspondientes de cada sección.
Cortar y editar los archivos PSD
Una vez que haya creado un diseño web con el que estés completamente satisfecho, deberás empezar con el proceso de editar tus archivos PSD, para convertirlos a WordPress. En la actualidad todos los sitios web están construidos con HTML5 y CSS3, presentando sus características de imágenes creadas como partes funcionales, por lo tanto ahora al momento de editar tus archivos PSD, solo implica en cortar las imágenes de fondo.
Para hacer esto, deberás abrir el archivo en Photoshop o Illustrator, dependiendo del software que se utilizó para crear el diseño. Estudia el diseño web y busque imágenes que cree que necesitan segmentarse. Básicamente, se trata de imágenes que no se pueden crear con CSS3, generalmente el logotipo y las imágenes de fondo. Una vez que reemplace estas imágenes de fondo usando CSS, el tiempo de carga será mucho más rápido, atrayendo a más usuarios.
Crea el HTML, CSS3 y JavaScript para las carpetas de archivos PSD
Una vez que hayas cortado las imágenes de su archivo PSD, es hora de crear HTML5 y CSS3. Lo primero que debe hacer es crear una nueva carpeta en la que crees index.html y style.css. Además, debes crear una subcarpeta llamada images o img, para que coloques las imágenes que has extraído. Luego crea otra carpeta llamada JavaScript o js. Una vez que haya terminado de crear todas las carpetas, archivos y subcarpetas, es hora de comenzar a construir HTML5 y CSS3.
HTML 5: este lenguaje se utiliza esencialmente para crear la estructura básica del documento, así como para designar todos los elementos de la página. HTML5 tiene elementos separados para las diferentes secciones de su sitio web, como el <header>, el <nav>, el <aside>, así como los elementos <footer>, que le permiten crear un documento ordenado y bien estructurado, que es universalmente legible.
CSS3: se refiere a las hojas de estilo en cascada, y CSS3 es la última versión de este lenguaje front-end. Se usa para tomar los huesos de los elementos creados usando HTML5 y darles forma, posicionarlos y aplicarles estilo.
JavaScript: javaScript es uno de los lenguajes de programación más populares en el mundo actualmente. Esto se debe al hecho de que es compatible con una amplia gama de navegadores, y también al hecho de que contiene bibliotecas como jQuery y sistemas de fondo como Node.js y marcos como AngularJS. En los últimos tiempos, JavaScript ha comenzado a quedar obsoleto, ya que muchas de sus funciones han comenzado a ser asumidas por las animaciones CSS3, es decir anima las transiciones entre estilos.
Ordena las plantillas de los archivos de WordPress
Luego de haber convertido sus diseños de PSD en HTML5, CSS3 y JavaScript, es hora de la conversión principal: convertir su HTML en un tema de WordPress con plena capacidad de respuesta. Recuerda seguir la jerarquía de plantillas de WordPress para asegurarse de que sus temas realmente funcionen. El orden general es comenzar con header.php, seguido de index.php, footer.php y style.css. Utilizará estas cuatro plantillas en todas las páginas de su sitio web.
Luego de tener las plantillas por orden de jerarquía, deberás comenzar a dividir los archivos HTML en pedazos. Puede comenzar creando una carpeta en la carpeta de temas que puede encontrar en su instalación de WordPress, cuya dirección es / wp-content / themes /. Crea el archivo header.php en esta carpeta. Este archivo es lo que usará para declarar el tipo de documento, así como todos los elementos que pertenecen al encabezado de su página, como las metas, el título, las hojas de estilo, los javascripts, etc.
Luego de haber terminado con los pasos anteriormente mencionados deberás crear un footer.php y pegar todos los elementos de pie de página en su documento HTML. Si el diseño de su sitio web incluye una barra lateral, cree también un archivo llamado sidebar.php e incluya toda la codificación pertinente dentro de este archivo.Una vez que haya completado la creación de todos los elementos de su sitio web en estos archivos WordPress, debe comenzar a crear su página de inicio.
Después de crear las plantillas deberás incluir todos los archivos .php que creaste al principio. Ahora que ya se tiene cada parte preparada solo deberás pegar el HTML5 de tu página de inicio en el medio y habrás creado con éxito la página de inicio de su sitio web.
Utiliza etiquetas y funciones incorporadas de tus archivos en wordpress
Una vez que haya creado con éxito el tema para su WordPress, ahora debes asegurarte de que podrás editar tu sitio web desde el panel de administración en lugar de tener que modificar el archivo del tema, cada vez que quieras cambiar algo. Posiblemente, las funciones más populares de WordPress para hacer que todo su contenido sea editable a través del panel de administración es agregar la función add_meta_box. Es decir solo tendrás que configurar el meta cuadros para el contenido de cada página.
Del mismo modo, WordPress también ofrece etiquetas de plantilla. Estas son esencialmente funciones en sí mismas, con la única diferencia de que fueron creadas específicamente para temas específicos que las hacen más eficientes luego de haber convertido tus archivos en WordPress.
Conclusión
La conversión de estos archivos, puede resultar muy fácil en caso se tenga conocimientos previos de Photoshop. De todas maneras siempre hay una forma para realizarlos y tener nuestro sitio web mejor organizado, y poderle brindar una buena experiencia de navegación a nuestros usuarios cuando busquen información.
Te puede interesar:
(Ninguna valoración todavía)
Cargando...
