Share
Integrarea funcționalității de slideshow în WordPress este o caracteristică extrem de necesară pentru aproape orice temă, dar cât de greu este să includeți și cât de flexibilă este aceasta? În acest tutorial vom participa, în diferite moduri, la unul dintre cele mai populare și mai utilizate slideshow-uri jQuery, Nivo Slider.
Există, de fapt, deja un plugin WordPress codificat pentru sliderul Nivo, chiar pe pagina oficială Nivo Slider. Dar, oricum, vom construi unul în acest tutorial și, cu siguranță, o vom face diferit. În acest tutorial vom crea un plugin slider Nivo care va avea funcționalitate widget, funcționalitate cod scurt și veți putea chiar să o integrați ca o simplă chemare a funcției și să-l codificiți cu greu în tema în care utilizatorul vreodată dorește.
Urmând acest tutorial, se presupune că rulați un server Apache și MySQL la nivel local sau de la distanță pentru a putea instala WordPress. De asemenea, aveți o versiune 3.1+ a WordPress instalată pe care aveți acces la sistemul de fișiere și că aveți cunoștințe de bază PHP, CSS, JavaScript și HTML.
Una dintre cele mai ușoare părți ale acestui tutorial. Vom crea un folder numit nivoplugin în interiorul wp-content / plugins în interiorul aplicației WordPress. În interiorul directorului vom crea un nivoplugin.php fișier cu următorul cod:
Aceasta este informația de bază a pluginului folosită de WordPress pentru a identifica numele și detaliile pluginului. Lucruri ca Numele pluginului, Descriere, Autor și Conecteaza versiunea sunt parametri necesari care sunt adăugați ca text comentat în partea de sus a fiecărui plugin, astfel încât WordPress să poată identifica plugin-ul, să-l gestioneze, să îl ruleze și să afișeze informațiile necesare despre el în pagina de pluginuri.
"Pentru mai multe informații despre textul antetului pluginului și alte opțiuni care pot fi adăugate la el, vă rugăm să citiți scrierea unui plugin în Codul WordPress."
Slideshow-ul este realizat din imagini, astfel încât, pentru a face o punere în aplicare simplă a sliderului jQuery Nivo, avem nevoie de o modalitate de a adăuga și de a gestiona imagini în panoul de administrare. Abordarea noastră va face uz de funcționalitatea WordPress personalizată. Tipurile de postări personalizate vor fi folosite pentru a crea o nouă pagină personalizată, în care fiecare postare conține toate detaliile de imagine necesare: numele și, desigur, cea mai importantă parte, imaginea în sine. Vom folosi titlul și editorul pentru informații despre nume și descriere și funcționalitatea imaginilor recomandate pentru a încărca imaginea, ao gestiona și ao identifica.
Accentsconagua
funcția np_init () $ args = array ('public' => true, 'label' => 'Nivo Images', 'suport' => array ('title', 'thumbnail')); register_post_type ('np_images', $ args); add_action ('init', 'np_init'); În exemplul de mai sus adăugăm un cârlig la np_init funcția folosind eticheta init de cârlig care se va desfășura înainte de rularea anteturilor. Trebuie să facem acest lucru, astfel încât să putem include în interiorul lui register_post_type funcție cu parametrii săi. Această funcție este funcția utilizată pentru a adăuga și a gestiona un tip nou de post particularizat. În principiu, vom include un nou tip de articol personalizat numit np_images cu unele argumente.
Argumentele reprezintă o serie de valori care reprezintă setările acelui tip nou post particularizat. Lucruri ca și cum ar fi intenționat să fie folosite public, am pus public la adevărat, îi dăm o etichetă cu numele Imagini Nivo și am stabilit faptul că fiecare post are un titlu și o imagine prezentată cu variabilele titlu și miniatură ca matrice pentru atributul principal suporturi.
Acest lucru creează tipul de post personalizat și arată astfel:
În acest moment avem un tip postat personalizat și funcțional, denumit np_images. Putem adăuga postări noi, le ștergem și le putem edita ca în cazul postărilor obișnuite, dar personalizate în scopul gestionării imaginilor pentru prezentarea de diapozitive. Practic, acesta este locul în care adăugăm poze pentru prezentarea Nivo ca postări.
Acest lucru ar putea părea ceva ușor complicat sau consumator de timp puțin mai mult decât de obicei. Nu este. Vom descărca versiunea gratuită jQuery a sliderului Nivo și vom include scenariile și stilurile necesare pentru ca ulterior să le putem folosi cu niște coduri personalizate și imagini.
Pentru a descărca sursele, mergeți la pagina de prețuri de pe nivo.dev7studios.com și faceți clic pe pluginul jQuery (versiunea gratuită) Descarca din stânga pentru a descărca sursele.
În scopul acestui tutorial, vom păstra lucrurile foarte simple. Dezarhivați fișierul și includeți întregul director în directorul plugin. În interiorul Nivo-slider dosarul are un alt dosar numit demo. Vom șterge acest lucru, deoarece nu avem nici un folos pentru el și nu vrem un plug-in aglomerat cu lucruri inutile în el.
Următoarea parte a acestui pas este includerea fișierelor Nivo Slider necesare. În a noastră nivoplugin.php vom adăuga următoarele:
add_action ('wp_print_scripts', 'np_register_scripts'); add_action ('wp_print_styles', 'np_register_styles'); Acest lucru va implica unele funcții (al doilea parametru este numele funcției). Avem nevoie de aceste cârlige pentru a include corect scenariile și stilurile în front-end. Să ne uităm la funcțiile de apel invers din cârligele noastre anterioare.
funcția np_register_scripts () if (! is_admin ()) // înregistrare wp_register_script ('np_nivo-script', plugins_url ('nivo-slider / jquery.nivo.slider.js', __FILE__) ; wp_register_script ('np_script', plugins_url ('script.js', __FILE__)); / / enqueue wp_enqueue_script ('np_nivo-script'); wp_enqueue_script ( 'np_script'); np_register_styles () // înregistrare wp_register_style ('np_styles', plugins_url ('nivo-slider / nivo-slider.css', __FILE__)); wp_register_style ('np_styles_theme', plugins_url ('nivo-slider / themes / default / default.css', __FILE__)); / / enqueue wp_enqueue_style ('np_styles'); wp_enqueue_style ( 'np_styles_theme'); Funcția de apel inversă în script se înregistrează și include 3 fișiere javascript importante: jQuery (ca dependență de Nivo Slider), fișier de bază nivo-slider (jquery.nivo.slider.js) și fișierul personalizat de script (script.js). Nivo Slider cere jQuery să funcționeze și avem nevoie de un script personalizat pentru a-l activa.
jQuery (document) .ready (funcția ($) $ ('# slider'); nivoSlider ();); Scriptul este destul de simplu, necesită jQuery pentru a atașa nivoSlider funcția la tag-ul cu id-ul cursor. Eticheta asta va lua Nivo-slider proprietăți și funcționalitate.
În final, în pasul nostru anterior, funcția de apel inversă a stilului înregistrează și include 2 fișiere importante: Nivo-slider.css fișierul care are toate stilurile necesare pentru a face ca glisorul să arate și să funcționeze corespunzător, și a default.css fișier în interiorul teme / default folderul pe care îl folosim pentru a afișa slideshow-ul cu setarea implicită Nivo-slider temă.
Așa cum am menționat la început, acest tutorial va acoperi implementarea unui widget, a unui scurtcod și a unei funcții pentru codarea greu a cursorului, dacă este necesar, folosind pluginul pe care îl construim. Pentru codul scurt și funcție avem nevoie de aproape aceeași dimensiune a imaginii, iar pentru widget o dimensiune mai mică pentru înălțimea și lățimea imaginilor.
În primul rând, trebuie să luăm în considerare faptul că folosim imaginile recomandate în postările personalizate pentru imaginile noastre de prezentare. Deci, cum se redimensionează și se recoltează aceste imagini pentru a se potrivi nevoilor noastre cerute? Vom adăuga noi dimensiuni ale imaginilor pe care WordPress le va redimensiona și vor decupa în fiecare încărcare nouă a imaginilor. Pentru a adăuga dimensiunile imaginilor noi vom folosi add_image_size funcția prin adăugarea următorului cod în interiorul np_init funcţie:
add_image_size ('np_widget', 180, 100, true); add_image_size ('np_function', 600, 280, true); În codul sursă de mai sus am implementat 2 dimensiuni de imagine pe care le vom apela mai târziu folosind numele np_widget pentru widget și np_function pentru shortcode și funcția PHP pentru a le identifica.
Pentru a permite vizualizarea miniaturilor în plugin, trebuie adăugat următorul rând de cod în plugin-ul nostru. O vom adăuga deasupra ADD_ACTION linii.
add_theme_support ("post-miniaturi"); "Dimensiunile imaginii adăugate cu
add_image_sizeva funcționa numai pentru imagini noi care sunt încărcate după activarea funcției. "
Una dintre principalele caracteristici ale plugin-ului este o funcție PHP pe care o puteți utiliza oriunde în codul temei pentru a insera prezentarea de diapozitive Nivo de dimensiuni mari de 600x280.
Deoarece folosim postări personalizate pentru a gestiona imaginile noastre pentru prezentarea de diapozitive, trebuie să le interogăm și să obținem titlurile și fotografiile din tipul de post personalizat. Pentru asta vom folosi un nou WP_Query buclă cu parametrii $ args care selectează tipul de post personalizat și creează o expunere de diapozitive de maxim 5 imagini din interogare. Apoi vom crea o variabilă $ rezultat care are toate codurile HTML necesare pentru prezentarea de diapozitive Nivo. Utilizăm pachetele de coduri demo HTML din dosarul descărcării scriptului Nivo.
funcția np_function ($ type = 'np_function') $ args = array ('post_type' => 'np_images', 'posts_per_page' => 5); $ result = '„; $ result = '„; // bucla $ loop = noua valoare WP_Query ($ args); în timp ce ($ loop-> have_posts ()) $ loop-> the_post (); $ the_url = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), tip $); $ result = '
„; $ result = '„; $ result = '„; $ result = 'Acest este un exemplu de a HTML caption cu o legătură. '; $ result = '„; $ result = '„; returneaza rezultatul $; În bucla pe care o folosim wp_get_attachment_image_src pentru a recupera imaginea de la postul nostru personalizat. Noi folosim np_function valoare pentru dimensiunea imaginii pe care am adăugat-o anterior np_init. Pentru că suntem în interiorul buclei, putem folosi $ Post-> ID pentru a identifica postul. Funcția are un parametru, tip $, care este folosit pentru a seta dimensiunea imaginilor de la wp_get_attachment_image_src cu una dintre dimensiunile imaginii stabilite anterior. Variabila are valoarea implicită de np_function. Dacă nu se dă niciun parametru la apelarea funcției, variabila implicită se va lovi.
Titlurile postărilor sunt adăugate ca valori parametrului HTML al titlului pentru eticheta imaginii și sunt vizibile în partea de jos a prezentării de diapozitive ca text plutitor peste imaginile dintr-un fundal transparent închis.
Glisorul este redimensionat automat ca dimensiunile imaginii din interiorul acestuia, astfel încât, indiferent de dimensiunile imaginii pe care le folosim, vom avea o prezentare de diapozitive de acea dimensiune.
Slideshow-ul din np_function mărimea arată astfel:
Această previzualizare a prezentării de diapozitive este implementarea codului scurt care va fi acoperită în continuare.
O altă trăsătură principală este implementarea codului scurt. Acest lucru este de fapt extrem de ușor de implementat și se poate face cu o singură linie de cod. Doar adăugați această linie în np_init funcția de mai sus tot ce este deja acolo:
add_shortcode ('np-shortcode', 'np_function'); Cârligul de coduri scurte va folosi de fapt funcția noastră PHP pentru a returna conținutul prezentării. Asta este totul, implementarea foarte simplă și rapidă a codului scurt. Pentru ao folosi, trebuie doar să adăugați [Np-SHORTCODE] în conținutul oricărei postări sau pagini. Acest text va fi înlocuit cu slideshow-ul real.
În acest pas vom construi un widget simplu, care va avea singurul scop de a arăta o prezentare de mici dimensiuni în bara laterală în care este pus vreodată.
Avem deja dimensiunea stabilită pentru aceasta în pasul 4 și avem toate celelalte funcționalități care includ și generează prezentarea de diapozitive Nivo pe care o putem folosi pentru a fi integrate în widget. Deci tot ce rămâne acum este să construim widget-ul și să integrăm codul anterior.
funcția np_widgets_init () register_widget ('np_Widget'); add_action ('widgets_init', 'np_widgets_init'); În această primă parte vom implementa un nou cârlig pe care să-l adăugați printre ceilalți. Acest cârlig utilizează widgets_init eticheta și utilizează o funcție pe care o vom numi np_widgets_init. Această funcție rulează atunci când widget-urile sunt create. Ca rezultat vom înregistra widget-ul sub numele de np_Widget ca în exemplul de mai sus.
Pentru a crea un nou widget, implementăm o nouă clasă numită np_Widget care extinde WP_Widget clasă. Ca o primă funcție __construi este funcția principală și cea mai importantă a clasei și a funcționalității noastre widget. Funcția are parametrii pe care îi folosim pentru a da widget-ului un ID unic care este numit în cazul nostru np_widget, un nume, Nivo Slideshow, și chiar și o descriere așa cum arată următorul cod:
clasa np_Widget extinde WP_Widget funcția publică __construct () parent :: __ construct ('np_Widget', 'Nivo Slideshow', array ('description' => __ ('A Nivo Slideshow Widget', 'text_domain'))); Acesta este, desigur, doar începutul widget-ului nostru, există câteva alte funcții pe care trebuie să le implementăm și să le configuram pe măsură ce avem nevoie să lucreze.
Widget-ul arata ca orice widget in spate. Trebuie să oferim widgetului un titlu care are posibilitatea de a fi introdus de utilizator și ulterior salvat de plugin. Pentru a face acest lucru trebuie să scrie formă funcția extinsă din WP_Widget clasă. În această funcție vom folosi $ instanță parametru pe care funcția o oferă pentru a obține titlu care este o variabilă ulterior implementată, salvată și actualizată. Așadar, vom crea elementul de intrare a formularului utilizând următorul cod:
formularul funcției publice (instanța $) if (isset ($ instanță ['title'])) $ title = $ instanță ['title']; altceva $ title = __ ('Widget Slideshow', 'text_domain'); ?>
Acest cod se execută numai în partea din spate și este solicitat de următoarele funcții pentru a trimite numele titlului pentru salvarea și utilizarea ulterioară în partea din față. $ instanță variabila are valoarea titlului și este utilizată direct ca exemplul de mai sus, fără nici o altă solicitare de interogare sau funcție.
Salvarea datelor
După ce formularul este trimis de la funcția anterioară, acesta trebuie procesat și salvat. Acest lucru se face în Actualizați funcția pe care trebuie de asemenea să o adăugăm la clasă cu următorul cod:
actualizarea funcției publice ($ new_instance, $ old_instance) $ instance = array (); $ instanță ['title'] = strip_tags ($ new_instance ['title']); returnați $ instanță;
Valoarea câmpului este trecută prin $ new_instance variabilă care este dezbrăcată de etichete, inserată în $ instanță astfel încât aceasta să poată fi returnată de către funcție și salvată de WordPress ca parte a funcționalității widget-ului extins.
Widget Front-End
Nu în ultimul rând, o altă parte foarte importantă și, de asemenea, reprezentativă a widgetului nostru este funcționalitatea frontală. Evident, fiecare piesă este importantă pentru ca rezultatul final să funcționeze, dar această parte este ceea ce vedeți în tema dvs..
widget funcția gestionează partea frontală a widget-ului și are doi parametri: $ args și $ instanță. $ args parametru este folosit pentru a obține variabile de genul $ before_widget, $ after_widget și $ before_title, $ after_title pe care o vom folosi în codul nostru implementat. Funcția de widget arată astfel:
funcția publică funcțională ($ args, $ instance) extract ($ args); // titlul $ title = apply_filters ('widget_title', $ instance ['title']); echo $ before_widget; dacă (! gol ($ title)) echo $ before_title. titlul $. $ After_title; echo np_function ('np_widget'); echo $ after_widget; Pentru a implementa prezentarea de diapozitive, folosim funcția np_function dar în acest caz îi oferim parametrul np_widget astfel încât să obținem dimensiunile imaginii pe care le dorim pentru widget.
Aceasta acoperă implementarea widget a slider-ului Nivo în plugin-ul nostru. În acest moment puteți intra în panoul de administrare și puteți adăuga câteva postări în meniul de imagini Nivo și puteți atașa imaginile speciale acestora, astfel încât acestea să apară în prezentarea.
"Pentru mai multe informații despre API-ul WordPress Widgets, verificați API-ul WordPress Codex Widgets."
Concluzie
Este foarte ușor și rapid să implementați o prezentare de slideshow în WordPress dacă știți ce faceți și mai ales dacă funcția de slideshow este deja construită și doar o integrați. Totuși, trebuie să aveți grijă să nu folosiți anumite funcții deja existente și, bineînțeles, este ușor să o implementați într-un mod foarte simplu, așa cum am făcut-o, deoarece o abordare mai flexibilă, cu multe opțiuni și caracteristici, ar putea complica puțin lucrurile, în funcție de caracteristicile acestora.
