Jueves , 28 Marzo 2024
Inicio / Tutoriales / Añadir iconos sociales al tema Mystique

Añadir iconos sociales al tema Mystique

Vamos a ver cómo añadir más iconos sociales sobre la barra de menú superior.

Estas instrucciones son válidas desde la versión 2.0 de Mystique hasta la versión actual (2.2.3) y no es necesario hacer cambios en los archivos del tema.

Como ejemplo, vamos a poner los iconos de Facebook, Twitter y RSS, sustituyendo los que Mystique trae por defecto para que todos tengan el mismo estilo.

En primer lugar, añadimos las siguientes líneas de código en “Opciones de Mystique > CSS del usuario“.

#header a.nav-extra.rss{background:transparent url(/wp-content/uploads/mystique_icons/nav-rss.png) no-repeat top}
#header a.twitter{background:transparent url(/wp-content/uploads/mystique_icons/nav-twitter.png) no-repeat top}
#header a.facebook{background:transparent url(/wp-content/uploads/mystique_icons/nav-facebook.png) no-repeat top}

Opcionalmente, podemos hacer que los iconos sobresalgan un poco más por encima de la barra de navegación:

#header p.nav-extra {top:-40px;}
#header a.nav-extra {height:64px;}

De esta forma, tendríamos que subir al directorio “/wp-content/uploads/mystique_icons/” estas imágenes:

(más abajo hay muchos más iconos para descargar)

Ahora copiamos el siguiente código en “Opciones de Mystique > Avanzado > Funciones del usuario“, sin borrar la primera línea (<?php) que aparece por defecto en el cuadro.

function mystique_custom_nav_icons($nav_extra)
{
  $nav_extra = '<a class="nav-extra rss" title="Feed RSS" href="'.get_bloginfo('rss2_url').'"><span>Feed RSS</span></a>';
  $nav_extra .= '<a class="nav-extra twitter" title="Sígueme en Twitter" href="TWITTER_URL"><span>Sígueme en Twitter</span></a>';
  $nav_extra .= '<a class="nav-extra facebook" title="Mi perfil en Facebook" href="FACEBOOK_URL"><span>Mi perfil en Facebook</span></a>';

return $nav_extra;
}

add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');

Debes cambiar TWITTER_URL y FACEBOOK_URL por las direcciones de tus perfiles.

Con este código estaríamos añadiendo los iconos de Facebook, Twitter y RSS en ese orden de izquierda a derecha, pero podemos modificar las líneas de la función para poner los iconos que necesitemos o cambiarlos de orden.

Es importante usar el operador de asignación (=) en la primera línea de la función, ya que si usamos el de concatenación (.=), los iconos se añadirán a los que Mystique trae por defecto en lugar de sustituirlos.

Los siguientes iconos han sido realizados por Mark N Hewitt, pero he retocado algunos de ellos porque no estaban bien recortados (imagen).

Puedes descargar el archivo .zip con los 32 iconos y subir los que necesites a tu servidor.

Fuentes: Kerem Erkan / Mark N Hewitt / C.M. Jackson .Net

También puedes ver...

Comienza a crear tus páginas web en WordPress PASO a PASO

Un curso de WordPress es esencial para poder crear un sitio web. El crecimiento de los …

