WordPress – Temas Avanzados

WordPress: Temas Avanzados

En ocasiones, el entorno de configuración de un tema WordPress no nos permite dotar a nuestra Web del aspecto exacto que realmente queremos. Llegados a este punto, podemos optar por quedarnos en esa aproximación de lo que queremos o, en caso de ser un tema gratuito y de tener conocimientos de CSS, PHP y Javascript, podemos optar por personalizar a nuestro gusto un determinado tema.

Estructura de archivos general

Antes de poner nuestro foco sobre la personalización de un tema WordPress, es necesario que conozcamos cómo están estructurados los archivos y carpetas de nuestro sistema.

Como sabemos (y si no es así, te recomiendo nuestro artículo “WordPress – Instalación Local“), podemos descargar WordPress de https://es.wordpress.org/. El zip correspondiente tiene un peso de 9 MB. Una vez lo descomprimimos, vemos que, en el directorio raíz, tenemos 17 archivos y 3 carpetas (que contienen más archivos), con un peso total de unos 24,4MB (en la versión 4.8).

WordPress: estructura de carpetas

Veamos en primer lugar qué contienen las carpetas del directorio raíz:

  • wp-admin: almacena los archivos del back-end de WordPress. Esta parte de la instalación nunca se modifica.
  • wp-content: almacena todo el contenido en formato de archivos (no base de datos) que tiene una instalación de WordPress. En caso de querer hacer un backup del contenido, además de la base de datos de WordPress, también habría que guardar esta carpeta.
  • wp-includes: almacena los archivos que necesita WordPress para funcionar (su API y las librerías principales). Tampoco se modifica nunca.

En cuanto a los archivos más importantes del directorio raíz, tenemos:

  • index.php: archivo principal al que se accede y desde donde se cargan el resto de elementos de WordPress.
  • wp-config-sample.php: plantilla de lo que finalmente será el archivo “wp-config.php” tras la instalación del CMS, donde se guardan los datos de conexión con la base de datos de WordPress (además de otros parámetros).
  • wp-login.php: se encarga de gestionar el login de los usuarios (tanto usuarios normales como administradores).
  • xmlrpc.php: ofrece la comunicación mediante el protocolo XMLRPC. Es importante hacer hincapié en su seguridad y su protección debido a que, históricamente, WordPress ha recibido muchos ataques a través de este archivo.

También es importante destacar el archivo “.htaccess” en caso de instalaciones de WordPress que funcionen sobre servidores web Apache (que son la gran mayoría). Este archivo controla las redirecciones y las URL amigables, y permite el funcionamiento de algunos plugins (como los plugins de cache más eficientes).

Debido a que las carpetas “wp-includes” y “wp-admin” son inalterables, nos centraremos ahora en el contenido de la carpeta “wp-content”. Esta carpeta es de uso común para contenido, y puede ser usada tanto por plugins como por temas.

WordPress: carpetas de un tema

En cuanto a las subcarpetas, inicialmente tenemos:

  • languages: almacena los archivos de traducción, tanto de temas y plugins como del propio WordPress.
  • plugins: almacena los plugins de la instalación, tanto los plugins activos como los que no están activos.
  • themes: almacena los temas del sitio (tanto el principal activo como el resto de los instalados). Cada uno de los temas tendrá aquí una subcarpeta con su nombre. En la siguiente sección, nos centraremos exclusivamente en cómo se estructura cada una de estas subcarpetas.

Una vez nuestro sistema está en funcionamiento, de manera dinámica se van creando las siguientes carpetas:

  • blogs.dir: solo existe cuando WordPress Multisite está activado. En estos casos, el contenido de los blogs hijos de la instalación del multisite se guarda dentro de una carpeta “wp-content” dentro de “blogs.dir”.
  • cache: permite que los plugins de caché guarden los archivos que se generan con los distintos tipos de caché y que se guardan en disco.
  • upgrade: almacena algunos archivos durante las actualizaciones de WordPress. Suele ser una carpeta bastante temporal, y suele estar vacía.
  • uploads: ésta es la carpeta principal donde se guarda el contenido, ya que guarda todas las imágenes de forma predeterminada (es decir, todo lo que controla el Media Manager de WordPress).

En cuanto a los archivos, destacamos los siguientes:

  • advanced-cache.php: utilizado por algunos plugins de caché para el caché de página en disco. Normalmente lo usan los plugins de cache más eficientes, y el archivo solo está en “wp-content” cuando se está utilizando.
  • object-cache.php: muy similar a “advanced-cache.php”, pero con el caché de objetos. Al igual que el caso anterior, forma parte del API de WordPress, y solo está presente cuando el caché de objetos está activado.
  • db.php: hace de intermediario para la conexión con la base de datos MySQL desde PHP, aunque también es usado para implementar caché de consultas a la base de datos en forma de plugin.

Estructura de archivos de un tema

En la carpeta correspondiente a un tema WordPress, aparecen una serie de archivos y subcarpetas que podemos alterar para personalizar nuestro tema. Esta estructura sigue el siguiente diagrama.

WordPress: diagrama de archivos

Centrémonos en primer lugar en el archivo de estilo (“style.css”). Al principio de este archivo, viene información relativa al tema en cuestión (información que, obviamente, debe venir comentada). Por ejemplo, aquí tenemos los metadatos del tema Twentysixteen.

