Icono del sitio imacreste.com

Temas WordPress ¿Qué son?

Iñigo Mezo Alvarez

Crear tu propio tema de WordPress te permite personalizar completamente el aspecto y las funcionalidades de tu sitio, adaptándolo a tus necesidades específicas. Este proceso, aunque puede parecer complejo al principio, te brinda un control total sobre el diseño y las características, permitiéndote destacar con un sitio único.

A lo largo de esta guía, te mostraré cada paso del proceso, desde los preparativos iniciales hasta la personalización y ajuste final de un tema. Llevo desarrollando con WordPress desde el 2008, así que si tienes dudas escríbeme sin compromiso.

¿Qué es un tema de WordPress?

Un tema de WordPress es un conjunto de archivos que definen el diseño visual y la apariencia de un sitio web creado con WordPress. Los temas controlan la disposición de los elementos en la página, los colores, las tipografías, los estilos de texto, y otras características visuales.

Los usuarios pueden elegir entre una amplia variedad de temas gratuitos o de pago, personalizarlos mediante el panel de administración, o incluso crear tu propio tema para satisfacer necesidades específicas.

Preparativos iniciales

Antes de empezar a escribir código para tu tema de WordPress, es fundamental tener claras algunas consideraciones previas, tanto en términos de hardware y software como de conocimientos técnicos.

Requisitos básicos

Conocimientos previos

Antes de empezar, debes tener una base sólida en los siguientes lenguajes y herramientas:

Configuración del entorno de desarrollo

Instalación de WordPress en local

El primer paso es crear un entorno de desarrollo local donde puedas trabajar en tu tema sin afectar un sitio web en producción. Para esto, vamos a utilizar un servidor local. Dependiendo de tu sistema operativo, puedes optar por WAMP o MAMP:

Es importante crear una base de datos local durante la instalación de WordPress, algo que puedes hacer desde phpMyAdmin, una herramienta incluida tanto en WAMP como en MAMP.

Estructura de un tema WordPress

Una vez que tienes configurado tu entorno de desarrollo y WordPress instalado en tu servidor local, es hora de familiarizarse con la estructura básica de un tema de WordPress.

Todos los temas de WordPress siguen una estructura de archivos y carpetas específicas, y entender esta estructura es fundamental para poder crear un tema funcional.

Archivos clave

Un tema de WordPress está compuesto por varios archivos clave que interactúan entre sí para definir el aspecto y la funcionalidad de tu sitio.

A continuación, te explico los tres archivos más importantes que debe contener cualquier tema de WordPress:

style.css: Este es uno de los archivos más importantes de tu tema, ya que contiene todas las reglas de estilo (CSS) que definen la apariencia de tu sitio web. Además, este archivo también incluye un bloque de comentarios al inicio que informa a WordPress sobre los detalles del tema, como el nombre, el autor y la versión.

Un ejemplo de cómo debería verse la cabecera del archivo style.css es el siguiente:

/* 
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

index.php: Este archivo es esencial para cualquier tema de WordPress. Sirve como plantilla principal que se utiliza para mostrar el contenido del sitio. Si WordPress no encuentra un archivo específico para mostrar una página, recurrirá a index.php.

Aquí es donde podrás definir la estructura HTML de la página principal y otras plantillas.

functions.php: Este archivo contiene las funciones que controlan la funcionalidad de tu tema. Desde aquí puedes registrar menús, añadir widgets, o cargar scripts y estilos CSS.

Este archivo es extremadamente versátil y permite extender las capacidades de WordPress a través de hooks y filtros (que veremos más adelante).

Un ejemplo básico de cómo registrar un menú en el archivo functions.php sería el siguiente:

<?php 
function mi_tema_registrar_menu() { 
register_nav_menu('mi_menu_principal', __('Menú Principal')); 
}
add_action('init', 'mi_tema_registrar_menu'); 
?>

Además de estos tres archivos principales, los temas de WordPress suelen incluir otros archivos importantes, como:

header.php: Contiene la parte superior de tu sitio, que generalmente incluye el logo, el menú de navegación y otras configuraciones globales.

footer.php: Define la parte inferior de tu sitio, como la información de contacto o los enlaces a redes sociales.

sidebar.php: Sirve para incluir barras laterales (sidebars) que generalmente contienen widgets, como un buscador o un listado de categorías.

single.php: Plantilla utilizada para mostrar una sola entrada de blog.

page.php: Plantilla para mostrar páginas individuales.

Jerarquía de archivos de plantillas

En WordPress, los archivos de plantillas siguen una jerarquía lógica que define qué archivo utilizar para mostrar diferentes tipos de contenido en tu sitio. Si un archivo de plantilla específico no está presente en tu tema, WordPress buscará otro archivo de acuerdo con esta jerarquía, hasta encontrar uno adecuado para mostrar el contenido. Esto asegura que, aunque falten algunos archivos, siempre haya una plantilla que pueda renderizar la página.

Aquí te muestro cómo funciona esta herencia con algunos ejemplos comunes:

  1. Página de Inicio (Home Page): Si WordPress necesita mostrar la página de inicio de tu sitio, buscará los siguientes archivos en el siguiente orden:
    • home.php: Si existe este archivo, será el que se use para mostrar la página de inicio.
    • front-page.php: Si has configurado una página estática como la página de inicio, WordPress buscará este archivo.
    • index.php: Si ninguno de los anteriores existe, WordPress utilizará index.php, que es el archivo de respaldo para cualquier tipo de contenido.
  2. Entradas Individuales (Single Post): Para mostrar una entrada del blog, WordPress seguirá este orden:
    • single-{post_type}.php: Si tu entrada pertenece a un tipo de post personalizado (custom post type), WordPress buscará un archivo específico para ese tipo, por ejemplo, single-product.php si se trata de un tipo de post «product».
    • single.php: Si no hay un archivo específico para el tipo de post, utilizará el archivo single.php, que es la plantilla predeterminada para entradas individuales.
    • index.php: Si ninguno de los anteriores existe, WordPress volverá a index.php.
  3. Páginas Individuales (Pages): Cuando WordPress muestra una página (en lugar de una entrada), sigue este orden:
    • page-{slug}.php: Si la página tiene un slug específico, WordPress buscará un archivo de plantilla con el nombre del slug. Por ejemplo, para una página con el slug contacto, buscaría page-contacto.php.
    • page-{id}.php: Si no hay una plantilla basada en el slug, WordPress buscará un archivo basado en el ID de la página. Por ejemplo, si la página tiene el ID 42, buscaría page-42.php.
    • page.php: Si no hay ninguna plantilla específica por slug o ID, WordPress utilizará page.php, que es la plantilla general para páginas.
    • index.php: Si no existe page.php, WordPress recurrirá a index.php.
  4. Archivo de Categorías (Category Archive): Cuando WordPress muestra una página de archivo de categorías, sigue esta jerarquía:
    • category-{slug}.php: Si existe una plantilla basada en el slug de la categoría (por ejemplo, category-noticias.php), se utilizará.
    • category-{id}.php: Si no hay una plantilla basada en el slug, buscará una basada en el ID de la categoría (por ejemplo, category-3.php).
    • category.php: Si no existen plantillas específicas de slug o ID, WordPress usará category.php.
    • archive.php: Si no hay una plantilla específica para categorías, se utilizará archive.php, que es la plantilla para cualquier tipo de archivo (categorías, etiquetas, fechas, etc.).
    • index.php: Si ninguna de las anteriores está disponible, se usará index.php.

Ejemplo del Flujo para la Página de Inicio

Vamos a verlo en un ejemplo concreto. Si WordPress necesita mostrar la página de inicio, seguirá este orden:

  1. Si existe un archivo home.php, usará esa plantilla.
  2. Si no hay un home.php, pero has definido una página estática como inicio, entonces buscará front-page.php.
  3. Si no existen estos archivos, WordPress cargará el archivo index.php, que es el archivo de respaldo final.

Este flujo de herencia permite que un tema de WordPress sea flexible, ya que si no proporcionas una plantilla específica, WordPress utilizará otra disponible para mostrar el contenido.

Aquí puedes consultar todas las jerarquías de WordPress:

Organización de carpetas

Los archivos mencionados anteriormente deben estar organizados dentro de una carpeta que representará tu tema en el directorio /wp-content/themes/ de tu instalación de WordPress.

Por ejemplo, si tu tema se llama «Tema Nuevo», deberías tener una estructura como la siguiente:

tema-nuevo/

├── style.css

├── index.php

├── functions.php

├── header.php

├── footer.php

├── sidebar.php

├── single.php

└── page.php

Esta es la base sobre la que puedes empezar a construir un tema totalmente funcional.

Desarrollo del tema

Ahora que ya tienes una estructura básica, es hora de comenzar el desarrollo de tu tema WordPress. En esta sección, veremos cómo añadir scripts y estilos, crear plantillas de página personalizadas y agregar funcionalidades como menús y widgets.

Enqueue de scripts y estilos

Uno de los aspectos más importantes en el desarrollo de un tema de WordPress es asegurarse de que los archivos CSS y JavaScript se carguen correctamente. Para hacerlo, WordPress utiliza una función llamada wp_enqueue, que te permite añadir scripts y hojas de estilo a tu tema de manera segura y eficiente.

Para cargar los archivos style.css y cualquier script de JavaScript, deberás editar el archivo functions.php de tu tema e incluir el siguiente código:

<?php
function tema_nuevo_css_y_js() {
// Registrar la hoja de estilos css
wp_register_style('id_mi_css',plugins_url('css/style.css',__FILE__ ), '', '1.0', 'screen');
wp_enqueue_style('id_mi_css');

// Registrar un archivo js
wp_register_script( 'mi_script',get_template_directory_uri().'/js/mijs.js', array( 'jquery'), '1.0.0', true );
wp_enqueue_script('mi_script');

add_action('wp_enqueue_scripts','tema_nuevo_css_y_js');
?>

En este ejemplo:

Estilos para el administrador de WordPress:

add_action( 'admin_enqueue_scripts','cargar_css_js');
function cargar_css_js(){
//mis css y js
}

Es importante usar wp_enqueue para cargar los recursos, en lugar de incluir los archivos directamente en las plantillas con etiquetas HTML <link> o <script>. Esto garantiza que los archivos se gestionen de forma correcta, evitando conflictos con plugins u otros temas.

Creación de plantillas de página

Un tema de WordPress puede tener varias plantillas de página que definan la estructura y el diseño de diferentes tipos de contenido (entradas, páginas, archivos de categorías, etc.). Cada una de estas plantillas tiene una función específica y WordPress las selecciona automáticamente según el tipo de contenido que se esté mostrando.

Por ejemplo, si deseas crear una plantilla personalizada para una página estática, puedes hacerlo creando un archivo mi-plantilla.php. En el encabezado del archivo, deberás agregar un comentario especial para que WordPress reconozca que es una plantilla de página:

<?php
/* Template Name: Mi Plantilla*/
?>

Una vez hecho esto, puedes crear el diseño y la funcionalidad que desees dentro de este archivo. Luego, al editar una página desde el panel de administración de WordPress, podrás seleccionar «Mi Plantilla Personalizada» en el menú de plantillas.

Añadir soporte para menús y widgets es esencial para la personalización de un tema. Vamos a ver cómo registrar un menú de navegación y cómo añadir áreas de widgets para que los usuarios puedan personalizar las barras laterales y otras secciones del sitio.

  1. Registro de Menús: Como mencionamos anteriormente, puedes registrar menús en tu archivo functions.php. Aquí te muestro cómo hacerlo de manera más detallada:
<?php
function mis_menus() {
    register_nav_menus(array(
        'menu-1' => __('Menú Principal'),
        'menu-2' => __('Menú Secundario'),
    ));
}
add_action('init', 'mis_menus');
?>

Luego, en tu archivo de plantilla (por ejemplo, header.php), puedes mostrar el menú usando la función wp_nav_menu():

<?php
wp_nav_menu(array(
    'theme_location' => 'menu-1',
    'container' => 'nav',
    'container_class' => 'menu-1-css',
));
?>

Ahora solo falta indicar la ubicación donde queremos que se muestre el menú:

<?php wp_nav_menu('theme_location','menu-1');?>

Para crear menús y submenús en el panel de administración de WordPress:

add_menu_page('title_menu','titulo_menu','nivel_usuario','slug','function','icono','posicion');

//añadimos un submenu
add_submenu_page('slug_menu_padre','title_menu','titulo_menu','nivel_usuario','slug','function');
  1. Registro de Áreas de Widgets: Las áreas de widgets (como barras laterales o footers) se definen también en el archivo functions.php. Para registrar un área de widgets, puedes usar la función register_sidebar() de la siguiente manera:
<?php
function mi_widget() {
    register_sidebar(array(
        'name'          => __('Mi widget', 'mi-tema'),
        'id'            => 'mi-widget',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<p class="widget-title">',
        'after_title'   => '</p>',
    ));
}
add_action('widgets_init', 'mi_widget');
?>

Esto añadirá una nueva área de widgets que los usuarios podrán personalizar desde el panel de administración de WordPress. Para mostrar la barra lateral en una plantilla (por ejemplo, sidebar.php), utiliza la función dynamic_sidebar():

<?php
if (is_active_sidebar('mi-widget')) {
    dynamic_sidebar('mi-widget');
}
?>

3. Registro de shortcodes: WordPress ofrece una API para la creación de códigos breves o shortcodes, que permite a los usuarios incorporar pequeños scripts de manera intuitiva en entradas, páginas o tipos de contenido personalizados.

add_shortcode('productos', 'shortcode_productos');
function shortcode_productos() {
return "HOLA";
}

Con este simple código, hemos creado un shortcode. Ahora, al insertarlo en la descripción de una entrada, página o tipo de contenido personalizado en la vista VISUAL, se mostrará lo siguiente:

[productos]

Se mostrará el texto «HOLA» dentro de la página o entrada en la que se utilice el shortcode.

4. Registro de metaboxes: Los metaboxes o metacuadros son bloques de información que se utilizan para agregar nuevas opciones o datos a páginas, entradas o entradas personalizadas.

Para crear un metabox:

function add_custom_meta_box(){
add_meta_box("demo-meta-box", "Custom Meta Box", "custom_meta_box_markup", "post", "side", "high", null);
}
add_action("add_meta_boxes", "add_custom_meta_box");

A continuación, procederemos a crear la función correspondiente, que permitirá recopilar información:

function custom_meta_box_markup($post){ 
$precio=get_post_meta($post->ID,'_precio', true); 
wp_nonce_field(plugin_basename(__FILE__),'guardar_metabox'); 
echo '<p>Precio: <input type="text" name="precio" value="'.esc_attr($precio).'" /></p>'; 
}

Ahora es necesario almacenar los nuevos campos, asegurándonos de que el nonce sea correcto; de lo contrario, se generará un error y no podremos guardar la información de la página.

function guardar_datos_metabox($post_id) { 
if (isset($_POST['precio'])){ 
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; 
//si hay guardado automatico que no guarde estos datos 

check_admin_referer(plugin_basename(__FILE__),'guardar_metabox'); 
//comprobamos el nonce 

update_post_meta($post_id, '_precio',sanitize_text_field($_POST['precio'])); 
} 
} 
add_action("save_post", "guardar_datos_metabox");

Ahora solo falta mostrar la información almacenada dentro del bucle de WordPress. Para ello, utilizamos la misma función que empleamos en el administrador:

$precio=get_post_meta($post->ID,'_precio', true);
echo esc_html($precio);

5. Registro de metadatos: Un metadato es un conjunto de datos que proporciona información adicional sobre un contenido específico, como publicaciones, páginas, o incluso términos de taxonomía (categorías y etiquetas). Estos datos no se muestran directamente en el contenido, pero son útiles para clasificar, organizar y gestionar la información dentro del sistema.

Añadir un metadato:

//En la entrada 40, añadimos un metadato "precio_key" con valor 35
add_post_meta(40, 'precio_key', '35', true);

Actualizar un metadato:

//Actualizamos el metadado "precio_key" de la entrada 40
update_post_meta(40, 'precio_key', '29');

Borrar un metadado:

delete_post_meta(40, 'precio_key');

Recuperar metadatos para mostrarlos o utilizarlos:

//Recorremos todos los metadador de la entrada 40
$valores_todos_campos=get_post_custom(40);
foreach ($valores_todos_campos as $campo=>$valores){
   echo $campo." => ";
   foreach ($valores as $nombreValor=>$valor ){
      echo "<br>".$nombreValor." =>";
      echo var_dump($valor);
   }
   echo "<br>";
}

Entradas personalizadas

WordPress viene configurado inicialmente con dos tipos de contenido: entradas y páginas. Sin embargo, a veces es crucial desarrollar nuevos tipos de contenido personalizados para gestionar elementos como eventos, productos o testimonios.

Los nuevos tipos de contenido diferentes a los predeterminados por WordPress se conocen como «entradas personalizadas».

Para crear una entrada personalizada, se utiliza la función register_post_type($post_type, $args), la cual toma dos parámetros: $post_type (el nombre del módulo) y $args (los argumentos o variables que definen el tipo y las opciones del módulo).

add_action('init', 'mi_contenido');
function mi_contenido() {
    register_post_type('recetas', array(
        'labels' => array(
            'name' => 'Recetas'
        ),
        'public' => true
    ));
}

Al acceder al panel de administración de WordPress, ahora veremos un nuevo menú con el nombre del nuevo módulo (recetas). WordPress automáticamente habilita la capacidad de añadir y editar elementos dentro de este nuevo módulo.

Es importante notar que la creación del módulo se realiza dentro del gancho init, ya que es crucial que el módulo se registre durante esta fase de la ejecución de WordPress.

Recuperando entradas

Para mostrar datos específicos en secciones específicas de nuestro sitio web, debemos emplear el bucle personalizado wp_query().

$args = array ('posts_per_page' => '-1', 'post_type' => 'productos', 'tax_query' => array(array('taxonomy'=>'category','field'=>'slug','terms'=>'señales')));

$misProductos = new WP_query($args);

En este ejemplo, el bucle de WordPress solo mostrará las entradas del tipo PRODUCTO que estén asociadas a la categoría SEÑALES.

Configuraciones

También se pueden configurar para recibir atributos, lo que resulta útil para que el propio usuario que escribe el artículo pueda definir el resultado del shortcode pudiendo definir que se visualizara.

add_shortcode('productos', 'shortcode_productos'); 
function shortcode_productos($atts) { 
$vars= shortcode_atts( array( 
 'idioma' => '1'
 ), $atts );

switch ($vars["idioma"]){
case 1:
$saludo="HOLA";break;
case 2: 
$saludo="HI"; break;
}
return $saludo; 
}

Con la función shortcode_atts evaluamos los atributos que recibe el shortcode, y si no existe se pone el valor de idioma con el valor 1. Y abajo mostramos el saludo en el idioma en función de esta variable. Ahora la llamada dentro de los artículos será:

[productos idioma="2"]

Siendo el 2 el valor que el usuario puede modificar. Si de todos modos metemos la función entre corchetes no pasaría nada ya que por defecto le metemos a idioma=1.

Personalización y ajustes finales

Ahora que has construido la estructura básica de tu tema y has implementado algunas de sus funcionalidades principales, es hora de realizar los últimos ajustes para mejorar su rendimiento y flexibilidad.

En esta sección, veremos cómo utilizar hooks y filtros para personalizar tu tema y cómo realizar pruebas y depuración antes de lanzarlo al público.

Uso de hooks y filtros

Los hooks y filtros son una de las características más poderosas de WordPress, ya que permiten modificar el comportamiento predeterminado de WordPress sin tocar su núcleo. Esto facilita la personalización y hace que tu tema sea mucho más flexible.

Action Hooks: Los action hooks permiten ejecutar una función en un punto específico del ciclo de ejecución de WordPress. Por ejemplo, si deseas añadir una función que se ejecute justo después de que se cargue el encabezado, puedes utilizar el hook wp_head: 

<?php 
function mi_tema_encabezado() { 
echo '<meta name="description" content="Descripción de mi tema">'; 
} 
add_action('wp_head', 'mi_tema_encabezado'); 
?>

Esto añadirá una meta descripción personalizada en el <head> de tu sitio.

Filter Hooks: Los filtros te permiten modificar datos antes de que sean mostrados en el navegador. Por ejemplo, si deseas cambiar el título de tu sitio antes de que se muestre en el navegador, puedes utilizar el hook the_title: 

