Zerif Lite: ¿Cómo añadir una barra de búsqueda en el menú superior?

58 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 17 de enero de 2016

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:

Campo de búsqueda en el menú

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.

Corregir márgenes

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ú:

Cuadro de búsqueda en el menú, con estilo

Mientras que en los teléfonos móviles aparecerá dentro del menú desplegable:

Cuadro de búsqueda en móviles

Tutorial original en inglés: How to add a search bar in the top menu in Zerif

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

58 Comentarios

  1. Daniel

    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!!!

    • Caribdis Diseño Web

      Hola, Daniel.

      No es algo sencillo. Necesitás crear un tema hijo, registrar una nueva ubicación de menú y modificar el archivo header.php para incluirlo (además de ajustar estilos CSS).

      Saludos.

  2. Nadiuska

    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.

    • Caribdis Diseño Web

      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.

      • Nadiuska

        Muchisimas Gracias. Eres súper.

  3. fabricio

    Ola ! Tiene como exibir los resultados como la pagina de template-blog-large.php

    • Caribdis Diseño Web

      Hola, Fabricio.

      Tendrás que crear dos archivos en la carpeta del tema hijo: search.php y content-large.php.

      En search.php pegá el siguiente código:

      <?php
      get_header();
      global $wp_query;
      global $paged;?>
      <div class="clear"></div>
      </header> <!-- / END HOME SECTION  -->
      <?php zerif_after_header_trigger(); ?>
      <div id="content" class="site-content">
      	<div class="container">
      		<div class="content-left-wrap col-md-9">
      			<div id="primary" class="content-area">
      				<main id="main" class="site-main" itemscope itemtype="http://schema.org/Blog">
      					<?php
      				// Define custom query parameters
      				$zerif_posts_per_page = ( get_option( 'posts_per_page' ) ) ? get_option( 'posts_per_page' ) : '6';
      				$zerif_custom_query_args = array(
      					/* Parameters go here */
      					'post_type' => 'post',
      					'posts_per_page' => $zerif_posts_per_page,
      				);
      					// Get current page and append to custom query parameters array
      				$zerif_custom_query_args['paged'] = ( get_query_var( 'paged' ) ? get_query_var( 'paged' ) : ( get_query_var( 'page' ) ? get_query_var( 'page' ) : 1) );
      				$paged = $zerif_custom_query_args['paged'];
      					// Output custom query loop
      				if ( have_posts() ) :
      					while ( have_posts() ) :
      						the_post();
      						// Loop output goes here
      						get_template_part( 'content-large', 'search' );
      					endwhile;
      				else :
      					get_template_part( 'content', 'none' );
      				endif;
      				echo get_the_posts_navigation(
      					array(
      						/* translators: Newer posts navigation arrow */
      						'next_text' => sprintf( __( 'Newer posts %s','zerif-lite' ), '<span class="meta-nav">→</span>' ),
      						/* translators: Older posts navigation arrow */
      						'prev_text' => sprintf( __( '%s Older posts', 'zerif-lite' ) , '<span class="meta-nav">←</span>' ),
      					)
      				);
      				?>
      				</main><!-- #main -->
      			</div><!-- #primary -->
      		</div><!-- .content-left-wrap -->
      		<?php zerif_sidebar_trigger(); ?>
      	</div><!-- .container -->
      <?php get_footer(); ?>
      

      En el archivo content-large.php pegá 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.

      • Fabricio

        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();

        ?>

        • Caribdis Diseño Web

          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.

      • Fabricio

        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' ), '’, ” ); ?>

  4. Alexander Bulla

    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

    • Caribdis Diseño Web

      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.

  5. Augusto

    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

    • Caribdis Diseño Web

      Hola, Augusto.

      Gracias por tu comentario.

      Podés agregar iconos como elementos del menú, fijate en esta respuesta.

      Saludos.

  6. Adrian

    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.

    • Caribdis Diseño Web

      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.

  7. Verónica

    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!

    • Caribdis Diseño Web

      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.

  8. Verónica

    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.

    • Caribdis Diseño Web

      Hola, Verónica.

      Revisá que no haya errores en el código. Si está correcto no deberías tener problemas.

      Saludos.

      • Verónica

        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

        • Caribdis Diseño Web

          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_log dentro de la carpeta /public_html/).

          • Verónica

            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

          • Caribdis Diseño Web

            Hola, Verónica.

            No veo que haya nada mal, salvo que estás incluyendo la hoja de estilos custom.css en functions.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.

          • Verónica

            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.

  9. Gustavo Briones

    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

    • Caribdis Diseño Web

      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.png de la carpeta /themes/zerif-lite/images/ a una equivalente en el tema hijo.

      Saludos.

  10. Noemi Ceron

    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!!!

    • Caribdis Diseño Web

      Hola, Noemí.

      Gracias por tu comentario.

      ¿Activaste el tema hijo?

      • Noemi Ceron

        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

        • Caribdis Diseño Web

          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.

      • Noemi Ceron

        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?

        • Caribdis Diseño Web

          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.

          • Noemi Ceron

            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

  11. Joshua Nieto

    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?

    • Caribdis Diseño Web

      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.

  12. Galvan

    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.

    • Caribdis Diseño Web

      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.

      • Angela Chavarri

        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,

        • Caribdis Diseño Web

          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.

          • Angela Chavarri Bringas

            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.

  13. Serena

    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!!!

    • Caribdis Diseño Web

      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.

  14. Luis Terrazas

    Muchas gracias por los aportes estoy comenzando en wordpress y tus tutoriales de este tema me han sacado de muchos apuros.

    • Caribdis Diseño Web

      Gracias por dejar tu comentario, Luis. Es un placer poder ser de ayuda.

      Cordial saludo.

  15. Miguel

    Hola yo tengo el tema zerif pro, no encuentro el archivo custom.css 🙁 no existe en mi directorio, puedo agregarlo en otro archivo? gracias.

    • Miguel

      Para los que no pudieron como yo, en el mismo archivo functions.php agregué estas lineas:

      <style>
      </style>
      
    • Caribdis Diseño Web

      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 archivo functions.php, es práctica recomendada mantener todo lo que sea estilos en los archivos .css.

      Saludos.

  16. Hector Salas

    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!!!!

    • Caribdis Diseño Web

      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, right y padding. 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. 🙂

      • Hector Salas

        Perdón por no poner la pagina, es www.ibra.com.mx SALUDOS !!

        • Caribdis Diseño Web

          ¡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.

          • Hector Salas

            Tampoco había notado la ID, ya lo corregí con tu ayuda pero sigo con el desalineado, ya vacie la cache 🙁

          • Caribdis Diseño Web

            En el CSS minificado todavía aparece el estilo viejo. Vaciá la caché del CSS también.

          • Hector Salas

            SUPER !!!! ya quedo listo, agradezco mucho su ayuda, 😉

            SALUDOS !!!!!

        • Caribdis Diseño Web

          Listo, ahí lo corregí. La ID, para que funcione con cualquier menú sería #site-navigation.

    • Caribdis Diseño Web

      Olvidé responder tu última duda: el plugin de redes sociales es Monarch, de Elegant Themes.

      Saludos.

      • Hector Salas

        Gracias por el dato del plugin 🙂

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!