Hola a todos, intentaré ir al grano. Muchas gracias por su tiempo de antemano.
Estoy intentando algo que consigo sin dificultad en una página web normal pero que en WP me está dando problemas.
Simplemente quiero crear una serie de pestañas que al pulsar me muestren el contenido de un div en concreto, ocultando el resto, mediante Jquery.
Dudas:
1. He leido que WP ya viene con el jquery instalado, pero no se si está activo por defecto. Yo, por si acaso he añadido esta linea al header.php de mi template:
Código:
<script src="/wordpress/wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
2. No se muy bien donde hacer la llamada a la función, ni si la estoy haciendo bien. En mi post tengo este código por un lado:
Código:
<ul class="tabs">
<li class="active"><a href="#tab1">Home</a></li>
<li><a href="#tab2">Galería</a></li>
<li><a href="#tab3">Contacto</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Contenido 1
</div>
<div id="tab2" class="tab_content" style="display:none;">
Contenido2
</div>
<div id="tab3" class="tab_content" style="display:none;">
Contenido3
</div>
</div>
Y también he añadido el script en el mismo post (no se si es correcto). Así:
Código:
<script type="text/javascript">
$(document).ready(function()
{
$("ul.tabs li").click(function() //cada vez que se hace click en un li
{
$("ul.tabs li").removeClass("active"); //removemos clase active de todos
$(this).addClass("active"); //añadimos a la actual la clase active
$(".tab_content").hide(); //escondemos todo el contenido
var content = $(this).find("a").attr("href"); //obtenemos atributo href del link
$(content).fadeIn(); // mostramos el contenido
return false; //devolvemos false para el evento click
});
});
</script>
3. He estado leyendo también sobre ciertas funciones que tiene WP para utilizar correctamente cualquier script. Esta:
Y dicen que para usarlo habría que hacer algo así, entiendo que en el post de WP es donde hay que añadirlo:
Código:
function mi_inicio() {
if (!is_admin()) {
wp_enqueue_script('jquery');
}
}
add_action('init', 'mi_inicio');
Pero aquí ya me lio un poco porque no soy muy bueno con JS, ya que me muestra el contenido de la primera pestaña pero al presionar las otras dos, no ocurre nada. No se si hay algún tipo de conflicto o que no estoy colocando el código en el lugar adecuado.
Para que se hagan una idea más gráfica de lo que busco, les dejo este enlace que, aunque no está enfocado a su uso en WP, servirá para explicarles mejor lo que quiero hacer.
http://masquewordpress.com/ejemplos/tabs-en-jquery/
Si me pudieran echar una mano con este asunto, les estaría muy agradecido.
Les agradezco de antemano su tiempo,
Un saludo