En que se equivocan la mayoría de los diseñadores web sobre la jerarquía de temas de WordPress

En que se equivocan la mayoría de los diseñadores web sobre la jerarquía de temas de WordPress

Al principio, diseñar temas de WordPress puede parecer bastante abrumador; incluso para diseñadores web experimentados. El tema más simple parece estar compuesto por varios archivos que de alguna manera están interconectados.

Pero la buena noticia es esta: Hay un sistema lógico detrás de la confusión.. Si está listo para arremangarse y aprender algo de PHP, puede Convierta sus diseños HTML estáticos en sitios web dinámicos de WordPress.

Por supuesto, puede utilizar nuestros servicios en su lugar, ¡pero nos gusta darle una opción!

En este artículo, quiero comenzar centrándome en el error clave que cometen la mayoría de los posibles diseñadores de temas de WordPress cuando se trata de trabajar con la jerarquía de plantillas de temas de WordPress, y luego darte una descripción general de la forma en que los temas de WordPress debería reunirse.

El mayor secreto en el desarrollo de temas de WordPress

A pesar de todas las aparentes complicaciones del desarrollo de temas de WordPress, crear su propio tema de WordPress puede ser tan fácil como desee.

¿Y si te dijera que puedes crear un tema de WordPress simple con solo dos archivos?

Estos dos archivos son index.php y style.css. No serán todos ustedes al final querer, pero son todo lo que necesitas.

Si alguna vez ha creado un diseño estático con un index.html y style.css archivo, puede copiar y pegar literalmente el contenido de cada uno en un nuevo index.php y style.css , agregue un poco más de información, comprima los archivos en una carpeta y cárguelo en WordPress. Hola, ¡tu primer tema de WordPress!

Para probar mi punto, hagamos eso. Empezaremos con nuestro index.php depositar:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            My First WordPress Theme
        </title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

Como puede ver, estamos usando el mismo HTML básico que normalmente usaríamos, sin PHP a la vista. Teóricamente hablando, PHP es opcional cuando se trata del desarrollo de temas, aunque seguramente encontrará una necesidad si desea crear sitios web de WordPress completos. Omitir PHP en los archivos de su tema esencialmente hace que WordPress sea redundante.

En términos de tu style.css archivo, solo necesita una cosa para funcionar: un encabezado de hoja de estilo. Este se compone de cierta información que le permite a WordPress identificar su tema.

Aquí hay un ejemplo simple, que debe insertarse como comentario en su style.css depositar:

/*

Theme Name: My First WordPress Theme
Author: My Name
Description: My first ever WordPress theme!
Version: 1.0

*/

Hay muchos otros elementos de encabezado que se pueden incluir en su hoja de estilo, pero solo se requieren algunos. Aquí está la lista completa:

  • Nombre del tema.
  • URI del tema. Si su tema tiene una página de inicio, aquí es donde lo agrega.
  • Autor. ¡No sea tímido!
  • URI del autor. Si tiene un sitio web personal / de cartera, puede acceder a él aquí.
  • Descripción.
  • Versión.
  • Licencia. Haga clic aquí para obtener más información sobre las licencias de WordPress.
  • URI de licencia. Se recomienda que incluya un enlace a la licencia que elija para su tema.
  • Palabras clave. Estas etiquetas se utilizan en WordPress.org para filtrar su tema por características específicas (por ejemplo, “una columna”, “encabezado personalizado”).
  • Campo de texto. Se utiliza con fines de internacionalización / traducción.

(Tenga en cuenta que el nombre de su tema debe ser único. Si elige un nombre que ya existe, creará un conflicto en WordPress).

Guarda tu index.php y style.css archivo en una carpeta y asígnele un nombre único. Utilice guiones en lugar de espacios. Una vez que haya terminado, comprima el archivo.

Luego ve a Apariencia> Temas desde su instalación de WordPress y haga clic en la Agregar nuevo botón. Desde la pantalla resultante puede descargar y activar su nuevo tema.

Una vez que hayas hecho eso, navega a tu página de inicio y verás tu primer tema de WordPress:

Tu primer sitio web de WordPress

Para confirmar que esto ha sido reconocido como un tema en WordPress, simplemente regrese a Apariencia> Temas. Encontrarás tu tema entre todos los demás que has instalado en tu sitio, e incluso puedes hacer clic en él para revelar más detalles que has incluido en el encabezado de tu hoja de estilo:

Detalles del tema de WordPress

Por supuesto, su tema no tiene mucho que decir en este punto, pero el ejemplo anterior muestra cuán simple puede ser el diseño de un tema de WordPress.

También revela este gran secreto que mencioné anteriormente: index.php no es solo la página de inicio de su sitio (aunque puede), es la base de todo en el diseño de temas de WordPress.

Aprender a conocer index.php Y jerarquía de las plantillas de temas de WordPress

Sería perdonado por asumir que index.php está destinado a ser la página de inicio de su sitio web de WordPress. Bueno no. Es mucho más importante.

Dije anteriormente que puedes crear un tema de WordPress con solo dos archivos, uno de los cuales es index.php. Bueno, quise decir eso en cada significado, no solo en términos de crear un simple “¡Hola mundo!” Ejemplo.

Verá, la jerarquía de plantillas de temas de WordPress funciona de tal manera que, si no existe un archivo de plantilla más específico, pasará por defecto al siguiente archivo más “ senior ”. Y adivina cuál es el archivo más antiguo; ¿Qué es WordPress por defecto en última instancia? Es verdad: index.php.

Para darle una mejor idea de lo que quiero decir, aquí hay una representación visual de la jerarquía de plantillas de temas de WordPress:

Jerarquía de plantillas de tema de WordPress

Como puede ver, hay una gran cantidad de archivos de plantilla que puede usarse para crear un tema de WordPress, todo desde una sola página de publicación de blog (single-post.php) a una página de error 404 (404.php). Pero lo más importante es esto: si WordPress no puede encontrar el archivo más específico, por defecto el siguiente archivo más antiguo.

En última instancia, todo se reduce a index.php: el padre de los archivos de plantilla de tema de WordPress.

Entonces index.php no es la página de inicio en absoluto; idealmente, WordPress buscaría primero front-page.php, o después home.php Para este propósito. Index.php es un último recurso.

¿A dónde vas desde aquí?

Solo hemos arañado la superficie del desarrollo de temas de WordPress en esta publicación, pero ahora debe saber que cada archivo de plantilla en un tema de WordPress se relaciona con un tipo particular de página que vería en el front-end. Por ejemplo, una sola publicación de blog está representada más específicamente por single-post.php, entonces single.php, entonces index.php.

WordPress continuará trabajando al revés hasta que encuentre algo en lo que colgar, pero los archivos de temas más específicos le brindan la flexibilidad de crear diseños y diseños personalizados para las diferentes páginas de su sitio.

Una vez que comprenda esto, puede comenzar desde una posición simple (es decir, index.php) y desarrolla tu diseño a partir de ahí. Como lo he dicho; puede crear un tema de WordPress con solo dos archivos, pero en realidad querrá aprovechar al máximo lo que WordPress tiene para ofrecer y aprovechar su jerarquía de plantillas de temas.

Si desea explorar la jerarquía de plantillas de temas de WordPress con más detalle, le recomiendo los siguientes dos recursos:

O inicie la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. Únase a él ahora es gratis)!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba