Share
Avere un carousel di post recenti sul tuo blog è un ottimo modo per renderlo più interattivo per i tuoi visitatori.
Recentemente ho chiesto a un cliente di creare un carosello di post recenti per il loro sito web. Ho detto sì, certo, pensando che ci dev'essere una sorta di plugin che riesco a trovare a fare proprio così velocemente. Il ragazzo mi sbagliavo. Ho passato molto tempo a cercare di trovarne uno e quelli che ho trovato non hanno fatto quello che volevo. Ho pensato, con tutto questo tempo sprecato, ne farò uno io stesso. Devi solo trovare un buon codice base. Quindi è quando mi sono imbattuto carouFredSel. Ecco il link: http://caroufredsel.frebsite.nl/. Ho adorato i loro esempi e sebbene non abbia ancora fatto tutto ciò che volevo, come mostrare una didascalia sotto l'immagine, la funzionalità era esattamente ciò di cui avevo bisogno. Per farla breve, ecco i dettagli.
Bene, iniziamo andando su http://caroufredsel.frebsite.nl/ e scaricando il codice del carosello e copiando il jquery.carouFredSel-5.5.0-packed.js file nella cartella del tema WordPress.
Avanti, apri il tuo functions.php file e aggiungi questo piccolo codice:
Accentsconagua
if (function_exists ('add_image_size')) add_image_size ('sliderimg', 200, 150, true); Assicurati di sostituire il 200 e 150 con le tue dimensioni. Salvalo e carica il file. Dopo averlo caricato, nella sidebar del post vedrai una nuova opzione intitolata "Immagine in primo piano"Puoi caricare qualsiasi immagine che vuoi usare qui e questa sarà l'immagine che verrà mostrata nel carousel.Nota anche che lo chiamiamo"sliderimg". Ti dirò perché presto.
Crea un nuovo file JavaScript chiamato wptuts-caroufredsel.js e inserisci il seguente codice all'interno, quindi copialo nella cartella dei temi di WordPress:
jQuery (function ($) $ ('# foo2'). carouFredSel (prev: '# prev2', next: '# next2', auto: false, items: 3,);); Ecco qualcos'altro da prendere in considerazione per dopo. # foo2 - questo sarà l'id della giostra che useremo. Avremo bisogno di questo in modo da poterlo stilizzare in CSS. Si noti anche il # INDIETRO2 e # Next2 id per lo styling dei pulsanti precedente e successivo e infine, il numero 3 è quanti oggetti vuoi mostrare alla volta. In questo caso lo è 3.
Ora apri il tuo functions.php file di nuovo e aggiungi il seguente codice per caricare i file JavaScript:
function wptuts_load_caroufredsel () // Enqueue carouFredSel, si noti che si specifica 'jquery' come dipendenza, e si imposta 'true' per il caricamento nel footer: wp_register_script ('caroufredsel', get_template_directory_uri (). '/js/jquery.carouFredSel -5.5.0-packed.js ', array (' jquery '),' 5.5.0 ', vero); // Per un plugin o un tema, puoi accodare lo 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'); Assicurati di cambiare i percorsi dove sono i tuoi file JavaScript.
Ora apriamo il modello di pagina in cui desideri che venga mostrato il carosello. Una volta aperto, ovunque desideri visualizzare il carosello, incolla questo codice qui sotto:
query ( 'showposts = 12'); ?> have_posts ()): $ carouselPosts-> the_post (); ?>
prev Il prossimo- "title ="">
"rel =" bookmark "title =" Link permanente a ">
Ora lasciami spiegare prima di impazzire. La prima parte del blocco di codice è il nome della classe (per lo styling ovviamente) lo chiamo list_carousel. Poi lo vedrai # foo2 ti ho detto prima. La prossima è la query per i post:
Sto dicendo di tirare gli ultimi 12 post. In questo modo, poiché l'ho detto in precedenza per mostrare 3 alla volta, può mostrare 4 serie di 3 post. Ma diciamo che vuoi essere un po 'più specifico e mostrare solo i messaggi di una certa categoria. Quindi useresti questo codice invece del showposts codice sopra:
E i tag che dici? Bene, qui vai:
Modificare "In primo piano"a qualsiasi tag che vuoi utilizzare. Sto anche chiamando 12 post e li elenco in ordine crescente.
Confuso ancora? Spero di no. Ok, dopo sul blocco principale del codice sopra sto tirando "sliderimg"l'immagine in primo piano del post e anche il link al post effettivo, quindi, naturalmente, quando le persone fanno clic sull'immagine, verranno indirizzati al post stesso.
"title ="">
Nel caso del mio cliente, non volevano solo mostrare un'immagine nel carosello, ma volevano anche mostrare il titolo del post stesso. Quindi sotto l'immagine stiamo visualizzando il titolo del post, rendendolo collegabile anche al post e assegnandogli una classe chiamata "slidertitle"così possiamo anche lo stile.
"rel =" bookmark "title =" Link permanente a ">
* Phew * Bene, in fondo ci sono i pulsanti precedente e successivo con gli id INDIETRO2 e Next2 che abbiamo dichiarato in precedenza nel codice JavaScript.
prev Il prossimo
Ora questo è tutto spiegato, andiamo avanti!
Bene, ora funziona, ma non assomiglia a quello che vogliamo ... quindi apri la tua style.css file e incolla questo codice e spiegherò le cose di seguito:
.list_carousel height: 175px; margine: 0 auto; overflow: nascosto; larghezza: 660 px; .list_carousel ul margin: 0; padding: 0; stile elenco: nessuno; blocco di visualizzazione; .list_carousel li dimensione font: 14px; colore: # 333; larghezza: 200 px; padding: 0; margine: 2px; blocco di visualizzazione; fluttuare: a sinistra; .list_carousel.responsive width: auto; margin-left: 0; .list_carousel .clearfix float: none; chiaro: entrambi; .list_carousel a.prev background: url ("next-arrow-left.png") scroll senza ripetizione 0 0 trasparente; blocco di visualizzazione; altezza: 150 px; posizione: relativa; sopra: -174px; larghezza: 50 px; .list_carousel a.next background: url ("next-arrow-right.png") scroll senza ripetizione 0 0 trasparente; blocco di visualizzazione; altezza: 150 px; posizione: relativa; a sinistra: 635 px! importante; top: -324px; larghezza: 50 px; .list_carousel a.prev .list_carousel a.next right: -29px; .list_carousel a.prev.disabled, a.next.disabled cursor: default; .list_carousel a.prev span, a.next span display: none; # foo2 left: 20px; margine: 0 2px; posizione: relativa; Sì, è un grande blocco di codice. Haha! Scusa se ho avuto molto che volevo fare con esso come puoi vedere. Lascia che provi a renderlo il più indolore possibile. Se si desidera modificare la larghezza, modificare il 660px e 175px alla larghezza e all'altezza desiderate per la giostra. Anche con .list_carousel li puoi cambiare i colori del titolo del post e la larghezza di ogni oggetto. Il .list_carousel a.prev e .list_carousel a.next le classi sono dove vengono visualizzate le immagini delle frecce precedenti e successive. Questo era esattamente il modo in cui avevo bisogno che apparisse naturalmente. Lo styling spetta a te.
Così come un link a una versione live: http://www.kstudiofx.com/carousel-tutorial
[Aggiornare:] Questo tutorial è stato originariamente utilizzato query_posts (), che è una cattiva pratica in questo contesto (come notato da Chip Bennett nei commenti). Abbiamo aggiornato il codice per un uso più appropriato WP_Query ().
