Cómo mejorar tu plugin de WordPress: agregar un panel de configuración para tu botón de WhatsApp 1.1

En el tutorial anterior aprendimos a crear un plugin de WordPress desde cero y a mostrar un botón básico de WhatsApp en el sitio. Esa primera práctica nos sirvió para entender la estructura mínima de un plugin, cómo activarlo y cómo hacer que funcione.

Ahora vamos a dar el siguiente paso: hacer que ese plugin sea más práctico.

IMPORTANTE: Si no haz leído el primer tutorial, te invitamos a leerlo ya que ahí mostramos imágenes de como subir el plugin a nuestro sitio web.

https://operslinux.com/como-crear-tu-propio-plugin-de-wordpress-desde-cero-boton-basico-de-whatsapp-1-0/

En lugar de tener el número de WhatsApp y el mensaje escritos directamente dentro del código, en este tutorial aprenderás a crear un panel de configuración en el administrador de WordPress para modificar esos datos desde el panel, sin necesidad de tocar el archivo PHP cada vez.

Este cambio es muy importante, porque aquí es donde tu plugin deja de ser una simple práctica y empieza a parecerse a un plugin real.

¿Qué vas a aprender en este tutorial?

En esta segunda parte vas a aprender:

  • cómo agregar un menú de administración en WordPress
  • cómo registrar opciones del plugin
  • cómo guardar datos desde el panel de WordPress
  • cómo usar esos datos guardados en tu botón de WhatsApp
  • cómo mejorar tu plugin sin complicarlo demasiado

Este tutorial sigue siendo ideal para principiantes, pero ya te introduce a una parte fundamental del desarrollo de plugins: la configuración desde el administrador.

¿Qué mejoraremos del plugin anterior?

En la versión anterior teníamos algo así dentro del código:

$numero = '5213312345678';
$mensaje = 'Hola, quiero más información';

Eso funciona, pero tiene una desventaja clara: cada vez que quieras cambiar el número o el mensaje, tienes que editar el archivo del plugin.

Ahora lo vamos a cambiar para que esos valores se guarden desde el panel de WordPress.

Resultado final de este tutorial

Cuando termines, tu plugin tendrá:

  • un menú en el panel de administración
  • un campo para escribir el número de WhatsApp
  • un campo para escribir el mensaje automático
  • un botón flotante que usará esos datos guardados

Todavía será un plugin sencillo, pero mucho más útil y profesional que la primera versión.

Paso 1: usar el mismo archivo del plugin

Seguiremos trabajando con el mismo archivo principal, por ejemplo:

boton-whatsapp-basico.php

Si quieres, también puedes renombrar tu proyecto a algo más general, porque ya dejará de ser tan “básico”. Pero para fines del tutorial, puedes seguir usando el mismo archivo.

Paso 2: comenzar con la cabecera del plugin

La parte inicial sigue siendo prácticamente igual:

<?php
/*
Plugin Name: Botón WhatsApp Básico
Plugin URI: https://operslinux.com/
Description: Un plugin básico de práctica para mostrar un botón de WhatsApp en WordPress.
Version: 1.1
Author: OpersLinux
Author URI: https://operslinux.com/
License: GPL2
*/

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

Aquí solo actualizamos la versión a 1.1 porque ya estamos mejorando el plugin.

Paso 3: registrar las opciones del plugin

Ahora vamos a decirle a WordPress que nuestro plugin va a guardar dos opciones:

  • el número de WhatsApp
  • el mensaje predeterminado

Agrega este código debajo de la cabecera:

add_action('admin_init', function() {
	register_setting('wa_config_grupo', 'wa_numero');
	register_setting('wa_config_grupo', 'wa_mensaje');
});

¿Qué hace este código?

La función register_setting() le dice a WordPress que ciertas opciones podrán guardarse en la base de datos.

En este caso:

  • wa_config_grupo es el grupo de configuración
  • wa_numero será la opción donde se guardará el número
  • wa_mensaje será la opción donde se guardará el mensaje

Esto es importante porque WordPress necesita saber qué datos estás autorizando a guardar desde el formulario del panel.

Paso 4: crear una página en el administrador

Ahora vamos a crear una opción en el menú de WordPress para acceder a la configuración del plugin.

Agrega este código:

