Las plantillas de WordPress

Nota inicial: Este artículo es una traducción de Stepping Into Templates del codex de WordPress que he hecho para obligarme a mi misma a leérmelo entero y asegurarme de que he entendido algo 😉

====

Las plantillas son los ladrillos con los que se construye un sitio web hecho con wordpress. Encajan como las piezas de un puzle para ir formando las páginas que forman el sitio. Algunas plantillas (el encabezado y el pie, por ejemplo) se usan en todas las páginas mientras que otras sólo se utilizan en condiciones específicas. Una página  tradicional consta normalmente de dos archivos:

  • El documento XHTML que contiene la estructura y el contenido de la página.
  • Una hoja de estilo CSS que se ocupa de la presentación (apariencia) de la página.

En WordPress, ambos documentos están presentes, pero los generan varias plantillas que trabajan detrás de la escena. genera “detrás del escenario”. Los archivos de plantilla y la hoja de  estilo se guardan juntos cómo un  Tema de WordPress. Para aprender más sobre desarrollo de temas de wordpress, hay que consultar la documentación de  Desarrollo de plantillas.

La estructura de una página de wordpress

Una página de wp sencilla se construye con 3 bloques: Encabezado (header), contenido (content) y footer (pie). Cada uno de estos bloques lo genera un archivo de plantilla distinto del tema de wordpress que estemos utilizando.

Header

Content

Footer

  • El encabezado (header) contiene toda la información que tiene que estar en la parte superior de la del página (dentro de las etiquetas <head>, de un documento HTML) como son las etiquetas <doctype>, <meta> y los enlaces a las hojas de estilo. También incluye la etiqueta de apertura del “cuerpo del documento”<body> y la parte visible del encabezamiento (que normalmente incluye el nombre del sitio, quizá los menús de navegación, un logo, la descripción del sitio, etc…).
  • El contenido (content) contiene los posts y las páginas del blog, la “chicha” de la página.
  • El pie (footer) contiene la información que normalmente va abajo del todo del documento, como enlaces a otras páginas, o las categorías del sitio en un menú de navegación, información sobre copyright, forma de contacto y otros detalles.

Archivos de plantilla básicos

Para generar esta estructura en un  Tema de WordPress, se empieza con un archivo de plantilla llamado  index.php en el directorio de nuestro Tema. Este archivo tiene dos funciones principales:

  • Incluir o “llamar” a otros archivos de plantilla
  • Incluir el Bucle de wordpress (WordPress Loop) para requerir la información que está en la base de datos (posts, páginas, categorías, etc…).

Para nuestra simple estructura, sólo necesitamos otros 2 archivos de plantilla: La de encabezamiento (header) y la de pie de página (footer). Estos dos archivos de plantilla tienen que llamarse obligatoriamente header.php y footer.php. Las etiquetas de plantilla (Template Tags) que los incluyen, tienen este aspecto:

<?php get_header(); ?>

<?php get_footer(); ?>

Para poder mostrar los posts y las páginas del blog (y personalizar su apariencia), el archivo index.php tiene que ejecutar el bucle de wordpress (WordPress Loop) entre las llamadas al encabezamiento y al pie de página.

La forma en que el sitio presenta el encabezamiento, cuerpo y pie del documento depende de la plantilla o tema que se esté utilizando en el sitio.

Estructuras más complejas

Header

Content

Sidebar

Footer

Muchos temas de WordPress incluyen uno o varios “barras laterales” (sidebars) que contienen las características de navegación y más información sobre el sito. Esta barra lateral se genera con el archivo llamado sidebar.php. Se incluye en el archivo index.php con la  etiqueta de plantilla:

<?php get_sidebar(); ?>

¿Dónde está el truco?

Cómo se puede observar no se ha incluido ninguna etiqueta para “traer” el contenido de la página. Eso es porque el contenido lo genera el bucle de wordpress ( WordPress Loop), dentro de index.php.

Además, la hoja de estilo del tema controla la apariencia y ubicación del encabezamiento, pie, barra lateral y contenido en la pantalla del usuario. Para más información sobre cómo modificar la apariencia de los temas de wordpress y páginas web consultar Blog Design and Layout….

Archivos de plantilla dentro de otros

Hemos visto cómo incluye WordPress los archivos de plantilla estandar  (header, footer, y sidebar) dentro de index.php. También se pueden incluir otros archivos de plantilla dentro de nuestros archivos de plantilla (valga la redundancia).

Por ejemplo,  sidebar.php puede contener un archivo de plantilla que genere un formulario de búsqueda — searchform.php. Cómo este no es uno de los archivos de plantillas estandar de WordPress, el código para incluirlo es un poco distinto:

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

En lugar de usar una etiqueta de plantilla de wordpress para incluir el archivo, utilizaremos un include de php (PHP command include), que necesita saber dónde está el archivo a incluir (TEMPLATEPATH es una variable especial de WordPress que apunta al directorio de los archivos de plantilla del tema).

