Tutorial de temas HTML en WordPress: Paso 1 – Conversión HTML a PHP

Para muchos de nosotros, nuestra primera experiencia de codificación de WordPress es cuando escribimos nuestro primer tema. Después de todo, cada sitio de WordPress necesita un tema, y ​​si desea que algo ordene, entonces tiene sentido cubrirlo usted mismo. Cuando comencé con WordPress en 2010, nunca había trabajado con un sistema de gestión de contenido (CMS). Pero codifiqué mucho HTML y CSS, ya sea en sitios grandes que usaban HTML para contenido como parte de un CMS, o para pequeños clientes que construimos desde cero. Pasé semanas sopesando las ventajas y desventajas de diferentes CMS que podría usar para los sitios de clientes (no lo olviden, esto fue antes de que WordPress se convirtiera en la fuerza dominante hoy) y me decidí por WordPress de dos razones. La primera fue la maravillosa comunidad de usuarios y desarrolladores que todos hacemos. Y el segundo fue el hecho de que con alguna experiencia HTML, no es tan difícil crear un tema de WordPress.
En esta serie de tres publicaciones, lo guiaré a través del proceso de crear su propia WordPress en HTML estático. Comenzaremos con un solo archivo HTML y una hoja de estilo CSS y los convertiremos en un tema de WordPress con todas las campanas y silbatos que involucran. Las publicaciones funcionarán durante el proceso en orden:
Creación del archivo index.php, agregando etiquetas de plantilla y un bucle.
Creación de archivos de plantilla adicionales y piezas de plantilla como archivos de encabezado, barra lateral y sótano.
Agregar características, incluidos widgets y un menú de navegación y configurando el archivo.
En esta publicación crearé un solo archivo – index.php. Confiará en el archivo index.html de mi sitio estático, pero eliminaré el contenido y lo reemplazaré con etiquetas de plantilla y un bucle. ¡Entonces, comencemos! Lo que necesitará para seguir esta serie, necesitará algunas herramientas:
Una instalación de desarrollo de WordPress, preferiblemente en su automóvil local.
Un editor de código.
Un sitio estático: si no tiene uno que trabaje, puede descargar los archivos que uso.
Asegúrese de hacer este trabajo en un sitio de desarrollo, no en un sitio en vivo: no desea que el mundo vea su tema hasta que esté listo. El código de inicio El sitio inicial tiene solo dos archivos-index.html y style.css. Deliberadamente mantuve las cosas simples y usé una pequeña versión de mi sitio. Así es como se ve:
Puede encontrar el contenido de los archivos index.html y style.css en github. ¡No mostraré el código aquí, porque hay muchos! Nota: Este es un conjunto de código básico diseñado para ayudarlo a crear su propio tema. Si desea usarlo para sitios en vivo, probablemente tendrá que agregar un estilo adicional, etc. No pasaría los requisitos del director de tema. Úselo solo para aprender, no para alimentar un sitio en vivo. Configuración del tema Para crear su tema, necesitará una carpeta para esto en su instalación de WordPress. Usando el editor de códigos o el administrador de archivos, vaya a WP-Content/Themes y cree una nueva carpeta. Dale cualquier nombre que quieras. Llamaré a mi WPMudev-Theme-Part1.

Copie los archivos index.html y style.css en esa carpeta. Todavía no harán nada, pero lo harán pronto. Ahora tiene una carpeta de dos archivos. ¡Comienzo! En este momento, WordPress no sabe que tiene un tema. Cualquier tema necesita solo dos archivos: index.php y style.css. Como verá mientras mira esta serie, normalmente necesitas más que eso, pero el tema solo funcionará con dos. Comencemos agregando texto comentado en la hoja de estilo. Abra el archivo style.css y agregue lo siguiente: Cargue la idea 2B693721668DBA8BCC578B8DE9824642
Esto proporciona a WordPress la información que necesita para reconocer que esta es la hoja de estilo. Siéntase libre de editar los detalles agregando su propio nombre y URL y cambiando el nombre de base, si lo desea.
Lo siguiente que debe hacer es cambiar el nombre del archivo index.html en index.php. Ahora tiene los dos archivos que pondrán su tema a funcionar. Sin embargo, aún no ha agregado ningún PHP. Para hacer esto, tendremos que agregar algunas etiquetas de plantilla y un bucle. Vamos a hacer eso. Agregar etiquetas de plantilla Una etiqueta de plantilla-Tag es una función especial de WordPress que usa en un archivo de plantilla de tema. Puede hacer cualquiera de una amplia variedad de cosas, para ver la gama de etiquetas de plantillas ofrecidas, ver el Codex. Aquí agregaremos etiquetas de plantilla para dos cosas:
Llamando a la hoja de estilo
Clases e ID generados automáticamente para CSS
Llamando a la hoja de estilo en este momento, si abre su sitio con el nuevo tema activado, notará que no se carga ningún estilo. Así es como se ve el mío:
¡No entrar en pánico! Solo tiene que agregar una llamada de hoja de estilo al jefe del archivo de índice. Nota: En la tercera parte de esta serie, le mostraré cómo mover esto al archivo con las funciones del tema, que es la mejor práctica. Por ahora, solo trabajamos con dos archivos: la hoja de estilo y los archivos index.php, por lo que nos quedaremos con ellos). Abra el archivo index.php. Encuentre esta línea: Cargue la idea 2B693721668DBA8BCC578B8DE9824642
Editarlo de tal manera que en lugar de aparecer un archivo estático, usando PHP para cargar la hoja de estilo:

