Cómo crear un shortcode para el formulario de búsqueda en WordPress

febrero 04, 2023

Hola, amigos de Piensa para Crear. 👋

¿Alguna vez has querido insertar el formulario de búsqueda de WordPress en un lugar específico de tu sitio —una página, una entrada, un widget— y no sabías cómo?

WordPress tiene una función nativa llamada get_search_form() que genera el formulario de búsqueda. El problema es que no puedes llamarla directamente desde el editor. Necesitas un shortcode.

En este tutorial te explico cómo crear tu propio shortcode para el buscador usando el archivo functions.php de tu tema. Es un proceso de 3 minutos que te dará mucha flexibilidad.

🧠 ¿Qué es un shortcode y por qué te conviene?

Un shortcode es una pequeña etiqueta entre corchetes ([asi]) que WordPress interpreta y reemplaza por contenido dinámico. Es como un "atajo" que puedes pegar en cualquier entrada, página o widget.

Ventajas de crear un shortcode para el buscador:

  • Flexibilidad: Puedes colocar el buscador donde quieras, no solo donde el tema lo permite.

  • Reutilizable: Lo usas en todas las páginas que necesites con la misma etiqueta.

  • Sin plugins: No necesitas instalar nada extra.

  • Compatible: Funciona con cualquier tema de WordPress.

🛠️ Paso 1: Accede al editor de temas

Ve a tu panel de WordPress y navega a:

Apariencia → Editor de archivos del tema

⚠️ Advertencia importante: Si editas el functions.php del tema padre y luego actualizas el tema, perderás los cambios. Lo ideal es:

  1. Usar un tema hijo (child theme).

  2. O usar un plugin como Code Snippets para no tocar archivos.

Si no tienes tema hijo ni quieres usar Code Snippets, puedes editar el functions.php del tema padre, pero haz un backup antes.

📝 Paso 2: Añade el código del shortcode

En el editor, selecciona el archivo functions.php de tu tema (o del tema hijo).

Desplázate hasta el final del archivo y añade este fragmento:

php
add_shortcode( 'shortcodename', 'get_search_form');

🔍 ¿Qué hace este código?

  • add_shortcode() es la función de WordPress que registra un nuevo shortcode.

  • 'shortcodename' es el nombre que le das al shortcode. Debe ser único, en minúsculas, sin espacios, sin números y sin símbolos.

  • 'get_search_form' es la función nativa de WordPress que genera el formulario de búsqueda.

✏️ Personaliza el nombre

Cambia 'shortcodename' por el nombre que tú quieras. Por ejemplo:

php
add_shortcode( 'buscador', 'get_search_form');

Con esto, el shortcode será [buscador] en lugar de [shortcodename].

Reglas para el nombre:

  • ✅ Todo en minúsculas

  • ✅ Sin espacios (usa guiones si quieres: mi-buscador)

  • ✅ Sin números ni símbolos

  • ✅ Único (no debe existir otro shortcode con el mismo nombre)

💡 Ejemplos válidos

php
add_shortcode( 'buscador', 'get_search_form');
add_shortcode( 'search', 'get_search_form');
add_shortcode( 'mi-buscador', 'get_search_form');

❌ Ejemplos inválidos

php
add_shortcode( 'MiBuscador', 'get_search_form');    // Tiene mayúsculas
add_shortcode( 'mi buscador', 'get_search_form');   // Tiene espacio
add_shortcode( 'buscador1', 'get_search_form');     // Tiene número
add_shortcode( 'busca@dor', 'get_search_form');     // Tiene símbolo

✅ Paso 3: Guarda y verifica

  1. Haz clic en "Actualizar archivo" (o "Guardar").

  2. Si todo está bien, verás un mensaje de confirmación.

⚠️ Si ves un error de sintaxis: WordPress te mostrará un mensaje y no guardará los cambios. Revisa que hayas copiado el código exactamente como está.

🧩 Paso 4: Usa el shortcode donde quieras

Ahora que el shortcode está registrado, puedes usarlo en:

En una entrada o página

En el editor de bloques o clásico, escribe el shortcode entre corchetes:

text
[buscador]

Importante: Debes escribirlo como texto normal, no dentro de un bloque de código.

En un widget

  1. Ve a Apariencia → Widgets.

  2. Añade un bloque "Shortcode" o un bloque "Texto".

  3. Escribe [buscador].

  4. Guarda.

En una plantilla PHP (código)

Si quieres insertar el shortcode directamente en un archivo PHP de tu tema (por ejemplo, header.php), usa:

php
<?php echo do_shortcode( '[buscador]' ); ?>

