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.
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 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.
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.
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!
Hola, Elena.
Para que funcione un anclaje, el enlace debe apuntar a una
iddeterminada. Podés crear esaiddentro 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.
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.
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.
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.phppor 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.
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
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
Hola, David.
Sí, por supuesto que se puede, tendrías que copiar el archivo
about_us.phpen la carpeta/sections/del tema hijo y agregarle una ID aldivcorrespondiente. Sería la líneaecho '<div class="our-clients">';y te quedaría algo así:Así podés usar el anclaje
#clientesen el menú.Saludos.
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.
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.
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.
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?!!!
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.
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!!!
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ó. 🙁
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.
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
Hola, Mafo.
Gracias por tu comentario.
Fijate en este tutorial.
Saludos.
Hola master.. consulta… como puedo cambiar los colores de fondo de una sesion?
¿De qué sección específicamente?
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
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.
Gracias por la rápida respuesta.Seguiré y valoraré tus consejos
¿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..=)
Hola, Rarch.
Fijate en esta respuesta.
Saludos.
Acabo de descubrir tus tutoriales y me parecen muy bueno, ya he usado el de cambiar colores a las habilidades conb el js.
Hola, Jorge.
Gracias por dejar tu opinión y me alegro de que los tutoriales te sean útiles.
Un cordial saludo.
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
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.phpy 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.
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.