65 Comentarios

  1. maravilloso,bien explicado y completo muchisimas grasias amigo

  2. Si tenéis cualquier duda o problema podéis preguntar aquí. Intentaré ayudar en lo que pueda 🙂

  3. Hola, he seguido tu manual pero no soy capaz de que se vean los iconos, tengo wordpress 2.9.2 y la última vesión de mystique (2.2.3).
    Si pasas el ratón se ven los hipervinculos pero no los iconos (y están en la ruta correcta).
    ¿Alguna idea?

    • Hola,

      Revisa bien tanto el código PHP como el CSS.

      Si se ven los enlaces debe ser porque faltan las etiquetas “span” en el código PHP:

      <span>Mi perfil en Facebook</span>

      Y comprueba bien que cada línea de la función php tenga puesta la propiedad “class” con el atributo “nav-extra”:

      class="nav-extra facebook"

      Si no se ven los iconos, prueba a poner la ruta completa de las imágenes, por ejemplo:

      #header a.facebook{background:transparent url(https://www.miblog.com/wp-content/uploads/mystique_icons/nav-facebook.png) no-repeat top}

      Saludos.

      • Gracias!
        Al poner la ruta completa ha funcionado!!!
        Gran tutorial!

      • Hola,

        Me pasa lo mismo y he puesto en la CSS la dirección tal y como dices, pero sigue sin funcionar.

        ¿Me puedes decir en qué fichero php tengo que modificar para que funcione correctamente?

      • Hola,

        No es necesario modificar ningún fichero php, sólo tienes que poner la función php que aparece arriba en… Opciones de Mystique > Avanzado > Funciones del usuario.

        Dime exactamente los cambios que has hecho y el problema que tienes para que te pueda ayudar.

        Saludos!

  4. Es posible que al actualizar a la nueva versión 2.3 de Mystique se desconfigure el encabezado del blog si habíamos hecho la modificación para añadir los iconos.

    Me ha pasado en el blog de prueba, aunque misteriosamente se ha solucionado solo con ir a “Opciones de Mystique > Avanzado” y guardar de nuevo la configuración.

  5. Hola, antes que nada un saludo y decirte que tu web esta muy interesante y me ha sido muy util, este articulo me ayudara mucho ya que andaba buscando algo similar.

    Ahora tengo otra duda, yo tambien uso este tema en mi blog y quisiera saber como haces poner en cada comentario la opcion de responder.. ojala y me puedas ayudar me seria de gran ayuda.

    Muchas gracias y un saludo

  6. hola amigos como puedo poner el menu de navegacion de forma centrada le lo agradecere mucho —

  7. ¡¡¡Hola!!! ¿Puedes decirme como hago para cambiar la cuenta de Twitter de la sidebar?

  8. A pesar de poner mi cuenta me sale siempre la de WordPress

    • Prueba a borrar los archivos temporales del navegador.

      También puedes intentar otra cosa:
      1. Ve a la página de configuración de widgets.
      2. Arrastra el widget “Mystique | Twitter” a la barra lateral.
      3. Pon en las opciones de ese widget tu nombre de Twitter.
      4. Arrastra el widget a la zona de widgets inactivos, si no quieres usarlo.

      Por cierto, ¿tienes puestos los iconos por defecto o lo has cambiado siguiendo el tutorial de esta página?

      Si el problema es que no consigues que se guarde ese valor en las opciones de Mystique, también puede ser por un bug de la versión de Mystique que estés usando.

  9. Hola. Lamento comunicarte que el problema no se ha solucionado.

    He añadido el icono de Facebook; quedando así Facebook, Twitter y RSS.

    Utilizo la versión que hay en WordPress.org.

    • Hola,

      Perdona, no leí bien tu primer mensaje.

      Para cambiar la cuenta de Twitter del widget de la sidebar se hace como te he dicho en mi 2º comentario, cambiando el usuario en las opciones del propio widget, no hay otra manera. Si no consigues que se guarden esas opciones… no sé dónde puede estar el problema :S

      Por otro lado, para cambiarlo en el icono de arriba, si has seguido este tutorial, tienes que editarlo a mano en el código, sustituyendo TWITTER_URL por la dirección de tu Twitter.

      Saludos.

  10. Tengo un problema con el jquery.mystique.js
    O me da fallo de support.opacity o me da otro error.
    Ademas no entiendo porque los iconos del faccebook, twitter y rss me salen en Internet Explorer y sin embargo en Firefox no me salen.

  11. Hola, yo mas bien deseo quitar estos dos iconos y ponerlos en otro lado. Puedes decirme como los puedo quitar… Muchas gracias.

    • Hola,

      Prueba añadiendo el siguiente código al CSS del usuario:

      #header p.nav-extra {display:none;}

      • ¿Que hay de lo mio?
        ¿Porque no me aparecen los iconocs del twitter y demas en firefox y si aparecen en internet explorer?
        ¿Y lo del error del opacity? http://www.aquinohayquienviva.es ahi puedes ver los fallos

        • Aqui si veo icono Twitter y RSS, pero el menu se ve vertical muy extraño:
          —————–
          —————–
          —————–
          —————–
          —————–

        • Tu problema no tiene mucho que ver con Mystique ni con este artículo, por lo que no te puedo ayudar.

          Parece que es un error de JavaScript/jQuery, que probablemente vendrá de alguno de los cambios que has hecho en tu blog: cambios en el tema, códigos añadidos, plugins, publicidad, etc.

          Si te fijas, hay varios errores en la barra lateral, alguno con Internet Explorer y otros más con Firefox.

          Os recuerdo que no soy el autor del tema Mystique, sólo he hecho la traducción y pequeños cambios 🙂

      • Si, muy bien, quedo bien. Otra cosa, me gustaria en la pestaña de comentarios, que la pestaña Entradas Relacionadas se muestre primero… Muchas gracias

        • La verdad, no tengo tiempo para estar personalizando otros blogs, lo siento 🙂

          Sólo te puedo decir que pruebes intercambiando las líneas 42 y 44 del archivo “comments.php” de Mystique.

  12. Alguien sabe porque me da este error en el internet exploerer? mystique=jquery_init&ver=2.4.2

    Lo mismo al solucionar ese error se arregla lo de los iconos del firefox, que siguen si aparecerme.

  13. Hola, muchas gracias por el tutorial.

    Quería preguntarte de qué manera se podrían poner los iconos alineadoso a la izquierda de la barra de navegación, es decir, pegados al lado izquierdo del blog.

    Saludos

  14. Buenas amigo, excelente tutorial, me gustaria saber si esto puedo aplicarlo a blogger, y otro problema que tengo es que los Post mas populales no puedo agregarlos en la etiqueta que corresponde, agradeceria su ayuda!

    • Hola,

      Este tutorial no sirve para Blogger, sólo para el tema Mystique de WordPress. Ten en cuenta que lo que estás usando en tu blog es una adaptación del diseño de Mystique para Blogger, creo que no existe una versión “oficial” de Mystique para Blogger.

      En lo segundo no te puedo ayudar, ya que nunca he probado esa versión del tema en Blogger y tampoco he visto nada en cuanto a plantillas en Blogger.

      Saludos!

  15. Muchísimas gracias por este tutorial y en general por todos tus aportes incluyendo la traducción del tema Mystique que es la que actualmente estoy utilizando.

  16. Excelente tu blog me a ayudado e usado tu traduccion ahora este manual para poner los demas iconos sociales me enctan sigue actualizando tu blog compa saludos yea! xD

  17. Hola, primero muchas gracias por el tuto. una cosilla, como se llama el plug-in o como le haces para poner este enlace dentro de un cudro de color.. queda perfecto ese detalle.Gracias.

    “Descarga: 32 iconos sociales”

  18. Hola… muy vacano el aporte… pero no me cogen ninguno de los códigos, especialmente el de funciones del usuario que se resalta en rojo, que cuando le doy guardar me advierte lo siguiente: “Hay uno o más errores sintácticos de PHP en tus funciones personalizadas.”… que estará pasando?? Gracias por tu ayuda!!!

  19. hola ya hice el tuto pero no logro que los iconos queden me pueden ayudar? con el codigo? la web donde lo pongo es…

  20. Me gustaría saber cómo sacarle esos iconos que aparecen con el header del twitter y el RSS para achicar el espacio entre mi imagen personalizada y la barra de menús

  21. Muchas gracias, me ha servido, yo lo había hecho antes de otra forma y me lié mucho con el css hasta que funciono… como lo presentas es mucho más sencillo. También me ha tocado colocarle la uri completa de las imágenes para que funcione.

    Un saludo.

  22. Hola,

    Tengo una duda Sobre Mystique, me estoy calentando al cabeza para lo siguiente.

    Quiero añadir mas widgets a la barra lateral derecha, y dejar el segundo windget el flash que tiene varias cosas, pero no entiendo como, además quiero cambiar la URL del widget de Mystique de Twitter ya que si intento yo recrear sus widgets, no encuentro el segundo widget, que contiene categorias tags etc.

    No se si me he explicado…

  23. Hola, tengo el tema mystique 2.4.2 con vuestra traducción, queria saber si se puede solucionar el problema de los iconos (twitter, facebook, rss etc..) de la barra superior, ya que con IE8 o IE9 no realizan el efecto correctamente.

    Un saludo y buen trabajo!

  24. Bueno me contesto yo solo, si se añade: al head funcionan los iconos con el efecto correcto. Pero hay elementos en la web que pueden llegar a mostrarse mal…seguire buscando.

  25. Tengo un problema con el Feed al validarlo en twitterfeed.com y es que no se autopublican los feed en el tiwtter.

    Al validar la url.
    androider.com/feed
    esta salta el error: Couldn’t parse feed, check your blog or feed URL and try again
    y no me consigue leer ningun feed! alguien sabe que puede ser?

    gracias y felicidades por el trabajo!

  26. hola, gracias por el dato, voy a agregarlo a mi blog!

  27. Sabés si este código funciona en WP 3.2?

  28. Amigo, gracias funcionó perfectamente.

  29. Alejandro Gonzalez

    Yo tengo algo mejor…
    se descargan la ultima version de mystique de digitalnature.eu
    y luego se descargan los iconos de aqui o entran a wordpress/wp-content/mystique/mods/icons/ copian el contenido de la carpeta
    a la carpeta social-media-icons asi mismo con los guiones y los archivos lo pegan ahi luego si quieren mas se descargan los iconos de este post y lo descomprimen y le saldra algo como mystique_icons/ copian todo el contenido de la carpeta recien nombrada a social-media-icons/
    luego suben todo a su sevidor despues le dan los permisos a la carpeta public_html/ escriben en atributos del archivo 777 y luego despues de instalar el wordpress ahi, activan el mystique y luegon entran a aparencia, mystique, iconos de medio sociales.. y lo personalizan a su gusto.
    el servidor recomendado es 000webhost.com y el programa para subir los archivos que use fue el Filezilla Client…
    Creo que solo puede ser usado en hosting no en blogs
    Luego que les ayude el señor google

    • Efectivamente para la versión actual del tema Mystique ya no es necesario seguir el tutorial de esta página.

      Pero en realidad es mucho más fácil añadir nuevos iconos sociales, solo hay que tener activado el módulo Social-Media Icons y subir los nuevos iconos a wp-content/themes/mystique-extend/social-media-icons/. Después activamos los iconos que queramos en Apariencia > Mystique > Iconos de medios sociales y listo 😉

      Por otra parte, no sé para qué necesitas dar permisos 777 al directorio /public_html, pero los administradores deben saber que hacer eso pondría en riesgo la seguridad de todo el sitio web.

  30. Hola, excelente el tuto, pero tengo un problema.
    Cuando voy a Ajustes avanzados de usuarios. Me sale esto.
    “Código definido por el usuario
    Para usar esta función debes tener un tema hijo de Mystique activo, y dar a WordPress permisos de escritura en la carpeta del tema hijo.”

    • Este tutorial ya no es necesario en la versión 3.x de Mystique. Solo tienes que activar el módulo Social-Media Icons en la configuración de Mysitique y configurar los iconos que quieras. Saludos.

      • No me funciona el theme mystique cuando el modulo Social-Media Icons esta activado, al intentar guardar cambios realizados me sale error “Error 324 (net::ERR_EMPTY_RESPONSE):”

  31. y si lo activo, intento guardar cambios, luego veo la pagina, y no aparecen ningunos de los iconos sociales

  32. influira algo en esto el hosting gratuito ?

  33. el error excato es este:

    No se ha recibido ningún dato
    No se puede cargar la página web porque el servidor no ha enviado ningún dato.
    A continuación se detallan algunas sugerencias:
    Vuelve a cargar esta página más tarde.
    Error 324 (net::ERR_EMPTY_RESPONSE): El servidor ha cerrado la conexión sin enviar ningún dato.

  34. Disculpa pero se que no tiene nada que ver pero en el sidebar el widget de twitter se queda cargando y no procesa los tweet, porque pasa eso?

  35. quisiera saber como modificar y agregar cuando el theme (mystique) es para blogger

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *