Hej. Jag heter Andreas Karlsson och jobbar med webb och grafisk design.

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.
  • 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,
  • Jag är osäker på hur det kan tänkas fungera med Wordpress.com, jag har ingen erfarenhet därifrån. Det du alltid kan göra är ju att markera ut din anfangsbokstav för hand tillsammans med inline styles.

    Exempel:
    <span style="color: #c30; display: inline; float: left; font-size: 5em; line-height: 0.5em; margin: 0.30em 0.15em 0em 0em; text-transform: uppercase;">A</span>


    Detta innebär ju dock en hel del merjobb!
  • 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".
  • 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.
  • Mycket bra tips! :)
blog comments powered by Disqus