Obținerea stilurilor editorului vizual pentru a lucra cu formatele postate

Când a fost lansat WordPress 3.1, a fost introdusă o nouă caracteristică numită Post Formats, care a dat autorilor posibilitatea de a selecta unul din cele nouă formate pentru postările lor. Dezvoltatorii temelor trebuiau să adauge suport pentru a include fiecare format, precum și câteva etichete condiționate și CSS pentru a profita de ceea ce au oferit. Fiecare format ar putea fi afișat pe partea frontală cu un alt aspect și un design diferit, deși editorul vizual din wp-admin nu a reflectat acest lucru.

Pentru acest tutorial, mă voi concentra asupra modului în care putem obține tema noastră să afișeze formatul de postare a cotelor, astfel încât aspectul frontal și designul să se reflecte când creați o postare în editorul vizual.

Mai multe despre formatele postate

În total, există doar nouă formate postale care pot fi susținute de o temă: deoparte, Galerie, video, audio, imagine, stare, legătură, citat, conversație. Puteți citi mai multe despre toate formatele de post disponibile în WordPress în articolul lui Braden Keith Post Formats Inside and Out.

Pasul 1: Adăugarea de suport pentru formatele postate

În primul rând, să ne asigurăm că tema acceptă formate postale și stiluri editor. Tot ce trebuie să facem este să includem următoarele în nostru functions.php fişier:

 // Această temă redă stilul editorului vizual cu editorul-style.css pentru a se potrivi stilului temei. add_editor_style (); // Adăugați suport pentru formatele de postare a cotelor add_theme_support ('post-formats', array ('quote'));

Bacsis: Amintiți-vă că atunci când adăugați PHP într-un fișier, acesta trebuie să fie în deschidere și închiderea ?> etichete sau altfel acesta va fi afișat doar ca HTML în loc să fie procesat ca PHP.

  
  Pasul 2: Fișierul de conținut citat
 Pentru a controla modul în care se va afișa formatul mesajului nostru de cotare pe front, trebuie să creați un fișier numit Conținutul-quote.php. Acesta este modelul de pagină al formatului Citat și trebuie să fie plasat în dosarul temei. Iată codul pe care trebuie să-l adăugăm în noul nostru fișier:
  >   
 
 Acest șablon de pagină va fi folosit în paginile index și arhivă și este adesea apelat direct de la index.php fișier cu următorul cod:
    
 
  Pasul 3: Crearea CSS
 Iată un exemplu de modul în care formatul postului de citare arată în tema mea gridicolă pentru WordPress:
  Pentru a face lucrurile în felul dorit, trebuie să includem câteva CSS:
  / * = Citat ---------------------------------------------- ---------------- * / .format-cotație .post-conținut font-size: 18px; linia-înălțime: 27px; padding-left: 50px; font-style: italic;  .format-quote p, .format-quote blockquote margine: 0;  .format-quote: înainte de font-family: Georgia, serif; culoare: # 999; afișare: bloc; font-size: 100px; lățime: 50px; conținut: '\ 201C'; înălțime: 0; top: -40px; poziție: relativă;  .format-cotați blocaj frontieră: 0; umplutura: 0; font-size: 18px; culoare: # 555;  citează text-align: right; font-style: normal; afișare: bloc; margin-bottom: 10px;  citește: înainte de content: '\ 2013 \ 00A0'; 
 CSS de mai sus trebuie să fie inclus în tema noastră style.css fișier, dar trebuie, de asemenea, să creați un Editor-style.css fișier și adăugați-l la tema noastră. Această foaie de stil este ceea ce vom folosi atunci când vom vedea postarea noastră în editorul vizual.
 
  Pasul 4: Magia jQuery
 Aproape fiecare dintre efectele minunate pe care le experimentați în administrul WordPress este creat folosind jQuery. Din moment ce este deja inclus pe pagina de administrare, să construim doar pentru a face editorul nostru vizual să lucreze cu stilurile noastre de editor post.
 În cazul în care un / js dosarul nu există deja în tema dvs., creați unul și adăugați un nou fișier JavaScript numit redactor-stiluri-post-format.js. Odată ce fișierul este creat, deschideți-l în editorul dvs. de text preferat și adăugați următoarele:
  (funcția ($) $ (fereastră) .load (funcția () var init_post_format = $ (' init_post_format);) ($) ($ post-formats-select ') .find (' .post-format ') .change (function () var post_format = ;); funcția add_post_format (post_format) post_format = (0 == post_format)? 'standard': post_format; if (frames ['content_ifr']) $ ('html', frames ['content_ifr']. removeClass () addClass ('format-' + post_format);) (jQuery);
 Cu scriptul nostru de jQuery gata, trebuie să-l enqueue, astfel încât să apară de fapt atunci când navigăm în jurul nostru admin. Iată un alt bloc de cod pe care trebuie să-l adăugăm la noi functions.php fişier:
  add_action ('admin_enqueue_scripts', 'editor_style_admin_script'); funcția editor_style_admin_script ($ hook) if ('post-new.php' == $ hook || 'post.php' == $ hook) wp_enqueue_script ('editor_styles_post_format_js', get_template_directory_uri post-format.js ', adevărat, array (' jquery '),' 1.0.0 '); 
 
  Pasul 5: Scrierea citatului nostru
 Cu totul în vigoare, oricând vom selecta un format de postare pe ecranul de editare post în adminul nostru, o clasă va fi adăugată la editorul vizual similar cu modul în care este adăugat la capătul din față și vom putea să previzualizeze modul în care postarea noastră va arăta așa cum o creăm. Trebuie doar să vă asigurați că utilizați următoarele coduri HTML atunci când creați o postare astfel încât CSS să funcționeze corect.
   Un singur lucru este imposibil pentru Dumnezeu: să găsească orice sens în orice lege privind drepturile de autor de pe planetă.   Mark Twain   
 
 Concluzie
  Există câțiva pași implicați, dar, în cele din urmă, nu este atât de complicat să punem lucrurile în loc pentru ca editorul nostru vizual să lucreze cu formate postale. Din fericire, multe teme includ deja cele mai multe dintre aceste elemente, astfel încât s-ar putea să fie nevoie să creați și să enquegeți noul fișier JavaScript. Una dintre aceste zile, poate cineva va crea chiar și un patch în WordPress, astfel încât această funcționalitate devine parte a nucleului.
 Dacă aveți comentarii sau feedback despre ceva ce ați citit mai sus, vă rugăm să discutați mai jos.



		
			
	   
	




Cod