Share
În această parte a seriei vom începe să scriem codul nostru. Fiind mai concret, vom:
Acesta va fi un tutorial greu de cod astfel încât să vă deschideți editorul dvs. de cod preferat și apucați o ceașcă de cafea!
Înainte de a trece la scrierea codului real, vom începe prin definirea unor constante pentru căile noastre. Acest lucru ne va ajuta mai târziu la înregistrarea scenariilor noastre și a foilor de stil.
Mai întâi, deschideți viitoare-events.php fișier, adăugați următorul cod:
Accentsconagua
define ('ROOT', plugins_url (", __FILE__)), defini ('IMAGES', ROOT ./img/ '), define (' STYLES ', ROOT. ROOT. '/ Js /'); În codul de mai sus, am folosit plugins_url () pentru a obține calea directorului nostru rădăcină. Acceptă doi parametri, adică. calea de $ și $ plugin.
Deoarece nu trebuie să ne referim la niciun fișier, ci la directorul rădăcină al plugin-ului nostru, nu am furnizat calea de $ argument și pentru $ plugin argument, am furnizat dosarul curent. Apoi, am adăugat pur și simplu numele altor directoare la RĂDĂCINĂ constante pentru căile lor respective.
WordPress este capabil să dețină diferite tipuri de conținut. Putem crea cât mai multe tipuri de conținut de care avem nevoie, în funcție de scenariul în care lucrăm. Pentru a adăuga mai multe tipuri de conținut (denumite în general "tipuri personalizate de postări"), WordPress oferă o funcție register_post_type () care acceptă două argumente:
În cel de-al doilea argument, adică o serie de argumente suplimentare, definim etichetele tipului de post și alte specificații privind vizibilitatea, capacitatea și taxonomiile etc..
Înviitoare-events.php fișier, adăugați următorul cod pentru a înregistra tipul de post personalizat pentru evenimente:
$ etichete = array ('nume' => __ ('Evenimente', 'uep'), 'singular_name' => 'ue'), 'all_items' => __ ('Toate evenimentele', 'uep'), 'edit_item' => , 'u_'), 'not_found' => __ ('Nu există evenimente găsite', 'uep'), ' Evenimentele găsite în coșul de gunoi "," uep ")); $ supports = array ("titlu", "editor", "extras"); $ args = array ('etichetă' => __ ('Evenimente', 'uep'), 'etichete' public = 'true', 'show_in_menu' => true, 'menu_icon' => IMAGES. register_post_type ('eveniment', $ args); În codul de mai sus, am definit etichetele pentru tipul postului de eveniment și am făcut tipul de post vizibil public prin setarea public cheia pentru Adevărat. Pentru ecranul nou-post sau post-editare, am inclus trei câmpuri pentru titlu, conținut și extras.
De asemenea, rețineți că am marcat câmpurile de text statice pentru traducere utilizând domeniul de text UEP care este unic pentru plugin-ul nostru. O pictogramă de 20X20 SVG a fost de asemenea inclusă pentru meniul Evenimente.
register_post_type () funcția trebuie să fie apelată prin init acțiune pentru ca aceasta să funcționeze corect. Încadrați-o astfel în interiorul unei funcții și conectați-o la init acțiune:
('Eveniment', 'uep'), 'singular_name' => __ ('Eveniment', 'uep'), 'add_new_item' Adăugați un eveniment nou, 'uep'), 'all_items' => __ ('Toate evenimentele', 'uep'), 'edit_item' => __ ("Eveniment găsit", "uep"), "not_found_in_trash" = "View_item" => __ (" > __ ("Nu s-au găsit evenimente în coșul de gunoi", "uep")); $ supports = array ("titlu", "editor", "extras"); $ args = array ('etichetă' => __ ('Evenimente', 'uep'), 'etichete' public = 'true', 'show_in_menu' => true, 'menu_icon' => IMAGES. register_post_type ('eveniment', $ args); add_action ('init', 'uep_custom_post_type'); Acum avem tipul de post de eveniment pregătit. Navigați la tabloul de bord WordPress și veți vedea un meniu pentru evenimente sub meniul de comentarii:
După ce am înregistrat cu succes tipul de post personalizat pentru evenimente, acum trebuie să adăugăm trei câmpuri meta pentru ca utilizatorul să adauge data de începere a evenimentului, data de încheiere și locul evenimentului. Aceste câmpuri meta sunt conținute într-un metabox personalizat. Putem adăuga în mod convenabil un metabox personalizat administratorului WordPress folosind add_meta_box () funcţie.
Acceptă șapte argumente care sunt definite mai jos:
$ ideste acel id al metaboxului. Este, de asemenea, atributul id pentru metaboxul rendered pe ecran.titlu $ este titlul metaboxului.$ apel invers este numele funcției care va fi utilizată pentru a face conținutul metaboxului.$ post_type este numele tipului de post la care vrem să adăugăm acest metabox.$ context este zona paginii la care dorim să adăugăm metaboxul. Există trei contexte: normal, avans și latură. prioritate $ a metaboxului în contextul dat, care poate fi oricare dintre ele înalt, miez, Mod implicit sau scăzut. $ callback_argseste o serie de argumente care pot fi transmise funcției de apel invers.În viitoare-events.php fișier adăugați următorul cod după uep_custom_post_type () funcţie:
funcția uep_add_event_info_metabox () add_meta_box ('uep-event-info-metabox', __ ('Info despre eveniment', 'uep'), 'uep_render_event_info_metabox', 'event', 'side', 'core'); add_action ('add_meta_boxes', 'uep_add_event_info_metabox'); Navigați la Adăuga nou pagina sub Evenimente meniu și veți vedea un avertisment pentru funcția de apel inversat nedefinită. Asta pentru că nu am definit încă funcția de apel invers pentru a reda conținutul metaboxului.
Să facem asta acum:
funcția uep_render_event_info_metabox ($ post) // generează un câmp nonce wp_nonce_field (numele de bază (__FILE__), 'uep-event-info-nonce'); // primiți valorile meta salvate anterior (dacă există) $ event_start_date = get_post_meta ($ post-> ID, 'event-start-date', true); $ event_end_date = get_post_meta ($ post-> ID, 'event-end-date', true); $ event_venue = get_post_meta ($ post-> ID, "eveniment-locul de desfășurare", adevărat); // dacă există o valoare salvată anterior, apoi preluați-o, altfel setați-o la ora curentă $ event_start_date =! gol ($ event_start_date)? $ event_start_date: timp (); // presupunem că dacă data de încheiere nu este prezentă, evenimentul se termină în aceeași zi $ event_end_date =! gol ($ event_end_date)? $ event_end_date: $ event_start_date; ?>
În codul de mai sus, am generat mai întâi un câmp WordPress nonce. Acest lucru este important deoarece avem nevoie să ne asigurăm că nimeni nu ne-a înșelat cererea de formă, compromitând astfel securitatea site-ului.
Apoi am preluat meta-ul nostru post pentru data de începere, data de încheiere și locul evenimentului utilizând funcția get_post_meta (). Dacă este vorba despre un post nou, marca curentă curentă va fi utilizată pentru datele de început și la sfârșitul evenimentului. Altfel, dacă postarea este editată, valorile salvate anterior vor fi afișate în câmpurile meta.
Pentru câmpurile meta, am redat trei etichete și câmpuri de introducere cu texte cu substituent pentru a da utilizatorului o sugestie despre formatul de intrare.
Acum este momentul să adăugați widgetul jQuery UI datepicker la data de începere a evenimentului și câmpul de încheiere a evenimentului pentru a acorda utilizatorilor mai multă ușurință la introducerea datelor.
Amintiți-vă din ultimul articol, am discutat că widgetul jQuery UI și jQuery UI Datepicker sunt deja incluse în biblioteca JavaScript WordPress. De asemenea, am descarcat o versiune personalizata de pe site-ul oficial al jQuery UI si am renuntat la fisierul stylesheet in directorul nostru css. Dacă nu ați făcut-o încă, luați o copie de pe site-ul oficial al jQuery UI și plasați foaia de stil în dosarul CSS.
Creați un fișier numit script.js în interiorul directorului js. Acesta este fișierul în care vom inițializa widgetul jQuery UI Datepicker pentru datele de început și de sfârșit ale evenimentului.
Vom încorpora acum JavaScript și foaia de stiluri însoțitoare în adminul nostru folosind acțiunea admin_enqueue_scripts:
funcția uep_admin_script_style ($ hook) if ('post.php' == $ hook || 'post-new.php' == $ hook) wp_enqueue_script ('future-events', SCRIPTS. ("jquery", "jquery-ui-datepicker"), "1.0", adevărat); wp_enqueue_style ('jquery-ui-calendar', STYLES. 'jquery-ui-1.10.4.custom.min.css', false, '1.10.4', 'toate'); add_action ('admin_enqueue_scripts', 'uep_admin_script_style'); S-ar putea să fi observat că nu am încorporat separat jQuery și jQuery UI datepicker separat, ci mai degrabă le-am adăugat ca o dependență pentru script.js fişier.
Procedând astfel, WordPress se va asigura că jQuery și jQuery UI Datepicker (împreună cu dependențele proprii) devin enqueued ÎNAINTE de script.js fişier.
Funcția de apel invers acceptă un argument pentru cârligul paginii, adică pagina curentă a tabloului de bord. Deoarece nu dorim să includeți acest fișier JavaScript pe fiecare pagină a tabloului de bord, verificăm mai întâi condiția dacă pagina curentă este post.php sau post-new.php.
În acest fel, am restricționat JavaScript numai pentru a fi inclus în edițiile postare sau în ecranele postale noi, dar ce se întâmplă dacă cineva creează sau actualizează o postare sau o pagină obișnuită? Fișierul JavaScript mai sus va fi inclus și pe acele pagini, deoarece cârligul este același pentru cele două.
În acest scop, vom verifica în continuare dacă postul care este editat este un tip de post de eveniment:
funcția uep_admin_script_style ($ hook) global $ post_type; dacă ('post.php' == $ hook || 'post-new.php' == $ hook) && ('event' == $ post_type)) wp_enqueue_script ('future events', SCRIPTS. .js ', array (' jquery ',' jquery-ui-datepicker '),' 1.0 ', adevărat); wp_enqueue_style ('jquery-ui-calendar', STYLES. 'jquery-ui-1.10.4.custom.min.css', false, '1.10.4', 'toate'); add_action ('admin_enqueue_scripts', 'uep_admin_script_style'); Acum, fișierul JavaScript de mai sus va fi inclus numai dacă cârligul de pagină este post.php sau post-new.php și postul creat sau editat este de tip eveniment.
Să inițializăm jQuery UI Datepicker. Deschide script.js fișier de la js și adăugați următorul cod:
($ date ('# uep-event-start-date') .datepicker (dateFormat: 'MM dd, yy', onClose: ') .datepicker (dateFormat:' MM dd, yy ', onClose: function ( selectateDate) $ ('# uep-event-start-date') .datepicker ('opțiune', 'maxDate', selectDate););) (jQuery); Rețineți că am restricționat data de începere a evenimentului pentru a nu fi mai mare decât data de încheiere a evenimentului și invers.
Verificați dacă inițializarea a avut succes prin accesarea Adăuga nou eveniment și făcând clic pe oricare dintre datele de început sau de sfârșit ale evenimentului. Ar trebui să vedeți fereastra datepicker și puteți introduce data navigând prin calendar și făcând clic pe data dorită.
Până acum, am scris o cantitate corectă de cod, dar plugin-ul nostru nu are încă cea mai fundamentală funcționalitate: Pentru a salva și a actualiza valorile câmpului meta evenimentului.
Acum, că am creat tipul de post personalizat și am adăugat trei câmpuri meta pentru data de începere a evenimentului, data de încheiere și locul evenimentului, trebuie să ne asigurăm că valorile acestor câmpuri meta vor fi salvate în baza de date.
WordPress oferă un cârlig pentru acest scop care se declanșează de fiecare dată când un post este salvat. Cârligul este save_post iar funcția de apel invers acceptă un argument pentru identificarea postului salvat. Folosind acest cârlig, putem salva valorile câmpurilor noastre meta în baza de date împreună cu câmpurile post regulate, cum ar fi titlul și conținutul.
funcția uep_save_event_info ($ post_id) add_action ('save_post', 'uep_save_event_info'); Dar din nou, trebuie să verificăm dacă postul salvat este de tip eveniment. În acest scop, vom verifica $ _POST variabilă globală:
funcția uep_save_event_info ($ post_id) // verificarea dacă postul salvat este un eveniment, // dacă nu, apoi reveniți dacă ('event'! = $ _POST ['post_type']) return; Acum vom verifica starea de salvare, adică dacă postarea este salvată automat sau este o revizuire. WordPress oferă două etichete condiționate în acest scop:
wp_is_post_autosave ($ post_id)wp_is_post_revision ($ post_id)Putem folosi aceste două etichete condiționate după cum urmează:
$ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id);
Dar, de asemenea, trebuie să ne asigurăm că nonce este valid. Amintiți-vă că am definit un câmp nonce folosind wp_nonce_field () atunci când facem metaboxul? Vom verifica valoarea aceluiași nonce:
$ is_valid_nonce = (isset ($ _POST ['uep-event-info-nonce']) && (wp_verify_nonce ($ _POST ['uep-event-info-nonce']); adevarat fals;
Puneți toate aceste trei condiții într-o singură declarație și suntem bine să mergem:
dacă ($ is_autosave || $ este_revision ||! $ is_valid_nonce) return;
După efectuarea operațiilor necesare înainte de a salva valorile meta, suntem gata să le inserăm în baza de date:
funcția uep_save_event_info ($ post_id) // verificarea dacă postul salvat este un eveniment, // dacă nu, apoi reveniți dacă ('event'! = $ _POST ['post_type']) return; // verificarea stării "salvați" $ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id); $ is_valid_nonce = (isset ($ _POST ['uep-event-info-nonce']) && (wp_verify_nonce ($ _POST ['uep-event-info-nonce']); adevarat fals; // ieșiți în funcție de starea de salvare sau dacă nonce nu este valid dacă ($ is_autosave || $ is_revision ||! $ is_valid_nonce) return; // verificarea valorilor și efectuarea acțiunilor necesare dacă (isset ($ _POST ['uep-event-start-date'])) update_post_meta ($ post_id, uep-event-start-date "])); dacă isset ($ _POST ['uep-event-end-date'])) update_post_meta ($ post_id, 'date-sfârșitul evenimentului', strtotime ); dacă isset ($ _POST ['uep-event-venue'])) update_post_meta ($ post_id, 'event-venue', sanitize_text_field ($ _POST ['uep-event-venue')); add_action ('save_post', 'uep_save_event_info'); Aici am salvat valorile meta din baza de date folosind funcția update_post_meta () care acceptă patru argumente din care am trecut primele trei:
$ POST_ID este id-ul postului căruia îi aparține valoarea meta.$ meta_keyeste cheia câmpului meta personalizat.$ meta_valueeste noua valoare meta.$ prev_valueeste valoarea meta anterioară care urmează să fie înlocuită.Rețineți că nu salvăm data în descrierea textului, dar mai întâi îl convertim în timestampul UNIX folosind PHP strtotime () funcţie. În acest fel, va fi mult mai ușor atunci când se compară datele între ele în timp ce se efectuează interogarea meta de pe front.
În acest moment, cea mai fundamentală parte a tutorialului nostru a fost finalizată. Este timpul să adăugați câteva coloane personalizate în ecranul de afișare al evenimentelor.
Întrucât evenimentele au propriile informații specifice conținute în câmpurile lor personalizate, este indicat să le arătați în coloanele personalizate din ecranul post-admin pentru o mai bună accesibilitate de către utilizator.
Implicit, WordPress afișează coloanele titlului și datei pentru tipul de post personalizat, dar vom adăuga încă trei coloane pentru data de începere a evenimentului, data de încheiere și locul de desfășurare a evenimentului.
Putem controla coloanele pe care să le adăugăm și pe care să le ascundem prin cârligul WordPress manage_edit- $ post_columns Unde $ postare este numele tipului de post particularizat. Funcția de apel invers acceptă o matrice pentru coloanele care sunt deja afișate.
funcția uep_custom_columns_head (implicit $) unset ($ defaults ['date']); $ defaults ['event_start_date'] = __ ('Data de începere', 'uep'); $ default ['event_end_date'] = __ ('Data de încheiere', 'uep'); $ default ['event_venue'] = __ ('Venue', 'uep'); returnează $ implicit; add_filter ('manage_edit-event_columns', 'uep_custom_columns_head', 10); În codul de mai sus, am dezactivat coloana de dată prestabilită și, în schimb, am adăugat cele trei coloane personalizate.
Dar conținutul coloanelor respective nu va fi afișat decât după ce l-am definit folosind manage_ $ post_posts_custom_column cârlig unde $ post este numele tipului de post particularizat.
funcția uep_custom_columns_content ($ column_name, $ post_id) if ('event_start_date' == $ column_name) $ start_date = get_post_meta ($ post_id, 'event-start-date', true); data echo ("F d, Y ', $ start_date); if ('event_end_date' == $ column_name) $ end_date = get_post_meta ($ post_id, 'date-sfârșitul evenimentului', true); data ecoului ('F d, Y', $ end_date); dacă ('event_venue' == $ column_name) $ venue = get_post_meta ($ post_id, 'event-venue', true); echo $ venue; add_action ('manage_event_posts_custom_column', 'uep_custom_columns_content', 10, 2); Am verificat mai întâi coloana care este afișată și apoi am reluat conținutul în consecință. Ultimul parametru din ADD_ACTION () apelul funcției este numărul de argumente acceptate de funcția de apel invers - în cazul nostru - sunt două.
În acest tutorial, am înregistrat cu succes un tip de post personalizat pentru evenimente. De asemenea, am învățat să includem un widget widget de datepicker integrat jQuery UI în tabloul de bord WordPress. În plus, pentru a acorda utilizatorului o mai mare accesibilitate, am adăugat coloane personalizate în ecranul nostru de administrare post.
În timp ce aproape am finalizat tabloul de bord, mai avem încă ceva de rezolvat - front-end.
În următoarea tranșă a seriei, vom face un widget personalizat pentru a afișa lista evenimentelor viitoare în bara laterală. Ne vom uita la WP_Query clase mai strânse pentru a prelua posturile pe baza valorilor lor meta.
