Este será un tutorial divertido en el que inspeccionaremos cómo crear su propio tema de WordPress desde cero. De hecho, comenzaremos con absolutamente cero archivos y cero líneas de código. La única forma de entender cómo funcionan los Temas de WordPress es realmente saltar a un nivel bajo y hacer todo usted mismo. Sí, es tentador evitar esto porque puede hacer que WordPress haga todo por usted sin comprender el código que lo impulsa. Esto podría ser PHP, JavaScript, CSS o incluso el HTML básico. Al final de este tutorial paso a paso sobre el tema de WordPress, comprenderá cómo encaja todo y cómo adaptar WordPress a su voluntad con facilidad.

Hay tantos temas gratuitos disponibles cuando está ejecutando un sitio web de WordPress. Más allá de los temas gratuitos, también puede optar por pagar una prima por los temas de WordPress creados profesionalmente que se ven geniales y tienen características fantásticas. Entonces, ¿por qué aprender a crear tu propio tema desde cero? La respuesta es que no importa qué tema esté utilizando, llegará un momento en el que querrá realizar cambios simples en su sitio web. Algunos de esos cambios podrían adaptarse mediante un simple complemento o widget. Muchas veces, sin embargo, tiene más sentido comprender qué es lo que desea cambiar, cómo hacerlo y evitar convertir su sitio web de WordPress en un lío de complementos y complementos que se vuelven difíciles de manejar. Con solo un poco de conocimiento básico, tendrá confianza para modificar su tema, o simplemente crear el suyo propio desde cero.


Paso 1: crea una carpeta para guardar los archivos de tu tema.

Si vamos a crear temas, necesitamos saber dónde viven los archivos que componen un tema de WordPress en una instalación de WordPress. Esto es bastante sencillo. Sabemos que una instalación de WordPress normalmente tiene un directorio raíz llamado wordpressAsí es como se ve nuestro directorio raíz en PHP Storm.
sistema de archivos del directorio raíz de wordpress

Este directorio contiene los siguientes archivos y carpetas:

Archivos

  • composer.json
  • index.php
  • license.txt
  • readme.html
  • wp-enable.php
  • wp-blog-header.php
  • wp-comments-post.php
  • wp-config.php
  • wp-config-sample.php
  • wp-cron.php
  • wp-links-opml.php
  • wp-load.php
  • wp-login.php
  • wp-mail.php
  • wp-settings.php
  • wp-signup.php
  • wp-trackback.php
  • xmlrpc.php

Carpetas

  • wp-admin
  • contenido de wp
  • wp-incluye

La carpeta que más nos interesa en este momento es la carpeta wp-content . Dentro de la carpeta wp-content hay una carpeta llamada temas . ¿Sabes para qué sirve esta carpeta? ¡Sí, es cierto! Es la carpeta que contiene uno o más temas que le gustaría usar con su sitio web de WordPress. En esta carpeta de temas encontramos tres carpetas adicionales de veinticinco , veinte dieciséis y veintisiete . Estas carpetas contienen los tres temas que WordPress incluye de forma predeterminada. Observe a continuación que también hay una carpeta llamada customthemeContinúe y cree esa carpeta también en su instalación, ya que aquí es donde crearemos nuestro tema de WordPress desde cero.
carpeta de temas de wordpress


Paso 2: crea style.css e index.php en tu carpeta de temas personalizados

Ahora sabemos dónde están los archivos de temas de WordPress en el sistema de archivos. También hemos creado una nueva carpeta llamada customtheme en nuestra carpeta de temas. Ahora vamos a crear dos archivos vacíos en este directorio. Uno se llama index.php y el otro se llama style.css .
archivos indexphp y stylecss

Completemos ahora estos archivos con lo mínimo que necesitamos para poner en marcha un nuevo tema en WordPress.


style.css

WordPress realmente lee los comentarios que colocas en el archivo style.css. Aquí es donde especifica información específica sobre el tema que está creando.

Style.css es un archivo de hoja de estilo (CSS) necesario para cada tema de WordPress. Controla la presentación (diseño visual y maquetación) de las páginas del sitio web.

En nuestro fragmento de código aquí, simplemente asignamos un nombre de tema, el autor, el URI del autor y el número de versión de nuestro tema.


index.php

En este archivo, solo queremos mostrar algo en la pantalla para demostrar que nuestro tema personalizado está funcionando.

¡Gran trabajo! Lo crea o no, ha creado su primer tema de WordPress.


Paso 3: active su tema desde el panel de WordPress

En este punto podemos visitar nuestro Panel de WordPress y navegar a Apariencia-> Temas y he aquí, vemos el nuevo tema que hemos creado.
enlace de temas de apariencia de wordpress

Podemos hacer clic en "Detalles del tema" para profundizar en nuestro tema personalizado y encontrar que la información que ingresamos en el archivo style.css ha funcionado. Podemos ver que tienen un nombre customtheme, con Versión 1.0, del autor Vegibit, y un enlace al URI que habíamos proporcionado. Muy genial.
detalles del tema de wordpress

¡Y ahora el momento de la verdad! Continúe y haga clic en "Activar" en el nuevo tema personalizado y luego visite el sitio. No va a ganar ningún premio Webby, ¡pero tenemos un buen comienzo con un nuevo tema personalizado!
tema personalizado de wordpress


Paso 4: agregue código para generar el título y el texto de la publicación

Nos tomamos la libertad de completar un par de publicaciones de ejemplo en la base de datos para que podamos trabajar con esos datos durante este tutorial. ¡En este momento, nuestro tema solo genera un tema personalizado! a la página cuando visitamos nuestro sitio sin importar cuántas publicaciones haya en la base de datos. Pasemos ahora a buscar algunos datos de la base de datos y enviarlos a la página. Específicamente, queremos obtener el título de la publicación y el contenido de la publicación de todas las publicaciones y verlas en la página de inicio. Vamos a intentarlo ahora. Primero, veamos qué tenemos para las publicaciones en el panel de WordPress.
ejemplo de publicaciones de wordpress en la base de datos


Aprovechando el bucle de WordPress

Ahora podemos hablar un poco sobre WordPress Loop. WordPress Loop es realmente el motor que hace que WordPress funcione. Es a través de este bucle que los desarrolladores de temas buscan publicaciones y las muestran en la página según sea necesario. Si sigue el formato de la siguiente manera. Si la base de datos tiene publicaciones, vamos a recorrerlas mientras todavía hay publicaciones; de lo contrario, le haremos saber al usuario que no hay publicaciones. Se ve así en código PHP.

Observe que The Loop hace uso de dos funciones en su forma más básica. Esos son have_posts () y the_post ()La función have_posts () solo hace una cosa. Le dice si hay publicaciones en la base de datos para recorrer. Esta función devolverá truefalseeso es todo . Si regresa true, entonces hay publicaciones disponibles para recorrer. Si regresa false, entonces no hay publicaciones para recorrer. La otra función, the_post () no devuelve nada. Su trabajo es preparar WordPress para publicar publicaciones. Específicamente, recupera la siguiente publicación, configura la publicación, establece la in_the_looppropiedad entrueHasta ahora, nuestra página aún no generará ninguna información sobre las publicaciones de nuestro blog, pero podemos actualizar eso ahora en nuestro archivo index.php.

Está bien. Ahora hemos hecho uso de dos funciones adicionales de WordPress, the_title () y the_content ()La mayoría de las veces, estas funciones se utilizan dentro del bucle y lo que hacen es buscar el título y el contenido de cada publicación a medida que el bucle itera sobre cada una en la base de datos. Entonces, a medida que se ejecuta el ciclo, se encontrará con la primera publicación. En ese momento, la función the_title () mostrará el título de la publicación en la página y the_content () mostrará el cuerpo de esa publicación en la página. En el siguiente ciclo, estas funciones volverán a buscar el siguiente título y contenido y los enviarán a la página. Entonces, con estos en su lugar, ahora deberíamos ver algo de información sobre nuestras publicaciones enviadas a la pantalla. ¡Vamos a intentarlo! ¡Visitamos http://wordpresstutorial.dev y vemos que funciona!
wordpress the_title y the_content


Paso 5: agregue un enlace a cada publicación

¿Qué hay de vincular a cada publicación individual para que podamos ver una publicación por sí misma en lugar de solo como parte de la página de inicio? Podemos hacerlo con bastante facilidad, nuevamente con las funciones especiales que proporciona WordPress. Para esta tarea, podemos hacer uso de la función the_permalink ()Podemos actualizar nuestro código así:

Ahora, podemos hacer clic en el título de cada publicación individual y navegar a una página que solo tiene esa publicación. ¡Muy genial!
enlazando a publicaciones específicas


Paso 6: agregue un encabezado y un pie de página al tema personalizado

El título y el contenido de la publicación son fundamentales para crear un buen tema. Casi tan importante es tener una sección de encabezado y pie de página de su tema. Estas secciones incluirían el contenido que siempre está visible en todas las páginas del sitio web. Estas secciones están arriba y debajo del contenido de la publicación. Para hacer esto, lo has adivinado, haremos uso de funciones especiales proporcionadas por WordPress para obtener el encabezado y el pie de página. ¿Ves un patrón que comienza a desarrollarse todavía? Casi todo lo que puede hacer como desarrollador de temas en WordPress ya lo ha hecho por medio de estas funciones personalizadas. Por lo tanto, encontrará que vale la pena memorizar estas funciones de uso común en el desarrollo de temas de WordPress. Sigamos adelante y agreguemos las funciones get_header () y get_footer () a nuestro archivo de tema ahora.

get_header y get_footer wordpress

¡¿Podrías mirar eso ?! Podemos ver que nuestro tema personalizado ahora tiene un área de encabezado y un área de pie de página. En el encabezado está el nombre y el lema del sitio, mientras que en el pie de página vemos el texto familiar, el Tutorial de WordPress funciona con WordPress . Estas son las opciones predeterminadas de encabezado y pie de página cuando se utilizan estas funciones. ¿Qué pasa cuando queremos tener un encabezado y pie de página personalizados? ¡Ya viene!


De 2 archivos de tema a 4

Hasta ahora en este tutorial, tenemos dos archivos que viven en nuestra carpeta de temas personalizados (que a su vez está en la carpeta de temas ). Esos archivos son style.css e index.php . En este punto, vamos a necesitar agregar más archivos para avanzar. Continúe y cree dos archivos nuevos en la carpeta customtheme . Estos archivos se llamarán convenientemente header.php y footer.php .
archivos php de encabezado y pie de página

Ahora, lo que harán estos archivos es sobrescribir los diseños predeterminados de encabezado y pie de página proporcionados por defecto cuando llama a las funciones get_header () o get_footer (). De hecho, si actualizamos nuestro sitio web, parece que el encabezado y el pie de página se han ido. Esto se debe a que todavía no hemos agregado ningún marcado a esos archivos. Solo por sonrisas, configure los archivos de esta manera para probar esto.

header.php

footer.php

salida de archivo de encabezado y pie de página personalizado


Trabajando con header.php

Nuestro ejemplo anterior funcionó muy bien y nos muestra cómo funciona este archivo en su nivel más básico. Sin embargo, el archivo header.php es bastante importante, ¡así que no pasemos por alto los detalles demasiado rápido! Aquí es donde se incluye el código al que todas las páginas de su sitio necesitarán acceder de una forma u otra. Para empezar, todas las páginas HTML tendrán un tipo de documento. Lo especificaría en este archivo. Además, todas las páginas tendrán una etiqueta html de apertura, una sección de encabezado y una etiqueta de cuerpo de apertura. Todo esto puede ir en el archivo header.php. Agreguemos rápidamente algunas de estas cosas que todas las páginas web utilizarían. Aquí también haremos uso de algunas funciones nuevas de WordPressEstos serán language_attributes (), bloginfo () y body_class ().

