Zerif Lite: ¿Cómo cambiar los anclajes del menú?

32 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: 21 de noviembre de 2015

Hoy continuamos con el tercero de los tutoriales para el tema gratuito Zerif Lite, de ThemeIsle.

Ante todo, ¿a qué llamamos “anclaje”? Los enlaces de anclaje son aquellos que conducen a determinados sectores de una página. Este tema, al igual que todos los temas de una sola página, es bien representativo del funcionamiento de los enlaces de anclaje, ya que podemos ver que los elementos del menú (Características, Quiénes somos, Equipo, Testimonios, Blog y Contacto) no abren páginas nuevas del sitio, sino que desplazan la misma página de inicio hacia la sección correspondiente.

Esos elementos del menú son los enlaces de anclaje. Y, por su parte, las secciones a las cuales están vinculados —los “anclajes” propiamente dichos— deben tener un nombre único que los identifique: este nombre es el que lleva el atributo HTML id.

Es muy probable que queramos usar esos nombres en español, y con Zerif Lite es muy sencillo cambiar los anclajes de cada sección: vamos a usar el primer ejemplo para cambiar el atributo id de la sección “Nuestro enfoque”.

En primer lugar, debemos crear un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

Luego, copiamos el archivo /sections/our_focus.php a la carpeta correspondiente y buscamos la siguiente línea:

<section class="focus" id="focus">

Reemplazamos el contenido de id por el nombre que queremos darle, por ejemplo “caracteristicas”, con lo cual nos quedaría:

<section class="focus" id="caracteristicas">

Ahora el anclaje para la sección “Nuestro enfoque”, será caracteristicas.

Hagamos lo mismo con las demás secciones.

Para “Quiénes somos”, copiamos el archivo /sections/about_us.php de la carpeta del tema padre a la del tema hijo y reemplazamos:

<section class="about-us" id="aboutus">

Por:

<section class="focus" id="quienessomos">

Para “Nuestro equipo”, copiamos el archivo /sections/our_team.php de la carpeta del tema padre a la del tema hijo y reemplazamos:

<section class="our-team" id="team">

Por:

<section class="our-team" id="equipo">

Para “Testimonios”, copiamos el archivo /sections/testimonials.php de la carpeta del tema padre a la del tema hijo y reemplazamos:

<section class="testimonial" id="testimonials">

Por:

<section class="testimonial" id="testimonios">

Para “Últimas noticias”, copiamos el archivo /sections/latest_news.php de la carpeta del tema padre a la del tema hijo y reemplazamos:

<section class="latest-news" id="latestnews">

Por:

<section class="latest-news" id="ultimasnoticias">

Para “Contacto”, copiamos el archivo content-frontpage.php de la carpeta del tema padre a la del tema hijo y reemplazamos:

<section class="contact-us" id="contact">

Por:

<section class="contact-us" id="contacto">

Para tener en cuenta: la id puede llevar cualquier nombre que uno quiera, pero es importante recordar que no se deben usar acentos, eñes, caracteres especiales ni espacios.

Y recordar, por supuesto, usar los nombres correspondientes al momento de crear los enlaces en Aparariencia > Menús.

18
18-bis
Ú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.

