Andreas Karlsson

/

Om webbutveckling

Magento / WordPress / CodeIgniter / jQuery / Prototype /

Jag heter Andreas Karlsson och jobbar som webbutvecklare på Karlsson & Lord. Du når mig enklast genom andreas.karlsson@indiebytes.se eller 073-512 78 09.

Spara tid genom att lägga till egna knappar i WordPress

Knappar kan knappast ta lång tid att infoga, tänkte jag. Det krävdes nämligen inte många inlägg för att jag skulle tröttna på att märka upp anfanger och kapitäler med <span class="anfang"> respektive <span class="caps"> för hand. I wp-includes/js/quicktags.js kan man snabbt och enkelt skapa egna knappar till WordPress HTML-editor. Sagt och gjort, ovanför koden för fetstilsknappen:

edButtons[edButtons.length] =
new edButton('ed_strong'
,'b'
,'<strong>'
,'</strong>'
,'b'
);

lade jag till följande kod:

edButtons[edButtons.length] =
new edButton('ed_anfang'
,'anfang'
,'<span class="anfang">'
,'</span>'
,'f'
);

edButtons[edButtons.length] =
new edButton('ed_caps'
,'caps'
,'<span class="caps">'
,'</span>'
,'p'
);

och hade med snabbt skapat två knappar som underlättar mitt bloggande. Numera markerar jag bara den bokstav som ska vara anfang eller den text som ska vara i kapitäler och klickar sedan på lämplig knapp (alternativt använder jag mina kortkommandon: Ctrl+F resp. Ctrl+P) för att automatiskt  omsluta min markering med <span class="anfang">A</span> eller <span class="caps">nfang och kapitäler</span>.

Nya knappar: anfang och caps

Nya knappar: anfang och caps

Vad betyder då kodsnuttarna? Funktionen edButton() ställer så gärna upp och förklarar det för oss:

function edButton(id, display, tagStart, tagEnd, access, open) {
    this.id = id;                // used to name the toolbar button
    this.display = display;        // label on button
    this.tagStart = tagStart;     // open tag
    this.tagEnd = tagEnd;        // close tag
    this.access = access;        // access key
    this.open = open;            // set to -1 if tag does not need to be closed
}

Med access key menas den tangent som tillsammans med Ctrl utgör ett kortkommando för knappen. Guld värt!

Uppdatering: För att få anfanger och kapitäler räcker det inte med ovanstående knapper, du måste även lägga till lämpliga stilmallar för klasserna anfang och caps.

6 Responses / Spara tid genom att lägga till egna knappar i WordPress

Niklas 16 januari 2009 at 09:44

Mycket bra tips! :)

Svara
Pelle 17 januari 2009 at 20:01

Väldigt bra tips, men själv får jag det inte att fungera :(

Kör WordPress 2.7 och knappar samt kod blir rätt, men anfangs-bokstaven blir inte ”anfangig”.

Svara
Andreas Karlsson 17 januari 2009 at 21:27

Nej, du måste ha en stylesheet som säger hur klassen anfang ska formateras. Skickar ett mail till dig, tänkte blogga om CSS för anfang och kapitäler nästa vecka. Får passa på att uppdatera blogginlägget så att det framgår tydligt sen.

Pingback: CSS för anfanger och kapitäler | andreask.se

Nemokrati 20 januari 2009 at 21:33

Kan jag göra detta på min blogg?
om jag har wordpress.com-blogg?
eller det kanske bara går om man har wordpress blog. (ej .com)?

Eller kan man inte göra som när man länkar – att man markerar bokstaven som man vill ska ha anfang och bara klistrar in anfangkoden där? Eller hur gör man – går man in på CSS som widgets eller (som du förstår kan jag ingenting om grafisk design) ja,

Svara

Leave a reply / Spara tid genom att lägga till egna knappar i WordPress

*

*