header.php

Si recargamos la página y luego vemos el código fuente de la página en nuestro navegador, podemos tener una idea de lo que hacen estas funciones. Destacamos las líneas que tienen salida que provienen de esas funciones a continuación:

Una vez más, podemos ver el uso muy liberal de las funciones de WordPress al desarrollar sus propios temas en WordPress. De hecho, todavía no hemos escrito ningún código personalizado. Simplemente estamos aprendiendo lo que las diversas funciones de WordPress pueden ofrecernos y luego las ponemos a trabajar en nuestro tema personalizado.


Incluyendo wp_head ()

wp_head () es una función especial cuando se trabaja con temas de WordPress. No es tan simple como todos los demás que hemos visto hasta ahora. El propósito de esta función es finalizar la salida en la sección <head> de su archivo header.php. De hecho, está destinado a ir justo antes de la etiqueta de cierre </head>. Esto se vuelve importante cuando comienza a agregar varios complementos a su sitio. Imprime secuencias de comandos o datos en la etiqueta de la cabeza en la parte delantera. Es una buena práctica incluir siempre wp_head () en sus temas, ya que muchos otros complementos pueden confiar en este gancho para agregar estilos, scripts o meta elementos en el área <head> del sitio. Lo agregaremos como tal aquí:

header.php


Completando footer.php

Hemos terminado de agregar los conceptos básicos de lo que necesitaremos en el archivo header.php. Sigamos ahora y redondeemos el archivo footer.php. Hay algunas cosas que debemos hacer. Recuerde que en nuestro archivo header.php tenemos etiquetas html y body de apertura. Esos deben cerrarse en algún momento. El archivo footer.php es un lugar perfecto para hacer eso. Así que agregaremos las etiquetas de cierre </html> y </body> además de hacer una llamada a la función wp_footer ().
footer.php


Cambiar la información del sitio en el panel de WordPress

Quizás se pregunte por qué tuvimos que hacer uso de todas estas funciones sofisticadas para construir nuestro tema. Por ejemplo, cuando queríamos enumerar el nombre y el lema de nuestro sitio, usamos la función bloginfo () pasando parámetros de nombre y descripción. La razón de esto es que, en general, nunca querrá codificar estos valores en su sitio. Ésta es información que puede cambiar. Además, si hace que su tema esté disponible para el público, ellos tendrán su propio nombre y lema para su sitio web. Deberían poder simplemente visitar el panel de administración en WordPress y actualizar su Configuración general para ver que estos datos se completen automáticamente.


Hacer que el título del sitio enlace a la página de inicio

La mayoría de los temas ofrecerán la posibilidad de hacer clic en el texto del título del sitio web y dirigir al usuario a la página de inicio del sitio. De esta manera, sin importar dónde se encuentre el usuario en el sitio, siempre puede hacer clic en el texto del título y volver directamente a la página principal del sitio web. Agreguemos ese enlace ahora en header.php.


Paso 7: agregue un archivo functions.php a su tema

En este punto, tenemos cuatro archivos en nuestro tema personalizado. Esos son index.php , style.css , header.php y footer.php . Probablemente el siguiente archivo más importante que necesitamos tener es el archivo functions.php.

El archivo functions.php en WordPress hace muchas cosas por su tema. Es el archivo donde colocas el código para modificar el comportamiento predeterminado de WordPress. Casi puede pensar en functions.php como una forma de complemento para WordPress con algunos puntos clave para recordar:

  • No requiere texto de encabezado único
  • Almacenado en la carpeta que contiene sus archivos de tema
  • Se ejecuta solo cuando se encuentra en el directorio del tema actualmente activado
  • Se aplica solo al tema actual
  • Puede llamar a funciones PHP, funciones de WordPress o funciones personalizadas

