Utilizând câmpurile personalizate pentru a crea casete de examinare

Recenzile sunt, probabil, una dintre cele mai mari puteri de blogging în termeni de autoritate. Când este făcut corect (cu muncă grea și informații coerente), revizuirea blogurilor este, fără îndoială, cea mai profitabilă categorie din blogosphere. Dar fiecare blog trebuie să ofere un design solid în postările lor, inclusiv recenzii. În acest post, vom vorbi despre cum să construim o căsuță perfectă de examinare, deoarece casetele de recenzie sunt probabil cititorii din prima parte, înainte de a citi o recenzie.


Ce vom construi

De exemplu, vom crea o casetă de recenzie pentru un film.

Să luăm unul dintre filmele mele preferate din toate timpurile, The Pursuit of Happyness. Vom afișa următoarele informații despre film:

  • Nume: În căutarea fericirii
  • An: 2006
  • Director: Gabriele Muccino
  • Scriitor: Steve Conrad
  • stele: Will Smith, Jaden Smith, Thandie Newton
  • Gen: Biografie, Drama
  • Runtime: 117 minute
  • Vizionate: Bazat pe o poveste adevărată despre un bărbat numit Christopher Gardner. Gardner a investit masiv într-un dispozitiv cunoscut sub numele de "scaner pentru densitatea osului". Simte că a făcut aceste dispozitive. Cu toate acestea, ele nu vinde, deoarece sunt marginal mai bune decât tehnologia actuală la un preț mult mai mare. Când Gardner încearcă să-și dea seama cum să-i vândă, soția lui îl părăsește, își pierde casa, contul bancar și cardurile de credit. Forțat să trăiască pe străzi cu fiul său, Gardner este acum disperat să găsească o slujbă constantă; el își asumă un loc de muncă ca broker, dar înainte de a putea primi salariul, trebuie să treacă prin 6 luni de formare și să-și vândă dispozitivele.
  • (Să nu uităm că avem nevoie de o imagine.)

Important: Aceste informații sunt împrumutate de la Baza de date pentru filme Internet.


Pasul 1 Pregătirea metalei personalizate pentru a completa datele

Vom păstra datele ca valori ale câmpului personalizat, dar adăugarea manuală a câmpurilor personalizate pentru fiecare examinare poate fi o astfel de durere. Din această cauză, vom crea o casetă de metode personalizate personalizate pentru a salva datele noastre ca câmpuri personalizate.

În primul rând, trebuie să folosim add_meta_box () pentru a construi meta caseta și a crea o funcție de apel invers:

 funcția wptuts_review_box_add_meta () add_meta_box ("caseta de examinare", "caseta de examinare", "wptuts_review_box_meta", "postare", "normal", "mare");  add_action ('add_meta_boxes', 'wptuts_review_box_add_meta'); funcția wptuts_review_box_meta () // Salut! 

Funcția de apel invers va crea câmpurile de introducere pentru a ține datele noastre. Cred că putem folosi o texare pentru câmpul "storyline" și câmpurile de introducere a textului pentru orice altceva:

 ID); // extrageți membrii matricei de valori $ la variabilele proprii (pe care le puteți vedea mai jos, în codul HTML) extras (valori $, EXTR_SKIP); wp_nonce_field ('review_box_meta_action', 'review_box_meta_nonce'); ?> 

Apoi, trebuie să creăm funcția de a face ca WordPress să salveze valorile de intrare ca câmpuri personalizate:

 funcția wptuts_review_box_save_meta ($ post_id) dacă (definită ('DOING_AUTOSAVE') && DOING_AUTOSAVE) retur; dacă isset ($ _POST ['review_box_meta_nonce']) ||! wp_verify_nonce ($ _POST ['review_box_meta_nonce'], 'review_box_meta_action'))); dacă (! current_user_can ('edit_post')) retur; // creați o serie de câmpuri personalizate $ review_array = array ('_wptuts_review_name', '_wptuts_review_year', '_wptuts_review_director', '_wptuts_review_writer', '_wptuts_review_stars', '_wptuts_review_genre', '_wptuts_review_runtime', '_wptuts_review_image', '_wptuts_review_storyline') ; // creați valorile "implicite" pentru matrice $ review_array_defaults = array ('_wptuts_review_name' => 'Niciuna', '_wptuts_review_year' => 'None', '_wptuts_review_director' => 'None', '_wptuts_review_writer' => ',' _wptuts_review_stars '=>' Niciuna ',' _wptuts_review_genre '=>' Niciuna ',' _wptuts_review_runtime '=>' Niciuna ',' _wptuts_review_image '=>' Niciuna ',' _wptuts_review_storyline '=>' None); // analizați-le! $ review_array = wp_parse_args ($ recenz_array, $ recenzie_defaults); // Elementele HTML care sunt permise în câmpurile $ allowed_html = array ('a' => array ('href' => array (), 'title' => array 'puternic' => array ()); // actualizează câmpurile post meta cu câmpurile de intrare (dacă sunt setate) foreach ($ review_array ca element $) if (isset ($ _POST [$ item])) update_post_meta ($ post_id, $ item, wp_kses [$ element], $ permis_html));  add_action ('save_post', 'wptuts_review_box_save_meta');

