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:

 

Dropdown Lista Med Stilar för TinyMCE

En reaktion på “Dropdown Lista Med Stilar för TinyMCE

Kommentera

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

%d bloggare gillar detta: