---
title: "Zerif Lite: ¿Cómo añadir iconos de redes sociales en el pie de página?"
url: https://caribdis.net/2015/12/06/zerif-lite-como-anadir-iconos-de-redes-sociales-en-el-pie-de-pagina/
date: 2015-12-06
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "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..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 533
---

# Zerif Lite: ¿Cómo añadir iconos de redes sociales en el pie de página?

Este es el sexto tutorial de la serie dedicada al tema emblemático de [**ThemeIsle**](https://caribdis.link/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](https://caribdis.net/wp-content/uploads/2015/12/zerif-pie-de-pagina.jpg)

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](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/).

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:
if ( ! empty( $zerif_socials_instagram ) ) {
    echo '<li><a' . $attribut_new_tab . ' href="' . esc_url( $zerif_socials_instagram ) . '"><span>' . __( 'Instagram link', 'zerif-lite' ) . '</span> <i></i></a></li>';
}
echo '</ul><!-- .social -->';
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><!-- .social -->';` 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 id="instagram"><a' . $attribut_new_tab . ' href="' . esc_url( $zerif_socials_instagram ) . '"><span class="sr-only">' . __( 'Instagram link', 'zerif-lite' ) . '</span> <i class="fa fa-instagram"></i></a></li>';
}
    /* youtube */
    echo '<li><a target="_blank" href="#"><i class="fa fa-youtube"></i></a></li>';
echo '</ul><!-- .social -->';
![Pie de página de Zerif Lite con iconos personalizados](https://caribdis.net/wp-content/uploads/2015/12/zerif-pie-de-pagina2.jpg)

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](https://caribdis.net/wp-content/uploads/2015/12/zerif-pie-de-pagina3.jpg)

¡Mucho mejor!

Los iconos para las demás redes sociales se pueden encontrar en la siguiente dirección: **[Font Awesome](http://fortawesome.github.io/Font-Awesome/icons/)** (sección *Brand Icons*). El código será algo así como `<i></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** desarrollado por **ThemeIsle**” o directamente eliminarlo.

Buscamos la línea:
echo '<div><a rel="nofollow">Zerif Lite </a>' . __( 'developed by', 'zerif-lite' ) . ' ' . '<a href="' . esc_url( 'https://themeisle.com' ) . '" ' . $attribut_new_tab . ' rel="nofollow"> ' . __( 'ThemeIsle', 'zerif-lite' ) . '</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><a 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](https://caribdis.net/wp-content/uploads/2015/12/zerif-pie-de-pagina4.jpg)

**Tutorial original en inglés: [How to add new social icons to Zerif footer](http://docs.themeisle.com/article/8-adding-new-social-icons-to-zerif-footer)**