Dropdown Lista Med Stilar för TinyMCE 1


Visst vore det bra att kunna trycka på en knapp och då styla en markerad del av innehållet med dina egna CSS klasser och stilar? Så klart, och det är precis vad vi ska göra idag, nämligen lägga till en funktion i den visuella redigeraren i WordPress, eller TinyMCE som den heter. Det finns en till rad med verktyg om man klickar på knappen ”Verktygsrad på/av”:

 

Bild på TinyMCE normal redigerar panel

TinyMCE normal redigerar panel

…så dyker det upp en rad till med flera redigerings alternativ:

Bild på TinyMCE expanderad redigerar panel

TinyMCE expanderad redigerar panel

Du ka se att jag har en extra knapp”Format” längst till vänster i den nedre raden, och det är en sådan vi ska skapa.

 

Knappen

Vi börjar med att skapa knappen med en funktion i din barntemats/temats functions.php fil:

Nu bör knappen synas utan alternativ, så det är just alternativen vi fokuserar på härnäst:

Nu ska du ha möjligheten att använda dom nya stilarna, som t.ex. Fet Orange Text:

Bold-orange format

Bold-orange format

Och så kollar vi under huven för att se om det blev något:

Bold-orange klass på en span

Bold-orange klass på en span

Till sist ska dom här klasserna deklareras i en CSS stilmall, och det kan vi göra i en special-stilmall custom-editor-style.css i roten av temat (om ingen editor-style.css redan finns i temat), och sedan skriva in följande i functions.php:

 


Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

En tanke om “Dropdown Lista Med Stilar för TinyMCE