Web/Wordpress

Nivo Slider para WordPress

Sin saber nada de nada, me puse a trabajar la página de Coraje Records, el sello de mi banda, y lo estoy haciendo en WordPress. Me he topado con un millón de cosas que desconocía y he estado a punto de ponerme a llorar muchas veces, pero lentamente aparecen soluciones y tutoriales de gente bondadosa que nos ayuda a no tirar el computador por la ventana. En fin. Quería ir subiendo acá todos mis avances, pero se me ocurrió hace muy poco hacer este blog. De todas formas iré compartiendo todos los tutoriales que me han ayudado a no morir.

Como bien dije, la página de Coraje Records la estoy desarrollando en WordPress usando una plantilla prediseñada en su versión gratuita, su nombre es Hero. Acá está la página del theme: http://demos.antthemes.com/hero/.

1. Conseguir que el slideshow (Nivo Slider) que instalé en el Home, muestre los últimos posts de la categoría que yo quiera (OJO, no tenglo el plugin instalado).

Dentro de los plugins que trae la plantilla está el Nivo Slider, un slideshow escrito en JQuery bastante amigable. Lo único malo es que la versión gratuita del theme Hero, no trae el plugin incorporado, por lo que no pude asociarlo a mis categorías, ni modificarlo a mi gusto fácilmente. De hecho, para cambiar el contenido y las fotografías o slides que quisiera mostrar, habría tenido que hacerlo desde el html de la front page. Una lata. Además, quiero que el slideshow muestre los posts de una categoría que cree llamada “Destacados”.

Entonces lo primero que tienes que hacer es crear una categoría que te gustaría exhibir en el slideshow, y asociar algunos posts a ella.

Luego, revisa este artículo de chicablogger.com: http://chicablogger.com/incorporar-nivo-slider-en-wordpress/. Ahí podrás encontrar paso a paso la forma de incorporar Nivo Slider a WordPress sin necesidad de instalar el plugin. Lo más interesante de esto, es que puedes definir en la css el tamaño de las slides, y en cada post puedes adjuntarlas por medio de un campo personalizado.

Finalmente, el la sintaxis del slideshow  me quedó así:

<!--slideshow-->
    
    <divid="slider"class="nivoSlider">

<?php$my_query=new WP_Query('showposts=5&category_name=destacados');while($my_query->have_posts()):$my_query->the_post();?>
 <ahref="<?php the_permalink()?>"title="<?php the_title();?>">
 <imgsrc="<?phpecho get_post_meta($post->ID,'nivoimage',true);?>"alt=""title="<?php the_title();?>"/>
 </a>
 <?phpendwhile;?>

        
    </div> <!--slideshow end-->

Y conseguí que el slideshow mostrara los últimos posts de la categoría que a mí se me ocurrió.

2. Conseguir que Nivo Slider muestre el título de los posts y las captions o texto.

Hasta este punto, la nueva sintaxis que incorporé a la front page fue todo un éxito. Sin embargo, solo mostraba el título del post. ¿Pero, qué pasa con las captions? Personalmente, me interesaba agregar un pequeño texto para invitar a mis visitas a leer mis destacados. El artículo de Chicablogger.com, me sugirió visitar el siguiente tutorial en inglés: http://return-true.com/2011/02/using-nivo-slider-in-wordpress-with-custom-captions/. En él, muestra tres formas de conseguirle, dependiendo de lo que se necesite. En mi caso, me dirigí inmediatamente al punto Custom Captions: Post Title & Post Excerpt, esto es, personalizar mis captions usando el título del post y el extracto.

Copié la sintaxis, pero al hacerlo perdí la propiedad de adjuntar la slide por medio de un campo personalizado. Y como eso me interesa sobremanera, combiné los códigos como pude y me quedó así:

<!--slideshow-->
    
    <divid="slider"class="nivoSlider">
<?php
$captions=array();
$tmp=$wp_query;
$wp_query=new WP_Query('posts_per_page=5&category_name=destacados');
if($wp_query->have_posts()):
    while($wp_query->have_posts()):
        $wp_query->the_post();
        $captions[]='<h3>'.get_the_title($post->ID).'</h3><p>'.get_the_excerpt().'</p>';
        $image= wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),'nivothumb');
?>
            <ahref="<?php the_permalink();?> title="<?php the_title();?>"><img src="<?phpecho get_post_meta($post->ID,'nivoimage',true);?>"  title="#caption<?phpechocount($captions)-1;?>" alt="<?php the_title_attribute();?>" /></a>
<?php
    endwhile;
endif;
$wp_query=$tmp;
?>
</div><!-- close #slider -->
<?php
foreach($captionsas$key=>$caption):
?>
<div id="caption<?phpecho$key;?>" class="nivo-html-caption">
    <?phpecho$caption;?>
</div>
<?php
endforeach;
?>
 <!--slideshow end-->

 

Puede que me haya quedado medio extraño, pero al menos funciona y soy feliz.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s