Bueno así tengo jQuery Orbit funcionando.
Seré lo más explícito posible.
Tengo mi blog wordpress alojado en un sub-directorio de esta manera:
http://misitio.com/blog/
y coloqué jQuery Orbit en la raíz del sitio, es decir:
http://misitio.com/
¿Cómo?
Así:
Vamos a http://www.zurb.com/playground/jquery_image_slider_plugin/ y descargamos el KIT
Incluimos en la carpteta /js de nuestro tema de wordpress estos 2 archivos:
jquery-1.5.1.min.js que viene sugerido (aunque lo tengo funcionando con jquery-1.4.1.min.js) y
jquery.orbit-1.2.3.min.js
En la carpeta /css de nuestro tema de wordpress incluimos: orbit-1.2.3.css
Ejemplo:
Index.php de la raiz de mi sitio http://misitio.com/
Código PHP:
Ver original<?php require('./blog/wp-blog-header.php'); ?>
<html>
<head>
<title>Mi página</title>
<!-- Inicio sección HEAD para Orbit-->
<script type="text/javascript" src="blog/wp-content/themes/mitema/js/jquery-1.5.1.min.js" ></script>
<script type="text/javascript" src="blog/wp-content/themes/mitema/js/jquery.orbit-1.2.3.min.js" ></script>
<link rel="stylesheet" href="blog/wp-content/themes/mitema/css/orbit-1.2.3.css">
<!-- Fin sección HEAD para Orbit-->
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
</head>
<body>
<!-- Inicio sección BODY para Orbit -->
<?php include('./blog/wp-content/themes/mitema/orbit.php'); ?>
<!-- Fin sección BODY para Orbit -->
</body>
</html>
En la carpeta de nuestro tema de wordpress: en el archivo functions.php
Código PHP:
Ver original<?php
/************************************************
Soporte para Slider jQuery Orbit para Thumbnails
************************************************/
function nuevo_atributo($html, $post_id, $post_thumbnail_id, $size, $attr){
$atributo = 'data-caption=';
$numeral = '#';
$attr = $atributo . $numeral . get_the_ID();
$html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr );
return $html;
}
add_filter('post_thumbnail_html','nuevo_atributo',10,5);
/*******************************
Soporte de Thumbnails
********************************/
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 600, 200, true );
/*******************************
Ajuste de longitud de extracto de comentarios
********************************/
function home_excerpt_length($length) {
return 27;
}
add_filter('excerpt_length', 'home_excerpt_length');
function cambiar_final_extracto($more) {
return ' [...]<a href="'. get_permalink() .'" rel="nofollow"> Leer más...</a>';
}
add_filter('excerpt_more', 'cambiar_final_extracto');
?>
Nota: La primera función y filtro es la q me permitió incluir el "dichoso" data-caption="#IDdelPost"
Lo segundo es el soporte para thumbnails (miniaturas), que las tengo personalizadas con 600px de ancho y 200px de alto, para hacerlas más vistosas. Lógicamente se pueden hacer más ajustes.
Y lo tercero es el extracto del post.. que está ajustado. Y además el Leer más... con link. Esta ajustado para q se presenten en los captions o descripciones de cada imagen ( thumbnails).
Y este es Orbit.php:
Nota: lo tengo en la carpeta del tema de wordpress.
Código PHP:
Ver original<div id="featured">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
if ( has_post_thumbnail() ) { // comprueba si la entrada tiene una miniatura asignada.
the_post_thumbnail();
}
?>
<!-- Captions for Orbit -->
<span class="orbit-caption" id="<?php the_ID(); ?>" style="color:#F00;">
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
<?php the_excerpt(); ?>
</span>
<?php endwhile;?>
<?php else :?>
<?php endif;?>
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit({
bullets: true,
captions: true, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
});
});
</script>
</div>
Este último es el archivo q llamamos con el <?php include('./blog/wp-content/themes/mitema/orbit.php'); ?> desde index.php en la raíz del sitio.
Bueno básicamente esto es todo lo q tengo para hacer funcionar jQuery Orbit en la raíz de mi sitio. Lo tengo ubicado allí porq es como una ventana a el blog de mi sitio. Lógicamente las thumnails o miniaturas por lo general son pequeñas, yo las tengo de este tamaño por aprovechar el plugin, pero la mayoría conocen que se les puede ajustar los tamaños para diferentes secciones o usos q le queramos dar.
Estoy instalándo en el propio tema de wordpress, pero por cosas de estilos css los captions no me salen xD ¿Que cosas no?
Para instalarlo en el propio wordpress, solo es cuestión de copiar la sección de head del ejemplo e instalarla en el header.php del tema.
Ajustarle las rutas así: <script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/jquery.orbit-1.2.3.min.js" ></script>
E incluir orbit.php donde lo creamos conveniente con <?php include('orbit.php'); ?>
Si tenemos el Api de jQuery cargado en el tema pues no seria necesario volverlo a colocar.
Espero haber sido claro y perdonen si no manejo un nivel técnico como uds, comprendan apenas tengo unos meses en esto del diseño web. Gracias!!! y Comenten please!