<?php 
function mi_tema_modificar_descripcion($titulo) { 
echo '<meta name="description" content="'.$titulo.'">'; 
} 
add_filter('the_title', 'mi_tema_modificar_descripcion'); 
?>

Etiquetas condicionales

Las etiquetas condicionales permiten modificar tanto el contenido que se presenta como su forma de exhibición.

Por ejemplo, se pueden utilizar para asegurar que un mensaje de bienvenida se muestre únicamente en la página de inicio del sitio. Asimismo, pueden emplearse para que una categoría específica tenga un color de fondo distinto al del resto de la web (aunque esto también podría lograrse únicamente con CSS, sirve como ilustración).

Ejemplo de uso:

if (is_home()) {
echo 'Bienvenido a la página de inicio';
// Aquí puedes agregar más contenido específico si es la página de inicio
}

Traducir un tema de WordPress

Para traducir un tema o plugin de WordPress, es necesario preparar el código fuente de manera que sea fácil adaptarlo a varios idiomas. Aunque no es obligatorio hacerlo al crear un tema o plugin, es un paso crucial si se desea llegar a un público más amplio.

Traducir cadenas

WordPress cuenta con numerosas funciones para la traducción de cadenas:

$variable=__('Esta es una prueba.','imacreste-tema');
echo $variable;
_e('Esta es una prueba.','imacreste-tema');

Traducir textos con variables

Si en el texto queremos incluir variables debemos usar la función de PHP: printf.

$nombre="imacreste";
$edad=21;
$nombre2="Bilbao";
printf(__('Me llamo %1$s, tengo %2$d años y soy de %3$s.','imacreste-tema'), $nombre, $edad, $nombre2);

Singular y plural

Cuando una variable es singular o plural, el texto suele cambiar. Para evitar agregar programación adicional, disponemos de otra función:

$contador=1; 
$nombre='imacreste';
printf(_n('%1$s: Tienes %2$d mensaje','%1$s: Tienes %2$d mensajeS',$contador,'imacreste-tema'),$nombre,$contador);

Si probamos este código con el número 1, se mostrará el primer mensaje; si usamos un número mayor, aparecerá el segundo mensaje. El tercer parámetro es la variable que determina si el texto es singular o plural.

Formularios en WordPress

La creación de formularios puede ser complicada debido a la variedad de preguntas, como las abiertas, de selección única o múltiple, así como preguntas condicionales. Estas combinaciones requieren un desarrollo laborioso, pero en WordPress hay un plugin que simplifica este proceso.

Gravity Forms

Gravity forms no es un plugin gratuito, pero vale la pena si necesitas formularios con características específicas. Algunas de sus funcionalidades son:

Extendiendo el plugin

El plugin se puede ampliar mediante el uso de Hooks y Acciones. En este ejemplo, enviamos un correo electrónico que incluye el título del formulario enviado.

add_action( 'gform_after_submission', 'set_post_content', 10, 2 );
function set_post_content( $entry, $form ) { 
$to = 'imacreste@gmail.com';
$subject = 'Nuevo formulario';
$headers = array('Content-Type: text/html; charset=UTF-8');
$body='Formulario enviado: '.$form['title'];
wp_mail( $to, $subject, $body, $headers );
}

Buscador de WordPress

De forma predeterminada, el buscador de WordPress servirá para sitios pequeños, pero cuando tenemos una web grande, suele quedarse pequeño, ya que el buscador que viene por defecto simplemente se basa en una caja de texto.

El buscador por defecto de WordPress presenta dos problemas significativos que afectan la eficacia de la búsqueda de contenido:

En primer lugar, siempre podemos desarrollar un plugin que implemente las mejoras que necesitamos y luego utilizar searchform.php y search.php para integrar nuestro plugin y sus funcionalidades.

Sin embargo, existen plugins bastante buenos que ya realizan este trabajo, como por ejemplo: Relavanssi.

Caché en WordPress y elementos transitorios

La caché mejora el acceso a la información en varios niveles:

Elementos transitorios

Dentro de las diversas opciones para optimizar el rendimiento de nuestra web, uno de los aspectos que más puede influir en nuestro trabajo como desarrolladores es el uso de los denominados elementos transitorios de WordPress. A continuación, analizaremos un ejemplo de su funcionamiento:

if ( false === ( $mi_query = get_transient( 'my_query_almacenada' ) ) ) {
$mi_query= new WP_Query( 'cat=15' );
set_transient( 'my_query_almacenada', $mi_query, 60*60*24*7 );
}else{
//usamos $mi_query
}

En este ejemplo, usamos get_transient para recuperar el elemento transitorío special_query_results. Si es false (porque ha caducado) se hace una consulta a Mysql y la guardamos como variable transitoria set_transient.

Estamos almacenando la consulta de SQL durante una semana. Es decir cada semana esa consulta se realiza, pero el resto del tiempo no se hace una nueva consulta a la base de datos.

Consulta el API de los elementos transitorios.

Plugin: WP Super cache

Es uno de los plugins de caché más populares de WordPress y es gratuito. Sin embargo, al recomendar un plugin, aclaro que su efectividad puede cambiar con el tiempo.

En la configuración, la pestaña Fácil permite activar la caché y ofrece consejos para mejorar la velocidad del sitio. La opción Avanzado mejora la caché mediante mod_rewrite, aunque solo es recomendable para contenido no crítico.

La pestaña CDN permite cargar contenido desde diferentes sitios, como imágenes o CSS, para aumentar la velocidad de carga. La pestaña Contenidos es un resumen, y en Precarga podemos pre-cachear entradas para que los usuarios y buscadores vean la versión en caché.

¿Qué es un tema hijo?

Existen dos tipos de temas en WordPress, cada uno con características y funciones específicas que se adaptan a diferentes necesidades de desarrollo web:

Temas padre

Estos temas son la base completa de un diseño, conteniendo todas las funcionalidades y estilos necesarios para que un sitio web opere de manera óptima. Un tema padre incluye archivos como style.css, index.php y functions.php, entre otros, que son esenciales para el funcionamiento del sitio.

Al trabajar con un tema padre, los desarrolladores pueden realizar cambios y personalizaciones según sus preferencias. Sin embargo, es importante tener en cuenta que las actualizaciones frecuentes del tema pueden sobrescribir estos cambios.

Por lo tanto, si se adquiere un tema atractivo, es fundamental planificar las modificaciones de manera cuidadosa y ser consciente de que al actualizar el tema (lo cual ocurre normalmente de 2 a 3 veces al año), es posible que se pierdan las personalizaciones realizadas.

Por esta razón, los temas padre son más adecuados cuando se trabaja con diseños personalizados y se cuenta con la capacidad de realizar su mantenimiento de manera regular.

Temas hijo

Estos son una extensión de los temas padre y permiten realizar modificaciones sin alterar el tema original. La idea principal detrás de un tema hijo es preservar las funcionalidades del tema padre mientras se permite la personalización.

Al crear un tema hijo, se deben copiar solo los archivos que se desean modificar del tema padre. Luego, se realizan las modificaciones en el tema hijo, lo que permite actualizar el tema padre sin perder las personalizaciones. Esta estructura de dos temas es especialmente útil para desarrolladores y diseñadores que desean mantener la integridad del tema padre mientras implementan cambios específicos.

Sin embargo, hay que ser cauteloso, ya que si el tema padre sufre un cambio estructural o se implementan actualizaciones de seguridad, el tema hijo podría no reflejar estos cambios automáticamente. Por lo tanto, es crucial evaluar cuidadosamente las necesidades de personalización y el mantenimiento de ambos tipos de temas.

Testing y debugging