La mayoría de los temas de WordPress incluyen varios archivos de plantilla dentro de otras plantillas para generar las páginas del sitio. Una estructura típica del archivo principal (index.php) de un sitio WordPress sería:

  • header.php (encabezamiento)
    • theloop.php (contenido)
    • wp-comments.php (comentarios)
  • sidebar.php (barra lateral)
    • searchform.php (formulario de búsqueda)
  • footer.php (pie de página)

Sin embargo, esta estructura se puede cambiar. Por ejemplo, podemos poner el formulario de búsqueda en el encabezamiento o puede que nuestro diseño no necesite un pie de página, por lo que podríamos no incluirlo en nuestro archivo.

Archivos de plantilla especiales

WordPress tiene dos formas principales de mostrar las páginas de un sitio  WordPress. La vista individual se utiliza para mostrar páginas con una sola entrada (post).  La vista multi-post lista varias entradas (o resúmenes de entradas) y se aplica a los archivos de categoría, cronológicos, por autor.. y normalmente a la vista de la página principal. Se puede usar el archivo index.php para generar todos estos tipos de páginas o apoyarse en la jerarquía de plantillas (template hierarchy) de WordPress para elegir los diferentes archivos de plantilla dependiendo de la situación.

La Jerarquía de plantillas de WordPress da respuesta a la siguiente pregunta:

¿Qué archivo de plantilla va a utilizar WordPress al mostrar una determinada página?

WordPress reconoce automáticamente los archivos de plantilla con nombres estandar y los usa para ciertas páginas.  Por ejemplo, cuando un usuario pulsa sobre el título de una entrada, WordPress sabe automáticamente que quieren ver sólo ese artículo en su propia página. Lat Jerarquía de las plantillas utilizará el archivo  single.php en lugar de index.php para generar la página — si el tema tiene un archivo single.php. De igual manera, si el usuario pulsa sobre un enlace de una categoría en particular, WordPress usará  the category.php si existe; si no, buscará archive.php, y si tampoco existe , WordPress utilizará la plantilla.php. Se puede incluso hacer plantillas especiales para determinadas categorías (ver Category Templates para más información).

Consejos sobre los archivos de plantilla

Unos consejos útiles a la hora de crear archivos de plantilla para wordpress:

  1. Seguir la pista a la apertura y cierre de etiquetas

Los archivos de plantilla utilizan etiquetas XHTML y referencias CSS references. Tanto los elementos HTML cómo las referencias CSS pueden  ‘cruzar archivos’ empezando en uno y terminando en otro. Por ejemplo, Los etiquetas <html> y <body> normalmente empiezan en header.php y terminan en  footer.php. La mayoría de los temas de WordPress utilizan  div, que también pueden acaparar varios archivos. Por ejemplo el div principal del contenido de la página puede empezar en header.php y terminar en index.php o en single.php. Seguir la pista de las dónde empiezan y terminas las etiquetas html puede llegar a complicarse bastante si estás desarrollado, diseñando o modificando un tema. Una buena idea es utilizar comentarios en las plantillas para dejar constancia de dónde se abren y se cierran los tags para no despistarnos, y así distinguir qué DIV es cual al final de las diferentes secciones.

  1. Prueba los archivos de plantilla utilizando diferentes vistas posibles: If you have made changes to the comments, sidebar, search form, or any other template file, make sure you test them using different web page views (single post, different types of archives, and pages).
  2. Comenta cuando te apartes de la norma: Si estás diseñando Temas para liberarlos públicamente, ten en cuenta que las personas que se lo bajen probablemente querrán modificar alguna cosa para adaptarlo a sus necesidades. Resulta muy útil si añades notas y comentarios cuando te apartas de la lógica normal de los Temas Clásico de WordPress. También es buena idea añadir comentarios a la hoja de estilo si vas a poner estilos en otros archivos (por ejemplo en header.php).
  3. Cierra la puerta detrás de ti: Si empiezas una etiqueta html o div en un archivo de plantilla, asegúrate de que incluyes la etiqueta de cierre en otro/s. En el foro de  WordPress Forum hay muchísimas preguntas sobre “Qué le ha pasado a mi plantilla” cuando alguien trata de quitar el pie de página sin cerrar las etiquetas que empezaron el en archivo de encabezamiento. Haz un seguimietno de tus etiquetas y asegúrate de que las has cerrado.  Una forma de asegurarse de haber cerrado las etiquetas correctamente es someter la página a un  HTML validator).
  4. Estilos CSS Styles en la plantilla: Se puede usar cualquier etiqueta de HTML o estilo de CSS en las plantillas, sin embargo, se recomenda utilizar la estructura estandar de la estructura de WordPress (ver Site Architecture 1.5). Esto hará que nuestras plantillas sean más comprensibles para los demás

Recursos de plantillas de archivo

Para ver una lista completa de recursos relacionados con archivos de plantilla, consultar Templates. También es conveniente echarle un vistazo a otros artículos en  Category:Templates y Category:Template Tags.

Advertisements

1 Comment

Filed under Cómo funciona wordpress

One response to “Las plantillas de WordPress

  1. Pingback: Descubriendo a wordpress | One and one is three

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s