Kuvien lisääminen WordPressin tagipilveen ja sen muotoilu jQuerylla

Tämä yksinkertainen jQuery skripti mahdollistaa kuvien lisäämisen tagien yhteyteen WordPressin tagipilvessä (wp_tag_cloud). Skriptillä voi myös muotoilla tagipilveä käyttämättä WordPressin funktioita. Yksittäisen tagin yhteydessä olevan kuvan koko muuttuu WordPressin antaman tekstin koon mukaisesti.

jQuery(function() {
    var imagesize;
    var alttxt;
    var linkhref;

    jQuery('a[class^="tag-link-"]').each(function() {
        imagesize = jQuery(this).css('font-size');
        alttxt = jQuery(this).text();
        linkhref = jQuery(this).attr('href');

        jQuery(this).before(
            '<a title="tag: ' +alttxt+ '" href="' +linkhref+ '">
             <img src="path/to/your/image"
             style="width:'+imagesize+';height:'+imagesize+';"
             alt="'+alttxt+' icon" /></a>'
        );
    });
});

Ensin määritellään muutama muuttuja. Sitten jQuery kohdistetaan tietyn class-attribuutin omaaviin linkkeihin. Tagipilven tagilinkkien luokkanimet alkavat tekstijonolla ’tag-link-’ (ja päättyvät tagin id-numerolla). jQueryn .each() -funktio käy läpi jokaisen löydetyn kohteen.

Muuttujille annetaan arvot kohdistetuista linkeistä: käytetty tekstin koko, näkyvä linkin teksti ja tag-arkistoon osoittava href-attribuutti. Tämän jälkeen kirjoitetaan kokonaan uusi html-pätkä tagilinkin eteen. Tässä tapauksessa luodaan kuvalinkki ja täytetään sen arvot vastaavilla muuttuja-arvoilla.

Tämän tapaisen skriptin voi helposti laajentaa muuttamaan tagipilven ulkoasua vielä laajemmalti: esimerkiksi tekstin värin voi säätää muuttumaan tekstin koon mukaisesti. Tämä skripti on parasta sijoittaa sivun footer-osioon tai ainakin tagipilven jälkeen.