Vlastiti gumbi (HTML pogled – WordPress)

Kako sam se već pomalo uhodao u svoj blog/stranicu, određeni postovi su podosta veliki/dugački te zahtijevaju mnogo različitih, osobnih (vlastitih) tagova. To se odnosi na npr. naslove (koji imaju isprekidanu crtu gore i dolje te veća slova), slike, liste, boja slova i sl. Od samog početka pisanja svog bloga težim preciznosti i pedantnosti (takav sam i inače, možda malo i pretjerujem) te sve postove pišem ručno u HTML pogledu u WordPressu. Što znači ručno? Znači da ukoliko želim ubaciti sliku morat ću dodati npr. slijedeći kod te mu izmijeniti putanju do slike, za svaku sliku – posebno.

<p style="text-align: center"><a href="/images/phpmysql_2/original/15.jpg"><img style="margin: 5px" src="/images/phpmysql_2/15_thumb.jpg" alt="PHP & MySQL vodič - osnove" /></a></p>

Ovo je jedan od naslova u PHP vodiču

<a name=skupovi_znakova_strings><p style="font-size: 1.5em; border-top:1px dashed black; border-bottom:1px dashed black">Skupovi znakova (eng. strings) | <strong><a href="#"><font color=blue>strings.php</font></a></strong></p></a>

I tako dalje, vrlo su dugački/zahtjevni te mi trebaju kako bi stranica imala svoj prepoznatljiv “izgled”, sve slike jednake, svi naslovi jednaki, sve naredbe (kod PHP-a npr.) iste boje i tako dalje. Ukoliko radite u “Visual” načinu rada, moguće da će vam nabacati hrpu toga nepotrebnoga. Također, volim imati stvari “pod kontrolom” tako da mogu direktno editirati svaki dio posta, bilo boja ili opis slike. Prednost takvog načina je kao što sam rekao preciznost, kontrola te validne stranice (pod predpostavkom da se zna pravilno pisati HTML/CSS kod).

Nedostatak takvog načina je velika sporost. Kako bih to barem malo ubrzao kopirao sam si sve bitnije tagove u .txt dokument iz kojeg samo copy/pasteam u post(ove) te izmijenim naslov, putanju i sl. Međutim, to je opet bilo pomalo sporo zbog prebacivanja između prozora, selektiranja, kopiranja i tako dalje. Tražio sam rješenje da sam dodam svoje vlastite gumbe u HTML pregled u WordPress npr. za naslov bi otvoreni tag bio

<a name=anchor><p style="font-size: 1.5em; border-top:1px dashed black; border-bottom:1px dashed black">

a zatvoreni

</p></a>

Baš kao i za npr. bold, italic i sl. što je već ugrađeno u sam WordPress. I nakon malo guglanja, našao sam ga. Potrebno je editirati JavaScript datoteku wp-includes/js/quicktags.js – te ručno kopirajući 7 redova dodati vlastiti gumb. Pošto su unutra već neki postavljeni, dovoljno ih je kopirati te izmijeniti za svoje potrebe, oni će se već sami automatski ubaciti u sam layout (raspored) HTML pregleda. Tako imamo npr.

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_code'
,'code'
,'<code>'
,'</code>'
,'c'
);

Kopiramo naveden dio, zalijepimo ispod te izmijenimo za svoje potrebe.
Liniju 1 te 2 ostavite kako jesu, jedino izmijenite nastavak nakon ed_ u nešto suvislo, npr. za spoiler sam ja stavio jednostavno – spoiler.
Linija 3 označuje ime tj. što će pisati na gumbu koji će vam se prikazati u editoru.
Linija 4 je početak taga (otvoreni dio).
Linija 5 je završetak taga (zatvoren dio).
Linija 6 postavite po želji, npr. početno slovo taga.

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_spoiler'
,'spoiler'
,'[spoiler name=""]'
,'[/spoiler]'
,'sp'
);

Kod koji sam upravo stavio je moj gumb za ubacivanje spoilera (sadržaj koji ne smije biti odmah prikazan, npr. kraj nekog filma) u post, selektiram tekst te kliknem na gumb i automatski se tagovi dodaju okolo njega.

Ovo bi te još moglo zanimati...

• 04/28/2009 -- Syntax Highlighter/Code Snippet/Plugin (0)

If you are interested in colon cleanse, you may want to check out this colon cleanse information page which will have all the free information you'll need about colon cleanse.

2 komentara to “Vlastiti gumbi (HTML pogled – WordPress)”

1. Dr. says:

   04/27/2009 at 21:58

   Čitam svaki tvoj tutorijal i imam samo riječi pohvale. U jednom od sljedečih tutorijala bi mogao opisati kako se radi refleksija i sjena na nekim logotipovima, slikama itd. Pozdrav i do čitanja.
2. Kerolajn says:

   04/27/2009 at 09:45

   Od samog početka pisanja svog bloga težim preciznosti i pedantnosti (takav sam i inače, možda malo i pretjerujem)….

   malo pretjerujes?!