Share
Având un carusel de mesaje recente pe blog-ul dvs. este o modalitate foarte bună de a face mai interactiv pentru vizitatorii dvs..
Recent am avut un client sa ma rog sa fac un carusel de posturi recente pentru site-ul lor. Am spus-o sigur, crezând că trebuie să existe un fel de plugin pe care îl pot găsi pentru a face chiar așa de repede. Băiatul a fost greșit. Am petrecut mult timp încercând să găsesc una și cele pe care le-am găsit nu făceau ce vroiam deloc. Mi-am închipuit că, cu tot timpul risipit, o voi face singur. Trebuie să găsească un bun cod de bază. Deci atunci am venit carouFredSel. Iată link-ul: http://caroufredsel.frebsite.nl/. Mi-am iubit exemplele și, deși încă nu făceau tot ce vroiam, cum ar fi arăta o subtitrare sub imagine, funcționalitatea era exact ceea ce aveam nevoie. Atât de multă poveste scurtă, aici sunt detaliile.
Bine, începeți prin a merge la http://caroufredsel.frebsite.nl/ și descărcați codul caruselului și copiați jquery.carouFredSel-5,5,0-packed.js fișier în tema dosarului WordPress.
În continuare, deschide-ți functions.php fișier și adăugați acest mic cod:
Accentsconagua
dacă (funcția_există ('add_image_size')) add_image_size ('sliderimg', 200, 150, true); Asigurați-vă că înlocuiți 200 și 150 cu propriile dimensiuni. Salvați-l și încărcați fișierul. După ce îl încărcați, în bara laterală a postării veți vedea o nouă opțiune intitulată "Imagine recomandată"Puteți să încărcați orice imagine pe care doriți să o utilizați aici și aceasta va fi imaginea care va fi afișată în carusel .. De asemenea, rețineți că o numim"sliderimg"Îți spun de ce curând.
Creați un fișier JavaScript nou numit wptuts-caroufredsel.js și puneți codul în interiorul acestuia, apoi copiați-l în dosarul tematic WordPress:
joy (funcția ($) $ ('# foo2'). carouFredSel (prev: '# prev2', următorul: '# next2', auto: false; Iată altceva de luat în seamă pentru mai târziu. # foo2 - acesta va fi idul caruselului pe care îl vom folosi. Avem nevoie de acest lucru, astfel încât să îl putem modela în CSS. De asemenea, rețineți # prev2 și # Next2 id-ul pentru stilul butoanelor anterioare și următoare și, în fine, numărul 3 este câte elemente doriți să afișați la un moment dat. În acest caz este 3.
Acum, deschide-ți functions.php fișierul din nou și adăugați următorul cod pentru a încărca fișierele JavaScript:
funcția wptuts_load_caroufredsel () // Enqueue carouFredSel, rețineți că specificăm "jquery" ca dependență și setăm "true" pentru încărcare în subsolul paginii: wp_register_script ('caroufredsel', get_template_directory_uri () ./js/jquery.carouFredSel -5.5.0-packed.js ', array (' jquery '),' 5.5.0 ', adevărat); // Fie pentru un plugin, fie pentru o temă, puteți enquege scriptul: wp_enqueue_script ('wptuts-caroufredsel', get_template_directory_uri () ./js/wptuts-caroufredsel.js ', array (' caroufredsel '), ); add_action ('wp_enqueue_scripts', 'wptuts_load_caroufredsel'); Asigurați-vă că modificați căile către locurile în care sunt fișierele JavaScript.
Acum, să deschidem șablonul de pagină în care doriți să se afișeze caruselul. Odată ce îl deschideți, ori de câte ori doriți ca caruselul să fie afișat, lipiți acest cod de mai jos:
interogare ( 'showposts = 12'); ?> have_posts ()): $ carouselPosts-> the_post (); ?>
prev Următor →- "title ="„>
"rel =" bookmark "title =" Legătură permanentă la „>
Acum permiteți-mi să vă explic înainte de a vă alăturați. Prima parte a blocului de cod este numele clasei (pentru styling, desigur) o numesc list_carousel. În continuare veți vedea asta # foo2 Îți spuneam mai devreme. Următorul este interogarea pentru postări:
Îi spun să tragă ultimele 12 postări. În acest fel, din moment ce i-am spus mai devreme că arată 3 la un moment dat, pot afișa 4 seturi de 3 posturi. Dar să spunem că doriți să fiți ceva mai specific și să afișați doar postări dintr-o anumită categorie. Apoi ați folosi acest cod în loc de showposts cod de mai sus:
Ce zici de etichetele pe care le spui? Ei bine,
Schimbare "Recomandate"la orice etichetă pe care doriți să o utilizați. De asemenea, sun apel 12 posturi și le listarea în ordine crescătoare.
Confuză încă? Sper ca nu. Ok, în continuare pe blocul principal de cod de mai sus, trag "sliderimg"imaginea recomandată a postului și, de asemenea, făcând legătura cu postul real, astfel încât, desigur, când oamenii fac clic pe imagine, vor fi luați la postul însuși.
"title ="„>
În cazul clientului meu, ei nu numai că doreau să afișeze o imagine în carusel, ci și voiau să afișeze titlul postului însuși. Deci, sub imaginea pe care o afișăm titlul postului, făcând legătura cu postul și atribuindu-i o clasă numită "slidertitleașa că putem să stilăm și asta.
"rel =" bookmark "title =" Legătură permanentă la „>
* Uf * Bine, în partea de jos sunt butoanele anterioare și următoare cu id-urile prev2 și Next2 pe care am spus-o mai devreme în codul JavaScript.
prev Următor →
Acum sa explicat, să mergem mai departe!
Ei bine, am lucrat acum, dar nu arată așa cum vrem ... deschide-ți așa style.css fișier și inserați acest cod și voi explica lucrurile de mai jos:
.list_carousel height: 175px; marja: 0 auto; overflow: ascuns; lățime: 660px; .list_carousel ul margine: 0; umplutura: 0; listă: nu există; afișare: bloc; .list_carousel li font-size: 14px; culoare: # 333; lățime: 200px; umplutura: 0; margine: 2 pixeli; afișare: bloc; plutește la stânga; .list_carousel.responsive lățime: auto; margin-stânga: 0; .list_carousel .clearfix float: nimic; clar: ambele; .list_carousel a.prev fundal: url ("next-arrow-left.png") defilați repetat 0 0 transparent; afișare: bloc; înălțime: 150px; poziție: relativă; top: -174px; lățime: 50px; .list_carousel a.next background: url ("next-arrow-right.png") nu-repeta defilați 0 0 transparent; afișare: bloc; înălțime: 150px; poziție: relativă; stânga: 635px! important; top: -324px; lățime: 50px; .list_carousel a.prev .list_carousel a.next dreapta: -29px; .list_carousel a.prev.disabled, a.next.disabled cursor: implicit; .list_carousel Spațiu a.prev, a.next span display: none; # foo2 left: 20px; margine: 0 2px; poziție: relativă; Da, e un bloc mare de cod. Haha! Îmi pare rău că am avut o mulțime pe care am vrut să o fac cu asta, după cum puteți vedea. Permiteți-mi să încerc să fac acest lucru cât mai nedureros posibil. Dacă doriți să modificați lățimea, schimbați 660px și 175 px la lățimea și înălțimea dorite pentru carusel. De asemenea, cu .list_carousel li puteți modifica culorile titlului postului și lățimea fiecărui element. .list_carousel a.prev și .list_carousel a.next clasele sunt cele în care sunt afișate imaginile săgeată anterioare și următoare. Așa mi-a trebuit să arăt bine. Styling-ul depinde de tine.
În plus, un link către o versiune live: http://www.kstudiofx.com/carousel-tutorial
[Actualizați:] Acest tutorial a fost folosit inițial query_posts (), care este o practică nepotrivită în acest context (după cum a remarcat Chip Bennett în comentariile). Am actualizat codul pentru o utilizare mai adecvată WP_Query ().