add_action('admin_menu', function() {
	add_menu_page(
		'Configuración WhatsApp',
		'WhatsApp',
		'manage_options',
		'wa-config',
		'wa_config_pagina',
		'dashicons-whatsapp',
		30
	);
});

¿Qué significa esto?

La función add_menu_page() crea una nueva opción en el menú lateral del panel de administración.

Sus parámetros principales son:

  • 'Configuración WhatsApp': título interno de la página
  • 'WhatsApp': texto que verás en el menú
  • 'manage_options': permiso requerido para acceder
  • 'wa-config': identificador único de la página
  • 'wa_config_pagina': función que mostrará el contenido
  • 'dashicons-whatsapp': icono del menú
  • 30: posición en el menú

Gracias a esto aparecerá una nueva sección llamada WhatsApp dentro del panel de WordPress.

Paso 5: crear el formulario de configuración

Ahora necesitamos crear la función que mostrará la página del plugin en el administrador.

Agrega este código:

function wa_config_pagina() {
	?>
	<div class="wrap">
		<h1>Configuración del botón de WhatsApp</h1>

		<form method="post" action="options.php">
			<?php
			settings_fields('wa_config_grupo');
			do_settings_sections('wa_config_grupo');
			?>

			<table class="form-table">
				<tr>
					<th scope="row">Número de WhatsApp</th>
					<td>
						<input type="text" name="wa_numero" value="<?php echo esc_attr(get_option('wa_numero', '5213312345678')); ?>" class="regular-text">
						<p class="description">Escribe el número con clave de país y sin espacios. Ejemplo: 5213312345678</p>
					</td>
				</tr>

				<tr>
					<th scope="row">Mensaje predeterminado</th>
					<td>
						<input type="text" name="wa_mensaje" value="<?php echo esc_attr(get_option('wa_mensaje', 'Hola, quiero más información')); ?>" class="regular-text">
					</td>
				</tr>
			</table>

			<?php submit_button('Guardar cambios'); ?>
		</form>
	</div>
	<?php
}

¿Qué hace esta parte?

Aquí ya estamos creando la página visible dentro del panel de WordPress.

Lo más importante es esto:

<form method="post" action="options.php">

Ese formulario enviará los datos para que WordPress los guarde automáticamente.

También usamos estas funciones:

settings_fields('wa_config_grupo');
do_settings_sections('wa_config_grupo');
  • settings_fields() genera los campos de seguridad necesarios
  • do_settings_sections() prepara la estructura del formulario

Después añadimos los campos HTML para que el administrador pueda escribir el número y el mensaje.

Y aquí:

get_option('wa_numero', '5213312345678')

le pedimos a WordPress que recupere el valor guardado. Si no existe todavía, mostrará un valor por defecto.

Paso 6: usar los datos guardados en el botón

Ahora vamos a modificar la función que imprime el botón en el sitio web.

En lugar de usar un número fijo y un mensaje fijo, ahora leeremos lo que se guardó desde el panel.

Agrega este bloque:

function operslinux_boton_whatsapp() {
	$numero = get_option('wa_numero', '5213312345678');
	$mensaje = get_option('wa_mensaje', 'Hola, quiero más información');

	if ( empty($numero) ) {
		return;
	}

	$url = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $numero) . '?text=' . urlencode($mensaje);

	echo '<a href="' . esc_url($url) . '" target="_blank" style="
		position: fixed;
		bottom: 20px;
		right: 20px;
		background: #25D366;
		color: white;
		padding: 12px 18px;
		border-radius: 50px;
		text-decoration: none;
		font-weight: bold;
		z-index: 9999;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	">
		WhatsApp
	</a>';
}

add_action('wp_footer', 'operslinux_boton_whatsapp');

¿Qué mejora hay aquí?

Ahora el plugin usa:

get_option('wa_numero')
get_option('wa_mensaje')

Eso significa que ya no depende de valores escritos manualmente en el código. Todo se controla desde WordPress.

Además, añadimos esta línea:

preg_replace('/[^0-9]/', '', $numero)

Esto limpia el número y elimina caracteres que no sean números. Así, aunque alguien escriba espacios o símbolos por error, la URL quedará más limpia.

También agregamos esta validación:

if ( empty($numero) ) {
	return;
}

Si no hay número guardado, el botón simplemente no se muestra. Eso evita errores innecesarios.

Código completo del plugin

Aquí tienes el código completo para esta segunda versión:

