[SOLUCIONADO] Abrir Icono social en otra pestaña

[rosanegra]

Hola. Estoy modificando una web con una plantilla donde los iconos sociales aparecen en la parte superior. Pero al pinchar en ellos, se abren dentro de la misma pestaña.

Estoy acostumbrada a usar html y usar <a href="URL" target="_blank"></a> para que se abra en una pestaña nueva, pero después de haber estado buscando los iconos sociales, he visto que están en style.css y que éste es el código que tienen:

Código:

/* Add Genericons */
#social-icons-menu li a:before { content: '\f408';} /* Default Icon */
#social-icons-menu li a[href*="codepen.io"]:before  { content: '\f216'; }
#social-icons-menu li a[href*="digg.com"]:before { content: '\f221'; }
#social-icons-menu li a[href*="dribbble.com"]:before { content: '\f201'; }
#social-icons-menu li a[href*="facebook.com"]:before { content: '\f204'; }
#social-icons-menu li a[href*="flickr.com"]:before { content: '\f211'; }
#social-icons-menu li a[href*="plus.google.com"]:before { content: '\f218'; }
#social-icons-menu li a[href*="github.com"]:before { content: '\f200'; }
#social-icons-menu li a[href*="instagram.com"]:before { content: '\f215'; }
#social-icons-menu li a[href*="linkedin.com"]:before { content: '\f207'; }
#social-icons-menu li a[href*="pinterest.com"]:before { content: '\f209'; }
#social-icons-menu li a[href*="polldaddy.com"]:before { content: '\f217'; }
#social-icons-menu li a[href*="getpocket.com"]:before { content: '\f224'; }
#social-icons-menu li a[href*="reddit.com"]:before { content: '\f222'; }
#social-icons-menu li a[href*="spotify.com"]:before { content: '\f515'; }
#social-icons-menu li a[href*="skype.com"]:before,
#social-icons-menu li a[href*="skype:"]:before { content: '\f220'; }
#social-icons-menu li a[href*="stumbleupon.com"]:before { content: '\f223'; }
#social-icons-menu li a[href*="tumblr.com"]:before { content: '\f214'; }
#social-icons-menu li a[href*="twitch.tv"]:before { content: '\f516'; }
#social-icons-menu li a[href*="twitter.com"]:before { content: '\f202'; }
#social-icons-menu li a[href*="vimeo.com"]:before  { content: '\f212'; }
#social-icons-menu li a[href*="wordpress.org"]:before,
#social-icons-menu li a[href*="wordpress.com"]:before { content: '\f205'; }
#social-icons-menu li a[href*="youtube.com"]:before { content: '\f213'; }
#social-icons-menu li a[href*="/feed"]:before,
#social-icons-menu li a[href*="/feed/"]:before,
#social-icons-menu li a[href*="?feed=rss2"]:before,
#social-icons-menu li a[href*="feedburner.google.com"]:before,
#social-icons-menu li a[href*="feedburner.com"]:before { content: '\f413'; }

Estoy un poco descolocada. ¿Cómo o qué código meto ahí para que al pinchar se abra el enlace en una pestaña nueva? Gracias.

[xfxstudios]

y como aparece tu html???

[rosanegra]

No te entendí.

Quizás no me he expresado bien.

En la página están los iconos sociales arriba, pero al pinchar en ellos, se abre en la misma página.

Estuve mirando en todos los archivos del Editor de Wordpress, y encontré ese código que he puesto en el archivo style.css, pero no sé qué código poner y exactamente dónde para que se abran en una pestaña nueva.

[xfxstudios]

si te entendi, eso solo te esta colocando el icono antes de la url, es decir algo asi [icono][Enlace] y el enlace que se muestra es para que el css identifique donde exactamente va el icono, payq e facebook por ejemplo no tenga el de twitter, lo enlaces deben estar en tu pagina o en algun controlador, eso es lo que quiero ver para poder ayudarte, mira este ejemplo:

Código HTML:

<style>
#stilo li a[href*="http://google.com"]:before { content: 'Hola '; }
#stilo li a[href*="http://facebook.com"]:before { content: 'Nuevo '; }
</style>
<ul id="stilo">
<li><a href="http://google.com" target="_blank">Google</a></li>
<li><a href="http://facebook.com" target="_blank">Facebook</a></li>
</ul>
 

Alli le estoy colocando antes del enlace (incluido en el) las palabras Hola y Nuevo a google y facebook respectivamente, o dame la url del sitio para ver

[rosanegra]

La página es: orgulloamarillo.hol.es

[xfxstudios]

es un Wordpress primero verifica que no tenga un plugin que controle esto, en caso de que no, busca en la plantilla que este usando la header.php si mal no recuerdo y alli busca este div <div id="header-social-icons" class="social-icons-wrap clearfix"> prueba y me avisas

[siddartha23]

Selecciona con jquery todos los enlaces que estan dentro de #social-icons-menu y añádeles un atributo target _blank.

Listo...

[xfxstudios]

prueba colocando esto en tu header:

Código Javascript:

$(document).ready(function() {
    $('#social-icons-menu li a').attr('target', '_blank'); 
});
 

[rosanegra]

xfxstudios. Colocando el código Javascrip en el header no hace nada.

Los plugins que hay son: Akismet, Clef, Hello Dolly y Limitador de intentos de login. El único que está activo es el último: Limitador de intentos de login.

Seguro que es un león y me come... lo que hay en header.php es todo este código y no veo nada de los iconos.

Código:

<!DOCTYPE html><!-- HTML 5 -->
<html <?php language_attributes(); ?>>

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php /* Embeds HTML5shiv to support HTML5 elements in older IE versions plus CSS Backgrounds */ ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.min.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<?php // Get Theme Options from Database
	$theme_options = courage_theme_options();
?>

<div id="wrapper" class="hfeed">
	
	<div id="header-wrap">
	
		<header id="header" class="clearfix" role="banner">

			<div id="logo" class="clearfix">
			
			<?php do_action('courage_site_title'); ?>

			<?php // Display Tagline on header if activated
			if ( isset($theme_options['header_tagline']) and $theme_options['header_tagline'] == true ) : ?>			
				<h2 class="site-description"><?php echo bloginfo('description'); ?></h2>
			<?php endif; ?>
			
			</div>
			
			<div id="header-content" class="clearfix">
				<?php get_template_part('inc/header-content'); ?>
			</div>

		</header>
	
	</div>
	
	<nav id="mainnav" class="clearfix" role="navigation">
		<?php 
		// Display Main Navigation
		wp_nav_menu( array(
			'theme_location' => 'primary', 
			'container' => false, 
			'menu_id' => 'mainnav-menu', 
			'echo' => true, 
			'fallback_cb' => 'courage_default_menu')
		);
	?>
	</nav>
	
	<?php // Display Custom Header Image
		courage_display_custom_header(); ?>

[rosanegra]

No sé si se podrá añadir algo en este código...

Código:

#social-icons-menu {
	list-style-type: none;
	list-style-position: outside;
	line-height: 1em;
}
#social-icons-menu li {
	float: left;
	margin: 0 0.2em 0.2em 0;
	padding: 0;
}
#social-icons-menu li a {
	position: relative;
	display: inline-block;
	padding: 0.9em;
	background: #252525;
	text-decoration: none;
	color: #fff;
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	border-radius: 0.4em;
	transition: all 0.3s ease;
}
#social-icons-menu li a:before {
	color: #fff;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px/1;
	line-height: 1;
	font-family: 'Genericons';
	text-decoration: inherit;
	vertical-align: top;
}

[rosanegra]

Bueno, al final la solución estaba facilísima y no había que modificar nada del código.

Tan sólo tenía que haber ido a Apariencia > Menús > Opciones de Pantalla (arriba a la derecha) > marcar Destino del Enlace

Y ahí ya sale en todos los menús en cada elemento una casilla a marcar que pone "Abrir enlace en una nueva ventana/pestaña".

Lo pongo aquí en imagen por si a alguien le pasa lo mismo que a mí y le puede servir de ayuda.

Muchas gracias por las molestias.

http://imgur.com/O1qnI8d