/*
Theme Name: Twenty Sixteen
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
Text Domain: twentysixteenThis theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

Esta información es detectada automáticamente por WordPress. Debajo de estos metadatos vendrían los estilos de nuestro tema (como por ejemplo los márgenes, los colores, las fuentes, etc.).

A continuación, tenemos un archivo fundamental, el archivo índice (“index.php”). Por defecto, si no se encuentra ningún archivo de la jerarquía, se invoca a “index.php”, de ahí que sea indispensable tenerlo. En este archivo podríamos hacer lo que quisiésemos; sin embargo, se utiliza un enfoque más estructurado. De hecho, para crear los temas para WordPress se sigue el concepto DRY (Don’t Repeat Yourself), por lo que, junto con “index.php”, tenemos otra serie de archivos que son invocados desde el propio archivo índice.

Por lo general, el archivo índice lleva la cabecera, el footer, el sidebar y un bucle mostrando las entradas del blog. Para ello, la información se estructura en base a estos archivos:

  • header.php: archivo de cabecera. Se puede invocar con get_header().
  • footer.php: archivo de pie. Se puede invocar con get_footer().
  • sidebar.php: archivo de sidebar (aunque podemos crear otros sidebars, como por ejemplo “sidebar-footer.php”). Se invoca con get_sidebar() o get_sidebar(“footer”).

Además, cualquier fichero del tipo “<nombre>.php” se puede incluir con la sentencia siguiente.

get_template_part(“nombre”)

Con estos ficheros ya podriamos crear un tema visual básico. No obstante, podemos extender mucho más la funcionalidad del tema con la jerarquía de archivos siguiente:

  • home.php: en este fichero va el contenido que se muestra por defecto en la página que asignamos en WordPress que sea la de “Blog”.
  • front-page.php: en este fichero va el contenido que se muestra por defecto en la página que asignamos en WordPress como página estática de inicio. Podemos incluir lo que queramos, las últimas noticias, novedades de nuestros productos, un formulario para captar clientes, etc.
  • 404.php: es el contenido que se muestra cuando no se encuentra la página a la que hemos navegado dentro de nuestra web. Es útil para el usuario (ya que ha obtenido una página que no se encuentra), ofrecerle un formulario de búsqueda.
  • search.php: es la página que muestra los resultados de búsqueda realizados a través del formulario de búsqueda del blog.
  • searchform.php: permite sobrecargar el formulario de búsqueda que trae el núcleo de WordPress, e invocarlo desde cualquier lado con “get_search_form()”.
  • date.php: muestra la relación de posts para una fecha (año, mes o día).
  • author-{nicename}.php / author-{id}.php / author.php: muestran las entradas para un determinado autor. El primero y el segundo de ellos nos permiten una plantilla específica para un autor en concreto, indicando tanto por el nombre como por la id del autor. El tercero es la plantilla genérica.
  • category-{slug}.php / category-{id}.php / category.php: como en el caso anterior, podemos tener diferentes plantillas para diferentes categorías. Por ejemplo, para la categoría “Terror” podemos querer un fondo oscuro o una imagen aterradora, pero para la categoría “Happy” queremos que aparezca más colorido y con una cara sonriente. “Category.php” sería la plantilla genérica para mostrar las entradas de una categoría.
  • tag-{slug}.php / tag-{id}.php/ tag.php: el mismo caso que con las categorías, pero con las etiquetas de las entradas.
  • taxonomy-{taxonomy}-{term}.php / taxonomy-{taxonomy}.php / taxonomy.php: podemos tener taxonomías personalizadas. Estos ficheros, en orden, nos permiten mostrar las entradas de dicha taxonomía asociadas a un término de la misma. También permiten mostrar igual todas las entradas de esa taxonomía personalizada, o mostrar igual todas las taxonomías.
  • single.php: muestra el contenido de una entrada.
  • single-{posttype}.php: muestra el contenido de una entrada de un tipo personalizado de post.
  • {MIME_type}.php / attachment.php: muestra los ficheros adjuntos a las entradas, dependiendo del tipo o bien en general.
  • {custom-template}.php / page-{slug}.php / page-{id}.php / page.php: en el mismo orden, podemos mostrar páginas individuales de un tipo personalizado de templates, mostrar una página para un título en concreto, para una id o cualquier página.

Por otro lado, para crear templates personalizados, en el correspondiente archivo PHP tendríamos que añadir al comienzo y entre comentarios lo siguiente:

/*Template Name: Full Width*/

Por ejemplo, supongamos que creamos un fichero que se llame “template-full.php” y, en la primera línea, incluímos el comentario anterior. El resultado es que, a la hora de elegir la plantilla para cada página, podremos seleccionar esta plantilla.

Adicionalmente, para ayudarnos a organizar el resto de ficheros de nuestro tema, podemos añadirle las siguientes carpetas:

  • img: incluirá todas las imágenes para el tema.
  • js: incluirá todos los scripts (JavaScript) que usará el tema.
  • 3rd: incluirá todas las librerías de terceros (en caso de ser necesarias).
  • inc: incluirá otros elementos personalizados del tema, como taxonomías personalizadas, tipos de entradas personalizados, etc.
  • kernel: incluirá todo el código de gestión del tema (por ejemplo, widgets, ficheros JS generales, panel de administración personalizado, etc). Este código será común a los diferentes temas.

La clave de la personalización de los temas corresponde al fichero “functions.php”. Aquí incluiremos todos los ficheros que llaman al núcleo de WordPress para cualquier acción. Es decir, llamaremos a los ficheros de “kernel” y a los de “inc”. El archivo “functions.php” es como el cerebro de nuestro theme, donde conectamos con el núcleo de WordPress.

Por último, en la raíz de nuestro tema se encuentra un archivo de imagen “screenshot.png”. Esta imagen será la que se verá en la visualización previa del tema en el apartado de apariencia de WordPress.

Deja un comentario