En este tutorial de SYSPA SOCIAL Aprenderemos como insertar un botón o lupa para buscar información dentro de tu pagina web wordpress.

Me lo pidieron muchos así que aquí esta, veremos como insertar el botón buscar en el menú, sin utilizar plugins y luego veremos como hacerlo utilizándolo.

Que contenido podrás buscar?, el que quieras!, esta es una herramienta muy potente por lo cual recomiendo muchísimo que la sumen a su sitio, porque le dará su visitante una mejor experiencia.

Es fácil, es rápido, no te podes perder este impresionante tutorial!.

Principales puntos de este tutorial, boton o lupa buscar en tu pagina web wordpress.

• Explicamos que son los snippets.
• Vemos como crear la primer opción de buscar utilizando código.
• Creamos la segunda versión, sin plugins y con formato personalizado.
• Instalamos el plugin que utilizaremos.
• Mostramos las distintas configuraciones del plugin.
• Probamos todo lo realizado.

Código utilizado en el tutorial

Buscador utilizando la herramienta propia del tema wordpress

add_filter( 'wp_nav_menu_items', 'syspa_item_search', 10, 2);

function syspa_item_search( $items, $args ) {

 if ($args->theme_location == 'primary') {

  $items .= '<li class="menu-item">'.get_search_form( false ).'</li>';

 }

 return $items;
}

Hacemos el buscador utilizando código personalizado

add_filter( 'wp_nav_menu_items', 'syspa_item_search', 10, 2);

function syspa_item_search( $items, $args ) {

 if ($args->theme_location == 'primary') {
 
  $items .= '<li class="menu-item item-search">'
    . '<form role="search" method="get" class="search-form" action="'.home_url( '/' ).'">'
    . '<label>'
    . '<span class="screen-reader-text">' . _x( 'Buscar:', 'label' ) . '</span>'
    . '<input type="search" class="search-field" placeholder="' . esc_attr_x( 'Buscar …', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />'
    . '</label>'
    . '<input type="submit" class="search-submit" value="" />'
    . '</form>'
    . '</li>';

 }

 return $items;
}

Código CSS para darle formato al buscador

add_action( 'wp_head', function () { ?>
<style>

 .menu-item .search-form input{
 width: 80%;
 padding: 0;
 height: 32px;
 padding: 8px;
 border-radius: 6px;
}

.menu-item .search-form input::-moz-placeholder {
  color: #ccc;
  font-weight: normal;
}

.item-search{
 float: right;
 margin-top: 0px;
}

.menu-item .search-form input[type="submit"]{
 width: 20px;
 height: 20px;
 padding: 0;
 margin:0;
 margin-left: 10px;
 background-color: transparent;
 background-repeat: no-repeat;
 background-size: 20px;
 background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Feedbin-Icon-home-search.svg/36px-Feedbin-Icon-home-search.svg.png);
}


</style>
<?php } );

Videos Relacionados con botón o lupa buscar en wordpress

🖐️ snippets, que son y como usarlos correctamente, wordpress 113, tutorial español

🖐️ WordPress #35: mejor hosting, analizamos completo, SLL y DOMINIO GRATIS- tutorial español

Analizamos paso a paso, todos los detalles del hostin sered, que nos brindara un 10% de descuento, ssl y domninio gratis.

Descargas

NO SE REQUIEREN.

Desde ya agradezco a quienes deseen apoyarme:

DONA para apoyar al crecimiento de la comunidad.

SUSCRIBIRSE al canal de youtube.