Terminat!

Pentru a afla mai multe informații despre crearea unor casete meta personalizate (și, de fapt, aceste linii de cod), puteți citi acest articol fantastic scris de Christopher Davis și publicat pe Wptuts+.

Pasul 2 Construirea funcției pentru a afișa caseta de examinare

Acum că am acoperit cum să facem asta a stabilit informațiile, trebuie să învățăm cum să obține informatia. Dacă ați lucrat mai devreme cu câmpuri personalizate, acest lucru va fi ușor deoarece vom prelua valorile câmpului personalizat.

WordPress are o funcție ușor de utilizat pentru obținerea valorilor câmpului personalizat:

 $ meta_values ​​= get_post_meta ($ post_id, $ cheie, $ singură);

Trebuie să încărăm valorile câmpului personalizat într-un cod HTML, așadar ar fi înțelept să ne gândim la HTML acum. Mă gândesc la așa ceva:

 
Urmărirea fericirii (2006)
  • Nume: În căutarea fericirii
  • An: 2006
  • Director: Gabriele Muccino
  • Scriitor: Steve Conrad
  • stele: Will Smith, Jaden Smith, Thandie Newton
  • Gen: Biografie, Drama
  • Runtime: 117 minute
  • Vizionate: Bazat pe o poveste adevărată despre un bărbat numit Christopher Gardner. Gardner a investit masiv într-un dispozitiv cunoscut sub numele de "scaner pentru densitatea osului". Simte că a făcut aceste dispozitive. Cu toate acestea, ele nu vinde, deoarece sunt marginal mai bune decât tehnologia actuală la un preț mult mai mare. Când Gardner încearcă să-și dea seama cum să-i vândă, soția lui îl părăsește, își pierde casa, contul bancar și cardurile de credit. Forțat să trăiască pe străzi cu fiul său, Gardner este acum disperat să găsească o slujbă constantă; el își asumă un loc de muncă ca broker, dar înainte de a putea primi salariul, trebuie să treacă prin 6 luni de formare și să-și vândă dispozitivele.

Și dacă le punem împreună, ne vom pregăti funcția!

 funcția wptuts_review_box () global $ post; // a obține valorile câmpului personalizat ca array $ values ​​= get_post_custom ($ post-> ID); // extrageți membrii matricei de valori $ la variabilele proprii (pe care le puteți vedea mai jos, în codul HTML) extras (valori $, EXTR_SKIP); // dacă nu există niciun link de imagine în câmpul personalizat "review_image", încercați să obțineți imaginea recomandată dacă ($ _wptuts_review_image == ") if_post_thumbnail ()) $ get_wptuts_review_image = wp_get_attachment_image_src (get_post_thumbnail_id ()," plin ") ; $ _wptuts_review_image = $ get_wptuts_review_image [0]; altceva $ _wptuts_review_image = 'http://placehold.it/150x200&text=No+Image'; // scapa de ieșire, doar în cazul în care $ allowed_html = array '=> array (' href '=> array (),' title '=> array ()),' em '=> array () $ _Wptuts_review_writer_output = wp_kses ($ _wptuts_review_writer [0], $ _wptuts_review_writer = 0 $, $ permis_html); $ _wptuts_review_year_output = wp_kses ($ _wptuts_review_year [0]; $ allowed_html); $ _wptuts_review_director_output = $ _wptuts_review_stars_output = wp_kses ($ _ wptuts_review_stars [0], $ permis_html); $ _wptuts_review_genre_output = wp_kses ($ _ wptuts_review_genre [ 0], $ permis_html); $ _wptuts_review_runtime_output = wp_kses ($ _wptuts_review_runtime [0], $ permis_html); $ _wptuts_review_storyline_output = wp_kses ($ _wptuts_review_storyline [0], $ permis_html); $ _wptuts_review_image_output = wp_kses ($ _ wptuts_review_image [0], $ permis_html); $ output = '
