Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir un formulario de búsqueda en una entrada de WordPress

Puede sonar poco convencional, pero una de las formas más eficaces que hemos encontrado para aumentar la participación en las entradas de WordPress es añadirles un formulario de búsqueda.

Al principio, nosotros también éramos escépticos: después de todo, ¿no se suele relegar una barra de búsqueda a la cabecera o a la barra lateral? Pero si se consigue que resulte natural y no interrumpa la experiencia de lectura, se puede ayudar a los usuarios a descubrir nuevos contenidos después de haber leído un artículo que les ha gustado.

En este artículo, compartiremos nuestros métodos para añadir un formulario de búsqueda a las entradas de WordPress.

How to Add Search Form in Your Post with a WordPress Search Shortcode

¿Por qué añadir un formulario de búsqueda a tus entradas de WordPress?

Si a los visitantes les gusta una entrada de tu sitio web WordPress, es probable que quieran leer más. Si añades un formulario de búsqueda a una entrada, puedes ayudar a los visitantes a encontrar más blogs que les interese leer.

De este modo, puede aumentar sus páginas vistas y reducir su tasa de rebote.

Cuanto más tiempo permanezcan los visitantes en su sitio web, mayores serán las posibilidades de que se unan a su lista de correo electrónico, dejen un comentario, realicen una compra, le sigan en las redes sociales o lleven a cabo otras acciones positivas.

En esta guía, le mostraremos cómo añadir el formulario de búsqueda estándar de WordPress a sus entradas. Si desea utilizar un formulario personalizado en su lugar, a continuación, consulte nuestra guía paso a paso sobre cómo crear un formulario de búsqueda personalizado de WordPress.

Dicho esto, veamos cómo añadir fácilmente un formulario de búsqueda en una entrada de WordPress. Sólo tiene que utilizar los enlaces rápidos a continuación para saltar directamente al método que desea utilizar:

Método 1. Añadir un formulario de búsqueda en un post de WordPress (funciona con cualquier tema)

La forma más sencilla de añadir un formulario de búsqueda a tus entradas es utilizando el bloque de búsqueda incorporado.

A search bar in a WordPress post

En esta guía, le mostraremos cómo añadir el bloque a una entrada, pero también puede añadirlo a cualquier página o zona de su sitio preparada para widgets.

También te recomendamos que lo añadas al final de la entrada para no interrumpir la experiencia de lectura.

Para empezar, simplemente abra la página en la que desea añadir un formulario de búsqueda. En el editor de contenido de WordPress, haga clic en el icono +.

En el mensaje / ventana emergente, escribe “Buscar”. Cuando aparezca el bloque adecuado, haz clic para añadirlo a la página.

Adding the search block to a WordPress post

Por defecto, el bloque utiliza “Buscar” tanto para su etiqueta como para el texto del botón. Este texto será visible para los visitantes, por lo que es posible que desee sustituirlo por algo más descriptivo.

Por ejemplo, si está añadiendo la barra de búsqueda a un blog de WordPress, puede utilizar “Buscar entradas recientes del blog” o similar.

Changing the search bar heading

Incluso puede utilizar la etiqueta y el texto del botón para motivar a sus visitantes.

Por ejemplo, si ha creado una tienda en línea, podría utilizar algo como “Buscar más ofertas” o “Buscar ofertas similares” para su formulario de búsqueda de productos.

También puede añadir un marcador de posición. Este texto desaparecerá automáticamente cuando el visitante empiece a escribir.

Para añadir un marcador de posición, basta con hacer clic en “Marcador de posición opcional…” y empezar a escribir.

Adding a placeholder to the WordPress search bar

Por defecto, WordPress utilizará su tema para dar estilo a la barra de búsqueda.

Sin embargo, puede cambiar el fondo y el color del texto del botón mediante los ajustes de “Color” del menú de la derecha. Esto puede ayudar a que su barra de búsqueda destaque del resto de su sitio.

Customizing the WordPress search button in a post

