Mostrar pestañas con Jquery

[carlos2]

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:

Código:

wp_enqueue_script()

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

[zanguanga]

me muestra el contenido de la primera pestaña pero al presionar las otras dos, no ocurre nada

¿no será porque tienes style="display:none;"?

[Nekko]

Dejá la url si podés, así lo vemos en vivo. Otra cosa, para incluir jQuery yo lo hago así:

Código PHP:

function my_init_method() {
    if (!is_admin()) {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', '/wp-content/themes/tutheme/scripts/jquery-1.7.1.min.js');
        wp_enqueue_script( 'jquery' );
    }
}    
add_action('init', 'my_init_method');
 

[carlos2]

Hola Zanguanga, hola Nekko... muchas gracias por vuestra respuesta.

Zanguanga, si no pongo style="display:none;" me mostraría el contenido de todos los divs nada más cargar la página y yo lo que necesito es mostrarlo cuando hago clic en las pestañas.

Nekko, lo tengo todo en local por el momento, así que no tengo ninguna url propia que os pueda pasar, lo siento mucho. Ahora mismo tengo el blog muy básico, con un par de post y poco más. El problema es que no acabo de entender muy bien como funciona el tema de jquery y WP, y por más que leo por ahí, me hago un poco de lio.

El código que me pasas, por ejemplo, donde hay que colocarlo? en el header.php, en functions.php, en el post??

Me ayudaría mucho si me dijeras como lo harías tú, aunque no me pases el código... sólo donde va cada cosa y lo que tengo que tener en cuenta para hacerlo funcionar.

Un millón de gracias de nuevo!

Un saludo a los dos!

[carlos2]

Estoy haciendo pruebas con lo que me comentas Nekko, pero no consigo hacerlo andar...

En el header.php he colocado esto:

Código:

<script type="text/javascript">
	function my_init_method() {
    if (!is_admin()) {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', '/wordpress/wp-includes/js/jquery/jquery.js');
        wp_enqueue_script( 'jquery' );
    }
}    
add_action('init', 'my_init_method');
</script>

Y en la entrada o post, tengo esto...

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>

<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>

La página carga bien las pestañas pero a la hora de hacer clic en ellas... no me hace ni caso. Cualquier ayuda será más que bienvenida. Si no queréis darme el código tal cual y me pasáis algún sitio donde hable de esto, también me vendría bien... los que yo he encontrado no me han ayudado mucho, posiblemente por los bruto que soy XD

Gracias de nuevo y perdonad por ser tan pesado!

[Nekko]

En functions.php coloco la llamada al jQuery que yo le quiero cargar desde mi theme. Si lo llamás de este modo, deberías borrar la línea de llamada al archivo que añadís en el header.

[carlos2]

Muchas gracias, Nekko.... ya lo he resuelto.. y todo con tu ayuda!! De verdad que muchas gracias.... voy a dejar aquí el resultado final, por si a alguien le puede ayudar en el futuro...

Por un lado tengo el HTML, con el contenido, añadido en el post. Así

Código:

<div id="contenido_pestanas">
    <ul>
        <li><a href="#opcion1" title="Opción 1">Opción 1 &raquo;</a></li>
        <li><a href="#opcion2" title="Opción 2">Opción 2 &raquo;</a></li>
        <li><a href="#opcion3" title="Opción 3">Opción 3 &raquo;</a></li>
        <li><a href="#opcion4" title="Opción 4">Opción 4 &raquo;</a></li>
    </ul>

    <div id="opcion1">
        <h3>Este es el contenido de la Opci&oacute;n 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</p>
    </div>
    <div id="opcion2">
        <h3>Este es el contenido de la Opci&oacute;n 2</h3>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div id="opcion3">
        <h3>Este es el contenido de la Opci&oacute;n 3</h3>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="opcion4">
        <h3>Este es el contenido de la Opci&oacute;n 4</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

Por otro lado cargo el jquery. Lo hago desde la página functions.php. No es necesario poner la etiqueta <script>. Lo tengo así:

Código:

function mi_inicio() {
	if (!is_admin()) {
		// comment out the next two lines to load the local copy of jQuery
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'mi_inicio');

Y por último la función necesaria para mostrar y ocultar el contenido de las pestañas. Esto lo tengo puesto en la página footer.php, justo antes de la etiqueta </body>. Aquí sí es necesario poner la etiqueta <script>. Lo tengo así puesto:

Código:

<script  type="text/javascript">
    (function($) {
        $(document).ready(function(){ // Script del menú con pestañas
        $('#contenido_pestanas div').css('position', 'absolute').not(':first').hide();
        $('#contenido_pestanas ul li:first a').addClass('aqui');
        $('#contenido_pestanas a').click(function(){
           $('#contenido_pestanas a').removeClass('aqui');
           $(this).addClass('aqui');
           $('#contenido_pestanas div').fadeOut(350).filter(this.hash).fadeIn(350);
           return false;
 
         });
       });
    })(jQuery);
</script>

Y con esto todo funciona perfectamente. No se si hay alguna forma mejor de hacerlo, pero a mi me funciona así. Creo que el problema lo estaba teniendo a la hora de ubicar los códigos en los sitios adecuados, sobre todo el que carga el jquery. Muchas gracias a Nekko por su ayuda! Espero que esto le sirva a alguien en el futuro!

Un saludo a todos!