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

76 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 6 de diciembre de 2015

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:

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>';
}
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

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 desarrollado por ThemeIsle” o directamente eliminarlo.

Buscamos la línea:

echo '<div class="zerif-copyright-box"><a class="zerif-copyright" rel="nofollow">Zerif Lite </a>' . __( 'developed by', 'zerif-lite' ) . ' ' . '<a class="zerif-copyright" 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 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

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

76 Comentarios

  1. Caribdis Diseño Web

    Hola, Alejandro.

    Hacé lo siguiente: en el archivo functions.php del tema hijo, pegá:

    function zerif_child_footer_nav() {
    ?>
    <ul class="footer-nav">
    <li><a href="#">Página 1</a></li>
    <li><a href="#">Página 2</a></li>
    <li><a href="#">Página 3</a></li>
    </ul>
    <?php
    }
    add_action( 'zerif_bottom_footer', 'zerif_child_footer_nav' );
    

    Tendrás que reemplazar cada # por la URL completa que corresponda, y escribir el título de las páginas.

    En el archivo custom.css del tema hijo pegá:

    .footer-nav {
        list-style: none;
        float: left;
        margin-left: 0;
    }
    .footer-nav > li {
        display: inline;
        margin-right: 20px;
    }
    .footer-nav > li a {
        color: #999;
    }
    .footer-nav > li a:hover {
        color: inherit;
    }
    

    Las dos primeras clases son para que tome la orientación horizontal, las dos restantes para ajustar los colores.

    Espero que te sirva.

    Saludos.

  2. Alejandro

    Primero que todo, nuevamente felicitarte por los tutoriales.

    Quisiera preguntarte si hay alguna forma de agregar en el footer los links a las tipicas paginas de contactenos, quienes somos, politica de privacidad y demas. Creo que quedaria genial con el estilo ponerlas debajo de donde sale el telefono, direccion, y demas. Es esto posible? o por lo menos hay algun metodo ponerlo en cualquier parte del footer?

  3. Elena

    Hola,

    ¿Hay alguna forma de incorporar los iconos de redes sociales en la cabecera junto al menú? ¿Con un widget, o editando código? Si me indicas que es posible y qué archivo habría que modificar en ese caso, no necesito mucho más.

    Gracias de antemano

    • Caribdis Diseño Web

      Hola, Elena.

      Fijate en esta respuesta.

      Saludos.

  4. Emmanuel De Oleo

    Hola! Los iconos sociales no me estan apareciendo, solo aparece un cuadrito pero no el icono social, si le das click al cuadrito te lleva al link pero el icono no se ve

    • Caribdis Diseño Web

      Hola, Emmanuel.

      Esto sucede cuando las fuentes de Font Awesome no están cargando correctamente, pero podría estar ocasionado por varios factores. Probá desactivando plugins, y probá ingresando al dominio con y sin www para ver si hay diferencia.

      Saludos.

  5. Gabriel

    Hola Ana Ayelén, Gabriel de este lado, ya en otra ocasión me has dado gran ayuda. Esta vez, con este tema, deseo ubicar en el header en la derecha algo parecido al ejemplo de estas paginas: http://www.mopc.gob.do/transparencia, y http://rdvial.gob.do/, ¿Podrías ayudarme por favor?

    • Caribdis Diseño Web

      Hola, Gabriel.

      El nivel de personalización para lograr lo que me comentás va más allá de la ayuda que te pueda dar por este medio. Si necesitás un campo de búsqueda en la cabecera, podés aplicar este tutorial.

      Saludos.

      • Gabriel

        Gracias Ana, me dió ideas lo que me sugeriste, ahora solo me falta cambiar el color gris de la sección footer, y que los widget del footer queden por debajo de este; ¿podrías ayudarme?

        Abrazos

        Gabriel

        • Caribdis Diseño Web

          Hola, Gabriel.

          Fijate en esta y esta respuestas.

          Saludos.

          • Gabriel

            Gracias por tu ayuda Ana, Gabriel de nuevo. En el tema anterior de Zerif, explicas como añadir un icono de youtube en el footer-redes sociales, pero ahora, en el footer de la nueva versión, este código ha cambiado; ¿hay algún post con esta nueva modificación?

            Saludos y Gracias

            Gabriel

          • Caribdis Diseño Web

            Hola, Gabriel.

            En la versión del repositorio, el código debería ir justo arriba de la línea echo '</ul><!-- .social -->';

            Saludos.

  6. carlos

    Buenas amigo. Te felicito por tu web y gracias por la informacion que brindas.

    Tratando de seguir los pasos de este post he cometido un ‘error fatal’. Estoy seguro que sabes a que me refiero.

    Estuve tratando de modificar el fuction.php y footer.php desde el editor de wordpress pero algo salio mal y ahora al cargar la pagina obtengo el siguiente error:

    Fatal error: Cannot redeclare zerif_scripts() (previously declared in /home/u616665143/public_html/wp-content/themes/zerif-lite/functions.php:264) in /home/u616665143/public_html/wp-content/themes/zerif-lite/functions.php on line 1650

    Agradezco cualquier indicio para reparar esto. Saludos cordiales.

    • Caribdis Diseño Web

      Hola, Carlos.

      Entrá por FTP o vía panel de control y renombrá la carpeta /zerif-lite/ (puede ser /zerif-old/ o el nombre que quieras) que se encuentra en /public_html/wp-content/themes/; luego volvé a iniciar sesión en WP (te dirá que el tema actual está roto y volverá al predeterminado). Ahí volvé a instalar Zerif desde Temas > Añadir nuevo.

      Y si vas a hacer cambios de código que sea en un tema hijo.

      Saludos.

  7. Freddy

    Hola. Te agradeceria mucho si me indicas en que parte del tema hijo debo añadir mi pixel de facebook para hacerlo en cada pagina creada, o si lo agrego al Zerif padre, gracias

    • Caribdis Diseño Web

      Hola, Freddy.

      Debería ir dentro del archivo header.php, antes del cierre de la etiqueta </head>. De todas maneras, podrías usar un plugin si necesitás más control (por ejemplo, excluirlo de ciertas páginas).

      Saludos.

  8. Borja

    Buenas noches,

    ¿Sería posible poner los iconos sociales en el header? A la derecha del menú, o a la derecha del logo.
    Mil gracias;)

    • Caribdis Diseño Web

      Hola, Borja.

      Fijate en esta respuesta.

      Saludos.

  9. Laura García Del Pino Martín

    Hola gracias por tu blog! me siento torpe pero pongo los enlaces de facebook y de linkedin y me lleva a mi web, no a los perfiles. No se que estoy haciendo mal..si quito # no me hace el enlace, si la pongo y despues la direccion del sitio, nada no me lo hace bien. solo me pasa en las redes sociales del pie de pagina, en la de los perfiles personales si funciona.

    gracias de antemano

    • Caribdis Diseño Web

      Hola, Laura.

      Debería funcionar si escribiste la dirección completa. El # hay que borrarlo y pegar la URL con el prefijo https://, por ejemplo https://www.facebook.com/PAGINA.

      Saludos.

  10. Marga Rubio Soto

    Ana, eres la mejor entre las mejores… ¡Mi heroína! No hay cosa que se me ocurra hacer con mi Zerif Lite que se te escape… 😉

    Justo andaba buscando este tema, he seguido tus instrucciones y me ha surgido la misma duda que a Rubén… Y ya está, solucionado: iconos de redes sociales nuevos, relucientes y bien enlazados. ¡Así da gusto, chica!

    ¡Gracias!

    Marga Rubio Soto
    www.spanish4bizbcn.com

    • Caribdis Diseño Web

      Gracias

  11. Ernest

    Hola , tengo instalada la version Zerif Lite,
    1.De repente me apareció en la parte superior junto al logo un botón de “Cambiar navegación” que me gustaria desactivar. En el personalizador no he encontrado la manera.
    2. Me desaparecieron las iconas de las redes sociales en el footer y se canviaron por letra “go to FacebooK”…me gustaria reestablecerlos.
    Muchas gracias por anticipado!

    • Caribdis Diseño Web

      Hola, Ernest.

      No llego a ver los errores, si es la URL de tu comentario. Si es otro sitio, tendría que verlo en funcionamiento.

      Saludos.

    • ernest

      Lo he solucionado actualizando el tema. Gracias

  12. carlos

    Lo primero felicitarte por este trabajo… MUchiiiiiiiiiiiisimas gracias, ha sido de gran ayuda… Mi pregunta es que si los iconos de las redes sociales se pueden poner en el header en lugar del footer… dime algo muchas gracias .

    • Caribdis Diseño Web

      Hola, Carlos.

      Gracias por tu comentario.

      Fijate en esta respuesta, que es para agregarlos como elementos de menú.

      Saludos.

      • carlos

        Muchas gracias… indagando los he puesto ya de otra forma… muchas gracias por tu respuesta tan rapida… un saludo

  13. Toli

    Hola. Por lo que veo en esta página del tutorial sólo se indica como modificar la parte de la derecha del footer. Lo que yo quisiera saber es cómo agregar un ícono más en la parte izquierda (para agregar más de una dirección y para agregar un ícono de nextel). Agradeceré cualquier tipo de ayuda.

    • Caribdis Diseño Web

      Hola, Toli.

      Para eso tendrías que agregar el código a mano en el archivo footer.php (a continuación de la sección /* COMPANY PHONE NUMBER */) y ajustar mediante CSS el ancho de las columnas.

      Saludos.

      • Toli

        Esto también aplica para Zerif Pro?

        • Caribdis Diseño Web

          Sí, aunque Zerif Pro tiene opciones para agregar iconos de Google+, Pinterest, Tumblr, Reddit y YouTube directamente desde el Personalizador.

          • Toli

            Si, en realidad busco agregar un ícono para Nextel.

  14. Paty

    ¡Hola!
    He intentado hacer el cambio de modificar el enlace del pie de página “Zerif Lite funciona con WordPress”.
    Creo que lo he hecho mal y ahora no me carga la página :-S
    ¿Qué puedo hacer?
    ¡Gracias de antemano!

    • Caribdis Diseño Web

      Hola, Paty.

      Simplemente borrá de la carpeta del tema hijo el archivo footer.php. También fijate que el código de functions.php no contenga errores.

      Saludos.

  15. Noemy

    Perdón, acabo de ver que viene mas abajo, torpe de mí 🙂

    • Caribdis Diseño Web

      Hola, Noemy. No hay problema. Gracias por comentar, y para cualquier otra duda, aquí estamos. 🙂

      Saludos.

  16. Noemy

    Hola! Muchisimas gracias por esta serie de tutoriales, me está facilitando enormemente la labor con esta plantilla.
    La pregunta es cómo puedo poner otras redes como Vimeo o Flickr, he intentado cambiando el nombre pero no me sale nada.
    Muchísimas gracias

  17. Alejandro

    hola
    Gracias por todas las ayudas que nos dan me han servido mucho.
    Quiero preguntarte algo como hago para que la pagina de inicio se mantenga pero que las entradas vallan a otra pagina. es que me voy voy a personalizar y cambio a pagina estática pero el home se me desaparece. te agradeceria la ayuda gracias

    • Caribdis Diseño Web

      Hola, Alejandro.

      Gracias por tu comentario. Si te referís a los enlaces del menú, tenés que ir a Apariencia > Menús, elegir las páginas y asignarlas al Menu primario.

      Saludos.

  18. Daniel Lopez

    Buenas tardes. Felicidades por este tutorial de mucha ayuda. Mi pregunta es, estoy ocupando esta plantilla Zerif Lite pero en el area del Footer Copyright me gustaria que me apareciera de forma horizontal no de forma vertical. Me pueden ayudar como hacer.. Gracias

    • Caribdis Diseño Web

      Hola, Daniel.

      Gracias por tu comentario.

      Depende de lo que quieras mostrar, fijate editando el archivo footer.php y luego reducir el relleno (padding) de las clases .company-details y .copyright en el archivo custom.css.

      Saludos.

  19. Ibán

    Hola! La duda que tengo es cómo se puede añadir un icono de una red social que no está en Font Awesome (como ReserchGate) en los miembros de “Nuestro Equipo”. ¿Me podéis echar una mano?
    Mil Gracias

    • Caribdis Diseño Web

      Hola, Ibán.

      Podés tomar como referencia este tutorial, que te indica cómo reemplazar los iconos de los miembros de equipo.

      Ahora bien, como ese icono en particular no existe en Font Awesome, tendrás que incluir el conjunto de Academicons.

      Luego de descargar el ZIP de la página, subís las carpetas /css/ y /fonts/ a la carpeta del tema hijo. Abrís el archivo functions.php y pegás el siguiente código:

      function zerifchild_ai() { 
          wp_enqueue_style( 'zerifchild_ai', get_stylesheet_directory_uri() . '/css/academicons.css' );
      }
      add_action( 'wp_enqueue_scripts', 'zerifchild_ai' );
      

      Por último, abrís el archivo footer.php y pegás lo siguiente:

      <script type="text/javascript">
      jQuery(document).ready(function($) {
         $('.team-member .fa.fa-behance').addClass('ai ai-researchgate').removeClass('fa fa-behance');
      });
      </script>
      

      Este ejemplo es para reemplazar el icono de Behance. Si necesitás reemplazar otro, usá el código de Font Awesome que corresponda.

      Saludos.

  20. Nathalia

    Buenas quisiera preguntarte porque no me deja eliminar los iconos de redes sociales, les elimino el # y no me guarda los cambios. Igualmente sucede con los botones rojo y verde. Te agradecería tu colaboración.

    • Caribdis Diseño Web

      Hola, Natalia.

      Fijate que estés usando la última versión del tema (1.8.4.4). Y también revisá que no haya algún plugin que esté generando errores o conflictos (desactivalos y probá activando uno por uno).

      Saludos.

  21. pedro torres

    saludos, excelente trabajo.

    Estoy intentando agregar una nueva sección y todo va bien excepto, que los íconos de Font Awesome no se pueden visualizar, te agradecería mucho la ayuda, por cierto tengo la última versión del Theme

    • Caribdis Diseño Web

      Hola, Pedro.

      Gracias por tu comentario.

      Si pudieras detallarme un poco más el error, como decirme en qué parte no aparecen los iconos. ¿Se ven los de los miembros del equipo y los predeterminados del pie de página? Y si pudieras incluir un enlace, mejor.

      Saludos.

  22. Rafael

    Hola, quisiera conocer cómo pudiera incluir los botones de las redes sociales pero en las entradas, es posible? Agradecido por su ayuda

    • Caribdis Diseño Web

      Hola, Rafael.

      Sí es posible, pero esto ya no depende del tema, sino de un plugin. Podés buscar alguno en el repositorio de WordPress con la etiqueta social share.

      Espero que te sirva.

      Saludos.

  23. Rubén

    Hola muy buenas, muchísimas felicidades por el tutoríal, la verdad es que soy novato en esto de wordpress y gracias a estos tutoriales estoy aprendendiendo de forma sencilla y rápida. En cuanto a este tutorial, lo he seguido al pie de la letra y el icono de youtube me sale en el pie de pagina, pero en las opciones generales-footer social icons no me sale su celda correspondiente para poner el enlace. ¿Puedes decirme que he podido hacer mal y corregirlo?, muchas gracias.

    • Caribdis Diseño Web

      Hola, Rubén.

      Gracias por tu comentario.

      En este caso, tanto el icono como el enlace se agregan directamente en el archivo del tema hijo, por eso no tienen opciones en el Personalizador. Para editar el enlace, agregalo en lugar del símbolo # que aparece en el código.

      Espero que te sirva.

      Saludos.

      • Rubén

        Perfecto, muchísimas gracias!!!

  24. Aritz

    Despues de crear dos paginas en wordpress.com, acabo de aterrizar a wp.org, y me encuentro con este diseño que puede encajar para mi sitio.
    Pero tengo problemas muy basicos. Me gustaria saber como puedo crear un menu, que enlace con las principales secciones de la pagina. Lo he visto en la demo, pero no me viene por defecto, y no se como hacerlo

    • Caribdis Diseño Web

      Hola, Aritz.

      En el tutorial de Zerif Lite, sección Configurar el menú están las instrucciones para agregar los enlaces a las secciones de la página.

      Saludos.

  25. Mariangel

    Buenos días, que buen tutorial, me ha sido de mucha ayuda.
    Tengo una preguntita, quisiera cambiar “Zerif Lite funciona con WordPress” por un texto que no tenga ningún enlace que al clickear me dirija a algún sitio… “Redes sociales” por ejemplo. Como podría hacerlo? que código se usaría?

    • Caribdis Diseño Web

      Hola, Mariángel.

      Gracias por tu comentario.

      En ese caso, deberías reemplazar la línea:

      echo '<div class="zerif-copyright-box"><a class="zerif-copyright" href="https://wordpress.org/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>';
      

      Por:

      echo '<div class="zerif-copyright-box">Redes sociales</div>';
      

      Espero que te sirva.

      Saludos.

      • Mariangel

        EXCELENTE! me funciono perfectamente.
        Gracias.

      • Victor

        no logro ubicar esa linea en donde esta la linea “Zerif Lite funciona con WordPress” …en el editor no logro dar con ello…me puedes orientar mejor, por favor?

        • Caribdis Diseño Web

          Hola, Víctor.

          Cualquier editor de texto que uses tiene la herramienta buscar (por lo general, Ctrl + F). La línea es la que comienza con echo '<div class="zerif-copyright-box">.

          Saludos.

  26. Nahuel

    Buenos Dias, muchas gracias por los tutoriales son de muchisima utilidad!!
    Tengo una consulta: En el tema Zerif seccion OUR TEAM, los logos de las redes sociales no me aparecen en la pagina web terminada (aparecen cuadraditos como si no estuviera la imagen), pero si los veo en la previsualizacion del editor web. Tenes idea como poder solucionarlo? Desde ya muchas gracias!!! Nahuel

    • Caribdis Diseño Web

      Hola, Nahuel.

      Gracias por tu comentario. Fijate limpiando cookies e historial del navegador o si usás algún plugin de caché, vaciándola. No sabría decirte exactamente qué hacer sin verlo, así que si podés pasarme la URL, mejor.

      Saludos.

      • Nahuel

        Estimada, muchas gracias por tu respuesta! Lamentablemente vacie cookies, historial, cache y temporales y siguen sin aparecer los logos, tanto en chrome como IE, e incluso en mi telefono movil. La pagina en cuestion es www.wbgroup.com.ar
        Si se le ocurre algo le estaré más que agradecido! Un saludo y a sus ordenes.

        • Caribdis Diseño Web

          De nada 🙂

          Más que seguro es porque los archivos del sitio están alojados en un subdominio distinto. Fijate que si entrás en http://wbgroup.esy.es/ se ven perfectamente. ¿Es posible que hayas creado el sitio en el subdominio y luego apuntado el dominio? En ese caso, deberías entrar en phpMyAdmin y en la base de datos de WP actualizar todas las instancias de la URL http://wbgroup.esy.es/ por http://www.wbgroup.com.ar/. Si necesitás ayuda con esto, contactame.

          Saludos.

          • Nahuel

            Es verdad!!! Funciona en la pagina del hosting, pero no con el .com.ar
            Si modifico ese archivo phpMyadmin no hay riesgo de romper todo? Otra consulta, debo modificar solo las entradas de la pagina http://wbgroup.esy.es/ o las que tienen subpaginas tambien? Ej: http://wbgroup.esy.es/wp-content/uploads/2016/04/..., etc.

            Desde ya mil gracias por tu ayuda!!

  27. Sebastian

    Buenas tardes gracias por el tutorial, ha funcionado de maravilla.
    Me podrías ayudar?. Lo que pasa es que quiero eliminar iconos de redes sociales y agregar alguno en la sección de nuestro equipo pero no encuentro como. Gracias

    • Caribdis Diseño Web

      Hola, Sebastián.

      Gracias por tu comentario. Para no mostrar determinados iconos de redes sociales (tanto en el pie de página como en los miembros de equipo), basta con dejar en blanco el campo correspondiente (de manera predeterminada, contienen un #; hay que borrarlo). Y en cuanto a agregar nuevos en los miembros de equipo, este es el tutorial.

      Espero que te sirva.

      Saludos.

  28. Gabriel

    Buenas noches, Gabriel de nuevo, maravillado con este gran tema, y muy agradecido de la amable ayuda que das a los novatos como yo; espero estés bien; podrías ilustrarme en como se puede cambiar el ancho de la sección del footer content.

    Gracias por tu atención.

    • Caribdis Diseño Web

      Hola, Gabriel. Probá con el siguiente código:

      #footer .container {
          width: 100%;
      }
      

      El valor de width puede ser un porcentaje o un número en px.

      Espero que te sirva.

      Saludos.

      • Gabriel

        Gracias, vi como funciona, pero me exprese mal, no era el ancho, sino el alto.

        Saludos

        • Caribdis Diseño Web

          Bueno, en ese caso, el código es:

          .company-details, .copyright {
              padding-top: 20px;
              padding-bottom: 20px;
          }
          

          Ajustá el valor 20px al que necesites.

          • Gabriel

            Gracias, funciona de maravillas

  29. Javier

    Buenos días. Lo primero felicidades por los tutoriales. Sin duda ayudaran a mucha gente.

    He realizado este y todo ha salido ok. La única cosa que no acaba de cuadrar es el icono de G+. He copiado el código de la página que facilitas y me sale, pero me sale el antiguo.

    Es decir sale g+ en vez del nuevo G+ que se supone que debería de salir.

    Puedo solucionarlo de algún modo.

    Muchas gracias.

    • Caribdis Diseño Web

      Hola, Javier.

      Gracias por tu comentario y me alegro de que te haya servido este tutorial.

      En efecto, el icono de G+ que se muestra es el viejo, ya que Zerif Lite incluye una versión anterior de Font Awesome. Pero todo tiene solución 🙂

      En el archivo functions.php del tema hijo pegá el siguiente código:

      function zerifchild_dequeue_style() {
         wp_dequeue_style( 'zerif_fontawesome' );
         wp_deregister_style( 'zerif_fontawesome' );
      }
      add_action( 'wp_print_styles', 'zerifchild_dequeue_style', 100 );
      function zerifchild_scripts() { 
          wp_enqueue_style( 'zerifchild_fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' );
          wp_enqueue_style( 'zerifchild_pixeden_style', get_template_directory_uri() . '/css/pixeden-icons.css' );
      }
      add_action( 'wp_enqueue_scripts', 'zerifchild_scripts' );
      

      Con esto se cargará la hoja de estilos de Font Awesome en su última versión (que incluye el icono de G+ actual).

      Espero que te sirva.

      Saludos.

      • Javier

        Efectivamente así cambia el icono, pero no sé si es porque hay que retocar el código según el tema hijo que utilizo, también cambian muchas otras cosas.

        Uso ResponsiveBoat.

        P.D. ¿Hay un número máximo de iconos que se pueden añadir?. He añadido dos y aparentemente no me deja añadir más.

        Muchas gracias por la respuesta.

        • Caribdis Diseño Web

          Claro, ResponsiveBoat es un tema hijo de Zerif Lite: usa su estructura, pero tiene estilos diferentes.

          No debería haber límite para los iconos. Fijate que estés agregando el código como se indica en esta entrada y no afuera del cierre de la etiqueta <ul>. (Ahí la corregí con el nuevo código; en una de las últimas actualizaciones, incluyeron el icono de Instagram, que ahora quedó a continuación del de Dribbble).

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!