Cuando esté satisfecho con el aspecto del bloque de búsqueda, puede publicar o actualizar la entrada. Si visitas tu sitio, verás la barra de búsqueda dentro del contenido de la entrada.

Puede añadir un formulario de búsqueda a más entradas y páginas de WordPress siguiendo el mismo proceso anterior. Para obtener instrucciones detalladas sobre cómo añadir la barra de búsqueda a una barra lateral o sección similar, consulte nuestra guía sobre cómo añadir y utilizar widgets en WordPress.

Método 2. Añadir un formulario de búsqueda a todas las entradas de WordPress(temas basados en bloques)

Si utiliza un tema basado en bloques como ThemeIsle Hestia Pro, puede añadir una barra de búsqueda a la plantilla que WordPress utiliza para todas las entradas de su blog.

De este modo, podrá añadir rápida y fácilmente una barra de búsqueda a cada una de las entradas de su blog en todo su sitio web WordPress.

Para abrir el editor del sitio completo, vaya a Temas “ Editor en el escritorio de WordPress.

Opening the WordPress full-site editor (FSE)

Por defecto, el editor de sitio completo muestra la plantilla de inicio de su tema.

Para ver todas las opciones disponibles, seleccione “Plantillas” en el menú de la izquierda.

Adding a search form to a WordPress blog using the FSE

Muestra una lista de todas las plantillas que componen su tema de WordPress.

Para personalizar la plantilla del blog, siga adelante y haga clic en “Único”.

Adding a search form to a WordPress blog using the full-site editor

WordPress mostrará ahora una vista previa de la estructura / disposición / diseño / plantilla del blog.

Para editar esta plantilla, haga clic en el icono del lápiz pequeño.

Adding a search form to a WordPress blog using the full-site editor

Ahora verá esta plantilla en el editor de sitio completo.

Para añadir una barra de búsqueda, haz clic en el icono azul “+”.

Adding a search bar to a WordPress blog template

En el mensaje / ventana emergente que aparece, escriba “Buscar” para encontrar el bloque adecuado.

Ahora puede arrastrar el bloque hasta el lugar donde desee mostrar la barra de búsqueda.

Adding a search block using the WordPress full-site editor

Para personalizar el título del bloque o el texto del marcador de posición, basta con escribir el nuevo mensaje en el bloque de búsqueda.

Cuando estés satisfecho con el aspecto del bloque, haz clic en “Guardar” para activar la barra de búsqueda.

Customizing the search bar using the full-site editor (FSE)

Ahora, si visita cualquier entrada de blog de su sitio, verá la barra de búsqueda.

Método 3. Añadir una barra de búsqueda a todos los mensajes de WordPress con el código (Funciona con cualquier tema)

Si no utilizas un tema de bloques pero quieres que la barra de búsqueda aparezca en todas tus entradas, tendrás que utilizar un código.

Para ello, le recomendamos que utilice WPCode. Este plugin de fragmentos de código hace que sea seguro y fácil insertar código personalizado en los archivos de tu tema sin editarlos directamente. De esta forma, puedes añadir varios fragmentos de código sin romper tu sitio web.

Lo que quieres hacer es instalar el plugin WPCode en WordPress. Puedes leer nuestra guía paso a paso sobre cómo instalar un plugin de WordPress para obtener más información.

A continuación, vaya a Fragmentos de código “ + Añadir fragmento. Seleccione “Añadir su código personalizado (nuevo fragmento)” y haga clic en el botón “Usar fragmento”.

Add a new custom code snippet in WPCode

Ahora, dale un nombre a tu nuevo código personalizado. Puede ser algo sencillo como ‘Barra de búsqueda en entradas de blog’.

Después, cambie el Tipo de Código a ‘PHP Snippet’.

Adding a search bar to blog posts with WPCode

A continuación, en el cuadro Vista previa del código, copie y pegue el siguiente fragmento de código:

// Define the button text and placeholder text. You can customize these values as needed.
$button_text = 'Search'; // The text displayed on the search button
$placeholder_text = 'What are you looking for?'; // The placeholder text in the search input field

