Una introducción a la anatomía de un tema de WordPress

  1. 1. Tutorial de WordPress: Cómo crear un tema de WordPress desde HTML (Parte 1)
  2. 2. Tutorial de WordPress: Cómo crear un tema de WordPress desde HTML (Parte 2)
  3. 3. Actualmente leyendo: Una introducción a la anatomía de un tema de WordPress

Hace un tiempo, te presentamos el concepto de crear un tema de WordPress a partir de HTML. Dividimos el tutorial en dos partes y hoy tratamos de desarrollar los dos tutoriales, así que siéntase libre de considerar esta publicación como la tercera publicación de la serie de publicaciones. Mi objetivo es desarmar el tema de WordPress para darle una idea clara de cómo funciona (el tema).


Esta publicación asume que tiene un conocimiento práctico de HTML y CSS. Seguiré adelante y declararé que tener habilidades de HTML y CSS es un requisito previo para diseñar temas de WordPress. Una cosa más, esta publicación se mantendrá libre de palabras grandes y conceptos difíciles: será fácil de comprender, así que prepárate para divertirte y aprender.

Un poco de cebado HTML

Cada página web HTML se divide en diferentes partes utilizando el

etiqueta. Por ejemplo, puedes romper el cuerpo () de su sitio web en varias secciones, como navegación, encabezado, contenido principal, barra lateral y pie de página, entre otros.

Una vez que tenga su página web en secciones, puede ordenar (u organizar) las secciones como desee con CSS. Este proceso se conoce como estilo, e implica agregar otros elementos de estilo como color, tamaño, bordes, efectos especiales, etc. Tal es el poder de CSS, que, por cierto, es la abreviatura de Cascading Style Sheets. Cuando junta sus archivos HTMl y CSS y agrega un par de imágenes, termina con un sitio web completo.

Las cosas no son muy diferentes con los temas de WordPress. Como vimos en la parte 1 de Cómo crear un tema de WordPress a partir de HTML, los temas de WordPress se dividen en diferentes archivos. Si no puede detectar alguna similitud en este punto, permítame explicarle.

Las páginas web HTML estáticas se dividen en divisiones (lo que llamamos secciones anteriormente) usando

etiquetas (o tablas si realmente eres de la vieja escuela). Por otro lado, los temas de WordPress se dividen en diferentes archivos php, que luego se vuelven a armar usando etiquetas de plantilla.

Por lo tanto, en lugar de tener todos los elementos del cuerpo (encabezado, contenido principal, barra lateral, pie de página, etc.) viviendo en un solo archivo (como es el caso con HTML estático), cada uno de los elementos del cuerpo (en temas de WordPress) vive en archivos separados.

Entonces, el encabezado vivirá en header.php, la barra lateral encontrará la página principal en sidebar.php, el contenido principal vivirá en index.php o single.php (si es una publicación) o page.php (si es una página ) La sección de pie de página vivirá en footer.php, etc..

¿Me estás siguiendo? Mira la siguiente ilustración:

html-wordpress = estructura

De nuestra ilustración de arriba, , y se llaman etiquetas de plantilla. Su trabajo es buscar header.php, sidebar.php y footer.php en ese orden desde su directorio de temas, y mostrar el contenido en su index.php, completando así la página web.

No dejes que el .php la extensión lo asusta, el contenido dentro de los archivos php es solo código HTML con el que está familiarizado. Por ejemplo, su header.php puede contener la navegación típica de la lista HTML. Del mismo modo, puede poner código HTML típico en footer.php, sidebar.php e index.php.

También puedes colocar el loop.php funcionen en su index.php (o en cualquier lugar que desee) para mostrar las publicaciones de su blog, pero debería reducir la velocidad y volver a la anatomía de los temas de WordPress. He mencionado una o dos cosas sobre el ciclo en la parte 2 de cómo crear un tema de WordPress a partir de HTML. y hablaremos sobre él (el bucle) y otras funciones en el futuro.

