Actualizado el 12/12/2016

Este es el sexto tutorial de la serie dedicada al tema emblemático de ThemeIsle, que nos permitirá agregar nuevos iconos y enlaces a perfiles de redes sociales en el pie de página.

Zerif Lite incluye de manera predeterminada las siguientes redes sociales: Facebook, Twitter, LinkedIn, Instagram, Bēhance y Dribbble. Estas dos últimas son más orientadas a los portfolios de diseño y es probable que la mayoría de los usuarios no necesiten mostrarlas.

Pie de página predeterminado de Zerif Lite

Para eliminar estos iconos, basta con abrir el Personalizador, ir a Opciones generales > Redes sociales y dejar los campos correspondientes en blanco (borrar los símbolos #).

Añadir iconos nuevos o reemplazar iconos antiguos en el tema Zerif no es muy complicado en realidad. Solo hace falta una línea de código para que funcione. Antes de comenzar este tutorial, debemos asegurarnos de que estamos usando un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

Primero, copiamos el archivo footer.php del tema padre a la carpeta del tema hijo. Luego, abrimos el archivo footer.php del tema hijo y buscamos el siguiente código:

/* instagram */
    if( !empty($zerif_socials_instagram) ):
    echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_instagram).'"><span class="sr-only">' . __( 'Go to Instagram', 'zerif-lite' ) . '</span> <i class="fa fa-instagram"></i></a></li>';
    endif;
    echo '</ul>';
    endif;

Queremos añadir, por ejemplo, un icono para YouTube. Ahora nada más necesitamos pegar la siguiente línea de código justo antes del echo '</ul>'; mostrado más arriba:

    /* youtube */
    echo '<li><a target="_blank" href="#"><i class="fa fa-youtube"></i></a></li>';

Con lo cual, la sección ahora se verá más o menos así:

    /* instagram */
 if( !empty($zerif_socials_instagram) ):
 echo '<li><a'.$attribut_new_tab.' href="'.esc_url($zerif_socials_instagram).'"><i class="fa fa-instagram"></i></a></li>';
 endif;
    /* youtube */
    echo '<li><a target="_blank" href="#"><i class="fa fa-youtube"></i></a></li>';
    echo '</ul>';
endif;

Pie de página de Zerif Lite con iconos personalizados

Eso es todo. Obviamente, tendremos que reemplazar el símbolo # del código href con el enlace correspondiente al perfil de la red social.

¿Qué tal si queremos cambiar el tamaño de los iconos? El de YouTube, al menos, no ha quedado del todo nítido. Simplemente, añadimos el siguiente código CSS (en el archivo custom.css del tema hijo, o en el recuadro CSS adicional del Personalizador):

.social li a {
    font-size: 24px;
}

Iconos de redes sociales más grandes

¡Mucho mejor!

Los iconos para las demás redes sociales se pueden encontrar en la siguiente dirección: Font Awesome (sección Brand Icons). El código será algo así como <i class="fa fa-nombre_de_la_red_social"></i>.

Y ya que estamos con el archivo footer.php, puede que también queramos modificar el enlace del pie de página “Zerif Lite funciona con WordPress” o directamente eliminarlo.

Buscamos la línea:

echo '<div class="zerif-copyright-box"><a class="zerif-copyright" href="http://themeisle.com/themes/zerif-lite/"'.$attribut_new_tab.' rel="nofollow">Zerif Lite </a>'.__('powered by','zerif-lite').'<a class="zerif-copyright" href="http://wordpress.org/"'.$attribut_new_tab.' rel="nofollow"> WordPress</a></div>';

La suprimimos si no queremos mostrar ningún texto ni enlace. O bien, si queremos mostrar el nombre del sitio y un enlace a la portada, lo reemplazamos por el siguiente código:

echo '<div class="zerif-copyright-box"><a class="zerif-copyright" href="'.home_url('/').'" title="'.esc_attr(get_bloginfo('name', 'display')).'">'.esc_attr(get_bloginfo('name', 'display')).'</a></div>';

O algo más personalizado para mostrar el año, un título a elección y una URL a elección que se abra en una ventana o pestaña nueva:

echo '&copy;'.date ('Y').'<div class="zerif-copyright-box"><a class="zerif-copyright" target="_blank" href="http://mi-url-personalizada.com" title="Título de mi Web">Título Personalizado</a></div>';

Así quedaría nuestro pie de página.

Texto y enlace personalizado en el pie de página

Tutorial original en inglés: How to add new social icons to Zerif footer

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)