Continuamos con el tutorial número ocho para personalizar el tema Zerif Lite, de ThemeIsle.
Depende del tipo de contenidos que se ofrezcan en el sitio, puede ser bastante útil incluir un pequeño formulario de búsqueda en la parte superior de todas las páginas: siempre a mano y siempre visible, ya que el menú de Zerif Lite queda fijo en la pantalla en todo momento. Con este breve código, estaremos en condiciones de incluir ese campo de búsqueda en pocos pasos.
Como recomendamos cada vez que necesitamos modificar los archivos del tema, debemos asegurarnos de que estamos usando un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.
En el archivo functions.php del tema hijo, entonces, añada el siguiente código (antes del cierre de la etiqueta php, si lo hubiere):
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
if( $args->theme_location == 'primary' )
return $items.'<li class="widget widget_search">' . get_search_form( false ) . '</li>';
return $items;
}El resultado será el siguiente:
Vemos que el campo ha quedado un poco desalineado respecto del resto de los elementos del menú. Esto es porque está tomando los estilos del widget de la barra lateral.
Para corregir esto, simplemente tendremos que añadir el siguiente código CSS (en el archivo custom.css o en el recuadro CSS adicional del Personalizador):
#site-navigation .widget_search .search-submit {
top: -6px;
right: -8px;
}
#site-navigation .widget_search input {
padding: 6px 15% 6px 2%;
}De esta manera, tendremos el campo de búsqueda integrado perfectamente en el menú:
Mientras que en los teléfonos móviles aparecerá dentro del menú desplegable:
Tutorial original en inglés: How to add a search bar in the top menu in Zerif
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola Ana! antes que nada gracias por todos tus consejos! ¿Cómo podría incorporar una nueva barra para un nuevo menú en la parte superior de la web, al estilo barra login/out de otras web, pero teniendo la opción de alojar el menú que nosotros queramos?
Gracias!!!
Hola, Daniel.
No es algo sencillo. Necesitás crear un tema hijo, registrar una nueva ubicación de menú y modificar el archivo
header.phppara incluirlo (además de ajustar estilos CSS).Saludos.
Hola, muchisimas gracias por tu esfuerzo y dedicación, excelentes tutoriales.
Quisiera que por favor me digas si es posible hacer lo siguiente y si me puedes decir cómo:
1. Poner, en la posición del subtítulo en la sección del título grande (entre el título grande y los botones de colores) el buscador. Y que el buscador tenga el ancho del área de los dos botones.
2. En la parte superior, arriba de donde pusiste el número de teléfono, agregar una franja de unos 60px del ancho completo de la pantalla, con un carrusel de imágenes pequeñas.
Gracias por tu ayuda.
Hola, Nadiuska.
Para lo primero, usá el código que te pasé en el comentario anterior. Y para controlar la posición/estilo usá CSS:
.home-header-wrap .widget_search { width: 400px; margin: -40px auto 0px; list-style-type: none; }Modificá los valores en píxeles por los que se adapten a lo que estás necesitando.
En cuanto a lo segundo, como ser posible, es posible, pero el nivel de edición va más allá de la ayuda que te pueda dar por este medio.
Saludos.
Muchisimas Gracias. Eres súper.
Ola ! Tiene como exibir los resultados como la pagina de template-blog-large.php
Hola, Fabricio.
Tendrás que crear dos archivos en la carpeta del tema hijo:
search.phpycontent-large.php.En
search.phppegá el siguiente código:En el archivo
content-large.phppegá el siguiente código:<article class="large-container" id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemtype="http://schema.org/BlogPosting" itemtype="http://schema.org/BlogPosting"> <?php if ( has_post_thumbnail() ) : ?> <div class="post-img-wrap-large"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" > <?php $image_id = get_post_thumbnail_id(); $image_url_big = wp_get_attachment_image_url( $image_id,'zerif-post-thumbnail-large', true ); $image_url_tablet = wp_get_attachment_image_url( $image_id,'zerif-post-thumbnail-large-table', true ); $image_url_mobile = wp_get_attachment_image_url( $image_id,'zerif-post-thumbnail-large-mobile', true ); ?> <picture> <source media="(max-width: 600px)" srcset="<?php echo esc_url( $image_url_mobile ); ?>"> <source media="(max-width: 768px)" srcset="<?php echo esc_url( $image_url_tablet ); ?>"> <img src="<?php echo esc_url( $image_url_big ); ?>" alt="<?php the_title_attribute(); ?>"> </picture> </a> </div> <div class="listpost-content-wrap-large"> <?php else : ?> <div class="listpost-content-wrap-full"> <?php endif; ?> <div class="list-post-top"> <header class="entry-header"> <h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1> </header><!-- .entry-header --> <div class="entry-content"> <?php if ( ! empty( $post->post_content ) ) { $ismore = strpos( $post->post_content, '<!--more-->' ); } if ( $ismore ) { the_content( sprintf( esc_html__( '[…]','zerif-lite' ), '<span class="screen-reader-text">' . esc_html__( 'about ', 'zerif-lite' ) . get_the_title() . '</span>' ) ); } else { the_excerpt(); } wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'zerif-lite' ), 'after' => '</div>', ) ); ?> </div><!-- .entry-content --> </div><!-- .list-post-top --> <footer class="entry-footer-large"> <?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta-large"> <?php zerif_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?> <div class="entry-footer-large-left"> <?php if ( 'post' == get_post_type() ) : /* Hide category and tag text for pages on Search */ ?> <?php /* translators: used between list items, there is a space after the comma */ $categories_list = get_the_category_list( __( ', ', 'zerif-lite' ) ); if ( $categories_list && zerif_categorized_blog() ) : ?> <span class="cat-links"> <?php /* translators: Categories list */ printf( __( 'Posted in %1$s', 'zerif-lite' ), $categories_list ); ?> </span> <?php endif; ?> <?php /* translators: used between list items, there is a space after the comma */ $tags_list = get_the_tag_list( '', __( ', ', 'zerif-lite' ) ); if ( $tags_list ) : ?> <span class="tags-links"> <?php /* translators: Tags list */ printf( __( 'Tagged %1$s', 'zerif-lite' ), $tags_list ); ?> </span> <?php endif; /* End if $tags_list */ ?> <?php endif; /* End if 'post' == get_post_type() */ ?> <?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?> <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'zerif-lite' ), __( '1 Comment', 'zerif-lite' ), __( '% Comments', 'zerif-lite' ) ); ?></span> <?php endif; ?> <?php edit_post_link( __( 'Edit', 'zerif-lite' ), '<span class="edit-link">', '</span>' ); ?> </div> </footer><!-- .entry-footer --> </div><!-- .listpost-content-wrap --> </article><!-- #post-## -->Saludos.
Hola pero que no funcionar
Con códigos aqui de la resposta retorna esse erro
Fatal error: Call to undefined function zerif_after_header_trigger() in /home/site/www/site/wp-content/themes/zerif-lite/search.php on line 7
Mi códigos originales
<?php printf( __( 'Search Results for: %s', 'zerif-lite' ), '’ . get_search_query() . ” ); ?>
Mi
‘post’, ‘posts_per_page’ => 1000, ‘paged’ => ( get_query_var(‘paged’) ? get_query_var(‘paged’) : 1 ) ) );
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( ‘content-large’ );
endwhile;
zerif_paging_nav();
else :
get_template_part( ‘content’, ‘none’ );
endif;
wp_reset_postdata();
?>
Hola, Fabricio.
El error es porque estás usando una versión desactualizada de Zerif (tampoco estás usando un tema hijo, lo cual es un error). El código que te pasé funciona en las últimas versiones, mínimo a partir de 1.8.5.17.
Saludos.
Mi originale código
<article class="large-container" id="post-” itemtype=”http://schema.org/BlogPosting” itemtype=”http://schema.org/BlogPosting”>
<a href="” title=”” >
<source media="(max-width: 600px)" srcset="”>
<source media="(max-width: 768px)" srcset="”>
<img src="” alt=””>
<a href="” rel=”bookmark”>
post_content, ‘‘);
if($ismore) {
the_content( sprintf( esc_html__(‘[…]’,’zerif-lite’), ”.esc_html__(‘about ‘, ‘zerif-lite’).get_the_title().” ) );
} else {
the_excerpt();
}
wp_link_pages( array(
‘before’ => ” . __( ‘Pages:’, ‘zerif-lite’ ),
‘after’ => ”,
) );
?>
<?php edit_post_link( __( 'Edit', 'zerif-lite' ), '’, ” ); ?>
Hola, te agradezco mucho tus tutoriales me han sido de mucha ayuda, tengo una inquietud al ingresar el codigo de la barra de busqueda no me aprecio en la parte derecha del menu sino que me aparece en la parte de abajo ocupandome todo el espacio del menu a que podria deberse este error, agradezco tu ayuda
Hola, Alexander.
Este procedimiento solo te va a servir para el menú predeterminado de Zerif, no si usás el plugin de mega menús.
Saludos.
Hola soy nuevo en wordpress y me estas salvando con tus tutoriales te lo agradesco mucho. Una pregunta en ves de poner el buscar podría poner otra cosa como por ejemplo botones de redes sociales? Yo uso el plugin Simple Social Icons los tengo a pie de pagina pero me gustaría ponerlos arriba del todo. Saludos
Hola, Augusto.
Gracias por tu comentario.
Podés agregar iconos como elementos del menú, fijate en esta respuesta.
Saludos.
Buenos días,
Muchas gracias por el tutorial, me funcionó, pero tengo una duda. NO quiero que el buscador salga en el footer (pie de página). Quiero que sólo salga en el menú arriba. Como hago?
Espero una respuesta. Muchas gracias.
Hola, Adrián.
El código es para agregar el buscador en el menú. Si ves un buscador en el pie de página debe ser porque tenés agregado el widget Buscar en alguna de las tres áreas correspondientes. Simplemente eliminalo.
Saludos.
Hola! Como siempre, gracias por tus tutoriales, son geniales. ¿Es posible agregar la barra de búsqueda sólo en la tienda y que no aparezca en las demás páginas?
Gracias!
Hola, Verónica.
No es posible mediante la función, ya que afecta al menú a nivel global. Lo que podrías hacer es ocultarla mediante CSS en las páginas que no pertenezcan a WooCommerce. El código sería el siguiente:
#site-navigation .widget_search { display: none !important; } .woocommerce #site-navigation .widget_search, .woocommerce-page #site-navigation .widget_search { display: initial !important; }Saludos.
Hola, creé un tema hijo y pude agregar el buscador, alinearlo, todo perfecto pero sólo en la página principal. Mi problema es que al intentar entrar por ejemplo en elpa.com.uy/tienda o /noticias, me muestra una página en blanco, podrías ayudarme? Actualmente el tema hijo está desactivado para que mi web funcione correctamente. Gracias.
Hola, Verónica.
Revisá que no haya errores en el código. Si está correcto no deberías tener problemas.
Saludos.
Gracias por tu respuesta, es normal que luego de activar un tema hijo pase eso de que no me anden las páginas /tienda y /noticias? El código lo copié y pegué tal cual sin cambiarle nada. Saludos
No, no es normal si el código está correcto.
Probá en todo caso volviendo a guardar la estructura de enlaces permanentes.
Si no, fijate si tu servidor guarda algún registro de errores para ver qué mensaje muestra (en cPanel hay una opción Errores dentro del grupo Métrica, y además guarda un archivo
error_logdentro de la carpeta/public_html/).Ahora dejé el sitio con el tema hijo activado para que puedas verlo en más detalle. Sólo agregué los archivos functions.php y style.css
Si intentas acceder a elpa.com.uy/noticias la página se muestra vacía, sin embargo tenía mucho contenido. Si desactivo el tema hijo todo vuelve a la normalidad. Agradezco mucho tu ayuda de antemano. Saludos
Hola, Verónica.
No veo que haya nada mal, salvo que estás incluyendo la hoja de estilos
custom.cssenfunctions.php, pero no la has creado en el directorio. De todas maneras, esto no debería influir. Tendrías que probar actualizando Zerif Lite, y por las dudas desactivando plugins.Saludos.
Acabo de hacerlo pero no se soluciona. Tendré que modificar el tema padre entonces porque con tema hijo activo mi web no funciona como debería 🙁
Gracias por tus aportes. Saludos.
Hola, realmente lo pude hacer y todo me resulto perfecto, te lo agradezco mucho pero mucho!!! solo quiero preguntarte si cabe la posibilidad de que el buscador que puse, al poner el nombre del producto no salga escrito como párrafo y me muestre los productos como en miniatura, no se si me entiendes, de ante mano y si me puedes ayudar te lo agradecería un montón, saludos desde Chile
Hola, Gustavo.
Para la búsqueda de productos tendrías que usar el formulario de WooCommerce. Es decir, en lugar de
get_search_form( false )uságet_product_search_form( false ). Luego, en la hoja de estilos del tema hijo pegá lo siguiente:.woocommerce-product-search input[type="submit"] { display: block; width: 46px; height: 46px; position: absolute; top: 0; right: 0; padding: 0; margin: 0; background: url(images/search_icon.png) no-repeat center center; text-indent: -9999999px; }Y no olvides copiar el archivo
search_icon.pngde la carpeta/themes/zerif-lite/images/a una equivalente en el tema hijo.Saludos.
Hola, vengo leyendo tus tutoriales y son muy buenos!!! Muchas gracias por tu aportación, he seguido los pasos que has descrito en esta entrada pero no logro hacer que el buscador se vea en la pagina, no se que este haciendo mal, lo agrego al archivo functions.php pero no se despliega. Muchas gracias!!!
Hola, Noemí.
Gracias por tu comentario.
¿Activaste el tema hijo?
Hola, pues tengo activado el tema, es la primera vez que uso wordpress y he leido varios tutoriales y veo eso de que hablas del tema hijo y del tema padre, he realizado varios cambios sobre el archivo style.css y functions.php pero del tema que descargas, cabe mencionar que uso la version gratuita no se si eso tenga algo que ver, te lo agradezco muchisimo por tu atención y apoyo. Saludos
Hola, Noemí.
Debería funcionar aunque sea la versión gratuita, pero los cambios hay que hacerlos siempre en el tema hijo, de lo contrario se perderán al actualizar el tema padre.
Sin verlo directamente, la verdad no sabría decirte la causa.
Saludos.
Creo que mi problema es que no tengo el tema hijo, para empezar, disculpa, vere activar el tema hijo y pruebo todo nuevamente, mil gracias!!! oye siendo entrometida jajaja vi que tu pagina esta en ingles y en español con una banderita en el menu, ¿Como lo lograste?
Hola, Noemí.
Luego me contás cómo va lo del tema hijo.
En cuanto al idioma, en el caso de este sitio, la bandera y el enlace correspondiente son un elemento añadido al menú como Enlace personalizado, pero nada más porque tengo en otro dominio la versión en inglés (no tenía WP en ninguno de los dos dominios originalmente). Es mucho más práctico usar un plugin, y en este tutorial está explicado cómo usar Polylang con Zerif Lite. Con el plugin, las banderas se agregan desde Apariencia > Menús (seleccionando el elemento Conmutador de idioma).
Saludos.
Gracias por tu ayuda, he logrado crear el tema hijo y he leído bastante acerca del tema, ahora ya puse mi slide y se ve correctamente pero aun así no logro poner el search box en el menú, lo agregue al archivo functions.php pero no me lo agrega.
Saludos
Muchas gracias por tus aportes logramos sin problemas poner el buscador, hay una cosa que me gustaria modificar, hay palabras que las personas ponen en plural por ejemplo “vitrinas”, y no aparece ninguna opción, “vitrina” o “vitri” me muestra los mach sin problema; hay alguna manera de modificar el codigo para que el buscador relacione ese tipo de palabras?
Hola, Joshua.
Lamentablemente no hay una solución fácil para esto. Inclusive plugins de búsqueda más avanzada no tienen esta característica. El único plugin que conozco que la incluye es SearchWP (premium). Otra alternativa sería instalar un plugin de búsqueda en vivo (o mediante Ajax), para que arroje resultados antes de que el usuario termine de escribir la palabra completa. Este parece bastante bueno.
Saludos.
Sta: Ana Ayelén
Cordial saludo;
De antemano muchísimas gracias por su valiosa colaboración, todos los aportes son muy importantes y le felicito por su gran dedicación.
Me gustaría que nos enseñaras como colocar una lupa en el BOTON BUSCAR que me abra la caja de texto, es para ahorra espacio en el menú y me quede todo alineado con el logo.
También otra opción sería colocar las redes y la lupa de buscar en la parte superior derecha del cabezote.
Quedo atento a su respuesta, nuevamente muchas gracias.
Hola, Galván.
El nivel de personalización para lograr ese efecto va más allá de la ayuda que te pueda dar por este medio. En todo caso, fijate usando el tema hijo Zerius, que ya trae esa función incorporada.
En cuanto a los enlaces de redes sociales, fijate en esta respuesta.
Saludos.
Hola, segui el link para colocar los enlaces de redes sociales, en la parte superior derecha de la cabezera, pero me lleva a este post: Zerif Lite: ¿Cómo agregar una nueva sección personalizada? (https://caribdis.net/2015/11/17/zerif-lite-como-agregar-una-nueva-seccion-personalizada/#comment-2341)
¿Me podrias indicar el link correcto?
Mil gracias!
Saludos,
Hola, Ángela.
El enlace está correcto, y una vez cargada la página debería desplazarse hasta el comentario donde está la respuesta. Por lo general, puedo tardar hasta dos días en contestar, pero la mayoría de las veces, las preguntas ya han sido respondidas en otras entradas, es por eso que recomiendo usar el buscador y la herramienta buscar del navegador para ahorrar tiempo. 🙂
Saludos.
Gracias, tienes razón, lo que pasa es que cuando me llevaba a la pagina, no esperaba que se dirigiera al punto de los enlaces. Ya lo vi, y lo aplicaré según lo que recomiendas.
Saludos y muchas gracias por todos los aportes.
Buenísimos los posts. Apenas hace unos días que empecé con WordPress y ya tengo el sitio funcionando. Maravilloso!!
Vengo siguiendo los tutoriales, para poder modificar cosas y voy avanzando. Ya tengo creado el tema hijo con montón de modificaciones. Lo que no encuentro es cómo hacer que se apliquen los cambios que quedaron allí a mi sitio inicial.
Y de paso otra pregunta, no he encontrado nada acerca de cambiar los colores de los botones verde y rojo!! :S
Gracias por todo el trabajo que te tomas!! es super para los novatos como yo!!!
Hola, Serena.
Gracias por tu comentario.
No entiendo bien a qué te referís con que los cambios se apliquen. Si estás trabajando con un tema hijo y está activado los cambios deberían reflejarse de manera instantánea.
En cuanto a tu otra pregunta, fijate en esta respuesta.
Saludos.
Muchas gracias por los aportes estoy comenzando en wordpress y tus tutoriales de este tema me han sacado de muchos apuros.
Gracias por dejar tu comentario, Luis. Es un placer poder ser de ayuda.
Cordial saludo.
Hola yo tengo el tema zerif pro, no encuentro el archivo custom.css 🙁 no existe en mi directorio, puedo agregarlo en otro archivo? gracias.
Para los que no pudieron como yo, en el mismo archivo functions.php agregué estas lineas:
Hola, Miguel.
Si creaste un tema hijo para Zerif Pro, podés agregar el código en el archivo
style.css. También está la alternativa de pegarlo en el recuadro CSS adicional del Personalizador. Si bien puede funcionar al pegarlo en el archivofunctions.php, es práctica recomendada mantener todo lo que sea estilos en los archivos.css.Saludos.
Hola, me haz ayudado mucho para integrar el buscador dentro del menú, por otro lado seguí las instrucciones y no logre integrarlo a la perfección sigue fuera de los márgenes, por otro lado con que plugin estas usando para la barra lateral de las redes sociales??
GRACIAS!!!!
Hola, Héctor.
Gracias por comentar. Sin ver la página de origen no sabría decirte exactamente cómo corregirlo, pero posiblemente necesites ajustar los valores
top,rightypadding. Si estás usando algún plugin de caché, puede que por eso no veas ningún cambio al actualizar. Para eso, vaciar la caché del plugin.Espero que te sirva.
Saludos. 🙂
Perdón por no poner la pagina, es www.ibra.com.mx SALUDOS !!
¡Ajá! Bueno, aquí me dormí yo… Omití el hecho de que no todo el mundo le va a poner el mismo nombre al menú. :O
El código sería el siguiente:
#site-navigation .widget_search .search-submit { top: -6px; right: -8px; } #site-navigation .widget_search input { padding: 6px 15% 6px 2%; }Ahora voy a editar la entrada con la aclaración. Gracias por hacérmelo notar.
Saludos.
Tampoco había notado la ID, ya lo corregí con tu ayuda pero sigo con el desalineado, ya vacie la cache 🙁
En el CSS minificado todavía aparece el estilo viejo. Vaciá la caché del CSS también.
SUPER !!!! ya quedo listo, agradezco mucho su ayuda, 😉
SALUDOS !!!!!
Listo, ahí lo corregí. La ID, para que funcione con cualquier menú sería
#site-navigation.Olvidé responder tu última duda: el plugin de redes sociales es Monarch, de Elegant Themes.
Saludos.
Gracias por el dato del plugin 🙂