En este post explicaré cómo añadir iconos de diferentes redes sociales al tema Mystique en la versión 2.4.2. El theme trae dos iconos, uno de RSS y otro de Twitter. Podemos mantenerlos y añadir más, o simplemente cambiarlos por otros, como por ejemplo Facebook, LinkedIn, del.icio.us o last.fm.

Lo primero que tenemos que hacer es subir los .png del pack de iconos de redes sociales a la carpeta /wp-content/uploads/mystique_icons (esta última habrá que crearla).

Después vamos en nuestro panel de control de WordPress a Apariencia > Opciones de Mystique > CSS del usuario y añadimos el siguiente código al cuadro que aparece:

/* Extra navigation icons */
#header a.nav-extra.rss{background:url(“/wp-content/uploads/mystique_icons/nav-rss.png”) no-repeat scroll right top transparent}
#header a.twitter{background:url(“/wp-content/uploads/mystique_icons/nav-twitter.png”) no-repeat scroll right top transparent}
#header a.delicious{background:url(“/wp-content/uploads/mystique_icons/nav-delicious.png”) no-repeat scroll right top transparent}

Si queremos que sobresalga un poco más que los originales (como están en este blog) añadimos el siguiente código justo debajo del anterior:

#header p.nav-extra {top:-46px;height:54px;}
#header a.nav-extra {height:60px;}

Ahora clickamos en Guardar cambios y vamos a la pestaña Avanzado y abajo a Funciones del usuario.
Aquí añadimos el siguiente código:

function mystique_custom_nav_icons($nav_extra)
{
$nav_extra = ‘<a href=”LINK_TWITTER” target=”_blank” class=”nav-extra twitter” title=”Sígueme en Twitter”><span>Sígueme en Twitter</span></a>’;
$nav_extra .= ‘<a href=”‘.get_bloginfo(‘rss2_url’).’” target=”_blank” class=”nav-extra rss” title=”Feed RSS”><span>Feed RSS</span></a>’;
$nav_extra .= ‘<a href=”LINK_DELICIOUS” target=”_blank” class=”nav-extra delicious” title=”del.icio.us”><span>del.icio.us</span></a>’;

return $nav_extra;
}

add_action(‘mystique_navigation_extra’, ‘mystique_custom_nav_icons’);

Siempre sin borrar el <?php que trae por defecto. Además, tenemos que cambiar LINK_TWITTER y LINK_DELICIOUS por los enlaces de nuesra web a esas redes sociales.

Personalización:

Ahora si queremos añadir otros iconos o cambiar el orden tenemos que seguir los siguientes pasos.
Para añadir otro ícono simplemente pegamos un código como este seguido del anterior de la misma forma en Funciones del usuario:

$nav_extra .= ‘<a href=”LINK_RED” target=”_blank” class=”nav-extra NOMBRE_RED” title=”RED”><span>RED</span></a>’;

cambiando LINK_RED por el enlace a a red social, RED por el título del enlace y NOMBRE_RED por el nombre de la red social.

IMPORTANTE: el orden en que pongamos estos códigos, será el orden que saldrán de izquierda a derecha. Además el primero empezará con $nav_extra = y todos los siguientes con $nav_extra .=, es decir el primero con = y los siguientes .= seguidos del resto de código.

Por último en la pestaña de CSS del usuario también tendremos que agregar nuevos iconos de la forma:

#header a.nav-NOMBRE_RED{background:url(“/wp-content/uploads/mystique_icons/nav-NOMBRE_RED.png”) no-repeat scroll right top transparent}

Cambiamos NOMBRE_RED por el nombre de la red social. IMPORTANTE: tiene que ser el mismo nombre que el que pusimos en el otro código, además hay que comprobar que el ícono .png tenga el nombre nav-NOMBRE_RED.png, sino lo cambiamos.

Siguiendo estos pasos tendremos nuestros iconos de redes sociales añadidos perfectamente a nuestro WordPress con el theme Mystique 2.4.2.

[ad] Bloque de anuncio vacío (#3)!

Descargas

Pack de iconos de redes sociales.

Fuente | nGeeks.com