// Construct the search form HTML using the defined button text and placeholder text.
$search_form = '<form role="search" method="get" action="' . esc_url(home_url('/')) . '" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search">
                    <label class="wp-block-search__label" for="wp-block-search__input-2">' . esc_html($button_text) . '</label>
                    <div class="wp-block-search__inside-wrapper ">
                        <input class="wp-block-search__input" id="wp-block-search__input-2" placeholder="' . esc_attr($placeholder_text) . '" value="" type="search" name="s" required="">
                        <button aria-label="' . esc_attr($button_text) . '" class="wp-block-search__button wp-element-button" type="submit">' . esc_html($button_text) . '</button>
                    </div>
                </form>';

// Output the search form HTML.
echo $search_form;

Este código añadirá una barra de búsqueda básica similar al bloque de búsqueda. Puede personalizar el botón y el texto del marcador de posición según sea necesario.

Una vez hecho esto, desplácese hacia abajo y asegúrese de que la opción “Insertar automáticamente” está seleccionada como método de inserción.

Para la ubicación, vaya a la pestaña “Página específica” y elija la que mejor se adapte a sus criterios. A modo de ejemplo, hemos elegido “Insertar después del contenido”.

Choosing Insert After Content in WPCode

Cuando hayas terminado, haz que el código sea ‘Activo’ y haz clic en ‘Guardar fragmento’.

Ahora debería ver algo como esto:

Example of a search bar added with WPCode

El bloque de búsqueda utiliza la característica de búsqueda incorporada en WordPress. Sin embargo, esta es bastante limitada y no es muy buena a la hora de mostrar resultados precisos.

En algunos casos, es posible que desee que la función de búsqueda de WordPress sea más avanzada. Quizá quieras añadir una función de búsqueda por categorías o hacer que se puedan buscar los comentarios de las entradas de tu blog.

Ahí es donde entra SearchWP. Este plugin de búsqueda personalizada le da un control completo sobre la búsqueda del sitio de WordPress para que pueda ofrecer resultados más precisos a sus visitantes.

SearchWP también permite realizar búsquedas en todas las partes de su sitio, incluidos archivos PDF, archivos ACF, archivos de texto, campos personalizados de WordPress y mucho más.

Después de crear un formulario de búsqueda personalizado, puede añadirlo a cualquier parte de su sitio web mediante un bloque o shortcode.

Adding an advanced search form to a website or blog

Para obtener más información, consulte nuestra guía sobre cómo mejorar la búsqueda en WordPress con SearchWP.

Esperamos que este tutorial te haya ayudado a aprender cómo añadir un formulario de búsqueda en una entrada de WordPress. También puedes aprender a crear un formulario de contacto en WordPress o echar un vistazo a nuestra selección de los mejores plugins de lógica condicional para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