¡Una cosa que necesitamos urgentemente en nuestro tema es un mejor estilo! Creemos una función en nuestro archivo functions.php para incluir el archivo style.css en nuestro tema. Así es como podemos lograr ese objetivo.

Esta pieza de código incluirá, o activará, la hoja de estilo de nuestro tema personalizado. Ahora quizás se pregunte por qué estamos usando una función personalizada, cuando parece que podríamos vincularnos manualmente con la misma facilidad a la hoja de estilo en el archivo header.php. Bueno, esto se reduce a hacer un poco más de trabajo por adelantado para obtener un mayor rendimiento de su esfuerzo más adelante. A medida que los temas se vuelven más complejos y se agregan más recursos, estará feliz de tener esta función que puede manejar todo el trabajo pesado por usted.

Ahora es el momento de hacer que las cosas se vean un poco más bonitas. Primero, agreguemos un envoltorio <div> con una clase de contenedor. El <div> de apertura estará en header.php, mientras que el <div> de cierre estará en footer.php. También envolveremos la salida de la publicación en index.php con una etiqueta <article> que tiene una clase de publicación. Esto nos dará clases para apuntar en nuestro archivo style.css para que podamos establecer el ancho de la página, entre otras cosas. También agregaremos un mejor estilo a style.css en este paso.


Paso 8: agregue un poco de estilo a su tema

header.php
Agregar un <div> de apertura al archivo header.php.

footer.php
Añadiendo un </div> de cierre al archivo footer.php.

index.php
Envolviendo la salida de la publicación con una etiqueta <article>

style.css
Finalmente, agregamos algunas mejoras de estilo CSS para que el tema se vea un poco mejor.

Cuando visitamos nuestro sitio web de prueba ahora en el navegador, podemos ver que el tema de WordPress que hemos desarrollado paso a paso en este tutorial se ve bastante bien.
desarrollo de temas de wordpress desde cero


Tutorial de desarrollo de temas de WordPress Resumen paso a paso

Repasemos todo lo que hemos aprendido en este tutorial básico paso a paso del tema de WordPress para principiantes. Hemos aprendido cómo crear nuestro primer tema personalizado en WordPress creando nuestra propia carpeta al lado de la carpeta de temas de nuestra instalación de WordPress. En esta carpeta, agregamos diferentes archivos que corresponden a diferentes secciones de su sitio web. En nuestro tutorial, comenzamos con lo mínimo que debe tener en un tema de WordPress. En el futuro, agregaría muchos más archivos a esta carpeta de los que hemos cubierto. Revisemos cada archivo que creamos en este tutorial y lo que hicieron por nosotros.

  • style.css Este archivo es donde agrega algunos comentarios css para que WordPress sepa algo de información sobre su tema personalizado. También contiene el estilo CSS personalizado que aplicará a su tema.
  • index.php Este archivo controla el html y la salida general de su tema. Es el archivo principal que se utiliza para generar datos en su página de inicio.
  • header.php Le permite especificar un área para contener información importante sobre su sitio web en el área <head>, así como también incluir etiquetas de apertura <html>, <body> y <div class = ”container”>.
  • footer.php El pie de página cerrará las etiquetas de apertura que haya especificado en el área del encabezado, además de darle un lugar para llamar a la función wp_footer ().
  • functions.php Le permite llamar a funciones, tanto PHP como WordPress incorporado, y definir sus propias funciones para cambiar los comportamientos predeterminados de WordPress
  • ¡Ahí lo tienes! Pudimos crear un tema de WordPress personalizado completamente funcional con solo 5 archivos. Esto nos brinda el conocimiento básico para crear temas y funciones de WordPress más avanzados. ¡Gran trabajo!