WordPress Blog 3.3.2
Egyedi gombok hozzáadása a HTML szerkesztőhöz.
Megjegyzés: ebből a módszerből jó pár található a nagy wwwilágban, de ez egy újabb és „beszédesebb”…
A fájl neve, melynek ki kell bírnia a „meggyötrést” wp-includes/js/quicktags.js – csakhogy ezt a fájlt (nagyon helyesen) tömörítette a fejlesztő, így ez „nem”, illetve a gyakorlatlanok számára nehezen szerkeszthető, de nem kell megijedni, mert van belőle ugyan ott egy könnyebben szerkeszthető változat is – nevezetesen a quicktags.dev.js
No kezdjünk is neki, de előtte készítsünk mindegyik manipulálandó fájlból másolatot.
1. Elsőként az eredeti quicktags.js fájlunkat átnevezéssel (pl.: quicktags.EREDETI.js) tegyük el,-hátha… „az ördög nem alszik” – „a kapanyél is elsülhet”… A quicktags.dev.js fájlból egyszerű átnevezéssel készítsünk egy quicktags.js fájlt – miután ez megvan, nyissuk meg a „kedvenc” javascript szerkesztőnkkel (én a Free JavaScript Editor-t szeretem, mert remekül kezeli, jól átlátható a kód-tömb szerkesztéskor
- innen beszerezhető)
a.) …, hogy „beszédesebb” legyen, a megnyitott fájlban keressük az alábbi tömböt:
function edButton(id, display, tagStart, tagEnd, access, open) { return QTags.addButton( id, display, tagStart, tagEnd, access, '''', -1 ); }
b.) Egészítsük ki a title taggal, hogy „megszólaljon”
- Képi segítség
function edButton(id, display, tagStart, tagEnd, access, title, open) { return QTags.addButton( id, display, tagStart, tagEnd, access, '''', -1 ); }
Mint tudjuk a title tag többek között arra is jó, hogy ha az egeret a gomb fölé visszük „megszólal” az az megmutatja, hogy az adott gomb milyen parancsot fog végrehajtani. A mi esetünkben is erről van szó, miután megjelenítettük a kívánt helyen a gombot azt is tudni fogjuk, hogy az mire való.
2. Közelítsük meg a lap alját
a.) és keressük meg a következő tömböket:
edButtons[10] = new qt.TagButton(''strong'',''B'',''<strong>'',''</strong>'',''b'',''Kövér (Kivastagít)'');
edButtons[20] = new qt.TagButton(''em'',''I'',''<em>'',''</em>'',''i'',''Dőlt (Italic-dőltbetű)''),
b.) Szúrjuk a kettő közé a saját gomb kódunkat, pl.: az underline (aláhúzás)
- Képi segítség
edButtons[10] = new qt.TagButton(''strong'',''B'',''<strong>'',''</strong>'',''b'',''Kövér (Kivastagít)'');
edButtons[11] = new qt.TagButton(''underline'',''U'',''<u>'',''</u>'',''b'',''Aláhúzás (Aláhúzza a karaktreket)'');
edButtons[20] = new qt.TagButton(''em'',''I'',''<em>'',''</em>'',''i'',''Dőlt (Italic-dőltbetű)''),
Mint látható a 11-es számmal jelöltem értelemszerűen…, hogy a Bold alias Strong (kivastagít) gomb mellet legyen.
Megjegyzés: fontos, hogy figyelembe vegyük a title tag sorrendi helyét (hatodik legyen, a képen meg is számoztam ), valamint tilos elmenteni UTF-8 -ba ezért, ahogy a képen is látható a hosszú ékezetes betűket karakterekkel kell helyettesíteni – mert csakis ebben az esetben járunk el helyesen.
Nos készen is vagyunk, mentsük el, töltsük fel a helyére, teszteljük (frissítsük a lapot) és öröm, mert figyelmesen és okosan jártunk el.
Zárszó:
Egy-két speciális karakter
Kellemes időtöltést!