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>

Zerif Lite - Iconos de miembro de equipo

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>

Zerif Lite - Otros iconos de miembro de equipo

¡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

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)