Cambiar texto por imagen en wordpress

shisanfercas · 22 Feb 2012

Hola, tengo un problema, quizá sea mas simple de lo que parece pero no le encuentro una solución, estoy usando una plantilla llamada Undedicated, como podrán ver en la imagen de allá abajo,

http://www.speckygeek.com/uploads/2011/01/undedicated-wordpress-theme.png <--- Ésta.

donde dice "Share on:" al ladito hay unas palabras que sirven para compartir en redes sociales, estaba tratando de cambiar esas palabras por iconos, he tenido suerte medianamente pero yo era lo que yo esperaba, pues me quedan de esta manera

http://i40.tinypic.com/3483lmv.jpg

Como podrán ver, el icono no está alineado en la linea de "Share on" Si no está arriba, el codigo original es el siguiente:

PHP:

<a href="http://twitter.com/home?status=Currently reading: <?php the_title_attribute(); ?> <?php the_permalink(); ?>"><?php _e('Twitter','undedicated'); ?></a>

Y yo lo cambié por la siguiente:

PHP:

<a href="http://twitter.com/home?status=Currently reading: <?php the_title_attribute(); ?> <?php the_permalink(); ?>"><?php _e('','undedicated'); ?><img src="<?php bloginfo('template_url'); ?>/images/twitter.png"></a>

Existe algún problema con el código? Hay alguna manera de alinearlo a la misma posición del "Share on" Mil gracias.

FernandoSoto · 22 Feb 2012

Este problema es de puro css, mira el css del theme en firefox bajate la extencion firebug y hay vas nirando que esta fallando en el css, o si no dame la direccion y la miro haber que puede ser un saludo.

lumbreras · 23 Feb 2012

Encuentra el DIV con class post-meta y sustituyelo con esto, de <DIV> a </DIV>

INDEX.PHP

Insertar CODE, HTML o PHP:

<div class="post-meta">
				<ul>
					<?php the_tags( __('<li>Tags: ', 'undedicated'), ', ', '</li>'); ?>
					<li><?php _e('Posted in ', 'undedicated'); ?><?php the_category(', ');?> | <?php comments_popup_link( __('Leave your comment', 'undedicated'), __( '1 comment', 'undedicated'), __('% comments', 'undedicated')); ?></li>
					<li class="share"><?php _e('Share on ', 'undedicated'); ?></li>
					<li class="button twitter"><a href="http://twitter.com/home?status=Currently reading: <?php the_title_attribute(); ?> <?php the_permalink(); ?>"><?php _e('Twitter','undedicated'); ?></a></li>
					<li class="button facebook"><a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title_attribute(); ?>"><?php _e('Facebook', 'undedicated'); ?></a></li>
					<li class="button delicious"><a href="http://del.icio.us/post?v=4;url=<?php the_permalink(); ?>"><?php _e('Delicious', 'undedicated'); ?></a></li>
					<li class="button digg"><a href="http://digg.com/submit?url=<?php the_permalink(); ?>"><?php _e('Digg', 'undedicated'); ?></a></li>
					<li class="button reddit"><a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title_attribute(); ?>"><?php _e('Reddit', 'undedicated'); ?></a></li>
					<?php edit_post_link(__('Edit this post','undedicated'), '<li>', '</li>'); ?>
				</ul>
			</div>

SINGLE.PHP

Insertar CODE, HTML o PHP:

<p><ul class="compartir">
					<li class="share"><?php _e('Share on ', 'undedicated'); ?></li>
					<li class="button twitter"><a href="http://twitter.com/home?status=Currently reading: <?php the_title_attribute(); ?> <?php the_permalink(); ?>"><?php _e('Twitter','undedicated'); ?></a></li>
					<li class="button facebook"><a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title_attribute(); ?>"><?php _e('Facebook', 'undedicated'); ?></a></li>
					<li class="button delicious"><a href="http://del.icio.us/post?v=4;url=<?php the_permalink(); ?>"><?php _e('Delicious', 'undedicated'); ?></a></li>
					<li class="button digg"><a href="http://digg.com/submit?url=<?php the_permalink(); ?>"><?php _e('Digg', 'undedicated'); ?></a></li>
					<li class="button reddit"><a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title_attribute(); ?>"><?php _e('Reddit', 'undedicated'); ?></a></li></ul></p>

Agrega esto al final en tu style.css

Insertar CODE, HTML o PHP:

ul.compartir {
	display:block;
	height:5px;
}
li.share {
	float:left;
}
li.button a {
	display:block;
	float:left;
	height:16px;
	width:16px;
	margin-left:5px;
	text-indent:-9999px;
}
li.twitter a {
	background-image: url(images/twitter-2.png);
}
li.facebook a {
	background-image: url(images/facebook.png);
}
li.delicious a {
	background-image: url(images/delicious.png);
}
li.digg a {
	background-image: url(images/digg.png);
}
li.reddit a {
	background-image: url(images/reddit.png);
	margin-right:5px;
}

lo que estas haciendo con esto es modificar en tu INDEX.PHP la parte donde dice SHARE ON, para manejar cada icono con la tag <li></li> que viene de listas, esto es para poder sustituir texto por imagen, pero debes hacerlo de esa forma, modificando el INDEX.PHP y agregando las imagenes con CSS, de otra forma, seria mucho mas problematico, el CSS te funciona tanto para el index.php como para el SINGLE.PHP donde tambien deberas buscar ese pedazo de codigo que sustituiras con lo que te estoy pasando, espero haberme explicado bien, saludos 🙂

Aprende CSS, te servira mucho para modificar tu plantilla

Los iconos que use los encontre en: Enlace eliminado

Cambiar texto por imagen en wordpress

shisanfercas

FernandoSoto

lumbreras

Temas similares