Cómo agregar un formulario de búsqueda en una publicación de WordPress con un código abreviado

¿Quieres agregar un formulario de búsqueda a una publicación de WordPress?

Agregar un formulario de búsqueda a su publicación o contenido de la página es una buena manera de alentar a sus visitantes a encontrar más contenido y permanecer en su sitio web por más tiempo.

En este artículo, le mostraremos cómo agregar un formulario de búsqueda en sus publicaciones y páginas usando un código abreviado de búsqueda de WordPress.

Cómo agregar un formulario de búsqueda en su publicación con un código abreviado de búsqueda de WordPress

¿Por qué agregar un formulario de búsqueda a sus publicaciones y páginas?

Si un visitante ha disfrutado leyendo una publicación en su blog de WordPress, es probable que quiera leer más. Ofrecer un formulario de búsqueda en la publicación les ayudará a encontrar más de tu contenido que les interese.

Cuando facilita que los usuarios pasen más tiempo en su sitio web, puede aumentar las visitas a la página y reducir la tasa de rebote.

También es más probable que sus visitantes se unan a su lista de correo electrónico, dejen un comentario, realicen una compra y lo sigan en las redes sociales.

En este tutorial, le mostraremos cómo agregar el formulario de búsqueda estándar de WordPress a sus publicaciones. Si desea agregar un formulario de búsqueda personalizado, consulte nuestra guía paso a paso sobre cómo crear un formulario de búsqueda personalizado de WordPress.

Le mostraremos dos métodos para agregar un formulario de búsqueda a sus publicaciones, y el primero es el más simple. Use los enlaces a continuación para saltar al método que le gustaría usar.

Método 1: agregar un formulario de búsqueda con un complemento

La forma más fácil de agregar un formulario de búsqueda a sus publicaciones es usando el BuscarWP enchufar. Es el mejor complemento de búsqueda para WordPress utilizado por más de 30.000 sitios.

Configuración de SearchWP

Lo primero que debe hacer es instalar y activar el complemento. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar el Ajustes » BuscarWP y luego haga clic en la opción de menú ‘Licencia’.

Ingrese la clave de licencia de SearchWP

Luego debe ingresar su clave de licencia en el cuadro Licencia. Puede encontrar esta información en su cuenta en el sitio web de SearchWP. Después de eso, debe hacer clic en el botón Activar.

A continuación, debe hacer clic en la opción de menú Motores. Esto lo lleva a una pantalla donde puede elegir la configuración de su motor de búsqueda.

Configuración de motores SearchWP

Aquí debe crear un motor de búsqueda para todo el sitio. Puede ajustar la configuración de su motor de búsqueda haciendo clic en los menús desplegables Publicaciones, Páginas y Medios.

Los controles deslizantes de Relevancia de atributos en cada sección ajustan cómo los motores de búsqueda valoran y clasifican el contenido. Por ejemplo, si desea valorar el título de la publicación más alto que el contenido, puede ajustar los controles deslizantes en consecuencia.

Ajuste la configuración del control deslizante de SearchWP

Una vez que haya terminado de ajustar la configuración, asegúrese de hacer clic en el botón ‘Guardar motores’ para guardar el motor de búsqueda predeterminado.

Agregar un formulario de búsqueda a una publicación

Ahora necesita descargar la extensión de códigos abreviados de SearchWP para agregar fácilmente su nuevo formulario de búsqueda de publicaciones personalizadas a WordPress.

Tendrás que visitar el Extensión de códigos cortos SearchWP sitio web y luego haga clic en el botón ‘Descargar disponible con licencia activa’.

Descargar la extensión SearchWP Shortcodes

Después de eso, debe instalar y activar la extensión de la misma manera que instaló el complemento anterior. Ahora puedes agregar un formulario de búsqueda en tus publicaciones.

Simplemente edite la publicación y coloque el cursor donde desee agregar el formulario de búsqueda. Después de eso, haga clic en el ícono más ‘Agregar bloque’ para que aparezca el menú de bloques.

Insertar un bloque HTML personalizado

A continuación, escriba ‘html’ en el cuadro de búsqueda. Luego, seleccione el bloque ‘HTML personalizado’.

Una vez que haya agregado el nuevo bloque, puede agregar los siguientes códigos abreviados y HTML a su página. Si necesita más ayuda, consulte nuestra guía sobre cómo agregar un shortcode en WordPress.

[searchwp_search_form]
   
<div class="search-results-wrapper">
 [searchwp_search_results]
  <h2>[searchwp_search_result_link]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
   
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
   
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous"]
 [searchwp_search_results_pagination direction="next" link_text="Next"]
</div>

Este código agregará un formulario de búsqueda a la publicación, creará una sección para mostrar los resultados de la búsqueda, mostrará un mensaje sin resultados si es necesario y agregará paginación si los resultados van en varias páginas.

Asegúrate de hacer clic en Publicar o Actualizar para guardar tu publicación y publicarla.

Haga clic en Publicar o Actualizar para guardar su publicación

Para ver el formulario de búsqueda en acción, simplemente vea la publicación en su sitio web de WordPress. Así es como se ve en nuestro sitio de demostración que ejecuta el tema Twenty Twenty-One.

Vista previa del formulario SearchWP

Para obtener más consejos sobre cómo personalizar su búsqueda, consulte nuestra guía sobre cómo mejorar la búsqueda de WordPress con SearchWP.

Método 2: agregar un formulario de búsqueda usando código

También puede agregar un formulario de búsqueda a sus publicaciones de WordPress mediante el uso de un fragmento de código. Este método no se recomienda para principiantes, por lo que si no está familiarizado con el código, debe usar el Método 1 en su lugar.

En este método tendrás que editar el archivo functions.php de tu tema.

Si no ha editado el archivo functions.php antes, eche un vistazo a nuestra guía para principiantes sobre cómo pegar fragmentos de la web en WordPress.

Todo lo que tiene que hacer es abrir el archivo functions.php de su tema o un complemento específico del sitio y pegar el siguiente código:

add_shortcode('wpbsearch', 'get_search_form');

Así es como se ve en nuestro sitio web de demostración cuando se usa el Editor de temas de WordPress para agregar el fragmento al archivo functions.php del tema Twenty Twenty-One.

Edición de functions.php en el Editor de temas

Después de eso, simplemente agrega el código abreviado [wpbsearch] a la publicación o página donde desea que aparezca el formulario de búsqueda.

Código abreviado del formulario de búsqueda

Esto mostrará el formulario de búsqueda predeterminado. Para ver el formulario de búsqueda, simplemente vea la publicación en su sitio web de WordPress.

Vista previa del formulario de búsqueda

Si desea mostrar un formulario de búsqueda personalizado, debe usar este código en su lugar.

function wpbsearchform( $form ) {
  
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';
  
    return $form;
}
  
add_shortcode('wpbsearch', 'wpbsearchform');

Siéntase libre de modificar el código para personalizar el formulario de búsqueda como desee.

Esperamos que este tutorial lo haya ayudado a aprender cómo agregar una búsqueda en su publicación con un código abreviado de búsqueda de WordPress.

También puede querer aprender cómo crear una dirección de correo electrónico comercial gratuita, o consultar nuestra lista de razones por las que debería usar WordPress para su sitio web.

.

Deja un comentario