tavis nörttimaailmassa

EksisONE - artikkeleita ja ohjeita nörttimaailmasta

Ulosmenevä linkki: ikoni näkyviin

Wikipedia kertoo pienen ikonin avulla mikä linkki menee ulos sivustolta. Saa pienen varoituksen, että ollaan poistumassa sisällöstä. Minulla on aina ollut hieman viha/rakkaus-suhde moisen kanssa. Osaaltaan koen siitä olevan määrättyä informatiivista hyötyä. Osaksi se on taas kökön näköinen – tiedän, tuo ei ollut kovinkaan ammattimainen näkemys. Mutta ehdottomasti suurin rajoite on ollut, että outbound-linkin osoittavan kuvakkeen käyttöön on WordPressissä tarvinnut lisäosan. En pidä sitä niin oleellisena asiana, että sen takia haluaisin asentaa uuden pluginin. Onneksi ei tarvitsekaan, vaan sen saa toteutettua CSS-kikalla. josta en ollut edes tietoinen.

Ennenkuin edetään pidemmälle, niin kerrataan pari WordPressin muokkauksen perusasiaa.

  • Juuri siihen nimenomaiseen teemaan kohdistuvat muokkaukset laitetaan lapsiteeman functions.php -tiedostoon tai CSS:ään
  • Yleisesti WordPressin toimivuuteen ja kaikki teemoihin tasapuolisesti kohdistuvat muokkaukset laitetaan esimerkiksi Snippets-lisäosaan

Tämä siksi, että jos käytät aina teeman/lapsiteeman functions.php -tiedostoa, niin menetät kaikki muokkaukset, jos vaihdat teemaa. Jos jokin säätö, tyypillisesti jokin <div> muokkaus, on yhteen teemaan liittyvä, niin sehän saakin kadota teeman vaihtuessa.

CSS ja ikoni linkkeihin

Lisää tämä CSS:ään:


/* ikoni vain linkkeihin, jotka alkavat http* ja host */
[href^="http"]:not([href*="example.com"])::after {
content: '(external link)';
display: inline-block;
width: .7em;
height: .7em;
text-indent: .7em;
white-space: nowrap;
overflow: hidden;
background-image: url(https://www.example.com/wp-content/uploads/Icon_External_Link.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
margin-left: .1em;
margin-right: .2em;
}

Muista vaihtaa

  • example.com oikeaksi
  • ikonin url oikeaksi

Itse käytin Wikipedian ikonia. Sen saa ladattua täältä https://commons.wikimedia.org/wiki/File:Icon_External_Link.svg

Voit linkittää ikonin ulkoisestakin urlista, mutta siinä ei ole mitään mieltä. Tulee turhaa osoitteen selvittämistä ja muuta sivuston kuormaa. Äkkiä käy niin, että DNS:n selvittäminen vie enemmän aikaa kuin 12 x 12 px ja kilon painoisen svg-ikonin lataaminen.

Jos käytät svg-ikonia, niin sen lataaminen ei välttämättä onnistu. Lähtökohtaisesti svg:n lataaminen on estetty WordPressissä, joten se täytyy sallia. Näppärintä on käyttää siihen erillistä lisäosaa.

Toki voit käyttää mitä tahansa sopivaa ikonia.