Integracion Easy Slider en WordPress(TUTO)

Inicio Foros WordPress Themes y Diseño Integracion Easy Slider en WordPress(TUTO)

Este debate contiene 3 respuestas, tiene 2 mensajes y lo actualizó  luchosar hace 8 años, 7 meses.

  • Autor
    Publicaciones
  • #17126

    hugorg2010
    Participante

    <p>Tal vez a alguien le pueda servir integrar este pequeño script slider en su wordpress, es gratis y lo pueden descargar de la pagin de ccglobe , la ultima version es la 1.7 que cuenta con numeracion de los slider y es la que explico como usar.</p>
    <p>una vez que descargaron el archivo, lo descomprimen y trae la carpeta " js" , "images" , "css" y algunos ejemplos que pueden ver. lo unico que vamos a usar es la carpeta "js" la copian a la carpeta del theme que esten usando.</p>
    <p>COPIEN ESTAS LINEAS EN SU HEADER.PHP DENTRO DE LA ETIQUETA HEAD:</p>
    <p>&lt;script type="text/javascript" src="&lt;?php bloginfo(‘template_url’); ?&gt;/javascripts/jquery.js"&gt;&lt;/script&gt;<br />
    &lt;script type="text/javascript" src="&lt;?php bloginfo(‘template_url’); ?&gt;/javascripts/easySlider1.7.js"&gt;&lt;/script&gt;<br />
    &lt;script type="text/javascript"&gt;<br />
    $(document).ready(function(){<br />
    $("#featured").easySlider({<br />
    auto: true,<br />
    continuous: true ,<br />
    numeric: true<br />
    });<br />
    });<br />
    &lt;/script&gt;</p>
    <p>COPIEN ESTAS LINEAS EN SU INDEX.PHP O DONDE QUIERAN MOSTRAR EL SLIDER, RECUERDEN HACERLO DENTRO DEL CONTENEDOR DIV. QUE ENCIERRE EL CONTENIDO DEL POST Y DESPUES DEL LLAMADO AL HEADER</p>
    <p>&lt;div id="slidercontent"&gt;<br />
    &lt;div id="featured"&gt;</p>
    <ul>
    &lt;?php $my_query = new WP_Query(‘category_name=Blog&amp;showposts=4’); ?&gt;<br />
    &lt;?php while ($my_query-&gt;have_posts()) : $my_query-&gt;the_post(); $do_not_duplicate = $post-&gt;ID; ?&gt;</p>
    <li>
    &lt;div id="thumbfeat"&gt;<br />
    &lt;?php the_post_thumbnail( ‘thumbnail’ ); ?&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id="featuredmeta"&gt;<br />
    &lt;h2&gt;<a>" rel="bookmark"&gt;&lt;?php the_title(); ?&gt;</a>&lt;/h2&gt;<br />
    &lt;?php the_excerpt(); ?&gt;<br />
    &lt;/div&gt;
    </li>
    <p> &lt;?php endwhile; ?&gt;
    </ul>
    <p> &lt;/div&gt;<br />
    &lt;/div&gt;</p>
    <p>CAMBIEN EL NOMBRE DE LA CATEGORIA POR EL QUE QUIERAN MOSTRAR Y LA CANTIDAD DE POST A MOSTRAR, DEBEN TENER ACTIVADA LA OPCION DE SOPORTE DE THUMBNAIL ( MINIATURAS ) EN SU THEME .</p>
    <p>COPIEN ESTAS LINEAS EN SU STYLES.CSS</p>
    <p>/* Easy Slider */<br />
    #slidercontent { width: 650px; height:210px; border: 1px solid #cccccc;}<br />
    #featured { width:607px;margin-top: 20px; margin-left:35px;}<br />
    img{border:none;}<br />
    #thumbfeat { float: left; margin-right: 15px; }<br />
    #featuredmeta {width: 580px;margin-right: 15px;}<br />
    /* controles numericos */<br />
    ol#controls{margin:1em 0; margin-left:35px;padding:0;height:28px;}<br />
    ol#controls li{margin:0 10px 0 0; padding:0;float:left;list-style:none;height:28px;line-height:28px;}<br />
    ol#controls li a{float:left;height:28px;line-height:28px;border:1px solid #ccc; background-color:#CCCCCC;color:#555;padding:0 10px;text-decoration:none;}<br />
    ol#controls li.current a{background:#5DC9E1;color:#fff;}<br />
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
    </p>

  • #41063

    luchosar
    Participante

    un ejemplo? Link?

  • #41101

    hugorg2010
    Participante

    entra en [url=http://www.cssglobe.com][/url] ahy tenes el demo y el archivo para descarga. el demo es con imagenes , usando el codigo de arriba podes mostrar post en el slider.

  • #41116

    luchosar
    Participante

    ok, gracias

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest

Ir al contenido