Få Visual Editor-stiler til å jobbe med Postformater

Når WordPress 3.1 ble utgitt, ble en ny funksjon kalt Postformater introdusert, noe som ga forfattere muligheten til å velge ett av ni formater for innleggene sine. Temautviklere måtte legge til støtte for å inkludere hvert format, samt noen betingede koder og CSS for å dra nytte av det de måtte tilby. Hvert format kan vises på forsiden med en annen layout og design, selv om den visuelle editoren i wp-admin ikke gjenspeiler dette.

For denne opplæringen skal jeg fokusere på hvordan vi kan få temaet vårt til å vise Quote-postformatet slik at frontendelayout og design reflekteres når du lager et innlegg i den visuelle redaktøren.

Mer om postformater

I alt er det bare ni innleggformater som kan støttes av et tema: side, galleri, video, lyd, bilde, status, link, sitat, chatte. Du kan lese mer om alle postformatene som er tilgjengelige i WordPress i Braden Keiths artikkel Postformater Inside and Out.

Trinn 1: Legge til støtte for postformater

Første ting først, la oss sørge for at vårt tema støtter innleggformater og editor stiler. Alt vi trenger å gjøre er å inkludere følgende i vår functions.php fil:

 // Dette temaet stiler den visuelle editoren med editor-style.css for å matche tema stilen. add_editor_style (); // Legg til støtte for tilbudsformatene add_theme_support ('postformater', array ('quote'));

Tips: Husk at når du legger til PHP i en fil, må den være innenfor åpningen og lukking ?> koder eller annet vil det bare vises som HTML i stedet for å bli behandlet som PHP.

  
  Trinn 2: Sitatinnholdsfilen
 For å kontrollere hvordan vårt Quote Post Format vil vise på forsiden, må vi opprette en fil som heter innholds quote.php. Dette er vår sideformat for sitatformat, og det må plasseres i mappens tema. Her er koden vi må legge til i vår nye fil:
  >   
 
 Denne sidemalen vil bli brukt på våre indeks- og arkivsidene, og kalles ofte direkte fra index.php fil med følgende kode:
    
 
  Trinn 3: Opprette CSS
 Her er et eksempel på hvordan Quote-postformatet ser ut i mitt Gridiculous tema for WordPress:
  For å få ting som vi ønsker, må vi inkludere noen CSS:
  / * = Sitat ---------------------------------------------- ---------------- * / .format-sitat .post-innhold font-size: 18px; linjehøyde: 27px; polstring-venstre: 50px; font-style: kursiv;  .format-sitat p, .format-quote blockquote margin: 0;  .format-sitat: før font-family: Georgia, serif; farge: # 999; skjerm: blokk; skriftstørrelse: 100px; bredde: 50px; innhold: '\ 201C'; høyde: 0; topp: -40px; stilling: relativ;  .format-quote blockquote border: 0; polstring: 0; skriftstørrelse: 18px; farge: # 555;  sitere text-align: right; font-style: normal; skjerm: blokk; margin-bunn: 10px;  sitere: før innhold: '\ 2013 \ 00A0'; 
 Ovennevnte CSS må inkluderes i vårt tema style.css fil, men vi må også opprette en redaktør style.css filen og legg den til vårt tema. Dette stilarket er det som skal brukes når vi ser innlegget vårt i den visuelle redaktøren.
 
  Trinn 4: The Magic of jQuery
 Nesten hver eneste av de fantastiske effektene du opplever i WordPress-administrasjonen, opprettes ved hjelp av jQuery. Siden det allerede er inkludert på admin siden, la oss bare bygge opp av det for å få vår visuelle redaktør å jobbe med stilformatene for postformat.
 Hvis en / js mappen eksisterer ikke allerede i temaet ditt, lager en og legg til en ny JavaScript-fil som heter redaktør stiler-post-format.js. Når filen er opprettet, åpner du den i din favoritt tekstredigerer og legger til følgende:
  (funksjon ($) $ (vindu) .load (funksjon () var init_post_format = $ ('# postformater-velg') .find ('.post-format: merket') .val (); add_post_format init_post_format);); $ ('# postformater-velg') .find ('.post-format') .change (funksjon () var post_format = $ (dette) .val (); add_post_format (post_format) ;); funksjon add_post_format (post_format) post_format = (0 == post_format)? 'standard': post_format; hvis (rammer ['content_ifr']) $ ('html', rammer ['content_ifr']. removeClass (). addClass ('format-' + post_format);) (jQuery);
 Med vårt jQuery-skript klar, må vi enqueue det slik at det faktisk vises når vi navigerer rundt vår admin. Her er en annen liten blokk med kode som vi må legge til i vår functions.php fil:
  add_action ('admin_enqueue_scripts', 'editor_style_admin_script'); funksjonen 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 '); 
 
  Trinn 5: Skrive vårt sitat
 Med alt på plass, når vi velger et innleggformat på postredigeringsskjermen i admin, vil en klasse bli lagt til den visuelle editoren som ligner på hvordan den legges til i frontenden, og vi vil kunne forhåndsvise hvordan innlegget vårt vil se som vi skaper den. Vi må bare sørge for å bruke følgende HTML når du lager et innlegg slik at CSS fungerer riktig.
   Bare én ting er umulig for Gud: Å finne noen fornuft i noen lov om opphavsrett på planeten.   Mark Twain   
 
 Konklusjon
  Det er et par trinn involvert, men til slutt er det ikke så komplisert å sette ting på plass for å få vår visuelle redaktør å arbeide med innleggformater. Heldigvis inneholder mange temaer allerede de fleste av disse elementene, slik at vi kanskje trenger å lage og enqueue den nye JavaScript-filen. En av disse dagene, kanskje noen selv vil lage en oppdatering i WordPress, slik at denne funksjonaliteten blir en del av kjernen.
 Hvis du har kommentarer eller tilbakemelding på alt du leser over, kan du gjerne diskutere det nedenfor.



		
			
	   
	




Kode