Acoperim o mulțime de subiecte pe acest blog - de la ceva la fel de simplu ca și cum să includem și să solicităm fișiere de șabloane în proiectele WordPress, cum ar fi o întreagă serie pe API-ul Setări, dar cred că există întotdeauna loc pentru a acoperi un mod simplu -Aceasta acoperă o singură sarcină specifică în contextul WordPress.
Deci, în această serie cu două părți, vom examina cum să introducem un selector de date jQuery în editorul nostru de posturi, astfel încât să putem asocia o dată cu o anumită postare.
Despre Plugin
Vom face toate acestea în contextul unui plugin, astfel încât codul sursă să fie ușor de descărcat prin GitHub și va oferi un exemplu de lucru al tutorialului.
Primul lucru de reținut este că încorporarea selectorului de date jQuery este nu menită să înlocuiască data publicării postului. În schimb, aceasta este menită să ofere o modalitate ușoară de a selecta o dată, de ao salva în datele post-meta și apoi să o afișeze pentru un alt scop, cum ar fi, de exemplu, când va avea loc un eveniment.
Planificarea pluginului
Pentru cineva care a citit oricare dintre postările mele anterioare, știi că sunt un fan al planificării proiectului încă de la început, apoi punerea în aplicare a fiecărui pas la un moment dat pentru a ne asigura că suntem clar despre tot ce se întâmplă.
Asa ca sa facem asta acum:
Vom oferi clasa de schelet pentru plugin
Vom scrie codul responsabil pentru generarea metaeboxului post care permite utilizatorului să selecteze data
Vom implementa selectorul de date jQuery astfel încât utilizatorii să poată selecta de fapt o dată
Vom salva datele când postarea este publicată și / sau actualizată
Vom afișa data la capătul din față al postului
Simplu, nu? Cu asta a spus, să începem.
Construirea pluginului
La sfârșitul acestui articol, întregul plugin va fi disponibil în acest depozit GitHub, dar recomand că vă recomandăm să urmați și să scrieți codul pentru a vă asigura că urmați tot ceea ce facem.
Codul voi să fie comentată astfel încât să fie ușor de urmărit. Dacă nu, întotdeauna nu ezitați să lăsați comentarii după post.
1. Înlăturați clasa Plugin
Presupunând că ați creat deja WordPress-jQuery-Data-Picker în directorul dvs. wp-content / plugins director, mergeți mai departe și creați două fișiere:
plugin.php
README.txt
Vom revizui CITEȘTE-MĂ fișier într-un pic, dar hai să mergem mai departe și stub out clasa care servește ca plugin-ul nostru.
Iată codul cu mai multe explicații după fragment:
Evident, nu e prea mult pentru asta. Am definit pur și simplu clasa, am setat un constructor gol și am instanțiat plugin-ul în afara clasei.
Înainte de a ne mișca mai departe, hai să mergem mai departe și să pregătim pluginul pentru localizare. Pentru a face acest lucru, trebuie să facem câteva lucruri:
Introduceți a lang director
Adăuga lang / plugin.po
Setați domeniul de text pentru pluginul din cadrul constructorului
Rețineți că localizarea este folosită pentru a vă asigura că traducătorii pot face pluginul compatibil cu alte limbi și că Poedit este instrumentul de alegere.
plugin.po fișierul ar trebui să conțină ceva de genul următor (dvs. va fi în mod evident diferit în funcție de data, ora și configurația Poedit):
msgstr "" "Versiunea de proiect: Versiunea WordPress jQuery Data Picker 1.0 \ n" "Raport-Msgid-Bugs-To: \ n" "POT-Creation-Date: 2013-02-07 13: 36-0500 \ n "" PO-Revizuire-Data: 2013-02-07 13: 36-0500 \ n "" Ultimul Traducător: Tom McFarlin \ n "" Echipa de limbă: Tom McFarlin \ n "" Limba: en_US \ n "" MIME-Version: 1.0 \ n "" Tip de conținut: text / simplu; "X-Poedit-Basepath:. \ n" "X-Generator: Poedit 1.5" "X-Poedit-UTF-8 .5 \ n "" X-Poedit-SearchPath-0: ... \ n "
Apoi, trebuie să setăm domeniul de text în constructor. Mai întâi, includeți următoarea linie în constructorul dvs.:
Apoi, adăugați următoarea funcție în fișierul dvs.:
/ ** * Încărcarea domeniului de text plugin pentru traducere * * @version 1.0 * @since 1.0 * / funcția publică plugin_textdomain () load_plugin_textdomain ('wp-jquery-date-picker', false, dirname (plugin_basename (__FILE__)). '/ lang'); // end plugin_textdomain
Cel mai important lucru pe care trebuie să-l observăm aici este utilizarea wp-jQuery-data-picker deoarece aceasta este ceea ce vom folosi pentru a localiza șirurile în restul pluginului.
În cele din urmă, vom revedea acest lucru împreună cu CITEȘTE-MĂ fișier mai târziu în tutorial.
2. Creați Meta Box
În acest moment, suntem gata să definim codul care va afișa caseta meta. Aceasta constă în mai mulți pași:
Definirea cârligului din constructor
Înregistrați meta cu WordPress
Definirea unei funcții utilizată pentru a face meta-boxul real
În constructor, adăugați următoarea linie de cod. Aceasta este ceea ce vom folosi pentru a vă înregistra postul nostru de meta:
În funcția de mai sus, îi spunem WordPress să caute meta-caseta de date într-o funcție numită add_date_meta_box, așa că trebuie să definim asta acum.
În cadrul clasei dvs., adăugați următorul cod:
/ ** * Înregistrează caseta meta pentru afișarea opțiunii 'Date' în editorul post. * * @ versiunea 1.0 * @ din 1.0 * / funcția publică add_date_meta_box () add_meta_box ('the_date', __ ('Data', 'wp-jquery-date-picker'), array ($ this, the_date_display) , "post", "partea", "scăzută"); // end add_date_meta_box
Am acoperit meta-boxes în profunzime în diverse tutoriale și WordPress Codex-ul are un articol minunat care explică ceea ce face fiecare parametru, așa că nu vreau să pun punct aici.
Acestea fiind spuse, există un lucru specific pe care trebuie să-l observăm în apelul de mai sus. Rețineți că meta-box-ul încearcă să-și înregistreze afișajul utilizând o funcție numită the_date_display.
Ca atare, trebuie să definim această funcție. Din fericire, meta-box-ul poate fi foarte simplu: pentru a declanșa selectorul de date, avem nevoie doar de un singur element. De vreme ce vom preda data, să alegem să folosim o casetă simplă de introducere.
Apoi, adăugați următoarea funcție la clasa dvs.:
/ ** * Reface interfața cu utilizatorul pentru finalizarea proiectului în caseta de meta asociată. * * @ versiunea 1.0 * @ din 1.0 * / funcția publică the_date_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'wp-jquery-date-picker-nonce'); echo "
Dacă activați plugin-ul chiar acum, ar trebui să vedeți ceva asemănător:
Evident, acest lucru are nevoie de un stil de lumină pentru a face să pară puțin mai bine. Deci, hai să facem următoarele:
După aceea, adăugați această funcție în pluginul dvs.:
/ ** * Înregistrează și încalcă stilurile specifice administratorului. * * @ versiunea 1.0 * din 1.0 * / funcția publică register_admin_styles () wp_enqueue_style ('wp-jquery-date-picker', plugins_url ('WordPress-jQuery-Date-Picker / css / admin.css')); // end register_admin_styles
În acest moment, lățimea casetei de intrare pentru selectorul de date ar trebui să cuprindă lățimea containerului metaboxului. Îmi pare a fi puțin mai frumoasă, după părerea mea.
3. Salvați data
Înainte de a începe implementarea selectorului de date, hai să mergem mai departe și să ne asigurăm că noua noastră meta-casetă post poate salva corect informațiile. Chiar acum, nu este posibil pentru că nu am scris codul pentru asta.
Acest pas special va implica următoarele:
Definirea unei funcții pentru salvarea datelor
Asigurați-vă că utilizatorul are capacitatea de a salva datele
Salvați efectiv datele
În primul rând, trebuie să definim cârligul pentru salvarea datelor. La aceasta, adăugați următoarea linie constructorului dvs. direct sub linia în care am definit cârligul pentru crearea metaboxului:
add_action ('save_post', array ($ this, 'save_project_date')); [php] În continuare, trebuie să definim save_project_date funcţie. Această funcție va fi responsabilă pentru a vă asigura că utilizatorul are permisiunea de a salva datele și apoi va salva efectiv conținutul câmpului de introducere în post meta pentru postarea asociată. Deci, adăugați următoarea funcție în plugin: [php] / ** * Salvează datele de finalizare a proiectului pentru ID-ul postului de intrare. * * @param int ID-ul curent al Postului. * $ ($ post_id, 'wp-jquery-date-picker') * @ versiunea 1.0 * @ din 1.0 * / funcția publică save_the_date ($ post_id) // Dacă utilizatorul are permisiunea de a salva datele meta ... -nonce ')) // Ștergeți orice meta date existente pentru proprietar dacă (get_post_meta ($ post_id,' the_date ')) delete_post_meta ($ post_id,' the_date '); // se termină dacă update_post_meta ($ post_id, 'the_date', strip_tags ($ _POST ['the_date'])); // end if // end save_the_date
Această funcție funcționează prin verificarea practică pentru a vedea dacă acest utilizator poate salva. Dacă da, atunci va șterge orice post meta existent, pentru a nu dezordine baza de date, apoi adăugați data specificată pentru această postare.
Dar există o captură: sunăm la o funcție numită user_can_save. Această funcție particulară este o funcție de ajutor pe care trebuie să o definim deoarece simplifică o mulțime de cod de boilerplate necesar pentru a vă asigura că utilizatorul are permisiunea de a salva fișierul.
Deci, în zona "Helper Functions" din clasa dvs., adăugați următoarea funcție:
/ ** * Determină dacă utilizatorul curent are sau nu posibilitatea de a salva meta date asociate cu această postare. * * @param int $ post_id ID-ul postului care este salvat * @param bool Indiferent dacă utilizatorul are sau nu capacitatea de a salva această postare. * @version 1.0 * @ din 1.0 * / funcția privată user_can_save ($ post_id, $ nonce) $ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id); $ is_valid_nonce = (isset ($ _POST [$ nonce]) && wp_verify_nonce ($ _POST [$ nonce], plugin_basename (__FILE__))? adevarat fals; // Return true dacă utilizatorul poate salva; altfel, fals. întoarcere ! ($ is_autosave || $ este_revision) && $ is_valid_nonce; // end user_can_save
Observați că această funcție ia în considerare ID-ul curent și valoarea nonce (pe care am stabilit-o mai devreme în acest post). În cele din urmă, această funcție revine la adevărat dacă aceasta nu este o salvare automată, o revizuire post și că nonce este validă.
Dacă este adevărat, utilizatorul are permisiunea de a salva.
Concluzie
În acest moment, să încercăm ce avem. Activați pluginul și ar trebui să vedeți caseta meta din tabloul de bord Editor. În momentul de față, ar trebui să puteți salva orice valoare pe care doriți în acest domeniu.
Puteți lua o copie a plugin-ului în versiunea curentă pentru acest post utilizând acest link.
În următorul articol, vom examina implementarea selectorului de date. Aceasta va include importarea dependențelor JavaScript necesare, scrierea unui pic de JavaScript propriu, și apoi redarea datei la capătul din față al postării.
În cele din urmă, vom pregăti pluginul pentru lansare generând fișierele de localizare și apoi pregătindu-l CITEȘTE-MĂ.
Share
Accentsconagua
