<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tech Zone &#187; wp</title>
	<atom:link href="http://www.tech-zoneblog.eu/tag/wp/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tech-zoneblog.eu</link>
	<description>Blog de tecnología y multimedia</description>
	<lastBuildDate>Wed, 12 Sep 2012 13:48:34 +0000</lastBuildDate>
	<language>es-ES</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>Tutorial: Iconos de redes sociales en el tema Mystique</title>
		<link>http://www.tech-zoneblog.eu/2010/07/tutorial-iconos-de-redes-sociales-en-el-tema-mystique/</link>
		<comments>http://www.tech-zoneblog.eu/2010/07/tutorial-iconos-de-redes-sociales-en-el-tema-mystique/#comments</comments>
		<pubDate>Wed, 14 Jul 2010 11:53:48 +0000</pubDate>
		<dc:creator>Fede</dc:creator>
				<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[fb]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[iconos]]></category>
		<category><![CDATA[mystique]]></category>
		<category><![CDATA[rss]]></category>
		<category><![CDATA[tema]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[wp]]></category>

		<guid isPermaLink="false">http://www.tech-zoneblog.eu/?p=99</guid>
		<description><![CDATA[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&#8230;]]></description>
				<content:encoded><![CDATA[<p>En este post explicaré cómo añadir <em>iconos de diferentes redes sociales</em> al tema <strong>Mystique</strong> en la versión <strong>2.4.2</strong>. 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 <strong>Facebook</strong>, <strong>LinkedIn</strong>, <strong>del.icio.us</strong> o <strong>last.fm</strong>.</p>
<p><a href="http://www.tech-zoneblog.eu/wp-content/uploads/2010/07/nav-picasa.png"><img class="size-full wp-image-260 alignnone" title="nav-picasa" src="http://www.tech-zoneblog.eu/wp-content/uploads/2010/07/nav-picasa.png" alt="" width="64" height="64" /></a><a href="http://www.tech-zoneblog.eu/wp-content/uploads/2010/07/nav-facebook.png"><img class="size-full wp-image-259 alignnone" title="nav-facebook" src="http://www.tech-zoneblog.eu/wp-content/uploads/2010/07/nav-facebook.png" alt="" width="64" height="64" /></a><a href="http://www.tech-zoneblog.eu/wp-content/uploads/2010/07/nav-lastfm.png"><img class="alignnone size-full wp-image-261" title="nav-lastfm" src="http://www.tech-zoneblog.eu/wp-content/uploads/2010/07/nav-lastfm.png" alt="" width="64" height="64" /></a></p>
<p>Lo primero que tenemos que hacer es subir los .png del <em>pack de iconos de redes sociales</em> a la carpeta <strong>/wp-content/uploads/mystique_icons</strong> (esta última habrá que crearla).<br />
<span id="more-99"></span><br />
Después vamos en nuestro panel de control de WordPress a <strong>Apariencia &gt; Opciones de Mystique &gt; CSS del usuario</strong> y añadimos el siguiente código al cuadro que aparece:</p>
<blockquote><p><span style="color: #0000ff;"><strong>/* Extra navigation icons */<br />
#header a.nav-extra.rss{background:url(&#8220;/wp-content/uploads/mystique_icons/nav-rss.png&#8221;) no-repeat scroll right top transparent}<br />
#header  a.twitter{background:url(&#8220;/wp-content/uploads/mystique_icons/nav-twitter.png&#8221;) no-repeat scroll right top transparent}<br />
#header  a.delicious{background:url(&#8220;/wp-content/uploads/mystique_icons/nav-delicious.png&#8221;) no-repeat scroll right top transparent}</strong></span></p></blockquote>
<p>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:</p>
<blockquote><p><span style="color: #0000ff;"><strong>#header p.nav-extra {top:-46px;height:54px;}<br />
#header a.nav-extra {height:60px;}</strong></span></p></blockquote>
<p>Ahora clickamos en <strong>Guardar cambios</strong> y vamos a la pestaña <strong>Avanzado</strong> y abajo a <strong>Funciones del usuario</strong>.<br />
Aquí añadimos el siguiente código:</p>
<blockquote><p><span style="color: #0000ff;"><strong>function mystique_custom_nav_icons($nav_extra)<br />
{<br />
$nav_extra = &#8216;&lt;a  href=&#8221;LINK_TWITTER&#8221; target=&#8221;_blank&#8221; class=&#8221;nav-extra twitter&#8221; title=&#8221;Sígueme en Twitter&#8221;&gt;&lt;span&gt;Sígueme en  Twitter&lt;/span&gt;&lt;/a&gt;&#8217;;<br />
$nav_extra .= &#8216;&lt;a  href=&#8221;&#8216;.get_bloginfo(&#8216;rss2_url&#8217;).&#8217;&#8221; target=&#8221;_blank&#8221; class=&#8221;nav-extra rss&#8221; title=&#8221;Feed RSS&#8221;&gt;&lt;span&gt;Feed RSS&lt;/span&gt;&lt;/a&gt;&#8217;;<br />
$nav_extra .= &#8216;&lt;a  href=&#8221;LINK_DELICIOUS&#8221;  target=&#8221;_blank&#8221; class=&#8221;nav-extra delicious&#8221;  title=&#8221;del.icio.us&#8221;&gt;&lt;span&gt;del.icio.us&lt;/span&gt;&lt;/a&gt;&#8217;;</strong></span></p>
<p><span style="color: #0000ff;"><strong>return $nav_extra;<br />
}</strong></span></p>
<p><span style="color: #0000ff;"><strong>add_action(&#8216;mystique_navigation_extra&#8217;, &#8216;mystique_custom_nav_icons&#8217;);</strong></span></p></blockquote>
<p>Siempre <strong>sin borrar</strong> el <span style="color: #0000ff;"><em><strong>&lt;?php</strong></em></span> que trae por defecto. Además, tenemos que cambiar LINK_TWITTER y LINK_DELICIOUS por los enlaces de nuesra web a esas redes sociales.</p>
<h3><strong>Personalización:</strong></h3>
<p>Ahora si queremos añadir otros iconos o cambiar el orden tenemos que seguir los siguientes pasos.<br />
Para añadir otro ícono simplemente pegamos un código como este seguido del anterior de la misma forma en <strong>Funciones del usuario</strong>:</p>
<blockquote><p><span style="color: #0000ff;"><strong>$nav_extra .= &#8216;&lt;a   href=&#8221;LINK_RED&#8221;   target=&#8221;_blank&#8221; class=&#8221;nav-extra NOMBRE_RED&#8221;   title=&#8221;RED&#8221;&gt;&lt;span&gt;RED&lt;/span&gt;&lt;/a&gt;&#8217;;</strong></span></p></blockquote>
<p>cambiando LINK_RED por el <em>enlace a a red social</em>, RED por el <em>título del enlace</em> y NOMBRE_RED por el <em>nombre de la red social</em>.</p>
<p><strong>IMPORTANTE:</strong> el orden en que pongamos estos códigos, será el orden que saldrán de izquierda a derecha. Además el primero empezará con <em>$nav_extra =</em> y todos los siguientes con <em>$nav_extra .=</em>, es decir el primero con <em>=</em> y los siguientes <em>.=</em> seguidos del resto de código.</p>
<p>Por último en la pestaña de CSS del usuario también tendremos que agregar nuevos iconos de la forma:</p>
<blockquote><p><span style="color: #0000ff;"><strong>#header  a.nav-NOMBRE_RED{background:url(&#8220;/wp-content/uploads/mystique_icons/nav-NOMBRE_RED.png&#8221;)  no-repeat scroll right top transparent}</strong></span></p></blockquote>
<p>Cambiamos NOMBRE_RED por el nombre de la red social.<strong> IMPORTANTE: </strong>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 <em>nav-NOMBRE_RED.png</em>, sino lo cambiamos.</p>
<p>Siguiendo estos pasos tendremos nuestros <strong>iconos de redes sociales</strong> añadidos perfectamente a nuestro WordPress con el <strong>theme Mystique 2.4.2</strong>.<br />
<code><p class="error"><strong>[ad]</strong> Bloque de anuncio vacío (#3)!</p></code></p>
<blockquote>
<h3><strong>Descargas</strong></h3>
<p><a href="http://www.tech-zoneblog.eu/pack-de-iconos-de-redes-sociales/"><span style="font-style: normal;">Pack de iconos de redes sociales</span></a><span style="font-style: normal;">.</span></p></blockquote>
<p>Fuente | <a href="http://www.ngeeks.com/2010/04/12/anadir-iconos-sociales-al-tema-mystique/">nGeeks.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tech-zoneblog.eu/2010/07/tutorial-iconos-de-redes-sociales-en-el-tema-mystique/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
