codeART

Ebben a rövid bejegyzésben bemutatjuk, hogyan adhatunk tetszőleges gombot a WordPress bejegyzés szerkesztőjéhez. Ha a vizuális szerkesztő ki van kapcsolva vagy csaj jobb szeretjük a html módot, gyakran gond lehet, hogy bizonyos funkciók nem érhetőek el ebben a nézetben. De van megoldás, méghozzá nem is nehéz.

Cikkünk a hirdetés után folytatódik!

A quicktags.js fájl

A WordPress 2.8 egyik jellemzője a felgyorsult admin felület. Ennek oka a javascript fájlok tömörítése. Az egyik ilyen tömörített fájl a quicktags.js a wp-includes/js könyvtárban.
Ez a fájl felelős a html módban látható gombokért, mint pl. (b – félkövér; i – dőlt; link – hivatkozás) stb. Viszont az alapértelmezett gombok nem elegek. Szükségünk lehet pl. h3 – h6; tag-ekre is, vagy bármi másra.

Ne feledjük, hogy a quicktags.js egy tömörített fájl és ezt nem tudjuk szerkeszteni, de aggodalomra semmi ok, a fejlesztők meghagytak belőle egy nem tömörített verziót is amelyet nyugodtan szerkeszthetünk. Ennek neve quicktags.dev.js. Ahhoz, hogy használni tudjuk, először a quicktags.js fájlt kell átneveznünk pl. quicktags.eredeti.js -re. Aztán a quicktags.dev.js fájlt quicktags.js -re. Remélem érthető és nem gabalyodott bele senki :).

A gombok beillesztése

Ha megvagyunk az átnevezéssel, nyissuk meg az újdonsült quicktags.js fájlunkat és kezdjük el szerkeszteni. Ha jobban megnézzük, láthatjuk a gombokat a kódban. A képen a link gomb után szúrtam be egy h3 tag-et.

A pontos kódja a következő:

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_h3'
,'h3'
,'<h3>'
,'</h3>'
,'h3'
);

Kód magyarázat

edButtons[edButtons.length] =
new edButton(‘ed_neve’ – Létrehozzuk az új gombot és megadjuk a nevét
,’h3′
,’nyitó’ – megadjuk a nyitó, majd
,’záró’ – záró tag-et
,’h3′
);

Néhány példa

h4 fejezetcím

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_h3'
,'h4'
,'<h4>'
,'</h4>'
,'h4'
);

span tag osztállyal

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_span'
,'span'
,'<span class="donate">'
,'</span>'
,'span'
);

div, láthatatlan doboz

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_div'
,'div'
,'<div>'
,'</div>'
,'div'
);

táblázat beillesztés

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_table'
,'table'
,'<table><tr><td>'
,'</td></tr></table>'
,'table'
);

paragrafus beillesztés

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_p'
,'p'
,'<p>'
,'</p>'
,'p'
);

Nem is sorolom tovább. Szinte az összes html kód használható, így-hát mindenki csemegézhet kedvére.

Hasonló cikkek

• Tutorial: Adding Buttons To The Post Editor
• Add/Remove Buttons from WordPress Write Panel

Zárszó

Akik a html nézetet használják azoknak biztosan jól fognak jönni az új gombok, hiszen nagyban lerövidítik a munkát. A vizuális szerkesztőt használóknak sem árt betenni egy-két alap funkciót, mert nem tudni mikor szorulunk a html mód segítségére.

Frissítve:2010.01.16

WordPress verziófrissítésnél (2.8.6 – 2.9.1) vettem észre, hogy az auto frissítés felülírja a quicktag.js fájlt, ami persze logikus is, így viszont elvesznek a gombjaink. Két megoldás létezik, az egyik, hogy meghagyunk egy verziót a quicktag.dev.js-ből is, így frissítéskor csak visszamásoljuk és újra működnek a gombok.
Persze kézi frissítéskor ez elkerülhető. Nem töltjük fel ezeket a fájlokat és kész.