16 verificări vitale înainte de a lansa o temă WordPress

Eliberarea unei teme WordPress pe o piață, cum ar fi ThemeForest, unde audiența este atât de mare și diversă, are unele provocări. Nu puteți testa o soluție direct cu clientul. Trebuie să planificați în avans toate cazurile de margine și să vă asigurați că tema dvs. este cât mai personalizabilă posibil. Dacă nu aveți experiență, există șanse ca unele lucruri, din păcate, să alunece prin fisuri. Din fericire pentru dvs., am atras atenția asupra înțelepciunii noastre greu de câștigat pentru a vă ajuta să evitați repetarea acelorași greșeli pe care le-am făcut.


1: Nu afișați comentarii despre posturile protejate

WordPress are opțiunea de a crea un post protejat prin parolă: vizitatorii ar trebui să poată accesa acest tip de conținut numai după ce introduc parola. Nu este nevoie să faceți ceva special în ceea ce privește postul însuși, dar dacă uitați să verificați înainte de a afișa comentariile, vizitatorii vor vedea totuși toate comentariile privind postul protejat, ceea ce înfrânge scopul de a proteja postul în primul rând. Puteți remedia acest lucru printr-o simplă verificare comments.php:

  


2: Afișați atașamentele corect

Există un fișier de șablon special, attachment.php, care este folosit atunci când un vizitator dă clic pe un atașament. Atasamentele pot fi imagini, clipuri video, fișiere muzicale ... orice este introdus cu butoanele de atașament din editor:

Crearea de attachment.php nu este obligatorie: dacă șablonul nu există, browserul va afișa doar fișierul, cu un plugin corespunzător, dacă este necesar. Aș spune că principalul avantaj al attachment.php este că atunci când vizitatorul decide să vadă, de exemplu, o imagine la dimensiune completă, navigarea site-ului rămâne accesibilă. De asemenea, puteți afișa câteva informații personalizate despre atașament. Tema implicită TwentyTen în WordPress 3.0 are un interesant attachment.php care afișează dimensiunile imaginii.

 dacă (wp_attachment_is_image ()) echo ' | „; $ metadata = wp_get_attachment_metadata (); printf (__ ("Dimensiune completă este pixeli% s", "twentyten"), sprintf ('% 3 $ s ×% 4 $ s', wp_get_attachment_url (), esc_attr (__ twentyten ')), $ metadata [' lățime '], $ metadata [' height '])); 

3: Introduceți suportul de la dreapta la stânga

S-ar putea să fi auzit despre susținerea limbilor de stânga, dar dacă nu cunoașteți unul dintre aceste limbi, ați putea să vă imaginați că este foarte complicat.

Introducerea de asistență în tema dvs. pentru limbile scrise de la dreapta la stânga, cum ar fi arabă și ebraică, este de fapt destul de ușoară. Stilurile din rtl.css va suprascrie pe cele principale style.css când variabila WP_LANG din settings.php este setat la o limbă de la dreapta la stânga, de exemplu, în limba arabă:

 define ('WP_LANG', 'ar')

Ta rtl.css prima nevoie de această declarație:

 corp direcție: rtl; unicode-bidi: încorporați; 

Prima proprietate este auto-explicativă. Cel de-al doilea "deschide un nivel suplimentar de încorporare în ceea ce privește algoritmul bidirecțional" (W3C).

rtl.css fișierul nu are nevoie să copieze fiecare stil în style.css, doar lucrurile care trebuie schimbate atunci când citiți de la stânga la dreapta. Gândiți-vă ca în cazul în care site-ul a fost privit într-o oglindă: plutiți direcția de schimbare (float: stânga devine float: dreapta și invers) și margini și padding sunt inversate (margin-right: 18px devine marginea-stânga: 18px; 0). De asemenea, gândiți-vă la secțiuni mari ale site-ului: în ce direcție va pluti antetul? Nu uitați toate detaliile mici, cum ar fi inversarea indivizilor listelor dvs. de definiție și bloccotări. Pentru a vă simți, puteți încerca să comutați limba în arabă sau ebraică pe site-uri precum Facebook sau Wikipedia sau să vizitați site-uri internaționale precum Al Jazeera.

Credeți sau nu, este vorba despre tot ce trebuie să știți.

Referinţă

  • Suport RTL pe Codex-ul WordPress

4: Furnizarea unui stil editor

Pentru a modela editorul TinyMCE care vine cu WordPress, trebuie doar să creați un fișier numit Editor-style.css în directorul temelor. Este foarte ușor de umplut, deoarece trebuie doar să potriviți tipografia cu cea de pe foaia principală de stil, și nu este nevoie să vă faceți griji cu privire la aspectul blocului. TinyMCE are unele ciudate. Puteți evita ca liniile să fie prea lungi prin stabilirea unei proprietăți de lățime maximă în clasa .mceContentBody.

