Cómo convertir cualquier plantilla HTML5 a un maravilloso tema de WordPress

¿Qué haces cuando no puedes encontrar el tema perfecto de WordPress? Con toda probabilidad, probablemente llamará a un marco temático. Sin embargo, de vez en cuando, es probable que este pensamiento tenga en cuenta: “Solo debería codificar una plantilla HTML5 y convertirla en un tema de WordPress”. Pero esto es solo un sueño, ¿verdad? Seamos realistas. La verdad es que siempre que tenga habilidades básicas de programación de WordPress, convirtiendo una plantilla HTML5 en un tema de WordPress proporcionado, está dispuesto a hacer un esfuerzo. En esta publicación, te mostraré cómo. ¿Por qué convertir una plantilla HTML a un tema de WordPress? Hay algunas buenas razones por las que es posible que desee asumir este proyecto.
El uso de una plantilla HTML5 significa que tiene un control completo sobre cada minuto de detalle del aspecto de su sitio. ¿Le gusta parte de la plantilla? Cambialo. Es mucho más fácil cambiar una plantilla HTML simple que una WordPress compleja.
Usar una plantilla HTML5 significa que no puede cargar su sitio con muchas funciones que no tiene la intención de usar.
Si desea un tema de WordPress que no sea utilizado por miles de otros sitios, la conversión de una plantilla HTML5 es una forma de llegar a un tema de WordPress totalmente personalizado.
Si nunca antes ha creado un tema de WordPress, convertir una plantilla realmente extenderá sus músculos de desarrollo de WordPress, de muy buen sentido.
En este artículo, comenzaré con una plantilla HTML5 simple y la convertiré en un tema de WordPress completo. Sigue y podrás hacer lo mismo.
Configuración del entorno de desarrollo para convertir una plantilla HTML5 en un tema de WordPress, lo primero que tendrá que hacer es configurar su entorno de desarrollo. Estas son las herramientas que necesitará antes de comenzar a trabajar: un servidor local para alimentar a WordPress: hay muchas opciones a considerar. He detallado cómo usar XAMPP, MAAN, WAMP, VVV y VAGRANT. Elija uno y póngalo a trabajar.
Una instalación local de WordPress: es mejor construir un tema de WordPress mientras tiene tan pocos complementos habilitados, por lo que cree una nueva instalación o use una instalación existente después de desactivar tantos complementos como sea posible.
Un repositorio para realizar un seguimiento de sus cambios: aunque este no es un requisito técnico, es una buena idea. Utilicé GitHub para rastrear mis cambios y alojar el producto terminado, y SourceTree para proporcionar una interfaz gráfica fácil de usar.
También deberá estar familiarizado con cómo funcionan los temas de WordPress y tener las habilidades básicas de codificación PHP antes de dirigirse en este proyecto. Si los términos “jerarquía de plantillas”, “Codex” y “Loop” no son familiares, entonces debe hacer algunos temas antes de saltar a este tutorial. Puede aprender lo que necesita saber tomando un curso o dos de la Academia o leyendo nuestra serie de desarrollo de WordPress para principiantes e intermediarios.
Si permanece atrapado en cualquier momento y desea comparar los archivos de plantilla que he usado con el tema finito de WordPress, puede obtener una copia de los archivos de plantilla Bootstrap y puede ver el código fuente de mi tema de WordPress en GitHub. Paso 1: Encuentre una plantilla o cree que pueda convertir cualquier plantilla HTML en un tema de WordPress. Sin embargo, su tarea será mucho más fácil si elige una plantilla que se adhiera a la funcionalidad básica incorporada en WordPress: publicaciones, páginas, una barra lateral, un encabezado y un sótano. Cuando mira las plantillas, o codifique su propio pensamiento sobre cómo las partes de la plantilla se traducirán en un tema de WordPress. Esto no significa que no pueda convertir ninguna plantilla en un tema de WordPress. Puedes. Sin embargo, cuanto más no tradicional sea la plantilla que seleccione, más trabajo necesitará convertirla a una WordPress totalmente funcional. Soy minimalista cuando se trata de diseño web y partidario del diseño “First Mobile”. Como resultado, una plantilla de blog básica basada en Bootstrap es exactamente el tipo de trabajo que estoy buscando. Para este tutorial, me puse en la publicación del blog y en el blog a casa desde el arranque de inicio.
Estas plantillas son gratuitas, minimalistas, se traducirán fácilmente en WordPress y se crean con bootstrap. Perfecto.
Una vez que los haya decidido perfectamente o codificado, está listo para pasar al siguiente paso: transformar la plantilla en un tema de WordPress. Paso 2: Convierta la plantilla HTML5 en un tema de WordPress en este momento, debe tener una plantilla HTML5 en su mano. Debe estar compuesto por un directorio que incluye un index.html y subdirectores para recursos CSS y JavaScript. Copie todo el Director de Tema en el Concentente WP/ Temas/ Director de su sitio de desarrollo de WordPress. El tema de WordPress ahora se encuentra donde tiene que estar para que WordPress lo encuentre. Sin embargo, para activar el tema de WordPress en su sitio de desarrollo, debe hacer dos cambios: renombrar index.html como index.php.

