Adăugarea unui slider jQuery Responsabil la tema WordPress

Astăzi am să vă conduc prin integrarea unui slider jQuery receptiv în tema sau site-ul WordPress. Nu este un tutorial de bază, dar este unul care rareori este bine făcut, așa că aș vrea să încerc să rezolv asta. În acest tutorial vom acoperi fiecare pas din crearea unui tip de post personalizat pentru a ne ținea diapozitivele, pentru a utiliza de fapt cursorul din site-ul nostru.

Vom folosi frumosul FlexSlider 2 de la WooThemes, deoarece este un slider foarte bine codat, care este licențiat sub licența GPLv2. Dacă sunteți interesat, puteți să vizualizați codul pentru FlexSlider în depozitul său GitHub.

Înainte de a face ceva, vom face un pas înapoi și vom gândi la:

Ce fișiere glisorul necesită
Ce fișiere noi necesita

Primul lucru pe care îl vom face este să descărcați FlexSlider.

După ce ați făcut asta, continuați să o dezarhivați.

Există câteva fișiere de care suntem interesați, în principal:

flexslider.css
images / bg_direction_nav.png
jquery.flexslider-min.js

Sunt tot ceea ce avem nevoie de descărcarea FlexSlider.

Pasul 1 Setarea fișierelor

Să mutăm cele 3 fișiere din cele de mai sus în directorul temei noastre acum. În funcție de tema sau setarea dvs. puteți plasa fișierele oriunde doriți, luați notă de unde provin aceste fișiere / referințe și ajustați codul pentru a se potrivi noii lor locații.

De dragul acestui tutorial, vom folosi tema implicită Twenty Eleven. În inc / director, creați un folder nou numit cursor. Acolo, să creăm câteva dosare:

css
imagini
js

Sa punem flexslider.css în css pliant, bg_direction_nav.png în imagini dosar și jquery.flexslider-min.js în, ai ghicit-o, js pliant.

Notă: În mod normal le-aș pune înăuntru css/imagini/js foldere în directorul temei cu alte fișiere, dar pentru a face acest tutorial "universală", organizăm fișierele noastre în acest fel. Dacă aveți experiență în dezvoltarea temelor WordPress, vă recomandăm să organizați manual fișierele.

Acum vom crea 2 fișiere în dosarul glisant:

slider.php - creează șablonul cursorului și încarcă fișierele cursorului
slider_post_type.php - creează tipul postului de cursor

Ar trebui să aveți acum cursor care arată cam așa:

Înainte să mergem înainte, deschideți-vă functions.php fișier și adăugați următoarele două linii, care vor încărca cele două fișiere .php pe care tocmai le-am creat:

// Creați tipul de Slider Post Type (get_template_directory (). '/Inc/slider/slider_post_type.php'); // Crearea unui Slider necesită (get_template_directory (). /Inc/slider/slider.php ');

Acum ... să începem codificarea!

Pasul 2 Slider Post Type

Primul lucru pe care îl vom face este să creați un tip de post personalizat care să țină toate diapozitivele noastre. Tipurile personalizate de posturi au fost introduse în WordPress 3.0 și sunt probabil cel mai tare lucru pentru a se întâmpla vreodată în lume (prea departe, îi iubesc).

