Korinaa kuopasta

JavaScript-tiedostoihin on tarkoitus linkittää siltä sivulta, jossa arvostelutoimintoa halutaan käyttää. Viihdeuutinen.net:in puolella olen linkitellyt näin:

<script type="text/javascript" src="/textpattern/jquery.js"></script>
<script type="text/javascript" src="/js/wlk_helpful.js"></script>

Sivustolla sijaitseva wlk_helpful.js sijaitsee kansiossa /js/, joten jos omalla sivustollasi kyseinen tiedosto sijaitsee toisaalla, on luonnollisesti syytä tehdä modifikaatioita tuohon koodiin. Absoluuttisia osoitteita ei välttämättä kannata käyttää kutsuttaessa noita kahta tiedostoa, sillä ainakaan minulla Ajax-arvostelu ei suostunut toimimaan kunnolla. Tämän äskeisen tiedon paljastaminen maksoi minulle noin 15 minuuttia eliniästäni. ;-) Virittelin nimittäin tuota toimintoa absoluuttisten osoitteiden kanssa suhteellisen kauan ennen kuin äkkäsin käyttää relatiivisia osoitteita. Eli älkää linkittäkö kyseisiin tiedostoihin näin:

<script type="text/javascript" src="http://www.omaosoite.com/textpattern/jquery.js"></script>
<script type="text/javascript" src="http://www.omaosoite.com/js/wlk_helpful.js"></script>

No niin. Kimurantein vaihe lienee ohi. Noudattamalla liitännäisen asennusohjeita systeemin kytkeminen päälle pitäisi onnistua vaivattomasti. Keskitytään seuraavaksi itse arvostelulomakkeen ulkoasun muokkaamiseen. Meikäläisellä yksittäisissä Viihdeuutinen.net-saitin artikkeleissa näytetään alla esitetyllä tavalla nuo arvostelut.

Tehdään samanlainen. Ensi töiksi olisi kajottava itse Ajax-arvostelutoiminnon pluginin lähdekoodiin, sillä sitä ei ole ns. lokalisoitu. Avataan Textpatternista käsin pluginin lähdekoodi ja tehdään sinne pari muutosta. Suomenkielisillä sivustoilla voisi olla syytä tehdä koodiin seuraavat muutokset:

1. Sana “Helpful?” vaihtoon, laitetaan vaikka “Hyödyllinen?”.
2. “Yes” = “Kyllä”
3. “No” = “Ei”

Näiden lisäksi virittelin vielä arvostelulomakkeen ympärille käärittävää ul-elementtiä, johon lisäsin suomenkielisen ryhmäselektorin, sillä koen helpoksi muistaa tuollaiset yksinkertaiset suomalaiset sanat. Selkeästi nimetyt CSS-selektorit helpottavat myöhemmin asioiden hahmottamista.

Tässä vielä pluginin koodiin tekemäni muutokset:

Skipataan suoraan asian ytimeen ja jätetään yksityiskohdat taka-alalle. Tässä on koko roskan CSS-merkkaus:

/* Artikkelin arvostelu */

ul.artikkeliarvostelu {
list-style: none;
}

ul.artikkeliarvostelu li {
display: inline;
margin-right: 10px;
}

ul.artikkeliarvostelu li.plus span.thecount,
ul.artikkeliarvostelu li.minus span.thecount {
padding-left: 5px;
cursor: default; /* Poistetaan häiriötekijä kun käyttäjä hapuilee arvostelulinkkiä */
}

ul.artikkeliarvostelu li.plus span.thecount {
background: #690 url(../images/plus2.png) no-repeat 0 0;
}

ul.artikkeliarvostelu li.minus span.thecount {
background: #c00 url(../images/miinus2.png) no-repeat 0 0;
}

ul.artikkeliarvostelu li a {
padding: 0 5px;
text-decoration: none;
color: #fff;
}

ul.artikkeliarvostelu li a.wlk_helpfulplus {
background: #690 url(../images/plus.png) no-repeat 100% 100%;
}

ul.artikkeliarvostelu li a.wlk_helpfulminus {
background: #c00 url(../images/miinus.png) no-repeat 100% 100%;
}

ul.artikkeliarvostelu li a span {
padding-left: 15px;
}

ul.artikkeliarvostelu li a.wlk_helpfulplus span.distext {
background: url(../images/plusnuoli.png) no-repeat 0 5px;
}

ul.artikkeliarvostelu li a.wlk_helpfulminus span.distext {
background: url(../images/miinusnuoli.png) no-repeat 0 5px;
}

ul.artikkeliarvostelu li a:hover {
color: #ff9;
}

Monessa yllä listatussa rivissä linkitetään eri kuvatiedostoihin. Kuvien osoitteet kannattaa tietysti säätää kuntoon mikäli käytät kuvia esimerkistä poikkeavissa osoitteissa tai jos kuvien tiedostonimet eivät ole samat kuin tässä. Kuviahan ei tietenkään ole pakko käyttää, sillä ne tässä tapauksessa ovat vain koristeina. Tässä vielä arvostelulomakkeen kuvatiedostot, joilla pyöristetään pari kulmaa (näitä kuvia saa siis ihan vapaasti käyttää omissa projekteissa):

• miinusnuoli.png
• plusnuoli.png
• plus2.png
• plus.png
• miinus2.png
• miinus.png

Koska aika on arvokasta, kannattaa tutustua tähän alla näkyvään listaan jos mielit löytää tämän nettisivuston parhaat kirjoitukset. Tässä alapuolella on kaikkein luetuimpia kirjoituksia Korinaa kuopasta -blogin aarreaitasta. Kirjoitukset on järjestetty suosituimmuusjärjestykseen siten, että luettelon kärjessä on tällä hetkellä eniten lukukertoja saaneet kirjoitukset.

Luetuimpia blogimerkintöjä

• Visa Electronin kytkeminen PayPaliin. (3822 lukukertaa)
• [REC] on hieno, kauhea. (2268 lukukertaa)
• Nämä tahkoavat rahaa netistä blogin avulla. (1665 lukukertaa)
• Mikä rangaistukseksi 80 000 salasanan varastamisesta? (1635 lukukertaa)
• Salasanojen varastaminen ei olekaan rangaistava teko. (1277 lukukertaa)

Blogimerkintää "Textpatternin julkaisujen arvostelu Ajax-vetoisella pluginilla" muokattiin viimeksi 76 päivää sitten, eli maanantaina 28.12.2009 kello 12:12. Kirjoitukseen on julkaistu kommentteja 4 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.

Julkaisun kommentit

Oho! Tämän julkaisun kommentointi onkin jo suljettu. Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 4 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Textpattern. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2008/01/10/textpatternin-julkaisujen-arvostelu-ajax-vetoisella-pluginilla.

• Matkailusivusto Rantapallo!
• Google luo kilpailijan Wikipedialle.