'$ _ Wptuts_review_name_output.' ( '$ _ Wptuts_review_year_output.')
  • Nume: '$ _ Wptuts_review_name_output.'
  • An: '$ _ Wptuts_review_year_output.'
  • Director: '$ _ Wptuts_review_director_output.'
  • Scriitor: '$ _ Wptuts_review_writer_output.'
  • stele: '$ _ Wptuts_review_stars_output.'
  • Gen: '$ _ Wptuts_review_genre_output.'
  • Runtime: '$ _ Wptuts_review_runtime_output.'
  • Vizionate: '$ _ Wptuts_review_storyline_output.'
„; returnați outputul $;

CSS

Desigur, puteți să vă stilizați caseta de examinare în orice fel doriți. Dacă nu vă simțiți așa, sunteți bineveniți să utilizați a noastră:

 .Cuvinte cheie: width: 550px; border: 1px solid #DDD; border-radius: 5px; margin: 10px; Lățime: 0 0 10px 10px; margine: 10px 10px 0 0;. Revista-list-list margine: 10px; padding: 0; list-style: none; ; padding-top: 5px; frontieră-top: 1px solid #EEE; .review-box-list li: primul-copil border-top: 0;. ; lățime: 75px;
Dacă doriți să plutiți caseta de revizuire la stânga sau la dreapta, nu uitați să adăugați plutește la stânga; (sau float: right;) pentru .recenzie-box. Puteți chiar să centrați prin schimbarea margin: 10px; declarație în margine: 10 pixeli automat;.

Pasul 3 Crearea codului scurt pentru a echivala funcția

Știm cum să setăm informația, știm cum să obținem informația ... Acum e timpul ca noi spectacol info! :)

Putem adăuga întotdeauna caseta în mod automat la sfârșitul (sau la începutul) postului, astfel:

 funcția wptuts_review_box_add ($ content) $ review_box = wptuts_review_box (); // arătați caseta de la sfârșitul postării: returnați $ content. $ review_box; // arătați caseta de la începutul postării: // return $ check_box. $ content;  add_action ('the_content', 'wptuts_review_box_add');

Dar dacă vrem să includeți cutia interior bara? Acolo este partea mea preferată care vine la îndemână: coduri scurte!

Acest pas ar fi chiar mai ușor decât cel precedent, deoarece am făcut toate lucrările pentru a încărca caseta de revizuire. Tot ce trebuie sa facem este sa numim functia ca un scurt cod ca acesta:

 add_shortcode ( 'reviewbox', 'wptuts_review_box');

Iată ce veți avea dacă urmați pașii de mai sus exact așa cum sunt scrise:


Înfășurarea în sus

Aceste casete de recenzare ar putea fi folosite pentru o mulțime de recenzii diferite, cum ar fi software-ul, site-urile web, cărți, emisiuni TV și așa mai departe. Sau, dacă puteți obține creativitate, puteți chiar să le utilizați în bloguri obișnuite doar pentru a vă distra!

Unele articole pentru a verifica

Pentru a înțelege pe deplin codul și chiar pentru a-l îmbunătăți, ar trebui să citiți alte articole din Wptuts +:

  • Cum de a crea personalizate WordPress Scrie / Meta Boxes (Ar trebui să citiți acest articol dacă doriți să aflați concept de meta cutii personalizate.)
  • Cum se integrează programul WordPress Media Uploader în opțiunile temei și pluginului (aceasta ar putea fi utilă dacă doriți să permiteți autorilor dvs. să încarce direct imaginile de examinare.)
  • Sanitizarea datelor și validarea cu WordPress (un articol minunat despre dezinfecția datelor. Amintiți-vă: nici nu puteți avea încredere în acest lucru!)

Există ceva ce doriți să vă îmbunătățiți sau aveți o idee? Împărtășiți-vă gândurile cu noi comentând mai jos.

Cod