<?php
/*
Plugin Name: Botón WhatsApp Básico
Plugin URI: https://operslinux.com/
Description: Un plugin básico de práctica para mostrar un botón de WhatsApp en WordPress.
Version: 1.1
Author: OpersLinux
Author URI: https://operslinux.com/
License: GPL2
*/

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

add_action('admin_init', function() {
	register_setting('wa_config_grupo', 'wa_numero');
	register_setting('wa_config_grupo', 'wa_mensaje');
});

add_action('admin_menu', function() {
	add_menu_page(
		'Configuración WhatsApp',
		'WhatsApp',
		'manage_options',
		'wa-config',
		'wa_config_pagina',
		'dashicons-whatsapp',
		30
	);
});

function wa_config_pagina() {
	?>
	<div class="wrap">
		<h1>Configuración del botón de WhatsApp</h1>

		<form method="post" action="options.php">
			<?php
			settings_fields('wa_config_grupo');
			do_settings_sections('wa_config_grupo');
			?>

			<table class="form-table">
				<tr>
					<th scope="row">Número de WhatsApp</th>
					<td>
						<input type="text" name="wa_numero" value="<?php echo esc_attr(get_option('wa_numero', '5213312345678')); ?>" class="regular-text">
						<p class="description">Escribe el número con clave de país y sin espacios. Ejemplo: 5213312345678</p>
					</td>
				</tr>

				<tr>
					<th scope="row">Mensaje predeterminado</th>
					<td>
						<input type="text" name="wa_mensaje" value="<?php echo esc_attr(get_option('wa_mensaje', 'Hola, quiero más información')); ?>" class="regular-text">
					</td>
				</tr>
			</table>

			<?php submit_button('Guardar cambios'); ?>
		</form>
	</div>
	<?php
}

function operslinux_boton_whatsapp() {
	$numero = get_option('wa_numero', '5213312345678');
	$mensaje = get_option('wa_mensaje', 'Hola, quiero más información');

	if ( empty($numero) ) {
		return;
	}

	$url = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $numero) . '?text=' . urlencode($mensaje);

	echo '<a href="' . esc_url($url) . '" target="_blank" style="
		position: fixed;
		bottom: 20px;
		right: 20px;
		background: #25D366;
		color: white;
		padding: 12px 18px;
		border-radius: 50px;
		text-decoration: none;
		font-weight: bold;
		z-index: 9999;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	">
		WhatsApp
	</a>';
}

add_action('wp_footer', 'operslinux_boton_whatsapp');

Paso 7: guardar y probar

Una vez actualizado el archivo:

  1. súbelo nuevamente a tu carpeta del plugin si trabajas por FTP o administrador de archivos
  2. entra al panel de WordPress
  3. haz clic en WhatsApp
  4. escribe tu número y tu mensaje
  5. guarda los cambios
  6. visita tu sitio y prueba el botón

Si todo está bien, el botón seguirá apareciendo, pero ahora usando la información configurada desde el administrador.

¿Por qué este tutorial es importante?

Porque aquí ya estás aprendiendo una de las bases del desarrollo real de plugins en WordPress:

separar la lógica del plugin de la configuración del usuario.

Eso hace que tu plugin sea más cómodo, más reutilizable y más profesional.

En otras palabras, ya no estás creando algo solo para probar, sino algo que empieza a ser útil para otras personas.

Qué le falta todavía a este plugin

Aunque ya mejoró bastante, todavía se puede escalar mucho más. Por ejemplo, aún no tiene:

  • selector de color
  • opción para cambiar la posición
  • icono de WhatsApp más bonito
  • estilos separados en CSS
  • opción para mostrarlo solo en móvil o escritorio
  • estadísticas de clics

Pero para una segunda parte, esta evolución está perfecta, porque enseña conceptos nuevos sin volver el tutorial demasiado pesado.

Conclusión

En este segundo tutorial llevaste tu plugin de WordPress a un nivel más práctico al agregar un panel de configuración dentro del administrador.

Ahora el número de WhatsApp y el mensaje automático pueden cambiarse fácilmente sin editar el código, lo cual mejora mucho la experiencia de uso y te acerca más al desarrollo real de plugins para WordPress.

Lo mejor de todo es que sigues construyendo sobre la misma base del tutorial anterior, así que tu serie va creciendo paso a paso de forma lógica y fácil de seguir.

Entradas relacionadas

Deja un comentario