32 Comentarios

  1. Teresa

    Hola buenos días, gracias en primer lugar por el gran trabajo en estos comentarios,
    Mi pregunta es sobre el cambio de tamaño y color de la tipografía en esta plantilla, Creo haber leído que no es posible pero me gustaría que me lo confirmases o si hay alguna manera de hacer cambios que me lo indicases.
    Me gustaría cambiar color de títulos y párrafos pero no veo ninguna opción.
    Gracias.

    • Caribdis Diseño Web

      Hola, Teresa.

      Lo más rápido y sencillo sería instalar un plugin. Easy Google Fonts te permite cambiar las fuentes desde el Personalizador.

      Espero que te sirva.

      Saludos.

  2. Elena

    Hola, se agradece tanta ayuda e información!

    Quisiera saber si es posible asignar un enlace a un widget dentro de una sección, por ejemplo, creo un subelemento en el menú dentro de our focus y quiero que dirija a uno de los widgets.

    ¿Se puede crear una galería emergente al hacer click sobre la imagen del widget?

    Gracias!

    • Caribdis Diseño Web

      Hola, Elena.

      Para que funcione un anclaje, el enlace debe apuntar a una id determinada. Podés crear esa id dentro del contenido del widget, que sería algo así: <a id="anclaje"></a>.

      Para lo segundo tendrías que probar con algún plugin, pero no vas a poder usar los widgets de Zerif, ya que el enlace de la imagen tenés que agregarlo manualmente.

      Saludos.

  3. Caribdis Diseño Web

    Hola, Katherine.

    Gracias por tu comentario.

    Para eliminar las viñetas usá el siguiente código:

    .footer-widget li:before {
        content: initial;
    }
    

    Y el widget deberías poder borrarlo del área del pie de página desde Personalizar > Widgets o Apariencia > Widgets.

    Saludos.

    • Katherine

      Oye me funciono perfecto. Eres un máster en esto.

      Tengo otro problema; agregue una barra de búsqueda en el menú principal y cree otro menú para footer ¿Como hago para que la barra de búsqueda solo salga en el menú principal?

      Gracias
      Saludos.

      • Caribdis Diseño Web

        Hola, Katherine.

        Ajá, ahora entiendo el porqué del buscador en el pie de página. El código provisto por ThemeIsle aplica al filtro global de los menús, es por eso que si creás otros (para usar como widgets, por ejemplo) el buscador aparece en cada menú que exista.

        Probá reemplazando el código de functions.php por el siguiente (luego lo corrijo en la entrada):

        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;
        }
        

        Saludos.

  4. Katherine

    Hola! Mil gracias por los tutoriales me han ayudado a entender mucho como funciona el tema en el mismo WordPress, eres magnifica explicando.
    Te tengo dos consultas.
    La primera consulta: cree un nuevo menú con 4 enlaces personalizados de redes sociales, resulta lo agrego en la parte de Widgets>Footer 3 y me crea una viñeta para cada icono de red social que no puedo quitar por nada del mundo en el código CSS del archivo style.css.
    la segunda consulta: al crear este nuevo menú me agrega el widget de “Buscar” no se quita por las opciones de Personalizar>Menús WordPress y no se en que archivo esta.

    Saludos :3

  5. David

    Hola,
    muy buen tutorial, solo tengo una duda. ¿Es posible poner un anclaje a la sección Our Clients dentro del About-us? Quiero poner un menú que lleve a esa parte pero no me ha funcionado de ninguna manera.

    Un saludo y muchas gracias por compartir tus conocimientos

    • Caribdis Diseño Web

      Hola, David.

      Sí, por supuesto que se puede, tendrías que copiar el archivo about_us.php en la carpeta /sections/ del tema hijo y agregarle una ID al div correspondiente. Sería la línea echo '<div class="our-clients">'; y te quedaría algo así:

      echo '<div class="our-clients" id="clientes">';
      

      Así podés usar el anclaje #clientes en el menú.

      Saludos.

      • David

        Genial, me funcionó perfecto!
        Lo único que cuando está en la sección no se activa el botón del menú, queda activado el About-us. ¿Eso se puede solucionar?
        Muchas gracias de antemano.

  6. Marlon

    Hola amiga, gracias por los tuturiales, soy nuevo en esto y me cuesta un poco comprender, pero aprendo rapido, a que se refiere con: Luego, copiamos el archivo /sections/our_focus.php a la carpeta correspondiente y buscamos la siguiente línea (que debería ser la primera): a que carpeta seria ? modifico los archivos desde windows y luego lo cargo el tema a wordpress. compiar el archivo our_focus.php a la carpeta corespodiente que carpeta seri esta.

    • Caribdis Diseño Web

      Hola, Marlon.

      La carpeta sería la del tema hijo, el cual tenés que crear siguiendo las instrucciones de esta entrada (solo el Paso 1). Una vez creado el tema hijo, con sus correspondientes carpetas y archivos, debe copiarse en la carpeta /wp-content/themes/ (o subirse en formato ZIP desde el administrador) y activarse.

      Saludos.

  7. Serena

    Hola!! No tenía claro donde poner esta consulta. Soy un desastre en esto del manejo de wordpress, me lancé creyendo que podía y me estoy empezando a dar contra la pared. Me está pasando que el botón tienda del menú dejó de funcionar, (si funciona el de la portada), y ahora me llegó un mail de google diciendo que hay un montón de enlaces sin funcinar dando error 404. No tengo idea de cómo corregir estos enlaces. Además tengo productos gratuitos publicados, dentro de una categoría freebies, y al buscar “gratis” o “freebies”el buscador no devuelve resultados. Socorro!! Que hago?!!!

    • Caribdis Diseño Web

      Hola, Serena.

      El problema es que tenés páginas sin idiomas asignados. El enlace de la tienda tiene el formato /es/tienda/, pero seguramente te falta asignarle el idioma (sí abre la página /tienda/ a secas).

      Por otro lado, el buscador solo devuelve resultados si la palabra está en el título o en el contenido, no si es una categoría o etiqueta.

      Saludos.

      • Serena

        Mil gracias por responder tan pronto!! la verdad que sos una genia!! El problema es que esta alumna que te tocó es medio lenta!!! jajajaj!!! Que tengo que hacer entonces??? donde puedo hacer eso que me decis de asignarle idioma?
        Voy a tratar de darme cuenta mientras tanto. Mil gracias de verdad!! siempre sos de muchísima ayuda!!!

        • Serena

          Ya logré cambiar el enlace del botón del menú a /tienda/, sin /es/, pero no entiendo como asignar los idiomas… Me parece que poner el plugin de idioma me complicó mas de lo que me ayudó. 🙁

          • Caribdis Diseño Web

            Hola, Serena.

            En esta entrada está explicado cómo configurar Polylang en Zerif. También podés echarle un vistazo a la documentación del plugin.

            Saludos.

  8. mafo

    Excelente toda la ayuda y apoyo que prestas … mil gracias por compartir tus conocimiento y estudios…! ahora te consulto como y desde donde podemos cambiar los color de fondo de las secciones o el fondo de la pagina en general.. por ejemplo en la parte superior detras de menu todo ese fondo

    • Caribdis Diseño Web

      Hola, Mafo.

      Gracias por tu comentario.

      Fijate en este tutorial.

      Saludos.

  9. david madariaga

    Hola master.. consulta… como puedo cambiar los colores de fondo de una sesion?

    • Caribdis Diseño Web

      ¿De qué sección específicamente?

  10. jesus

    Hola , lo primero darte las gracias por la gran ayuda que facilitas y los tutoriales.
    Estamos pensando cambiar de plantilla en la web de nuestra asociación y me ha gustado esta pero no sé hasta que punto es personalizable en cuanto a widgets en las páginas o entradas que quieras , colores, zonas de la página incio menus etc.
    Sé que la versión pro es más completa pero también es un precio alto.
    Agradecería tu visión al respecto

    • Caribdis Diseño Web

      Hola, Jesús.

      Gracias por tu comentario.

      En la versión Lite los colores se pueden cambiar únicamente con CSS personalizado. Y la versión PRO incluye cuatro secciones más (Mapa, Portfolio, Suscripción y Tablas de precios), además de permitir usar un vídeo de fondo y cambiar el orden de las secciones. Todo depende de tus necesidades. Si estás buscando otras funciones que no estén en la versión gratuita o que no puedas lograr con las opciones de la versión premium, lo conveniente sería buscar otro tema.

      Saludos.

      • jesus

        Gracias por la rápida respuesta.Seguiré y valoraré tus consejos

  11. Rarch

    ¿Cómo se podría hacer para crear menús desplegables en “Home”?

    Es decir, que se despliegue como lo hace “shop” en el preview del theme, pero en todos los elementos (blog, etc..=)

    • Caribdis Diseño Web

      Hola, Rarch.

      Fijate en esta respuesta.

      Saludos.

  12. jg

    Acabo de descubrir tus tutoriales y me parecen muy bueno, ya he usado el de cambiar colores a las habilidades conb el js.

    • Caribdis Diseño Web

      Hola, Jorge.

      Gracias por dejar tu opinión y me alegro de que los tutoriales te sean útiles.

      Un cordial saludo.

  13. Cristian

    Hola, me han gustado mucho tus tutoriales, y me están sirviendo de gran ayuda. Quisiera preguntarte una cosa, ¿es posible mantener las secciones que ya hay en la página principal del tema, pero cambiándolas de orden? Es decir, en vez de que se muestre características, sobre nosotros, ultimas noticias, etc, que se muestre con este orden (por ejemplo): ultimas noticias, características, sobre nosotros, etc

    Un saludo y felicidades por el blog

    • Caribdis Diseño Web

      Hola, Cristian.

      Gracias por tu comentario.

      Es posible, con un tema hijo (Zerif Pro sí permite cambiar el orden de las secciones desde el Personalizador). Tendrías que copiar el archivo content-front-page.php y mover las porciones de código que correspondan a las secciones al lugar donde quieras que aparezcan. Todas están comentadas para identificarlas fácilmente. Por ejemplo, cortás el código correspondiente a /* LATEST NEWS */ y lo pegás antes de /* OUR FOCUS SECTION */.

      Espero que te sirva.

      Saludos.

      • Cristian

        Me ha servido de gran ayuda, he añadido algunos comentarios al código para diferenciar mejor las secciones y he podido cambiarlas de orden. Mil gracias.

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!