Ya tenemos un tutorial para cambiar o agregar iconos en el pie de página de Zerif Lite, que nos enseña a editar uno de los archivos del tema hijo (footer.php). Como el mismo método no aplica para los iconos de los miembros de equipo, ThemeIsle nos ofrece esta alternativa sencilla y rápida para lograr esta modificación, inclusive sin necesidad de usar un tema hijo.
Para este capítulo número diecinueve, en el primer ejemplo aprenderemos a reemplazar el icono de Behance con el de Instagram. Para eso, en primer lugar tendremos que instalar un plugin que nos permita añadir código JS, como por ejemplo Header and Footer Scripts o Header and Footer Scripts Inserter. Una vez instalado, buscaremos en las opciones del plugin (generalmente en el menú Ajustes) el campo para añadir un script al pie de página y pegaremos lo siguiente:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.team-member .fa-behance').addClass('fa-instagram').removeClass('fa-behance');
});
</script>
Si necesitamos cambiar otros iconos, seguiremos la misma lógica y usaremos las clases de Font Awesome que correspondan. Por ejemplo, para mostrar también el icono de WordPress (en lugar del de Dribbble), el código será el siguiente:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.team-member .fa-behance').addClass('fa-instagram').removeClass('fa-behance');
$('.team-member .fa-dribbble').addClass('fa-wordpress').removeClass('fa-dribbble');
});
</script>
¡Eso es todo! Y a no confundir las clases de los iconos. Siempre es bueno tener a mano la página de Font Awesome como referencia.
Recordemos que tendremos que introducir la URL correspondiente a la nueva red social, en el campo de la red social que reemplazamos, dentro del widget Zerif – Miembro de equipo.
¿Y qué pasa si ya estamos usando un tema hijo y no queremos instalar el plugin? Simple: agregamos una función en el archivo functions.php para aprovechar el hook zerif_bottom_body:
function zerif_child_team_icons() {
if ( is_front_page() ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.team-member .fa-behance').addClass('fa-instagram').removeClass('fa-behance');
$('.team-member .fa-dribbble').addClass('fa-wordpress').removeClass('fa-dribbble');
});
</script>
<?php }
}
add_action( 'zerif_bottom_body', 'zerif_child_team_icons');Tutorial original en inglés: How to change Our Team icons 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, tengo una consulta respecto a este tema, cuando quiero editar el contenido del widget, me dice “valor no valido”, y arriba me sale ” advertencia, algo de que el codigo ha sido desabilitado”, tendrá solución eso?, gracias, muy buenos datos!
Hola, Eiseth.
¿Qué versiones de WP y del tema estás usando? ¿Probaste desactivando plugins?
Saludos.
Excelente tutorial una pregunta hay alguna manera que en los widget de nuestro enfoque se le agregue el mismo icono de facebook que tiene nuestro equipo??
Hola, Paulo.
Tendrías que agregarlo como código, dentro del campo Texto. Un ejemplo sería algo así:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. <div class="team-member"> <div class="social-icons"> <ul> <li><a href="#"><span class="sr-only">Enlace de Facebook</span><i class="fa fa-facebook"></i></a></li> </ul> </div> </div>Saludos.
muchisimas gracias me sirvio disculpa por molestar pero tuvieras de youtube?? y como hacer para que cuando le de click en el widget de nuestro equipo se abra una ventana.
Hola, Paulo.
Los códigos de los iconos los sacás de aquí.
Y el widget de miembro de equipo tiene la casilla ¿Abrir enlaces en una nueva ventana?
Saludos.
Cómo cambiarlo esa sección de equipo a una forma cuadrada?
Este es el tutorial. 😉
Hola,
Muchas gracias por toda la información que entregas.
Quería saber si se puede modificar la posición de los miembros del equipo, ya que somos 5 integrantes, y nos gustaría dejar 3 arriba y dos abajo, sin embargo por defecto quedan 4 arriba y uno abajo.
Muchas gracias.
Hola, Andrés.
Pegá el siguiente código en la hoja de estilos del tema hijo o en el recuadro Simple CSS:
@media screen and (min-width: 768px) { .our-team .row .col-lg-3 { width: 30%; } }Saludos.
Hola, Ana, eres una fuente inagotable de sabiduría!! Me has solucionado, con esta entrada, la cuestión de cambiar los iconos sociales. Pero ahora estoy probando, en la sección “Equipo” de la plantilla, a ver cómo hago para que cuando se pinche en el icono correspondiente de la red social de cada miembro del equipo, se abra en una nueva página. Es decir, que no se abandone la página sino que se abra una pestaña nueva. Me imagino que será con el atributo a target=”_blank”, pero no sé donde editar. Me podrías orientar? Mil gracias por adelantado 🙂
Ya lo tengo! he editado Funciones del tema (functions.php), he buscado y he cambiado
Por
Por si os sirve… aprendiendo por experimentación 😉
Un abrazo grande…
Hola, Mar.
No hace falta editar ningún archivo. El mismo widget de Miembro de equipo tiene la opción de seleccionar o no la casilla ¿Abrir enlaces en una nueva ventana?
Por otro lado, no es recomendable editar archivos del tema, siempre hay que crear un tema hijo.
(El código no salió en el comentario; para enviar contenido HTML conviene envolverlo en las etiquetas
<code></code>).Saludos. 🙂