34 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Hasse Dahlriksson

    But what happends after update of theme?

    • WPBeginner Support

      If you created a site-specific plugin then the changes will remain

      Administrador

  3. Holly

    Thank you, but I’m seeing only {wpbsearch] on the page I want the search form to be. I’m not sure if I’m placing the add_shortcode(‘wpbsearch’, ‘get_search_form’); code in the correct place in the theme functions.php file. I placed the following code in a perceived function location: between /** and * is_it woocommerce_page- Returns true if on a page which uses WooCommerce…) in the actual page I want to search, as I want it to be a page-only search, (and is this the correct code to do that?)

    The Page Code:
    function wpbsearchform( $form ) {

    $form = ‘

    ‘ .
    _(‘Search Timeline For:’) . ‘

    ‘;

    return $form;
    }

    add_shortcode(‘wpbsearch’, ‘wpbsearchform’);

  4. Sonji

    thank you so much for this. It was so easy. I have been searching for how to do this for months but was looking in the wrong places.

  5. Ryan

    I want to add a general google search bar -not custom search just a general google search box so users will not have to leave the page to conduct a google search.

  6. Yao Daniel

    Hi there!
    You guys are really the best (y)
    Great post once again.
    I’ve been able to add the search form with visual composer as well. So, maybe someone will give it a try :)

    Finaly, I’m trying to add a search form in a slideshow like this site:

    I’ll be more than glad if someone here do have a trick for this.

    Thanks again and stay blessed

  7. Carissa

    Just what I was looking for, thank you! What would an example be of CSS if we wanted to change the colors and text of the search bar? (i.e. what would we add to CSS to change the colors/text/etc.)?

  8. Luke MEL

    Wow! That was the easiest add a search box reply – ever!!!!!

  9. Robin

    Awesome! Had to use this on my webpage:

    It was super easy to implement and looks awesome :)

  10. Jarod Thornton

    This was stupid easy to implement. I wrote it as a plugin so I can use on MultiSite :) Thank you for the write-up.

  11. sakthidasan

    Hello,

    Is it possible to make this search form to search only a particular category?

    Example. I have 5 Categories – Cat 1, Cat 2, Cat 3, Cat 4 and Cat 5.

    I want the search from only on page 4 and the search form should search only from Cat 3?

    Thanks
    Sakthi

  12. daniela

    Hi,
    really love your tutorials!

    Is it possible to define the search for comments within each post I put the shortcode? So that it’s not a global search, but a search of the comments just of the post I’m searching at via the shortcode. Would be amazing for helping me out, don’t find anything.

    Thanks!!

  13. sandeep kumar dan

    Hi, I have just used this script on my theme. Thanks for the help. And its working. But i have one problem, I want to edit the title of that search form how to do. Please help me out.

    Thanks
    Sandeep Kumar Dan

  14. Carol Dunlop

    Awesome tip! Thanks for posting, it is just what I was looking for. I wanted something simple so that people can search through exercise videos and this fit the bill.

  15. Greg Maldewin

    Great article! I created a short code and then tweaked the CSS to position and size it the way I wanted.

    add_shortcode(‘prodSearch’, function($atts) {
    global $woocommerce;

    echo ”;
    get_product_search_form();
    echo ”;

    });

    • Nick Lewis

      Greg… what was your custom form code for your woocommerce search form you mention here?

      I am trying to get two search boxes into a top navigation one for standard wordpress site search the other for woocommerce products..

    • Justin Young

      Hi Greg!
      Thank you for this tip!.. Do you know how to change the search box text and css for this shortcode??
      Any help would be greatly appreciated..
      -Justin

  16. Arc

    Just used it in my WP site. Was able to add search box anywhere I like.

    Thank you! This one’s simpler and easy to use compared to the plugins out there.

  17. Brian

    Great fix for what I need. However, is there any way to make the search box shorter?

    Thanks,
    Brian

      • Jerome Van Gils

        I also want to max the search box shorter. What exactly should I edit in the CSS file?

  18. David Schmeikal

    Great little tutorial. I tried to embed this shortcode within a column shortcode, but it just appears at the top of the page, instead of within the column. Is there something I need to add?

    • Editorial Staff

      Probably has a conflict with the columns shortcode styling and the search shortcode formatting.

      Administrador

  19. Ionut Alexandru

    i read your site everytime when you put something new. I want to know if is posible to put search form for my site..like google search..Now i used search default from wordpress but i dont like very good the results and i want to know if is posible to put “google search” just for my content. i hope you understand, i try to write correct english but i’m not so good. i wait your answer if is posible. i appreciate your site and your work.

  20. Keith Davis

    Thanks for the tut.
    Always learn something when I come over.
    Appreciate you taking the time.

  21. Geoffrey

    Hi,

    Thank you for the tip .
    Don’t forget to use different IDs to avoid duplication of FOR and ID’s values.
    Here you use exactly the same as default WordPress’ search form.

    Thank you,
    Regards,
    G.

    • Editorial Staff

      Good tip. Yeah, we just copied the code from the core for the sake of demonstration.

      Administrador

  22. Eugenio

    Useful technique, thanks for sharing :)

  23. Gretchen Louise

    Thank you so much! Really appreciate the way you guys answer our questions.

    And this code worked like a charm!

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.