La idea se carga 2B693721668DBA8BCC578B8DE9824642
Esto utiliza la etiqueta de plantilla BlogInfo (), una etiqueta útil que se hace cargo de todo tipo de información sobre su sitio en la base de datos. En este caso, haga cargo de la URL del tema y luego acceda al archivo desde esa carpeta llamada style.css.
Ahora actualice su página de inicio. Descubrirá que los estilos están cargando. Aquí está mi página ahora:
Notará que se ve exactamente como su antiguo sitio estático. Esto no significa que haya terminado, ¡en ninguna parte! El contenido se extrae del contenido estático de ese archivo index.php, que corregiremos agregando un bucle. Pero primero agregemos algunas etiquetas de plantilla.
Crear clases e ID de generación automáticamente es muy útil para poder hacer que WordPress genere automáticamente clases e IDS CSS para sus publicaciones y para su elemento . Esto significa que luego puede usar esas clases de estilo, dirigidas a ciertos tipos de publicaciones, categorías y más. Abra el archivo index.php. Encuentra la etiqueta de apertura . Se sentará en su propia línea, después de la etiqueta de cierre . Edítelo para que lea de esta manera: la idea se carga 2B693721668DBA8BCC578B8DE9824642

Esto utiliza la etiqueta de plantilla Body_Class (), que detectará qué tipo de página son los visitantes de su sitio a la vez y generará clases CSS.

Si actualiza su página e inspecciona el código, descubrirá que WordPress agrega automáticamente algunas clases CSS para usted:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Variarán según la página que esté en su sitio y el tipo de contenido que muestra. Puede usar esto para dirigir su CSS a ciertos tipos de contenido, como publicaciones únicas, ciertas categorías o lo que desee.
Ahora hagamos esto para su publicación individual. Encuentre esta línea en su archivo index.php:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Edite esa línea para leer así:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Esto usa dos etiquetas de plantilla:
La etiqueta the_id () se hace cargo de la identificación de la publicación y la usa para darle a la publicación una identificación única.
La etiqueta post_class () funciona de manera similar a la etiqueta Body_class (), y agregó al elemento del artículo una lista de clases que corresponden al tipo de publicación. Tenga en cuenta que en este momento esto no funcionará correctamente, porque no toma una publicación de la base de datos, pero cuando agregamos el bucle, lo hará. En este momento se codifica el contenido de su página. Desea que esté poblado de una llamada a la base de datos para que el contenido correcto se muestre independientemente de la página en la que esté. En el archivo index.php, busque el código dentro de la etiqueta (la que ya ha agregado la ID y al que se cierra con las etiquetas de plantilla). Edite ese código para leer así:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Hay mucho código allí: si desea comprender lo que está sucediendo, consulte nuestra publicación que explique el ciclo. Ahora, si actualiza su página de inicio, verá un contenido muy diferente: sus publicaciones si se trata de una nueva instalación de WordPress, verá la publicación predeterminada que se agrega al instalar WordPress:
Agregar ganchos El paso final en esta primera parte de nuestra serie es agregar algunos ganchos importantes a nuestro código. Se colocan en la sección de la cabeza y el sótano y son esenciales para que muchos complementos funcionen. En la sección del cabezal, agregue esto antes de la etiqueta de cierre :
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Ahora baje al final del archivo index.php. Antes de la etiqueta de cierre , agregue WP_Footer () Hook ()::
Cargue la idea 2B693721668DBA8BCC578B8DE9824642 ​​El gancho especial en la parte superior e inferior de cada página en su sitio, que son esenciales para que sus temas y su sitio funcionen correctamente, así que no los omita.
Ahora guarde el archivo.Lo que sigue ahora tienes los comienzos de un tema de WordPress.Sin embargo, todavía es trabajo.En la siguiente parte de esta serie, lo guiaré a través del proceso de dividir el tema en varios archivos de plantilla.Creará archivos separados para el encabezado, la barra lateral y el sótano, un archivo incluye el bucle y un archivo separado para cada una de las páginas y archivos.

¿En qué etapa está aprendiendo el desarrollo del tema de WordPress?¡Dinos en los comentarios!
Etiquetas:
Html
Php
Tema de WordPress