Deschide slider_post_type.php și adăugați următorul cod pentru a crea tipul de postare personalizat pentru slide:

 _x ('Slide', 'post type general name'), 'singular_name' => _x ('Slide', ' => __ ("Adăugați o nouă imagine"), "edit_item" => __ ("Edit Slide"), "new_item" 'search_items' => __ ('Slide Search'), 'not_found' => __ (Slide), 'not_found_in_trash' => __ ('Slide'), 'parent_item_colon' nume_meniu '=> __ (' Slide ')); $ taxonomii = array (); $ supports = array ("titlu", "miniatură"); $ post_type_args = array ('etichete' => etichete $, 'singular_label' => __ ('Slide'), 'public' => true, 'show_ui' => true, 'publicly_queryable' => true, 'query_var' = > true, 'capability_type' => 'post', 'has_archive' => false, 'hierarchical' => false, 'rewrite' => array 'supports' => $ acceptă, 'menu_position' => 27, // Unde este în meniu. /inc/slider/images/icon.png ',' taxonomii '=> taxonomii $); register_post_type ( 'slide-uri', $ post_type_args);  add_action ('init', 'register_slides_posttype');

Tipul postului personalizat a fost adăugat! Mai jos vom adăuga metaboxul acolo unde există un câmp pentru adresa URL la care ar trebui să se facă legătura cu diapozitivul. Acum vom copia următorul zid mare de cod:

// Meta Box pentru slider URL $ slidelink_2_metabox = array ('id' => 'slidelink', 'title' => 'Slide Link', 'page' => array ',' prioritate '=>' default ',' fields '=> array (array (' name '=>' Slide URL ',' > 'wptuts_slideurl', 'type' => 'text', 'rich_editor' => 0, 'max' => 0),)), add_action ('admin_menu', wptuts_add_slidelink_2_meta_box ') wptuts_add_slidelink_2_meta_box ($ slidelink_2_metabox ['id'], $ slidelink_2_metabox ['title'], 'wptuts_show_slidelink_2_box', $ page, 'normal', 'default', $ ] // funcția de a afișa funcțiile meta-casete wptuts_show_slidelink_2_box () global $ post; global $ slidelink_2_metabox; global $ wptuts_prefix; global $ wp_version; // Utilizați nonce pentru verificarea ecoului '„; echo "„; foreach ($ slidelink_2_metabox ['fields'] ca câmp $) // obține meta date postate curent $ meta = get_post_meta ($ post-> ID, $ field ['id'], true); echo "","","„; comutare (câmpul $ ['type']) textul casei "echo"
',', strikelashes ($ field ['desc']); pauză; echo '„;  echo '", stripelashes (câmpul $ ['name']), ' ","
„;  // Salvați datele din caseta meta add_action ('save_post', 'wptuts_slidelink_2_save'); funcția wptuts_slidelink_2_save ($ post_id) global $ post; global $ slidelink_2_metabox; // verificați nonce dacă (! wp_verify_nonce ($ _ POST ['wptuts_slidelink_2_meta_box_nonce'], numele de bază (__FILE__))) return $ post_id;  // verificați salvarea automată dacă (definită ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id;  // verificați permisiunile dacă ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) return $ post_id;  elseif (! current_user_can ('edit_post', $ post_id)) returnați $ post_id;  foreach ($ slidelink_2_metabox ['fields'] ca câmp $) $ old = get_post_meta ($ post_id, $ field ['id'], true); $ new = $ _POST [câmpul $ ['id']]; dacă ($ new && $ new! = $ old) if ($ field ['type'] == 'data') $ new = wptuts_format_date ($ new); update_post_meta ($ post_id, $ field ['id'], $ new);  altceva if (is_string ($ new)) $ new = $ new;  update_post_meta ($ post_id, $ field ['id'], $ new);  elseif ("== $ new && $ vechi) delete_post_meta ($ post_id, $ field ['id'], $ vechi);

", stripelashes (câmpul $ ['name']), '	","

Pfiu. Aceasta s-a terminat. Du-te la tabloul de bord și veți vedea un nou tip strălucitor "Slides" Custom Post Type.

Pasul 3 Încărcați fișierele glisante

Deschide slider.php. Acum vom încerca să enumerăm jQuery, scriptul FlexSlider jQuery și foaia de stil FlexSlider. Alternativ, ați putea copia codul flexslider.css pentru dumneavoastră style.css dacă doriți.

În timp ce facem asta, trebuie să faceți ceva. Din cauza structurii noastre de fișiere, flexslider.css are nevoie de unele editare, astfel încât să știe unde să găsească imaginea săgeții. Deschideți-o și faceți o căutare și înlocuiți-o pentru:

imagini cu ... / imagini

Pasul 4 Inițializați cursorul

Acum trebuie să adăugăm niște jQuery pentru noi pentru a inițializa cursorul. Să adăugăm următoarele rânduri la slider.php sub codul pe care tocmai l-am adăugat!

// Initializeaza functia Slider wptuts_slider_initialize () ?>

Unul dintre motivele pentru care am ales să utilizez FlexSlider este datorită flexibilității sale. Există câțiva parametri cu care te poți baza, dar tocmai am inclus patru de mai sus. Încearcă să schimbi diapozitiv la decolorare, sau orizontală la vertical. Poți să te uiți la toate paremeterii de aici.

Notă: Rețineți că un alt mod de a face cele de mai sus este utilizarea wp_localize_script (vezi în Codex), dar acest lucru este puțin avansat pentru acest tutorial. Cu toate acestea, Pippin Williamson (alt autor Wptuts +) tocmai a scris un tutorial excelent pe această temă dacă sunteți interesat.

Pasul 5 Crearea cursorului

Acum vom crea șablonul pentru cursor. În primul rând, o vom face WP_Query pentru a extrage "posturi" din Tipul de posturi personalizate pentru diapozitive. Apoi, vom verifica diapozitivele și, dacă da, porniți cursorul. Atunci vom începe buclele. Fiecare "diapozitiv" va verifica dacă a fost setat un URL de diapozitive și, dacă da, creați un link pentru el. Imaginea diapozitivului va fi apoi afișată și bucla va fi închisă.

// Crearea funcției Slider wptuts_slider_template () // Argumente argumente $ args = array ('post_type' => 'diapozitive', 'posts_per_page' => 5); // Query $ the_query = noua valoare WP_Query ($ args); // Verificați dacă Query-ul returnează orice post dacă ($ the_query-> have_posts ()) // Start the Slider?   have_posts ()): $ the_query-> the_post (); ?>   „>    
  
 
  Pasul 6 Utilizarea cursorului
 Ei bine, în cele din urmă am făcut glisorul! Acum este timpul să-l folosim. Puteți deschide orice fișier șablon, cum ar fi index.php, și ecou wptuts_slider_template pentru a afișa cursorul.
 Deci, dacă vrem să afișăm glisorul în Twenty Eleven imediat după antetul de pe pagina de pornire, ne-am deschide index.php și chiar sub get_header (); ?>, adăugați următoarele:
 
 Dar dacă faci asta pentru un client sau pentru o persoană care nu dorește să atingă fișiere șablon și PHP? Probabil că ar trebui să creăm a cod scurt pentru ei, astfel încât să poată folosi doar cursorul cu un [Cursor] cod scurt.
 Adăugați aceasta în partea de jos a paginii slider.php:
 // Slider Shortcode funcția wptuts_slider_shortcode () ob_start (); wptuts_slider_template (); $ cursor = ob_get_clean (); întoarcere $ slider;  add_shortcode ("cursor", "wptuts_slider_shortcode");
 Glisorul poate fi utilizat acum în posturi, pagini sau oriunde altundeva, care acceptă un scurtcod!
  Descarca
 Dacă doriți, puteți descărca cursor care conține tot ceea ce am trecut prin acest tutorial. Trebuie doar să o dai în tema ta inc (sau în altă parte este bine, dar asigurați-vă că ați ajustat codul de mai jos) și adăugați următoarele elemente la dvs. functions.php:
 // Creați tipul de Slider Post Type (get_template_directory (). '/Inc/slider/slider_post_type.php'); // Crearea unui Slider necesită (get_template_directory (). /Inc/slider/slider.php ');
 Notă: De dragul acestui tutorial, spațiul de nume / domeniul de text wptuts a fost utilizat. Ar trebui să faceți o căutare și să înlocuiți tot codul dacă îl copiați / lipiți și înlocuiți:
   wptuts_ cu Numele dumneavoastră_ 
  'wptuts' cu 'Numele dumneavoastră' 
 
 Dacă ți-a plăcut acest tutorial, anunță-mă și voi continua cu un tutorial privind personalizarea slider-ului nostru! Apoi vom examina utilizarea miniaturilor pentru navigație, integrarea diapozitivelor video și adăugarea de subtitrări.



		
			
	   
	




Cod