Share
Sliders par a fi toată furia în aceste zile, și pentru un motiv bun! Puteți adăuga fotografii, conținut, videoclipuri și multe altele într-o zonă animată, animată a site-ului dvs. web. În timp ce există o multitudine de pluginuri slider acolo (preferatul meu actual este cel pentru Nivo Slider), nu există unul pentru FlexSlider, un cursor care are comenzi rapide de la tastatură și funcționează cu glisarea pe ecranele tactile. În acest tutorial, vom crea acest plugin!
Primul lucru pe care trebuie să-l facem este setarea plugin-ului. Creați folderul / envato-flex-slider / și, în el, un fișier numit 'envato-flex-slider.php'. Aici vom adăuga toate informațiile și codul necesar pentru pluginul nostru, începând cu blocul de definire a pluginului:
De asemenea, mi-a plăcut să înființez câteva constante pentru informații. Voi folosi mult în plugin. Sub blocul de definiție, dar înainte de închiderea etichetei php, adaug această informație:
Accentsconagua
define ('EFS_PATH', WP_PLUGIN_URL. '/'. plugin_basename (nume_director (__FILE__)). '/'); definiți ("EFS_NAME", "Envato FlexSlider"); define ("EFS_VERSION", "1.0"); Creez trei constante: calea plugin-ului, numele plugin-ului și versiunea pluginului, care este utilizată pentru upgrade-uri și să notifice WordPress Plugin Directory de modificări, dacă este necesar. Observați că încep toate constantele mele cu "EFS". Voi face același lucru pentru numele funcțiilor, astfel încât să nu creați un conflict cu alte pluginuri sau cu nucleul WordPress.
Acum, când am făcut configurarea, să adăugăm în fișierele & codul FlexSlider.
Este timpul să adăugați partea importantă: javascript & CSS pentru FlexSlider. Vom face acest lucru folosind WordPress " wp_enqueue_script și wp_enqueue_style pentru a evita conflictele. Puteți descărca FlexSlider aici. Vom avea nevoie de 2 fișiere: jquery.flexslider-min.js și flexslider.css și / theme / folder.
wp_enqueue_script ('flexslider', EFS_PATH.'query.flexslider-min.js ', array (' jquery ')); wp_enqueue_style ('flexslider_css', EFS_PATH.'flexslider.css '); În ambele rânduri, atribuim un nume fiecărui script, apoi se leagă la fișierele .js și .css. Observați că ne folosim constanta noastră ESF_PATH. Trebuie să folosim întreaga cale sau fișierele să nu fie corelate corect. De asemenea, veți observa că avem un al treilea parametru în wp_enqueue_script. Aceasta este o serie de alte script-uri de care depinde scriptul nostru. În acest caz, este doar unul și este JQuery. Aici este o listă completă de scripturi incluse în WordPress. Puteți utiliza orice mâner în matricea dependențelor.
Următorul lucru pe care dorim să-l facem este includerea JavaScript-ului real care va face să funcționeze cursorul. Facem acest lucru cu funcția noastră proprie și cu o acțiune WordPress.
funcția efs_script () print '„; add_action ('wp_head', 'efs_script'); Linia importantă aici este add_action ('wp_head', 'efs_script');, care va conduce funcția noastră, efs_script () când se numește wp_head. Funcția noastră imprimă pur și simplu JavaScript necesar pentru a face FlexSlider să-și facă treaba!
Veți observa că folosesc "JQuery" în loc de "$" tradițional folosit de obicei în scripturile JQuery. Acest lucru este atât de scriptul nostru nu este în conflict cu alte biblioteci JavaScript, cum ar fi Scriptaculous.
În cele din urmă, copiați / tema / folderul în folderul / envato-flex-slider /.
În continuare, vom seta codul nostru scurt și eticheta șablonului. Codul scurt va permite utilizatorilor să introducă cursorul în orice pagină sau post. Avem un tutorial de introducere foarte frumos pe scurtcoduri aici. Eticheta de șablon va permite dezvoltatorilor de teme să introducă cursorul în temele lor. Ca și dezvoltator de teme, cred că este incredibil de important să includem ambele și să le găsim ușor în documentație. Nu știți niciodată cine va folosi pluginul.
funcția efs_get_slider () // Vom completa acest lucru mai târziu. / ** adăugați codul scurt pentru cursor - pentru a fi utilizat în editorul ** / funcția efs_insert_slider ($ atts, $ content = null) $ slider = efs_get_slider (); întoarcere $ slider; add_shortcode ('ef_slider', 'efs_insert_slider'); / ** adăugați tag-ul șablonului - pentru a fi utilizat în teme ** / funcția efs_slider () print efs_get_slider (); Chiar acum acest cod arata destul de simplu. Pentru codul scurt, numim funcția noastră generală, efs_get_slider () și returnează rezultatele. Pentru eticheta șablonului, tipărim rezultatele. De asemenea, folosim WordPress " add_shortcode () funcția de a înregistra codul nostru scurt. Am oprit intenționat implementarea efs_get_slider () pentru că nu am stabilit cum vom face încă imaginile. Pentru a ușura ca utilizatorii să adauge un număr de imagini pe glisorul lor, vom crea un tip de post personalizat.
Primul lucru pe care îl vom face este să creați un nou fișier numit 'slider-img-type.php', unde tot codul pentru tipul postului personalizat va merge. Mai întâi, vom face niște setări ca în cazul pluginului.
Dupa cum puteti vedea, tot ce am facut pana acum este sa creezi cateva constante (care ar fi la indemana pentru tipurile de posturi personalizate mai avansate) si a adaugat suport pentru miniaturi pentru noul nostru tip. Singurul lucru pe care îl vom face în acest fișier este înregistrarea noului tip de post personalizat. Pentru mai multe tipuri de posturi personalizate, puteți vedea tutorialul meu despre realizarea unui portofoliu de criminali. Chiar înainte de închiderea etichetei php, vom adăuga acest cod:
("CPT_NAME"), "singular_label" => __ (CPT_SINGLE), 'public' => true, 'show_ui' => true, 'capability_type' post "," hierarchical "=> false," rewrite "=> true," acceptă "=> array (" titlu "," editor ", miniatură)); register_post_type (CPT_TYPE, $ args); add_action ("init", "efs_register"); Am creat o funcție pentru a înregistra un tip de post particularizat care utilizează casetele de titlu, editor și casete de miniaturi. Apoi adăugăm o acțiune WordPress pentru a apela acea funcție de îndată ce programul WordPress este inițializat. Asta e! Ultimul lucru pe care trebuie să-l faceți este să includeți fișierul nou adăugând require_once ( 'cursor-img-type.php'); la envato-flex-slider.php. Am adăugat-o chiar deasupra locului în care introducem scripturile noastre.
Acum, că știm cum punem în aplicare imagini slider, să ne întoarcem și să ne ocupăm de funcția generală a cursorului.
Întoarceți-vă spre locul unde am definit efs_get_slider () și înlocuiți comentariul // Vom completa acest lucru mai târziu cu urmatoarele:
$ slider = '„; întoarcere $ slider;„; $ efs_query = "post_type = slider-imagine"; query_posts ($ efs_query); dacă (have_posts ()): în timp ce (have_posts ()): the_post (); $ img = get_the_post_thumbnail ($ post-> ID, 'mare'); $ Slider. =“
- '$ Img.'
„; endwhile; endif; wp_reset_query (); $ slider = '
Primele două linii sunt necesare datorită funcționării FlexSlider. Acesta va căuta o listă neordonată numită "diapozitive" într-un div numit "flexslider" și va aplica javascript / animații la asta. CSS-ul nostru este, de asemenea, configurat pentru a defini .flexslider și ul.slides. După aceasta, vom crea o buclă WordPress prinsând toate postările de tip slider-image (tipul de post personalizat) și îl vom tipări pentru versiunea mare a imaginii recomandate. Apoi vom returna toate HTML-ul generat ca o variabila, care poate fi tiparita, ca si in tag-ul nostru de template, sau returnata, ca si cu codul nostru scurt.
Acum este momentul să testați! După ce adăugați câteva imagini la noul tip de articol personalizat, creați o pagină nouă (pe care am numit-o pe Slider-ul meu) și adăugați noul cod scurt, [Ef_slider]. Salvați pagina și vizualizați-o. Ar trebui să vedeți ceva de genul:
Asta e deocamdată. Există cu siguranță câteva lucruri pe care le putem face pentru a îmbunătăți pluginul, cum ar fi opțiunea de adăugare a opțiunilor pentru personalizarea avansată FlexSlider trebuie să ofere sau să adauge suport pentru subtitrare. Acestea fiind spuse, acest plugin vă oferă tot ce aveți nevoie pentru a face o versiune destul de simplă, ușor de gestionat și ușor de inserat în FlexSlider pentru WordPress! Dacă nu sunteți sigur de plasarea sau de fișierele pe care să le includeți, puteți descărca fișierele sursă utilizând linkul din partea de sus a tutorialului. se bucura!
