30Valencia, 23/09/2026, G.B.
La búsqueda interna es una de las piezas clave en cualquier sitio web con una buena cantidad de contenidos, categorías y enlaces. Sin embargo, mantener un buscador funcional en WordPress sin cargar el sitio de dependencias o scripts superfluos puede llegar a ser complicado.
Durante mucho tiempo estuve utilizando en el sitio el conocido plugin Ivory Search. Cumplía su función, pero tras las últimas actualizaciones comenzó a fallar hasta que dejó de funcionar del todo. Como solución provisional, opté por sustituirlo por un buscador integrado directamente en la barra de navegación del menú (proceso que ya os comenté en un post anterior aquí en Indaga.net). Aunque funcionaba (y sigue funcionando) correctamente para búsquedas rápidas, faltaba la flexibilidad de disponer de una caja de búsqueda limpia, personalizable y reutilizable mediante shortcode en cualquier página, entrada o widget.
La solución por la que me he decidido ha sido desarrollar un plugin propio en un único archivo .php: 100% nativo, ligero, sin librerías de terceros y seguro.
¿Por qué prescindir de plugins comerciales de búsqueda?
La mayoría de los plugins de búsqueda del repositorio introducen tablas adicionales en la base de datos, hojas de estilo CSS pesadas, scripts JavaScript que ralentizan el renderizado («pintado») y paneles llenos de características comerciales inútiles.
El núcleo de WordPress ya cuenta con un motor de búsqueda integrado extremadamente eficiente que se invoca mediante el parámetro estándar ?s=. Lo único que necesitamos es una interfaz limpia para capturar la búsqueda.
Los requisitos para este plugin han sido:
- Cero dependencias externas: Sin librerías JS, sin llamadas a CDNs y con icono de lupa insertado en SVG nativo
- Seguridad estricta: Validación y sanitización de todas las entradas del usuario y escape en el renderizado HTML (prevención de vulnerabilidades XSS
- Aislamiento de estilos: Generación de selectores dinámicos para evitar conflictos con el tema activo de WordPress
- Panel de administración e instrucciones: Un panel sencillo dentro de
Ajustes > Buscador Indagapara cambiar colores, texto del placeholder y elegir varios diseños de maquetación - Atributos en Shortcode: Posibilidad de anular la configuración global directamente desde la etiqueta indaga_search (entre corchetes, []). Aquí podéis verlo insertado funcionamiento.
Estructura y código completo del plugin
Para instalarlo, basta con crear la carpeta /wp-content/plugins/indaga-search-plugin/ y guardar dentro el archivo indaga-search-plugin.php con el siguiente código PHP:
<?php
/**
* Plugin Name: Indaga Search Form
* Plugin URI: https://indaga.net
* Description: Buscador nativo de WordPress ligero, seguro y sin dependencias. Permite varios diseños y configuraciones personalizables desde el panel o mediante atributos de shortcode.
* Version: 1.0.0
* Author: INDAGA.net
* Text Domain: indaga-search
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Evitar acceso directo por URL
}
/**
* 1. REGISTRO DE OPCIONES Y PÁGINA DE CONFIGURACIÓN EN EL PANEL
*/
function isf_register_settings() {
register_setting( 'isf_options_group', 'isf_placeholder', array(
'type' => 'string',
'default' => 'Buscar en el sitio...',
'sanitize_callback' => 'sanitize_text_field',
) );
register_setting( 'isf_options_group', 'isf_button_text', array(
'type' => 'string',
'default' => 'Buscar',
'sanitize_callback' => 'sanitize_text_field',
) );
register_setting( 'isf_options_group', 'isf_layout', array(
'type' => 'string',
'default' => 'inline',
'sanitize_callback' => 'isf_sanitize_layout',
) );
register_setting( 'isf_options_group', 'isf_primary_color', array(
'type' => 'string',
'default' => '#2563eb',
'sanitize_callback' => 'sanitize_hex_color',
) );
register_setting( 'isf_options_group', 'isf_bg_color', array(
'type' => 'string',
'default' => '#ffffff',
'sanitize_callback' => 'sanitize_hex_color',
) );
register_setting( 'isf_options_group', 'isf_border_color', array(
'type' => 'string',
'default' => '#cbd5e1',
'sanitize_callback' => 'sanitize_hex_color',
) );
}
add_action( 'admin_init', 'isf_register_settings' );
function isf_sanitize_layout( $input ) {
$valid_layouts = array( 'inline', 'stacked', 'minimal', 'icon_only' );
return in_array( $input, $valid_layouts, true ) ? $input : 'inline';
}
function isf_add_admin_menu() {
add_options_page(
'Configuración de Buscador Indaga',
'Buscador Indaga',
'manage_options',
'indaga-search',
'isf_render_admin_page'
);
}
add_action( 'admin_menu', 'isf_add_admin_menu' );
function isf_render_admin_page() {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
$placeholder = get_option( 'isf_placeholder', 'Buscar en el sitio...' );
$button_text = get_option( 'isf_button_text', 'Buscar' );
$layout = get_option( 'isf_layout', 'inline' );
$primary_color = get_option( 'isf_primary_color', '#2563eb' );
$bg_color = get_option( 'isf_bg_color', '#ffffff' );
$border_color = get_option( 'isf_border_color', '#cbd5e1' );
?>
<div class="wrap">
<h1>Ajustes del Buscador Indaga.net</h1>
<p>Personaliza el aspecto del buscador nativo o consulta las instrucciones para incrustarlo mediante shortcode.</p>
<div style="display: flex; gap: 30px; flex-wrap: wrap; margin-top: 20px;">
<div style="flex: 1; min-width: 320px; max-width: 600px;">
<form method="post" action="options.php">
<?php
settings_fields( 'isf_options_group' );
do_settings_sections( 'isf_options_group' );
?>
<table class="form-table" role="presentation">
<tr>
<th scope="row"><label for="isf_placeholder">Texto del placeholder</label></th>
<td>
<input type="text" id="isf_placeholder" name="isf_placeholder" value="<?php echo esc_attr( $placeholder ); ?>" class="regular-text" />
</td>
</tr>
<tr>
<th scope="row"><label for="isf_button_text">Texto del botón</label></th>
<td>
<input type="text" id="isf_button_text" name="isf_button_text" value="<?php echo esc_attr( $button_text ); ?>" class="regular-text" />
</td>
</tr>
<tr>
<th scope="row"><label for="isf_layout">Diseño de la estructura</label></th>
<td>
<select id="isf_layout" name="isf_layout">
<option value="inline" <?php selected( $layout, 'inline' ); ?>>En línea (Clásico - Botón a la derecha)</option>
<option value="stacked" <?php selected( $layout, 'stacked' ); ?>>Apilado (Campo de texto arriba, botón abajo)</option>
<option value="minimal" <?php selected( $layout, 'minimal' ); ?>>Minimalista (Caja integrada con lupa)</option>
<option value="icon_only" <?php selected( $layout, 'icon_only' ); ?>>Solo icono (Botón cuadrado compacto)</option>
</select>
</td>
</tr>
<tr>
<th scope="row"><label for="isf_primary_color">Color principal</label></th>
<td>
<input type="color" id="isf_primary_color" name="isf_primary_color" value="<?php echo esc_attr( $primary_color ); ?>" />
</td>
</tr>
<tr>
<th scope="row"><label for="isf_bg_color">Color de fondo del campo</label></th>
<td>
<input type="color" id="isf_bg_color" name="isf_bg_color" value="<?php echo esc_attr( $bg_color ); ?>" />
</td>
</tr>
<tr>
<th scope="row"><label for="isf_border_color">Color del borde</label></th>
<td>
<input type="color" id="isf_border_color" name="isf_border_color" value="<?php echo esc_attr( $border_color ); ?>" />
</td>
</tr>
</table>
<?php submit_button( 'Guardar cambios' ); ?>
</form>
</div>
<div style="flex: 1; min-width: 300px; max-width: 450px; background: #fff; padding: 20px; border: 1px solid #c3c4c7; border-radius: 4px; height: fit-content;">
<h2>Instrucciones de Uso</h2>
<p>Inserta el buscador en cualquier lugar utilizando:</p>
<p><code></code></p>
<hr style="margin: 15px 0; border: 0; border-top: 1px solid #eee;" />
<h3>Parámetros del Shortcode</h3>
<ul>
<li><code>layout="inline|stacked|minimal|icon_only"</code></li>
<li><code>placeholder="Buscar..."</code></li>
<li><code>color="#2563eb"</code></li>
</ul>
</div>
</div>
</div>
<?php
}
/**
* 2. LÓGICA DEL SHORTCODE
*/
function isf_search_shortcode( $atts ) {
$db_placeholder = get_option( 'isf_placeholder', 'Buscar en el sitio...' );
$db_button_text = get_option( 'isf_button_text', 'Buscar' );
$db_layout = get_option( 'isf_layout', 'inline' );
$db_primary_color = get_option( 'isf_primary_color', '#2563eb' );
$db_bg_color = get_option( 'isf_bg_color', '#ffffff' );
$db_border_color = get_option( 'isf_border_color', '#cbd5e1' );
$atts = shortcode_atts( array(
'placeholder' => $db_placeholder,
'button_text' => $db_button_text,
'layout' => $db_layout,
'color' => $db_primary_color,
'bg' => $db_bg_color,
'border' => $db_border_color,
), $atts, 'indaga_search' );
$layout = isf_sanitize_layout( $atts['layout'] );
$placeholder = sanitize_text_field( $atts['placeholder'] );
$button_text = sanitize_text_field( $atts['button_text'] );
$primary_color = sanitize_hex_color( $atts['color'] );
$bg_color = sanitize_hex_color( $atts['bg'] );
$border_color = sanitize_hex_color( $atts['border'] );
$unique_id = 'indaga-search-' . wp_rand( 1000, 9999 );
$search_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle;"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>';
$output = '<style>';
$output .= '.' . $unique_id . ' { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; width: 100%; margin: 10px 0; }';
$output .= '.' . $unique_id . ' form { display: flex; gap: 8px; margin: 0; width: 100%; box-sizing: border-box; }';
$output .= '.' . $unique_id . ' input[type="search"] { flex: 1; background-color: ' . esc_attr( $bg_color ) . '; border: 1px solid ' . esc_attr( $border_color ) . '; border-radius: 4px; padding: 8px 12px; font-size: 14px; color: #1e293b; outline: none; transition: border-color 0.2s ease; box-sizing: border-box; }';
$output .= '.' . $unique_id . ' input[type="search"]:focus { border-color: ' . esc_attr( $primary_color ) . '; }';
$output .= '.' . $unique_id . ' button[type="submit"] { background-color: ' . esc_attr( $primary_color ) . '; color: #ffffff; border: none; border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }';
if ( 'stacked' === $layout ) {
$output .= '.' . $unique_id . ' form { flex-direction: column; }';
$output .= '.' . $unique_id . ' button[type="submit"] { width: 100%; }';
} elseif ( 'minimal' === $layout ) {
$output .= '.' . $unique_id . ' form { position: relative; }';
$output .= '.' . $unique_id . ' input[type="search"] { padding-right: 40px; }';
$output .= '.' . $unique_id . ' button[type="submit"] { position: absolute; right: 4px; top: 4px; bottom: 4px; background: transparent; color: ' . esc_attr( $primary_color ) . '; }';
} elseif ( 'icon_only' === $layout ) {
$output .= '.' . $unique_id . ' button[type="submit"] { padding: 8px 12px; }';
}
$output .= '</style>';
$home_url = esc_url( home_url( '/' ) );
$current_query = get_search_query();
$output .= '<div class="indaga-search-container ' . esc_attr( $unique_id ) . '">';
$output .= '<form role="search" method="get" action="' . $home_url . '">';
$output .= '<input type="search" value="' . esc_attr( $current_query ) . '" name="s" placeholder="' . esc_attr( $placeholder ) . '" aria-label="Buscar" required />';
$output .= '<button type="submit">';
if ( 'minimal' === $layout || 'icon_only' === $layout ) {
$output .= $search_svg;
} else {
$output .= $search_svg . ' ' . esc_html( $button_text );
}
$output .= '</button>';
$output .= '</form>';
$output .= '</div>';
return $output;
}
add_shortcode( 'indaga_search', 'isf_search_shortcode' );
Formas de invocación en tus páginas
Una vez activado el plugin en WordPress, puedes invocar el buscador en cualquier parte de varias formas distintas )lo encontrarás en Ajustes -> Buscador Indaga):
- Buscador clásico en línea:
indaga_search(recordad, siempre los shortcodes siempre entre corchetes):
- Formato minimalista con la lupa integrada:
indaga_search layout="minimal" placeholder="Explorar en Indaga.net..." - Formato apilado para barras laterales o pie de página:
indaga_search layout="stacked" button_text="Buscar en el archivo"
Con este pequeño plugin vuelvo a tener más control sobre el rendimiento del sitio, asegurándome de que el buscador responda al instante, es seguro y no añade sobrecarga al servidor.
Descargar plugin de mi cuenta de pCloud
PD. Actualizaré la página Control de plugins. En breve…