Hacia adelante…

Un tema básico de WordPress se compone de al menos cuatro archivos de plantilla, a saber:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Veamos qué incluye cada uno de estos mágico archivos:

Archivo de plantilla Index.php

Este es el archivo principal sin el cual no tienes un tema de WordPress que funcione. Es el primer archivo (o predeterminado) que se carga cuando visita un sitio web de WordPress. Considérelo el equivalente de index.html.

Un index.php típico en los temas de WordPress se verá así:





Puedes agregar el ciclo entre y para mostrar publicaciones de blog en la página de inicio (index.php) como se muestra a continuación:




Header.php Template File

Estos archivos de plantilla contienen su código de encabezado, navegación y código de encabezado HTML. Básicamente, header.php almacena todo lo que desea mostrar en la parte superior de su sitio web. Ya sabes, cosas como el título de tu sitio web y cosas así.

También puede vincular a su hoja de estilo CSS en header.php. Aquí hay un ejemplo básico de header.php:





<?php wp_title( '|', true, 'right' ); ?>







Esta es la sección del encabezado. Pon tu logo y otros detalles aquí.

Sidebar.php Template File

Sidebar.php contiene todo lo que necesita para aparecer en su (s) barra (s) lateral (es). La barra lateral contiene menús adicionales, widgets, categorías, iconos de redes sociales, contenido personalizado, código HTML como anuncios, etc..

Sidebar.php puede contener marcado HTML puro o llamadas a funciones php dependiendo de sus necesidades. Como tal, un sidebar.php básico podría verse así:

Footer.php Template File

¿Qué crees que va en footer.php? Puedes poner tu información de copyright aquí, menús adicionales, enlaces, íconos de redes sociales, ¡todo lo que quieras! ¿Quieres ver cómo se ve un footer.php básico? Aquí:

Ponga el contenido de su pie de página aquí, incluidas las llamadas a la función php (para buscar diferentes archivos de plantilla, por ejemplo, search.php) si es necesario.

Observe la y etiquetas de cierre en el footer.php? ¿Puedes adivinar por qué deben incluirse en footer.php? Del mismo modo, ¿puedes adivinar por qué y las etiquetas de apertura están incluidas en el header.php? Háganos saber sus conjeturas en la sección de comentarios al final de esta publicación ��

Los cuatro archivos de plantilla que acabamos de cubrir constituyen un tema de WordPress muy básico. Hay muchos otros archivos de plantilla; hay un archivo de plantilla para cada elemento que ve en un tema de WordPress, ya sea comentarios, resultados de búsqueda y páginas de error 404, solo por mencionar algunos.

Para comprender completamente la anatomía de un tema de WordPress, debe familiarizarse con diferentes archivos de plantilla. Puedes navegar por todos plantillas de mosaicos utilizables en WordPress.

Luego tenemos etiquetas de plantilla, que WordPress usa para buscar archivos de plantilla del directorio de temas. Puedes aprender más sobre etiquetas de plantilla y el papel que desempeñan en WordPress.

Resumen

Un tema de WordPress consta de los siguientes elementos anatómicos:

  • Archivos de plantilla como index.php, header.php, search.php, category.php, etc.
  • Etiquetas de plantilla como , etc.
  • CSS
  • Imágenes y otros archivos multimedia.
  • Archivos JavaScript

Y aquí hay una ilustración que resume la anatomía de un tema de WordPress:

¿Buscando seguir aprendiendo? Mira el detallado guía de anatomía del tema en el Codex de WordPress.

Conclusión

Cada tema de WordPress que ve en la web usa la misma estructura anatómica (incluso nuestro popular tema Total WordPress), que puede personalizar para satisfacer sus necesidades. Una vez que comprenda los conceptos básicos del desarrollo de temas de WordPress, no hay límite para lo que puede hacer con / para los temas de WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map