Dacă includeți asistență pentru limbile de la stânga la dreapta rtl.css, ar trebui să adăugați și un fișier numit redactor-stil-rtl.css, deoarece unele proprietăți, cum ar fi marjele de listă și paddings, trebuie să se schimbe și în editor.


5: Efectuați intrări paginate

Pagini introduse (nu trebuie confundate cu un paginat listă de intrări) sunt separate în pagini de către autorul lor cu Quicktag. Desigur, această caracteristică nu pare să se folosească prea mult pe cele mai multe site-uri WordPress, dar dacă uitați să faceți parte, vizitatorii nu vor putea citi dincolo de prima pagină. Pentru a permite citirea întregului conținut, trebuie să utilizați eticheta wp_link_pages din cadrul Buclă

 wp_link_pages (array ('înainte' => '

Pagini: ',' după '=>'

',' next_or_number '=>' numărul '));

Pentru un post cu trei pagini, rezultă următoarele:

 Pagini: 1 2 3

Vizitatorii pot face clic pe numerele paginilor pentru a citi întregul post. Documentația completă pentru această funcție poate fi găsită în codul WordPress.


6: Widget-uri standard pentru stil

În timp ce nu puteți personaliza orice widget posibil sub soare, este o idee bună să verificați dacă fiecare widget furnizat cu WordPress se afișează în mod convingător. Toți aceștia pot primi un titlu opțional, iar unii au apariții diferite. De exemplu, Categorie widgetul poate fi afișat ca o meniuri și poate afișa și mai multe nivele de categorii sau etichete imbricate, deci asigurați-vă că creați liste de imbricate. Acordați o atenție specială peructei Calendar. Este o masă și, în general, veți dori ca zilele să fie centrate în celule, astfel încât să se alinieze cu zilele săptămânii din antet. În prima imagine, numerele arată ușor în afara locului, în timp ce ele sunt aliniate corect la cea de-a doua imagine.

În cele din urmă, aceasta vă va ajuta dacă începeți prin a crea stiluri bune pentru .widget clasa, deoarece va fi aplicată tuturor widgeturilor, chiar și celor provenite de la terți. Cu dispozitive flexibile în particular, asigurați-vă că widget-urile dvs. nu se întind excesiv, deoarece acestea fac ca acestea să arate cu adevărat ciudate.


7: Faceți comentarii cu filet utilizabil

Comentariile sunt un pic de conundru de design. Există o mulțime de lucruri de afișat (avatare, nume de comentatori, date de comentariu, corp de comentarii, butoane de răspuns), deci trebuie să-i dați un pic de spațiu, dar, în același timp, nu ar trebui să copleșească conținutul principal , și ar trebui să fie distinct vizual într-un fel. Comentariile sub formă de comentarii compun toate aceste dificultăți, deoarece trebuie, de asemenea, să distingeți răspunsurile. În general, acest lucru se realizează cu o marjă, dar, deoarece nu știți câte răspunsuri va fi, veți risca întotdeauna fie să nu permiteți o lățime suficientă, fie să permiteți prea mult.

De asemenea, rețineți că formularul de răspuns nu va apărea numai în partea de jos a paginii, ci și în mijlocul firului de comentariu atunci când cineva face clic pe butonul de răspuns. Astfel, marginile și umplutura ar trebui să fie adecvate pentru ambele cazuri. Există, de asemenea, linkul "anula răspuns", care trebuie să fie decorat și poziționat.

În cele din urmă, ar trebui să vă asigurați că paginarea de comentarii funcționează, că comentariile se fac corect, atât atunci când sunt foarte puține, cât și când există multe și că comentariile filetate nu depășesc limitele containerului. Aveți grijă să nu amestecați comentariile împreună și nu uitați să verificați aspectul pentru momentul când avatarele sunt activate și dezactivate.


8: Nu uita wp_footer () și wp_head ()

Apel wp_footer () chiar înainte de a închide eticheta corporală, și wp_head () chiar înainte de eticheta capului de închidere. Ambele funcții sunt cârlige de acțiune, care pot fi utilizate de plugin-ul și dezvoltatorii temelor. Dacă le-ați lăsat afară, unele funcții și pluginuri s-ar putea să nu funcționeze, inclusiv anteturi personalizate.

Referinţă

  • Pentru a afla mai multe despre cârligele de acțiune, consultați referința API Plug-in.

9: Suportul miniaturilor

Deși multe teme se bazează în continuare pe plugin-uri, cum ar fi TimThumb, WordPress, de la 2.9, include suportul pentru miniaturi ("imagini speciale") din cutie. Pentru a profita de această funcție, adăugați doar câteva linii functions.php:

 add_theme_support ("post-miniaturi"); set_post_thumbnail_size (70, 70);

Prima linie spune WordPress că tema dvs. acceptă miniaturi, în timp ce al doilea forțează dimensiunea miniaturilor la 70x70px, pentru a evita ruperea aspectului cu miniaturi de dimensiuni diferite. În plus, puteți alege politica de redimensionare. Exemplul de mai sus va redimensiona doar imaginea, în timp ce

 set_post_thumbnail_size (70, 70, TRUE);

va cultiva și imaginea pentru a se potrivi cu raportul dat. De asemenea, puteți crea dimensiuni suplimentare pentru miniaturi, pentru a le folosi în diferite zone ale site-ului:

 add_image_size ('big-thumb', 500, 500);

Acum,

 the_post_thumbnail ();

afișează o miniatură de 70x70 și

 the_post_thumbnail ('big-thumb');

afișează o miniatură de 500x500.

Referinţă

  • Puteți găsi o explicație completă de către unul dintre dezvoltatorii WordPress de pe blogul lui Mark Jaquith.

10: Meniuri personalizate de suport

WordPress 3.0 a introdus meniurile personalizate mult așteptate, așa că este timpul să faceți utilizatorii dvs. să profite de această caracteristică. După înregistrarea asistenței tematice, cum ar fi:

 register_nav_menu ('main_nav', __ ('Meniul de navigare principal', 'mytheme'));

... puteți afișa un meniu personalizat cu wp_nav_menu ():

 wp_nav_menu (array ('theme_location' => 'main_nav'));

Aveți grijă, deoarece sistemul vă permite să inserați elemente imbricate, ceea ce poate conduce la rezultate ciudate dacă nu planificați pentru ele.

Chiar dacă furnizați dropdown-uri sau meniuri cu stil Navbar, este dificil să afișați elegant mai mult decât atât de multe niveluri de navigație. Pentru a vă proteja aspectul, fie decideți un nivel sub care toate elementele vor afișa același lucru, fie dezactivați afișarea nivelurilor inferioare. De exemplu, pentru a limita afișarea la două nivele, utilizați:

 wp_nav_menu (matrice ('adâncime' => 2));

11: Activați fundalul personalizat

Aceasta este o nouă caracteristică în WordPress 3.0 și este, de asemenea, cea mai ușoară implementare. Este literalmente o linie:

 add_custom_background ();

Asta e! Utilizatorii pot alege acum orice fundal personalizat pe care îl doresc:


12: Activați anteturile personalizate

În același spirit, dar cu puțin efort, puteți permite modificarea fundalului antetului site-ului și, de asemenea, culoarea titlului site-ului. Această caracteristică nu va funcționa decât dacă începeți prin definirea unei mulțimi de constante. Înlocuiți "lățimea" și "vârful" cu măsurătorile care se potrivesc temei:

 definiți ("HEADER_TEXTCOLOR", "000"); definiți ('HEADER_IMAGE', get_bloginfo ('stylesheet_directory'). 'cale / spre / your / image'); define ("HEADER_IMAGE_WIDTH", "lățimea dvs."); definiți ('HEADER_IMAGE_HEIGHT', 'yourheight');

Odată ce acest lucru este în vigoare, trebuie să scrieți funcția care va aplica fundalul în antetul dvs. Deoarece nu există un marcaj standard pentru un antet al site-ului, WordPress nu poate ghici cum să aplicați CSS-ul necesar pentru dvs. De exemplu, pentru a adăuga un background personalizat la div cu idul "header", procedați astfel:

   

De asemenea, trebuie să creați o funcție, de exemplu mytheme_admin_preview_header (), pentru a modela panoul de previzualizare din admin pentru a se potrivi cu rezultatul final. Zona de previzualizare are #headimg id, în timp ce titlul site-ului și descrierea site-ului au ID-uri de # nume și #desc. Experimentați previzualizarea până când sunteți mulțumit (ă). În cele din urmă, pentru a permite Aspect> Antet panou, sunați:

 add_custom_image_header ('mytheme_header_image', 'mytheme_admin_preview_header');

Referinţă

  • add_custom_image_header în Codul WordPress

13: Realizați traducerile vizibile de utilizator

Nu toată lumea dorește ca blogul lor să fie afișat în limba engleză. Încărcați fiecare șir de caractere pe care utilizatorii trebuie să le citească cu __ () dacă doriți să îl traduceți, sau _e () dacă doriți, de asemenea, să faceți un ecou, ​​cum ar fi:

 __ ('Hello', 'mytheme') _e ('Hello', 'mytheme') // Imprimă de asemenea șirul tradus.

Al doilea argument ar trebui să fie un identificator unic pentru tema dvs., astfel încât diferitele traduceri să nu contravină.

După ce fiecare șir a înfășurat o funcție de traducere, trebuie să utilizați makepot.php script-ul. Modul recomandat de a obține acest script este să instalați Subversion, apoi să executați:

 svn co http://svn.automattic.com/WordPress-i18n/tools/trunk 

Veți obține un director, numit "portbagaj" care conține, printre altele, makepot.php.
Scriptul este rulat astfel

 php makepot.php wp-temă mytheme

mytheme este calea spre directorul tematic. Veți obține un fișier numit mytheme.pot, care este gata pentru a fi folosit într-un program, cum ar fi Poedit pentru a produce un .po fișier care conține o traducere.

Pentru a termina, trebuie să spuneți WordPress unde traducerile trăiesc în directorul tematic, de exemplu:

 load_theme_textdomain ('mytheme', TEMPLATEPATH. '/ languages');

Aici, "mytheme" este identificatorul unic al temei; al doilea argument spune unde sunt fișierele de traducere. TEMPLATEPATH este o constantă specială definită de WordPress, care indică întotdeauna directorul temei curente.

Referinţă

  • Internaționalizarea codului WordPress

14: Manipulați câmpurile personalizate

Acesta este un pic opțional, așa cum ați dori să lăsați acest lucru la discreția utilizatorilor sau a altor dezvoltatori. Veți ști că WordPress acceptă adăugarea de câmpuri personalizate în fiecare post. În multe teme, aceste câmpuri nu sunt afișate deloc, cu excepția cazului în care sunt folosite pentru o caracteristică specială. Unii utilizatori ar putea fi confundați, deoarece consideră că pot folosi câmpuri personalizate pentru a furniza informațiile pe care le doresc.

Există o funcție,

 the_meta ()

pentru a fi numit în Buclă, care afișează toate câmpurile personalizate atașate la o postare, ca o listă neordonată în cheia: formularul de valoare. Desigur, nu este deloc util, dar ar fi mai bine să lăsăm pe cineva să se întrebe de ce câmpurile personalizate nu sunt afișate nicăieri.

Referinţă

  • WordPress codul de intrare

15: Asigurați-vă că totul pare consistent

Una dintre dificultățile legate de un sistem dinamic, cum ar fi WordPress, este că există multe cazuri de margine care nu apar prea des, dar acest lucru poate încă să distrugă aspectul site-ului atunci când o fac. Gândiți-vă la posturi cu comentarii închise sau cu corpuri foarte scurte. Asigurați-vă că nu intră spații ciudate, sau că elementele nu sunt împrăștiate împreună pentru că ceva nu este afișat. Este posibil ca secțiunea de comentarii să nu fie afișată dacă comentariile nu sunt permise sau un câmp de introducere a parolei ar putea înlocui conținutul obișnuit al postărilor atunci când postarea este protejată prin parolă.

De asemenea, încercați să potriviți modul în care comentariile sunt decorate cu corpul principal. Acest ultim punct necesită o atenție deosebită, deoarece, în general, spațiul este mai limitat în zona de comentarii - mai ales atunci când se utilizează comentariile filetate și fiecare răspuns este bătut la dreapta (sau la stânga, pentru RTL).


16: Utilizați testul Unitatea Tematică WordPress.org

WordPress.org oferă un exemplu de fișier de conținut pe care îl puteți importa în instalarea dvs. WordPress, care conține un sortiment de postări de test, pagini și imagini.

Pentru a importa fișierul în WordPress 3.0, trebuie mai întâi să instalați pluginul WordPress Importer. Atunci alege Instrumente> Import> WordPress. Asigurați-vă că ați bifat caseta de selectare "Descărcați și importați fișiere atașate" când vi se solicită. În caz contrar, nu veți obține imaginile asociate unor postări de eșantion.

După finalizarea importului, puteți utiliza această listă de verificare pentru a determina dacă conținutul este afișat așa cum ar trebui.


Concluzie

Am aflat că lucrurile pe care trebuie să le veghezi vin în varietăți multiple. Unele sunt rareori folosite, altele sunt oportunități de personalizare, în timp ce altele sunt mai apropiate de problemele comune de design, care se vor repeta cu orice site WordPress pe care îl proiectați. Lista noastră este cu siguranță departe de a fi exhaustivă, așa că vrem să vă auzim în comentarii! Ce credeți că sunt piesele cele mai des uitate ale funcționalității?

Cod