Share
În această serie, lucrăm la un plugin în scopul simplu de a introduce un selector de date jQuery în editorul post utilizând o postare meta și apoi afișarea acestuia pe frontul de pe site.
Mai degrabă decât o serie detaliată, detaliată pe un subiect profund în WordPress - scopul acestei serii este să se concentreze pe o temă foarte de nișă.
În primul articol din serie, am realizat următoarele:
În acest articol, vom relua munca prin implementarea jQuery Date Picker, stocarea datei în post și apoi pregătirea pluginului pentru lansare.
Am finalizat deja trei din cei șase pași necesari pentru implementarea pluginului nostru. Acum este o chestiune de a încorpora toate JavaScript-ul necesar pentru a afișa selectorul de culori și pentru a prelua datele.
Dar, datorită WordPress, acest lucru nu este cu adevărat dificil, deoarece multe dintre ceea ce avem nevoie este deja asociat cu aplicația de bază.
Pentru a implementa selectorul de date jQuery, avem nevoie de mai multe dependențe:
Mai întâi, adăugați următoarea linie constructorului dvs.:
Accentsconagua
add_action ('admin_enqueue_scripts', array ($ this, 'register_admin_scripts')); Apoi, trebuie să definim funcția care va înlătura biblioteca de selectare a datei jQuery, precum și propriul fișier JavaScript personalizat.
Deci, mergeți mai departe și definiți-vă register_admin_scripts și linia pentru includerea selectorului de date jQuery:
/ ** * Înregistrează și încalcă JavaScript specific pentru admin. * * @ versiunea 1.0 * @ din 1.0 * / funcția publică register_admin_scripts () wp_enqueue_script ('jquery-ui-datepicker'); // end register_admin_scripts Apoi introduceți a js director în plugin-ul dvs. și apoi adăugați un admin.js fișierului respectivului director.
Fișierul trebuie să conțină următorul cod JavaScript:
(functie ($) $ (function () // Verificati daca casuta de intrare exista daca (0 < $('#datepicker').length ) $('#datepicker').datepicker(); // end if ); (jQuery)); Pur și simplu, acest fișier va executa JavaScript pentru fiecare pagină pe tabloul de bord este încărcat. Acolo este o modalitate alternativă de a face acest lucru, dar este dincolo de scopul acestui articol.
În schimb, avem verificarea JavaScript pentru existența elementului. Dacă există, atunci se aplică DatePicker plugin pentru element.
În cele din urmă, trebuie să înregistrați foaia de stil jQuery Date Picker cu plugin-ul nostru. Pentru a face acest lucru, adăugați următoarea linie la dvs. register_admin_styles funcţie:
wp_enqueue_style ('jquery-ui-datepicker', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css'); În acest moment, actualizați pluginul și ar trebui să puteți face clic pe intrare element și a vedea ceva de genul:
Destul de cool, nu-i așa? Rețineți că atunci când selectați o dată, aceasta va aplica automat data la elementul de intrare. Dacă doriți să personalizați chiar mai mult formatul datei (sau alte aspecte ale selectorului de date), asigurați-vă că verificați documentele API.
În acest moment, suntem gata să afișăm data la postarea reală. În scopul plug-in-ului nostru, vom fi prepending acest conținut.
Pentru a face acest lucru, definiți următorul cârlig în constructorul pluginului:
add_action ('the_content', array ($ this, 'prepend_the_date')); Apoi, trebuie să definim funcția. Este foarte simplu, totuși. Verificați-o, după care o voi explica după fragmentul de cod:
/ ** * Salvează datele de finalizare a proiectului pentru ID-ul postului de intrare. * * @param int ID-ul curent al Postului. * @version 1.0 * @since 1.0 * / funcția publică prepend_the_date ($ content) // Dacă post meta nu este goală pentru 'the_date', atunci render it în conținut dacă (0! = ($ the_date = get_post_meta get_the_ID (), 'the_date', adevărat))) $ content = '". $ the_date. '
". conținut de $; // se închide dacă returnează $ content; // end prepend_the_date
În această funcție, verificăm datele meta-post pentru postarea curentă. Deoarece această funcție se declanșează în contextul The Loop, putem folosi get_the_ID ().
Dacă șirul de date - adică postul meta introdus de către data - nu este goală, atunci o vom împacheta într-o etichetă de paragraf și o vom prefixa la conținut $; altfel, tocmai retur conținut $ așa cum este.
În acest moment, sunt doar două lucruri de făcut:
Crearea fișierului de localizare este simplu. Deoarece am definit plugin.po fișier în primul articol, tot ce trebuie să faceți este să deschideți fișierul cu Poedit, faceți clic pe "Actualizare", apoi salvați fișierul. Aceasta va genera o plugin.mo fișier în lang director.
Apoi, trebuie să creați o CITEȘTE-MĂ fișier care urmează convențiile WordPress Readme. Deși poți fi la fel de creativ cum îți place, mi-am împărtășit mințile de mai jos.
=== WordPress jQuery Data Picker === Contribuitori: tommcfarlin Tag-uri: data, post Necesită cel puțin: 3.5 Testați până la: 3.5.1 Etichetă stabilă: 1.0 Un exemplu de plugin folosit pentru a demonstra cum să includă jQuery Date Picker în post editor. == Descriere == WordPress jQuery Data Picker este un plugin simplu folosit pentru a demonstra modul în care puteți profita de posturile personalizate de post meta, meta date și pluginurile jQuery pentru a permite utilizatorilor să selecteze datele care urmează să fie afișate în postările lor. == Instalare == = Folosind Tabloul de bord WordPress = 1. Navigați la Tabloul de bord Plugin Plug & Play 2. Selectați "wordpress-jquery-date-picker.zip" de pe computerul dvs. 3. Încărcați 4. Activați pluginul de pe WordPress Plugin Dashboard = Utilizarea FTP = 1. Extrageți 'wordpress-jquery-date-picker.zip' pe computer 2. Încărcați directorul 'wordpress-jquery-date-picker' în directorul 'wp-content / plugins' 3. Activați plugin-ul de pe tabloul de bord Plugin-uri WordPress == Întrebări frecvente == = În acest moment, data apare doar în partea de sus a postului. Pot schimba poziția? = Nu. == Changelog == = 1.0 = * Eliberare inițială
Nimic inovatoare - doar spune exact ce face.
Dacă nu ați făcut-o deja, asigurați-vă că ați luat cea mai recentă versiune a pluginului de la GitHub, citiți comentariile și continuați-vă pentru a vă asigura că înțelegeți tot ce se întâmplă în plugin.
Și asta este totul - destul de ușor, corect?
Ca de obicei, vă rugăm să lăsați comentarii și întrebări în formularul de comentarii de mai jos.
