votar

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.

Descarga: 32 iconos sociales

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