Antes de lanzar tu tema, es crucial asegurarse de que todo funciona correctamente. Aquí te dejo algunos pasos importantes para realizar pruebas y depuración:

  1. Modo Debug de WordPress: WordPress tiene un modo de depuración que puedes activar en el archivo wp-config.php. Cambia la siguiente línea de código a true para activar la depuración: define('WP_DEBUG', true); Esto mostrará todos los errores y advertencias en tu sitio, lo que te ayudará a identificar problemas de código.
  2. Pruebas de Compatibilidad: Asegúrate de que tu tema sea compatible con los principales navegadores (Chrome, Firefox, Safari) y dispositivos móviles. Usa las herramientas de desarrollador de tu navegador para simular diferentes tamaños de pantalla y sistemas operativos.
  3. Validación de HTML y CSS: Existen herramientas como el Validador de HTML del W3C y CSS Validator que te ayudarán a verificar que tu código esté bien estructurado y siga las mejores prácticas.
  4. Pruebas de Rendimiento: Usa herramientas como GTmetrix o Google PageSpeed Insights para medir el rendimiento de tu tema. Esto te permitirá optimizar tiempos de carga y mejorar la experiencia del usuario.

Añadir seguridad en WordPress

WordPress es muy popular debido a su facilidad de instalación, configuración, diseño y adición de funcionalidades. Además, al ser un software de código abierto (open source), nos brinda acceso total a su código fuente, lo que permite mejorarlo.

Sin embargo, esta accesibilidad también la aprovechan quienes desean causar daño, ya que pueden acceder a la configuración de la base de datos y a la estructura del código. Afortunadamente, WordPress realiza frecuentes actualizaciones de seguridad. Solo es necesario seguir estos consejos básicos:

define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

Y en .htaccess:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://midominio.ES/$1 [R,L]
order allow,deny deny from all

Antes de instalar un plugin o un tema, revisa:

Plugin Seguridad: iThemes Security

Repasemos las opciones del plugin, que pueden variar con actualizaciones.

Seguridad en el desarrollo

Los formularios y las URL son los recursos más utilizados para romper nuestra web.

Controlar él envió de formularios y las URLS mediante NONCE

WordPress utiliza NONCE para proteger las URLs y el envío de formularios. Estos impiden el acceso no autorizado generando una clave secreta que se verifica antes de procesar la información.

wp_nonce_url( $mi_url, 'borrar-_'.$post->ID );

//genera una url con el nonce
<a href="<?php echo wp_nonce_url( $mi_url, 'borrar-_'.$post->ID );?>">

Este código genera una cadena _wpnonce en la url. Y para comprobar su envió antes de la acción usamos:

check_admin_referer('borrar-_'.$post->ID);

Para añadir un nonce en un formulario, utilizamos la siguiente función dentro del mismo:

<form>
<input name=”nombre”>
<?php wp_nonce_field('mi_nonce_action','mi_nonce_field'); ?>
</form>
//oculta el nonce como input

Y en la página de recepción del formulario podemos comprobar que se ha enviado correctamente:

check_admin_referer(‘mi_nonce_action’, 'mi_nonce_field');

Otro ataque común es utilizar los formularios para introducir códigos que alteren la base de datos o provoquen errores. Por ejemplo, si alguien ingresa un código de programación en lugar de su nombre, podría causar problemas. Para evitar esto, debemos procesar los datos mediante las funciones de WordPress antes de guardarlos.

$nombre= sanitize_text_field( $_POST['nombre'] );

Y para mostrar la información por pantalla:

$html = esc_html( '<a href="https://imacreste.com/">Enlace</a>' );

Evitar SPAM en WordPress

Usar un Plugin Antispam

Habilitar la Moderación de Comentarios

Desactivar Comentarios en Páginas Específicas

Usar un CAPTCHA

Limitar el Número de Enlaces en Comentarios

Implementar un Filtro de Palabras Clave

Desactivar Comentarios en Entradas Antiguas

Actualizar Regularmente WordPress y Plugins

Revisar y Eliminar Comentarios Spam Regularmente

Configurar un Sistema de Reputación

Conclusión

Crear un tema de WordPress desde cero es un proceso que requiere tiempo y paciencia, pero es una excelente manera de personalizar tu sitio web y mejorar tus habilidades de desarrollo.

Al seguir los pasos de este artículo, habrás aprendido cómo configurar tu entorno de desarrollo, estructurar los archivos clave, desarrollar funcionalidades personalizadas y realizar pruebas para asegurar un buen rendimiento.

Como último consejo, asegúrate siempre de mantener tu código limpio y organizado. Y recuerda que los temas de WordPress están en constante evolución, por lo que siempre hay espacio para seguir mejorando y aprendiendo nuevas técnicas.

Salir de la versión móvil