¿Por qué do_shortcode()? Porque PHP no interpreta los shortcodes automáticamente. Necesitas esta función para que WordPress procese el shortcode y genere el HTML del formulario.

Ejemplo completo en un archivo PHP:

php
<div class="mi-buscador-personalizado">
    <?php echo do_shortcode( '[buscador]' ); ?>
</div>

👀 Paso 5: Verifica que funcione

En el editor no verás el formulario. Solo verás el texto [buscador]. Eso es normal.

Para ver el resultado:

  1. Vista previa: Haz clic en "Vista previa" en el editor.

  2. Publica y visita la página: Abre la URL en tu navegador.

Deberías ver el formulario de búsqueda de WordPress donde pusiste el shortcode.

Si no aparece nada:

  • Verifica que el shortcode esté escrito correctamente.

  • Revisa que hayas guardado el functions.php.

  • Comprueba que tu tema no esté sobrescribiendo get_search_form() con una versión personalizada.

🎨 Personalización avanzada

Cambiar el texto del botón

Si el formulario de tu tema muestra "Buscar" y quieres cambiarlo, puedes modificar la función get_search_form() con un filtro:

php
add_filter( 'get_search_form', 'mi_buscador_personalizado' );
function mi_buscador_personalizado( $form ) {
    $form = str_replace( 'value="Buscar"', 'value="Ir"', $form );
    return $form;
}

Añadir un placeholder

php
add_filter( 'get_search_form', 'mi_buscador_placeholder' );
function mi_buscador_placeholder( $form ) {
    $form = str_replace( 'placeholder="Buscar..."', 'placeholder="¿Qué estás buscando?"', $form );
    return $form;
}

Nota: El placeholder exacto depende de cómo tu tema genere el formulario. Inspecciona el HTML para encontrar el texto exacto.

⚠️ Errores comunes

1. "El shortcode no hace nada"

Causa: El shortcode no está registrado correctamente o el nombre no coincide.
Solución: Verifica que el nombre en add_shortcode() sea exactamente el mismo que usas entre corchetes.

2. "Aparece el texto [buscador] literal"

Causa: Estás usando el shortcode en un bloque de código o en un campo que no procesa shortcodes.
Solución: Asegúrate de escribirlo como texto normal en el editor.

3. "Error de sintaxis en functions.php"

Causa: Falta un ; al final, o hay un paréntesis mal cerrado.
Solución: Revisa el código. Debe ser exactamente:

php
add_shortcode( 'buscador', 'get_search_form');

4. "El formulario se ve feo"

Causa: El formulario hereda los estilos de tu tema, que puede no tener estilos específicos para él.
Solución: Añade CSS personalizado para darle forma.

🎯 Conclusión: un shortcode, mil posibilidades

Crear un shortcode para el formulario de búsqueda es una de esas pequeñas personalizaciones que te dan mucho control sobre tu sitio sin necesidad de plugins.

Resumen del proceso:

  1. Ve a Apariencia → Editor de archivos del tema.

  2. Abre functions.php.

  3. Añade: add_shortcode( 'buscador', 'get_search_form');

  4. Guarda.

  5. Usa [buscador] donde quieras.

  6. En PHP, usa <?php echo do_shortcode( '[buscador]' ); ?>.

Con esto, tu buscador estará disponible en cualquier parte de tu sitio.

💬 ¿Necesitas ayuda para personalizar tu WordPress o crear shortcodes personalizados?
En Piensa para Crear ofrecemos servicios de desarrollo, personalización de temas y optimización de WordPress.
Contáctanos aquí y hablemos.

❓ Preguntas frecuentes

¿Necesito un tema hijo para esto?
No es obligatorio, pero muy recomendado. Si editas el functions.php del tema padre, perderás los cambios al actualizar el tema.

¿Puedo usar cualquier nombre para el shortcode?
Sí, siempre que sea único, en minúsculas, sin espacios, números ni símbolos.

¿Dónde veo el resultado del shortcode?
En el editor solo verás el texto [buscador]. Para ver el formulario, usa la vista previa o publica la página.

¿Puedo tener varios shortcodes para el buscador?
Sí, pero no tiene mucho sentido. Con uno es suficiente.

¿Qué pasa si mi tema ya tiene un shortcode para el buscador?
Si usas el mismo nombre, entrarán en conflicto. Usa un nombre único como [buscador-ppc].

¿El shortcode funciona en widgets?
Sí. Añade un bloque de shortcode o texto en el widget y escribe [buscador].

¿Cómo hago para que el buscador tenga un diseño específico?
Añade CSS personalizado en Apariencia → Personalizar → CSS adicional.

Comentarios

Publicar un comentario

← Anterior Siguiente →