Share
Tener un carrusel de publicaciones recientes en tu blog es una excelente manera de hacerlo más interactivo para tus visitantes.
Hace poco, un cliente me pidió que creara un carrusel de publicaciones recientes para su sitio web. Dije que sí, seguro, pensando que debe haber algún tipo de complemento que pueda encontrar para hacer eso realmente rápido. Chico estaba equivocado Pasé mucho tiempo tratando de encontrar uno y los que encontré no hicieron lo que quería en absoluto. Pensé, con todo este tiempo perdiendo, solo haré uno. Sólo tengo que encontrar un buen código base. Entonces fue cuando me topé. carouFredSel. Aquí está el enlace: http://caroufredsel.frebsite.nl/. Me encantaron sus ejemplos y aunque todavía no hacía todo lo que quería, como mostrar un título debajo de la imagen, la funcionalidad era exactamente lo que necesitaba. Tan larga historia corta, aquí están los detalles..
Bien, comencemos yendo a http://caroufredsel.frebsite.nl/ y descargando el código del carrusel y copiando el jquery.carouFredSel-5.5.0-packed.js archivo a su carpeta de tema de WordPress.
A continuación, abre tu funciones.php archiva y añade este pedacito de código:
Accentsconagua
if (function_exists ('add_image_size')) add_image_size ('sliderimg', 200, 150, true); Asegúrese de reemplazar el 200 y 150 Con tus propias dimensiones. Guárdalo y sube el archivo. Después de subirlo, en la barra lateral de tu publicación verás una nueva opción titulada "Foto principal". Puede cargar cualquier imagen que desee usar aquí y esta será la imagen que se mostrará en el carrusel. También tenga en cuenta que lo estamos llamando"control deslizante". Te diré por qué pronto.
Hacer un nuevo archivo de JavaScript llamado wptuts-caroufredsel.js y coloque el siguiente código dentro, luego cópielo en su carpeta de temas de WordPress:
jQuery (function ($) $ ('# foo2'). carouFredSel (prev: '# prev2', siguiente: '# next2', auto: false, elementos: 3,);); Aquí hay algo más para tomar nota de más adelante.. # foo2 - Esta será la identificación del carrusel que usaremos. Necesitaremos esto para poder diseñarlo en CSS. También tenga en cuenta el # prev2 y # next2 ID para diseñar los botones anterior y siguiente y, por último, el número 3 es la cantidad de elementos que desea mostrar a la vez. En este caso es 3.
Ahora, abre tu funciones.php Archivo nuevamente y agregue el siguiente código para cargar los archivos JavaScript:
function wptuts_load_caroufredsel () // Encolar carouFredSel, tenga en cuenta que especificamos 'jquery' como una dependencia, y establecemos 'true' para cargar en el pie de página: wp_register_script ('caroufredsel', get_template_directory_uri (). '/js/jquter.com -5.5.0-packed.js ', array (' jquery '),' 5.5.0 ', true); // Para un plugin o un tema, puedes poner en cola el script: wp_enqueue_script ('wptuts-caroufredsel', get_template_directory_uri (). '/Js/wptuts-caroufredsel.js', array ('caroufredsel'), ", true ); add_action ('wp_enqueue_scripts', 'wptuts_load_caroufredsel'); Asegúrate de cambiar las rutas a donde sea que estén tus archivos JavaScript.
Ahora abramos la plantilla de página en la que desea que se muestre el carrusel. Una vez que lo abra, donde quiera que aparezca el carrusel, pegue este código a continuación:
consulta ('showposts = 12'); ?> have_posts ()): $ carouselPosts-> the_post (); ?>
prev siguiente- "title ="">
"rel =" bookmark "title =" Enlace permanente a ">
Ahora déjame explicarte antes de que te vuelvas loco. La primera parte del bloque de código es el nombre de la clase (para el estilo, por supuesto) lo llamo list_carousel. A continuación verás que # foo2 Identificación de la que te hablé antes. La siguiente es la consulta para los mensajes:
Le digo que saque los últimos 12 mensajes. De esa manera, como le dije antes que mostrara 3 a la vez, puede mostrar 4 series de 3 publicaciones. Pero digamos que quieres ser un poco más específico y solo mostrar publicaciones de una determinada categoría. Entonces usarías este código en lugar de showposts código de arriba:
¿Qué pasa con las etiquetas que dices? Pues aquí tienes:
Cambio "destacado"a la etiqueta que quieras usar. También estoy llamando a 12 publicaciones y las enumero en orden ascendente.
Confundido ya? Espero que no. Ok, el siguiente en el bloque principal de código de arriba estoy tirando "control deslizante"La imagen destacada de la publicación y también la vincula a la publicación real, por lo que, por supuesto, cuando la gente haga clic en la imagen, se dirigirá a la publicación en sí..
"title ="">
En el caso de mi cliente, no solo querían mostrar una imagen en el carrusel, sino que también querían mostrar el título de la publicación. Así que debajo de la imagen estamos mostrando el título de la publicación, haciendo que se vincule también a la publicación, y asignándole una clase llamada "slidertitle"para que podamos estilo que también.
"rel =" bookmark "title =" Enlace permanente a ">
*Uf* Muy bien, en la parte inferior están los botones anterior y siguiente con los ID anterior2 y next2 que dijimos en el código JavaScript anterior.
prev siguiente
Ahora que todo está explicado, sigamos adelante!
Bueno, ahora lo tenemos funcionando, pero no se parece en nada a lo que queremos ... así que abre tu style.css archiva y pega este código y te explico las cosas a continuación:
.list_carousel height: 175px; margen: 0 auto; desbordamiento: oculto; ancho: 660px; .list_carousel ul margen: 0; relleno: 0; estilo de lista: ninguno; bloqueo de pantalla; .list_carousel li font-size: 14px; color: # 333; ancho: 200px; relleno: 0; margen: 2px; bloqueo de pantalla; flotador izquierdo; .list_carousel.responsive width: auto; margen izquierdo: 0; .list_carousel .clearfix float: none; Limpia los dos; .list_carousel a.prev background: url ("next-arrow-left.png") no-repetir scroll 0 0 transparente; bloqueo de pantalla; altura: 150px; posición: relativa; arriba: -174px; ancho: 50px; .list_carousel a.next background: url ("next-arrow-right.png") no-repetir scroll 0 0 transparente; bloqueo de pantalla; altura: 150px; posición: relativa; izquierda: 635px! importante; arriba: -324px; ancho: 50px; .list_carousel a.prev .list_carousel a.next right: -29px; .list_carousel a.prev.disabled, a.next.disabled cursor: predeterminado; .list_carousel a.prev span, a.next span display: none; # foo2 izquierda: 20px; margen: 0 2px; posición: relativa; Sí, es un gran bloque de código. ¡Jaja! Lo siento, tenía mucho que quería hacer con él como puedes ver. Déjame tratar de hacer esto lo menos doloroso posible. Si quieres ajustar el ancho, cambia el 660px y 175px a su anchura y altura deseadas para el carrusel. También con .list_carousel li Puede cambiar los colores del título de la publicación y el ancho de cada elemento. los .list_carousel a.prev y .list_carousel a.next Las clases son donde se muestran las imágenes de flechas anterior y siguiente. Así era como lo necesitaba para lucir, por supuesto. El estilo depende de ti.
Además de un enlace a una versión en vivo: http://www.kstudiofx.com/carousel-tutorial
[Actualizar:] Este tutorial originalmente utilizado query_posts (), lo que es una mala práctica en este contexto (como lo señaló Chip Bennett en los comentarios). Hemos actualizado el código para usarlo más apropiadamente. WP_Query ().