Agregue un archivo style.css con un encabezado de archivo de tema formateado correctamente en el directorio de temas.
Alternativamente, puede mover el archivo CSS principal de la plantilla a un nivel: del director /CSS y en el director raíz del tema de WordPress. La clave es que debe haber un archivo style.css en el directorio raíz del tema y debe incluir un encabezado de base apropiado. Si lo desea, este sería el momento adecuado para agregar una captura de pantalla con el tema en su tarea. Una vez que realice estos cambios, su tema de WordPress estará disponible para la activación cuando acceda al aspecto> desde el área de administración de WordPress. Continúe y active el tema de WordPress y vea su sitio frontal.
En este momento, tu tema de WordPress no se verá bien. Así es como se veía mi sitio en este momento:
Lo que sucede es que todos los recursos de CSS y JavaScript de su base están contenidos en su directorio de tareas, pero su plantilla HTML está configurada para encontrar archivos en el campo de su sitio. Se encuentra en http://yourdomain.com/wp-content/themes /Your-Theme-Directory/, pero la plantilla del sitio está buscando esos recursos en http://yourdomain.com. Obviamente, no los encuentra. Entonces, el siguiente paso es agregar recursos CSS y JavaScript a nuestro tema de WordPress, por lo que WordPress los encuentra. Pas 3: Coloque los scripts y estilos correctos para agregar scripts y estilos a un tema de WordPress es ponerlos en la cola. Para hacer esto, deberá crear un archivo Functions.php en el directorio raíz del tema. Ahora eche un vistazo a los recursos de CSS y JavaScript relacionados con su plantilla HTML. Los recursos de CSS se agregarán al jefe de la plantilla, y los scripts se pueden agregar en la cabeza o justo antes de la etiqueta de cierre del cuerpo. Después de haber ubicado todos los recursos de CSS y JavaScript, debe agregar a su tema de WordPress, crear una característica que ponga todos los scripts y recursos, no olvide incluir style.css su base y luego conecte la función en el tema. WordPress con el gancho wp_enqueue_scripts. Deberá agregar la función y el gancho al archivo Functions.php del tema.
Tu cola se verá algo diferente. Sin embargo, como referencia, aquí hay un vistazo a la cola en la cola que construí:
La idea 716C5647B842201EAB7C02494224C04 está cargada.

Con los recursos CSS y JavaScript puestos en la cola, WordPress ahora reconocerá los recursos en los que depende su tema. Sin embargo, para insertarlos de manera efectiva en su sitio en vivo, debe agregar dos ganchos al archivo index.php del tema de WordPress: WP_head: debe agregarse justo antes de la etiqueta de cierre en el index.php.
WP_Footer: debe agregarse justo antes de la etiqueta de cierre en index.php.
Aquí hay una aproximación de cómo debe verse el archivo index.php con estas etiquetas agregadas:
Cargue la idea 9FA2EDAF6D2D96FA0FE06183C9BB83D5
Con esos ganchos agregados y con los scripts y los estilos colocados en la cola, su tema de WordPress ahora debería verse exactamente como la plantilla HTML original. El siguiente paso es dividir index.php en varias partes, para que podamos reutilizar el encabezado, el sótano y la barra lateral con postes, páginas, páginas de archivo y más. Paso 4: Crear una plantilla parcial Parcial Parte es parte de un tema de WordPress que se usa solo cuando es referido por uno de sus archivos de plantilla. Un archivo Header.php. De esta manera, el encabezado se puede reutilizar con páginas, publicaciones, página inicial, páginas de archivo y 404 páginas. Sin embargo, Header.php nunca se llama directamente. Se usa solo cuando se llama por un archivo de plantilla como index.php. En la mayoría de los casos, querrá crear al menos tres plantillas parciales:
Encabezado.php
Pie de página.php
Barra lateral.php
Crear Header.php Cree un nuevo archivo en el directorio raíz de su tema de WordPress y llame Header.php. El archivo Header.php de su base incluirá la instrucción de tipo de documento, la etiqueta HTML de apertura, todo el elemento de cabeza, la etiqueta del cuerpo de apertura y la navegación en el sitio, en resumen, todo lo que desea aparecer en la parte superior de cada página de a su sitio. Antes de copiar ese código, debe crear un encabezado de archivo. Cada archivo en su WordPress debe incluir un encabezado de archivo que sea simplemente una breve explicación del objetivo del archivo. Eche un vistazo a algunos archivos de los temas disponibles del director de temas de WordPress. Verás que todos se ven bastante similares. El encabezado de su archivo para Header.php debe verse así: Cargue la idea 38A4C15822B19650140F7011B8F0CCEF
Después de tener un encabezado de archivo, continúe y copie el código de encabezado completo desde el índice a la cabeza de cabeza.php. Luego elimine todo el encabezado del index.php y reemplácelo con WordPress get_header () de la siguiente manera:
Cargue la idea EAC243ADF722060FA717A1CC7108F15C
Crear barra lateral.php y footer.php Repita el mismo proceso creando un archivo separado para todo el contenido de la barra lateral y un archivo adicional para todo el contenido del sótano. Después de copiar el código en el índice.php a los archivos relevantes y eliminarlo de index.php, use las funciones get_sidebar y get_footer WordPress para vincular todos los archivos de plantilla. Cuando haya terminado, index.php debe comenzar con un archivo y get_header encabezado y terminar con get_sidebar seguido de get_footer. Entre estas tres funciones debe ser el contenido principal de su página. Aquí hay una mirada simplificada a lo que debería ver el índice.
Paso 4: Agregar el bucle de bucle es la función que interroga la base de datos de WordPress y genera la pantalla de contenido en cada página de su sitio de WordPress. En general, querrá tener al menos dos versiones diferentes del bucle:
Una versión del bucle para la página del blog que muestra los títulos de las publicaciones, metadatos, la imagen presentada y un fragmento de la publicación.
Una segunda versión para sus páginas y publicaciones individuales que muestra todo el contenido de la página o publicación.
Además, es posible que desee refinar el bucle aún más, creando variaciones para páginas individuales, publicaciones individuales, páginas con resultados de búsqueda y más. La mayor cantidad de primaria, así es como se ve el bucle de WordPress:

Cargue la idea 8DC9BD6ADFD69C65309E7F9F7E02D3B9
Por supuesto, el comentario en ese fragmento de código debe reemplazarse con funciones de WordPress para generar contenido y etiquetas HTML para reproducir ese contenido apropiado. El bucle debe considerar las páginas, las publicaciones individuales, la página del blog, la página de inicio, las páginas de archivo y 404 páginas. Como resultado, hacer todo en un solo archivo es un desafío. Por esta razón, la mayoría de los temas públicos interrumpen el bucle index.php y lo colocan en varios archivos separados con títulos como content.php, content-single.php, content-page.php, etc. Si decide poner el bucle en varios archivos, use etiquetas acondicionadas con la función get_template_part para referirse a la versión del bucle que desea usar. Mi recomendación es comenzar simple y repitir lentamente los bucles hasta que esté satisfecho con lo que aparece en su sitio web de WordPress. Si todos los demás no tienen éxito, el siguiente bucle debería funcionar prácticamente para cada sitio web de WordPress, aunque el resultado puede no ser tan sorprendente como desee. Sin embargo, es un buen punto de partida si el bucle es nuevo para usted. La idea D012FDF8CD3611687C97ABBD21D3BA14 está cargada.
La cobertura profunda del bucle excede el propósito de este tutorial. Sin embargo, es un tema que abordé antes y puede averiguarlo leyendo el desarrollo de WordPress para usuarios intermedios: consulta y bucles. Paso 5: Reemplace el contenido del archivo de plantilla de plantilla Este siguiente paso puede variar mucho de una plantilla HTML a otra. Lo que desea hacer es viajar cada plantilla (encabezado, índice, contenido (si corresponde), barra lateral y sótano) reemplazar cada pieza de contenido estático con una función de WordPress apropiada. Comience con Header.php. Cada vez que cumple con un poco de contenido, reemplácelo con una función de WordPress. Si no está seguro de qué función usa, hay dos cosas que puede hacer para encontrar la función correcta: eche un vistazo a las plantillas de una WordPress bien codificada, como veinte dieciséis y copie lo que hago. Veinte dieciséis es GLP, la copia está bien, ¡incluso alentada!
Use Google para localizar las funciones apropiadas en WordPress Codex, buscando términos como “función de WordPress”.
Un paso que puede ser particularmente difícil es configurar el menú de encabezado. Vamos a darnos un minuto para ver este paso en detalle. Configurar el menú de encabezado Agregar un menú de encabezado es un proceso de dos pasos:
Agregue la ubicación del encabezado a su tema de WordPress agregando una función a las funciones.php.
Inserte el menú en el encabezado.php teniendo en cuenta duplicar las clases e ID utilizadas por la plantilla HTML.
Deberá usar la función Registro_NAV_MENUS para agregar una ubicación de menú a su WordPress. En el caso del tema, por ejemplo, WordPress, hemos introducido la siguiente función en funciones.php: la idea FB1426F7FA610CB98BDA818FFA1C4866 está cargada.
Luego debe usar la función WP_NAV_MENU en Header.php para generar su menú. Preste especial atención a las clases e identificaciones aplicadas al menú de plantilla HTML. Deberá duplicar estos selectores para que el CSS de la plantilla se aplique a su nuevo menú. Afortunadamente, la función de WordPress hace esto con bastante facilidad. Esto es lo que el código que agrega el menú al encabezado.php de mis programas de tema de WordPress:
La idea 760C27C03988773292A3110A44183734 está cargada.
Tenga en cuenta que hemos agregado dos clases al menú en sí, Nav y Navbar-Sav, así como una ID y dos clases en el contenedor del menú. Acabamos de copiar estos selectores de la plantilla HTML. Esto asegura que el menú se haga cargo de los estilos de plantilla. La configuración de las áreas de widget también tendrá que configurar el widget lateral, el encabezado y las áreas del sótano, según sea el caso, dependiendo de la plantilla que use. Agregar zona de widget es un proceso de dos pasos:
Use la función Registro_SessideBar para registrar el área de widget en funciones.php.
Use la función Dynamic_Sidebar para agregar el área de widget a la parte superior del tema que desea aparecer.
La función Registro_sidebar acepta una serie de valores que incluye el nombre del área del widget, el área del widget, así como los bits HTML que deben aparecer antes de cada widget y el título del widget. La función Registro_sidebar está vestida con una función personalizada, y esa función personalizada está conectada a WordPress usando el gancho Widgets_init. Así es como la función que registra el área de la barra lateral para mi tema de WordPress en las funciones.
Con el área de widget registrada, podemos agregarlo a la barra lateral.php con Dynamic_SideBar. La función Dynamic_Sidebar acepta la ID de área de widget que registré con Register_SideBar en Functions.php. Esto es lo que el código que agrega el área del widget a la barra lateral.php en mi tema:
Cargue el esencial BC447A4D189BA5E8C41BBC4BD75E0AA6
Estas dos funciones trabajan juntas para generar el área de widgets en la barra lateral de mi tema. El área del widget estará contenida en una clase de COL-MD-4. Además, cada widget estará contenido en un DIV con una clase de pozo y cada título de widget se vestirá dentro de un elemento de encabezado de cuarto nivel. Puede aplicar este proceso para agregar cualquier cantidad de áreas de widget a su tema de WordPress. Todo lo que tienes que hacer es:
Cree una función de registro_sidebar diferente con una ID única para cada área de widget. Puede apilar todas las funciones de registro_sidebar en una sola función personalizada y luego inicializarlas todas usando el gancho Widgets_init.
Use la función Dynamic_Sidebar y la ID única del área del widget para cargar el área del widget donde quiera aparecer: en el lado, el encabezado o el sótano.
Siguientes pasos … Si siguió paso a paso, en este momento convirtió una plantilla HTML5 en un tema funcional de WordPress. ¡Felicidades! Seguí el mismo proceso para crear este tema de WordPress: si miras hacia atrás en la plantilla en la parte superior de este tutorial, verás que es casi un duplicado. Aunque, sin duda, está satisfecho con lo que ha logrado hasta ahora, existe una gran posibilidad de no estar completamente satisfecho con lo que ha creado. Los siguientes pasos que probablemente querrá hacer para incluir:
Creación de plantillas y bucles personalizados para publicaciones individuales, páginas, resultados de búsqueda y una plantilla de 404 páginas.
Agregar una sección de comentarios a sus publicaciones y páginas individuales.
Cree widgets personalizados que coincidan con el estilo de widget que se muestra en su plantilla.
Internacionalización de su tema de WordPress si tiene la intención de hacer que su tema esté disponible públicamente.
Si ha llegado aquí, entonces tiene las habilidades que necesita para realizar cada una de estas tareas adicionales. Sin embargo, guiarse a través del proceso está más allá del propósito de este tutorial. Si necesita ayuda para realizar estas tareas, eche un vistazo a los siguientes recursos que aprendan los conceptos necesarios para abordar los siguientes pasos:
Creación de plantillas de página en WordPress
Desarrollo de WordPress para principiantes: widgets y menús
Guía suprema para la traducción y ubicación de WordPress
Además, sería descuidado sin mencionar que he estado asistiendo a dos cursos de la academia en los últimos meses.En esos cursos aprendí las habilidades necesarias para completar este proyecto.La conclusión de la conversión de una plantilla HTML5 en un WordPress puede ser un esfuerzo largo y provocativo.Sin embargo, el proceso significa que llegará con un tema de WordPress verdaderamente único y, si nunca ha convertido una plantilla en un tema, seguramente aprenderá mucho. ¿Más convertirá una plantilla HTML en un tema de WordPress?¡Comparta su experiencia con nosotros en la sección de comentarios a continuación!
Etiquetas:
desarrollo

Html5
Modelo