Få visningsredigeringsstilar att fungera med postformat

När WordPress 3.1 släpptes introducerades en ny funktion som heter Postformat, vilket gav upphovsmän möjlighet att välja ett av nio format för sina inlägg. Temautvecklare måste lägga till stöd för att inkludera varje format samt vissa villkorliga taggar och CSS för att dra nytta av vad de hade att erbjuda. Varje format kan visas på framsidan med en annan layout och design, men den visuella redigeraren i wp-admin reflekterade inte detta.

För denna handledning kommer jag att fokusera på hur vi kan få vårt tema att visa Quote-postformatet så att frontändlayouten och designen återspeglas när du skapar ett inlägg i den visuella redigeraren.

Mer om postformat

Sammantaget finns det bara nio postformat som kan stödjas av ett tema: åt sidan, Galleri, video-, audio, bild, status, länk, Citat, chatt. Du kan läsa mer om alla postformat som finns tillgängliga i WordPress i Braden Keiths artikelformat Inlägg och Ut.

Steg 1: Lägga till stöd för postformat

Första saker först, låt oss se till att vårt tema stöder postformat och redigeringsstilar. Allt vi behöver göra är att inkludera följande i vår functions.php fil:

 // Detta tema utformar den visuella editoren med editor-style.css för att matcha tematypen. add_editor_style (); // Lägg till stöd för citatens postformat add_theme_support ('postformat', array ('quote'));

Tips: Kom ihåg att när du lägger till PHP i en fil måste den ligga inom öppningen och stängning ?> taggar eller annat visas det bara som HTML istället för att behandlas som PHP.

  
  Steg 2: Citatinnehållsfilen
 För att kunna styra hur vårt Quote Post Format ska visas på framsidan måste vi skapa en fil som heter innehålls quote.php. Det här är vår sida för Quote-format och det måste placeras i vårt temas mapp. Här är koden vi behöver lägga till i vår nya fil:
  >   
 
 Denna sidmall används på våra index- och arkivsidor, och kallas ofta direkt från index.php fil med följande kod:
    
 
  Steg 3: Skapa CSS
 Här är ett exempel på hur Quote-postformatet ser ut i mitt Gridiculous-tema för WordPress:
  För att få saker att se ut som vi vill, måste vi inkludera några CSS:
  / * = Citat ---------------------------------------------- ---------------- * / .format-quote .post-content font-size: 18px; linjehöjd: 27px; padding-left: 50px; typsnittstyp: kursiv;  .format-quote p, .format-quote blockquote margin: 0;  .format-citat: före font-family: Georgia, serif; färg: # 999; display: block; typsnittstorlek: 100px; bredd: 50px; Innehåll: '\ 201C'; höjd: 0; topp: -40px; position: relativ;  .format-quote blockquote border: 0; vaddering: 0; typsnittstorlek: 18px; färg: # 555;  citera text-align: right; typsnittstyp: normal; display: block; marginal-botten: 10px;  citera: före innehåll: '\ 2013 \ 00A0'; 
 Ovanstående CSS måste inkluderas i vårt tema style.css fil, men vi måste också skapa en editor-style.css fil och lägg till det i vårt tema. Det här formatet är det som ska användas när vi ser vårt inlägg i den visuella redigeraren.
 
  Steg 4: The Magic of jQuery
 Nästan varje enda av de fantastiska effekterna du upplever i WordPress-administratören skapas med jQuery. Eftersom det redan finns på admin sidan, låt oss bara bygga upp det för att få vår visuella redigerare att arbeta med våra formatformatredigeringsstilar.
 Om en / js mappen finns inte redan i ditt tema, skapa en och lägga till en ny JavaScript-fil som heter redaktör stilar-Post-format.js. När filen är skapad, öppna den i din favorit textredigerare och lägg till följande:
  (funktion ($) $ (fönster) .load (funktion () var init_post_format = $ ('# postformat-välj') .find ('.post-format: checked') .val (); add_post_format init_post_format);); $ ('# postformat-välj') .find ('.post-format') .byte (funktion () var post_format = $ (detta) .val (); add_post_format (post_format) ;); funktion add_post_format (post_format) post_format = (0 == post_format)? 'standard': post_format; om (ramar ['content_ifr']) $ ('html', ramar ['content_ifr']. removeClass (). addClass ('format-' + post_format);) (jQuery);
 Med vårt jQuery-skript klart måste vi göra det så att det faktiskt visas när vi navigerar runt i vår admin. Här är ett annat litet kodblock som vi måste lägga till i vårt functions.php fil:
  add_action ('admin_enqueue_scripts', 'editor_style_admin_script'); funktionen editor_style_admin_script ($ hook) if ('post-new.php' == $ hook || 'post.php' == $ krok) wp_enqueue_script ('editor_styles_post_format_js', get_template_directory_uri (). '/ js / editor-styles- post-format.js ', true, array (' jquery '),' 1.0.0 '); 
 
  Steg 5: Skriva vår citat
 Med allt på plats, när vi väljer ett postformat på postredigeringsskärmen i vår admin, läggs en klass till den visuella redigeraren som liknar hur den läggs till i främre delen och vi kommer att kunna förhandsgranska hur vårt inlägg kommer att se ut som vi skapar det. Vi måste bara se till att använda följande HTML när du skapar ett inlägg så att vår CSS fungerar korrekt.
   Bara en sak är omöjligt för Gud: Att hitta någon mening i någon upphovsrättslagstiftning på planeten.   Mark Twain   
 
 Slutsats
  Det finns ett par steg involverade, men i slutändan är det inte så komplicerat att lägga saker på plats för att få vår visuella redaktör att arbeta med postformat. Lyckligtvis innehåller många teman redan de flesta av dessa element, så vi behöver bara skapa och skapa en ny JavaScript-fil. En av dessa dagar kanske någon ens skapar en patch i WordPress så att denna funktionalitet blir en del av kärnan.
 Om du har några kommentarer eller feedback om vad du läser ovan kan du gärna diskutera det nedan.



		
			
	   
	




Koda