Tu primer plugin de WordPress en 15 minutos: una caja al final de cada entrada

Un plugin de WordPress no es magia ni requiere años de programación. En su forma más simple, es un archivo PHP con un comentario especial al principio. Si sabes copiar un archivo al servidor, puedes crear uno.

En esta entrada vamos a hacer un plugin útil de verdad: agrega al final de cada entrada una caja que invita a seguir la conversación en el foro. En las próximas entradas de esta serie le iremos sumando una página de ajustes y un shortcode.

Antes de empezar

• Necesitas acceso al Administrador de archivos de cPanel (o FTP) de un WordPress.
• Hazlo en un sitio de pruebas, no en tu sitio real. Si te equivocas en una línea, el sitio puede mostrar un error, y es mejor aprender sin presión.
• Un editor de código en tu computador ayuda mucho. Visual Studio Code es gratuito. También puedes editar directo en el Administrador de archivos.

Paso 1. Crea la carpeta y el archivo

1. En el Administrador de archivos, entra a public_html/wp-content/plugins.
2. Crea una carpeta llamada caja-foro.
3. Dentro, crea un archivo llamado caja-foro.php.

Por convención, el archivo principal se llama igual que la carpeta. Usa solo minúsculas, números y guiones.

Paso 2. La cabecera: lo que convierte un archivo en plugin

Abre caja-foro.php y pega esto:

<?php
/**
 * Plugin Name: Caja Foro
 * Description: Agrega una invitación al foro al final de cada entrada.
 * Version:     1.0.0
 * Author:      Tu nombre
 * License:     GPL-2.0-or-later
 * Text Domain: caja-foro
 */

// Si alguien abre este archivo directamente desde el navegador, no hacer nada.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

Guarda y ve a Plugins en tu panel. ¡Ahí está «Caja Foro»! WordPress lee ese comentario para saber el nombre, la descripción y la versión. Puedes activarlo: todavía no hace nada, pero ya es un plugin.

La comprobación de ABSPATH es una buena costumbre de seguridad. ABSPATH solo existe cuando WordPress está cargado; si alguien llama al archivo directo, el plugin se detiene.

Paso 3. Que haga algo: el filtro the_content

WordPress está lleno de «puntos de enganche» llamados hooks. Uno de ellos, the_content, deja que cualquier plugin modifique el contenido de una entrada justo antes de mostrarlo. Vamos a usarlo para agregar nuestra caja al final.

Agrega esto debajo de lo anterior:

add_filter( 'the_content', 'caja_foro_agregar' );

function caja_foro_agregar( $contenido ) {
	// Solo en entradas individuales, dentro del contenido principal.
	if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() ) {
		return $contenido;
	}

	// Dirección del foro: la pide a bbPress si está activo.
	if ( function_exists( 'bbp_get_forums_url' ) ) {
		$url_foro = bbp_get_forums_url();
	} else {
		$url_foro = home_url( '/' );
	}

	$caja  = '<div class="caja-foro">';
	$caja .= '<p><strong>¿Te quedó alguna duda?</strong> ';
	$caja .= 'Sigue la conversación en el foro.</p>';
	$caja .= '<a class="caja-foro-boton" href="' . esc_url( $url_foro ) . '">Ir al foro</a>';
	$caja .= '</div>';

	return $contenido . $caja;
}

Guarda y abre cualquier entrada de tu sitio de pruebas: al final aparecerá la caja.

Qué hace cada parte

• add_filter( 'the_content', 'caja_foro_agregar' ): «WordPress, cuando vayas a mostrar el contenido, pásaselo antes a mi función».
• $contenido: el texto de la entrada que WordPress le entrega a la función.
• El if: evita que la caja aparezca en páginas, en el listado del blog, en widgets o en otros lugares que también usan the_content.
• function_exists( 'bbp_get_forums_url' ): comprueba que bbPress esté activo antes de usar una de sus funciones. Si llamas a una función que no existe, el sitio falla.
• esc_url(): limpia la dirección antes de ponerla en el HTML. Escapar todo lo que se imprime es una regla de oro en WordPress.
• return: un filtro siempre debe devolver el valor, modificado o no. Si olvidas el return, las entradas aparecerán vacías.

¿Por qué el prefijo caja_foro_ en el nombre de la función? Porque todas las funciones de todos los plugins comparten el mismo espacio. Si dos plugins tienen una función agregar(), el sitio falla. Un prefijo único lo evita.

Paso 4. Dale estilo

Vamos a cargar una hoja de estilos solo en las entradas. Crea el archivo caja-foro/caja-foro.css:

.caja-foro {
	margin: 2em 0;
	padding: 1.2em 1.4em;
	border: 1px solid rgba(34, 197, 94, .45);
	border-radius: 10px;
	background: rgba(34, 197, 94, .08);
}
.caja-foro p { margin: 0 0 .8em; }
.caja-foro-boton {
	display: inline-block;
	padding: .5em 1.1em;
	border-radius: 6px;
	background: #22c55e;
	color: #0b1220 !important;
	font-weight: 700;
	text-decoration: none !important;
}

Y en caja-foro.php, agrega al final:

add_action( 'wp_enqueue_scripts', 'caja_foro_estilos' );

function caja_foro_estilos() {
	if ( is_singular( 'post' ) ) {
		wp_enqueue_style(
			'caja-foro',
			plugins_url( 'caja-foro.css', __FILE__ ),
			array(),
			'1.0.0'
		);
	}
}

Esta vez usamos add_action en vez de add_filter. La diferencia: una acción sirve para hacer algo en un momento dado (cargar un CSS); un filtro sirve para modificar un valor y devolverlo (el contenido). Lo explicamos a fondo en la entrada sobre hooks.

Paso 5. Prueba y guarda tu trabajo

• Abre una entrada: la caja debe verse con estilo.
• Abre una página: la caja no debe aparecer.
• Abre la portada del blog: tampoco.

Para instalarlo en otro sitio, comprime la carpeta caja-foro en un .zip y súbelo desde Plugins → Añadir nuevo → Subir plugin.

Si algo sale mal

Si al guardar el sitio muestra un error crítico, casi siempre es un punto y coma o una llave que falta. Renombra la carpeta caja-foro a caja-foro-off desde el Administrador de archivos, el sitio vuelve, y revisas el código con calma. En otra entrada de esta serie te enseñamos a leer el error exacto con WP_DEBUG.

¿Hiciste tu primer plugin? Compártelo en el foro: muéstranos tu código, cuéntanos qué le cambiarías y te damos ideas para la siguiente versión.