WordPress 6.5 ”Regina” uudet ominaisuudet

Fonttikirjasto

Vaikka uusi fonttikirjasto oli kokeiltavissa jo WordPressin beta-versiossa, se teki virallisen debyyttinsä WordPress 6.5 -julkaisun myötä. Fonttikirjasto mahdollistaa typografian hallinnan suoraan natiivisti WordPressin avulla ilman koodausta, lisäosia ja teeman asetuksia. Lohkoteemoissa voidaan nyt asentaa, poistaa ja aktivoida sekä paikallisia että Google-fontteja varsin vaivattomasti. Mahdollisuus käyttää periaatteessa mitä tahansa fontteja omalla verkkosivustolla antaa web-suunnittelijoille entistä enemmän mahdollisuuksia ja valinnanvaraa ja saa aikaan uniikkeja verkkosivustoja.

Fonttikirjasto liittyy lohkoteemoihin ja sitä pääsee käyttämään siirtymällä lohkoteemassa sivustoeditoriin valitsemalla vasemmassa reunassa Ulkoasu/Editori (Appearance/Editor). Tämän jälkeen voidaan siirtyä oikean Tyylit-paneeliin (Styles). Napauttamalla tämän jälkeen oikeassa reunassa Tekstin muotoilu -kohtaa (Typography) päästään valitsemaan listasta jokin asennettu ja käytettävissä oleva fontti. Kuitenkin napauttamalla yläosassa sijaitsevaa Hallitse fontteja -kuvaketta (Manage Fonts) avautuu uusi fonttikirjasto, jossa voidaan asentaa ja siirtää fontteja.

Fonttikirjaston ensimmäisessä Kirjasto-välilehdessä (Library) näkyy kaikki tällä hetkellä käytettävissä olevat fontit. Toisessa Siirrä-välilehdessä (Upload) voi ladata omalle verkkosivustolle uusia fontteja suoraan omalta tietokoneelta. kaikki yleisimmät fonttitiedostomuodot, kuten .ttf, .otf, .woff ja .woff2 ovat tuettuina. Asenna fontteja -välilehden (Install Fonts) kautta taas voidaan asentaa fontteja nimenomaan Google Fonts -palvelun avulla valtavasta fonttikokoelmasta. Ominaisuus vaatii ainoastaan sen, että Google Fonts -palveluun kirjaudutaan sisään jonkin Google-tilin avulla. Tämän jälkeen käytännössä valitaan vain asennettava fontti ja siitä kaikki halutut muotoilut (lihavointi, kursivointi jne.). Asennetut fontit näkyvät tämän jälkeen Kirjasto-välilehdessä Asennetut fontit -otsikon alapuolella (Installed Fonts). Samasta paikasta asennettuja fontteja voi myös poistaa.

Huomaa, että Google Fonts -palvelun kautta asennetut fontit kopioidaan nykyisin verkkosivuston omalle palvelimelle eikä niitä linkitetä verkkosivustolle Google Fonts -palvelusta. Kun asennetut fontit ladataan suoraan omalta palvelimelta eikä Googlen palvelimelta, tämä ei riko mitään mahdollista yksityisyyden suojaan liittyvää asetusta.

Voit käyttää kaikkia asennettuja fontteja vapaasti sisällöissä seuraavalla tavalla: aktivoi haluamasi tekstiä sisältävä lohko, kuten vaikkapa otsikkoteksti tai kappaleteksti, ja siirry oikean reunan sivupalkkiin. Napauta Tekstin muotoilu -otsikon (Typography) vierellä olevaa ja kolme pientä pistettä esittävää kuvaketta ja valitse listasta Fonttiperhe (Font Family), jolloin Tekstin muotoilu -otsikon alapuolelle ilmestyy uutena ominaisuutena Fontti-valikko (Font). Lopuksi vain valitset haluamasi fontin valikosta. Huomaa, että et voi valita Fonttiperhe-ominaisuutta ellet ole etukäteen jo asentanut jotain fontteja sivustollesi.

Tyyliversiot

WordPress 6.5 -versio toi mukaan päivitetyn version Tyyliversiot-ominaisuudesta, jossa nähdään kokonaisvaltainen kuva siitä mitä muutoksia tyyleihin on milloinkin tehty. Yhteenveto esitetään aikajärjestyksessä ja aiempiin tilanteisiin on mahdollista palata nappia painamalla. Aiemmissa WordPress-versioissa listaus ei kertonut juurikaan kuka tai mitä missäkin vaiheessa oli tehty, mutta uusi versio antaa nyt aiempaa enemmän informaatiota.

Tyyliversioita voi käyttää lohkoteemassa siirtymällä sivustoeditorin Tyylit-paneeliin (Styles) (sama paikka missä on uusi fontttikirjasto). Paneelin yläosassa on kelloa muistuttava Versiot-kuvake (Revisions), jota napauttamalla nähdään sivustoon tehdyt tyylimuokkaukset. Kuvaketta napauttamalla WordPress listaa aikajärjestyksessä kuka sivuston ylläpitäjä on milloinkin tehnyt mitäkin tyylimuutoksia sivustolle. Klikkaamalla historiarivejä nähdään tarkempia tietoja kustakin vaiheesta. Jos halutaan palata johonkin aiempaan tilanteeseen, voidaan avatun vaiheen sisällä napauttaa Käytä-painiketta (Apply).

Gutenberg-sisältöeditorin uudistukset ja lohkojen parannukset

Vaikka suurin osa WordPressin uudistuksista ja parannuksista koskee nykyisin nimenomaan lohkoteemoja ja niiden hallintaa, myös muualle WordPressiin tulee aika ajoin parannuksia ja uudistuksia. WordPress-version 6.5 tärkeimmät Gutenberg-sisältöeditoriin liittyvät uudistukset ja parannukset on kerrottu alapuolella ja ne ovat käytettävissä sekä lohkoteemoissa että perinteisissä teemoissa.

Kansi-lohko (Cover)

Kansi-lohko (Cover) on saanut muutamia parannuksia ja uusia ominaisuuksia. Ensinnäkin lohkon leveyden voi nyt asettaa täysleveäksi. Toiseksi WordPress tunnistaa Kansi-lohkossa käytetyn kuvan ja asettaa sille sopivan peitevärin automaattisesti. Toisin sanoen WordPress valitsee kuvaan sopivan peitevärin sen perustella millaisia sävyjä kuvassa itsessään on eniten. Tätä peiteväriä voi toki itse vaihtaa jälkikäteen siirtymällä lohkon tyyliasetuksiin. Lohkon Väri-asetuksissa (Color) on Kerros-asetus (Overlay), jossa peiteväriä ja sen läpinäkyvyyttä (Opacity) voi vaihtaa ja hienosäätää. Huomaa, että kuvan jälkikäteen vaihtaminen vaihtaa samalla automaattisesti myös peiteväriä silloin, kun peitteen asetuksia ei ole itse muutettu. Jos peitevärin asetuksia on muutettu manuaalisesti niin nämä tehdyt muutokset säilyvät, vaikka Kansi-lohkon kuvaa vaihdettaisiin. Kaiken lisäksi Kansi-lohkon kuvasuhdetta voi muuttaa lohkon asetuksissa. Valittavissa on tyypillisiä kuvasuhteita, kuten 1:1, 3:2, 16:9 jne. Kannattaa katsoa ja testata kuvan leveys ja kuvasuhteen muutos sivuston julkisessa näkymässä, sillä WordPressin hallintapuolella (editorin sisällä) asiat voivat näkyä eri tavalla.

Varjo (Shadow)

Tietyille lohkoille on nyt mahdollista lisätä varjotehoste. Varjon voi lisätä esimerkiksi Kuva– (Image) tai Painikkeet-lohkolle (Buttons) silloin, kun asiat eivät erotu tarpeeksi hyvin taustasta. Varjo toimii jopa Sarake-lohkoissa (Columns), mutta varjoa ei voi käyttää tätä erikoisempien lohkojen kanssa. Käytännössä aktivoidun lohkon tyyliasetuksissa on nykyisin Reunus ja varjo -asetuskohta (Border & Shadow). Aikaisemmissa WordPress-versioissa kun oli vain pelkkä Reunus-asetuskohta. Reunuksen asetuksia taas ovat vakiona Reuna (border) ja Säde (radius), mutta varjon asetukset pitää ottaa erikseen esille napauttamalla kolmea pientä pistettä esittävää kuvaketta otsikon vierellä ja valitsemalla Varjostus (Shadow). Tällöin ilmestyy uusi otsikkoteksti Varjostus (Shadow), jonka alla on Varjo (Drop Shadow). Napauttamalla Varjo-kohtaa voidaan valita sopiva tehoste muutaman esimääritetyn tehosteen valikoimasta. Varjotehosteen lisääminen on erittäin helppoa, mutta valitettavasti tämä ominaisuus ei ainakaan vielä tällä hetkellä tarjoa varjon kustomointia. Tosin sanoen varjon, tyyliä, kokoa, väriä, pehmeyttä tai muita yksityiskohtia ei voi säätää vapaasti ja kutakin kohtaa erikseen. Nämä ominaisuudet voivat toki tulla mukaan myöhemmässä vaiheessa. Olisi myös kätevää, että varjon asetukset olisivat jo valmiiksi valittavissa eikä varjoa tarvitsisi poimia erikseen mukaan vakiona olevien reunuksen ja säteen rinnalle.

Linkki (Link)

WordPressin uusilla ominaisuuksille on joskus sellainen vaikutus, että niitä ei oikein edes tahdo huomata ellei WordPressiä käytä koko ajan niin, että asiat ovat hyvinkin tuttuja. Usein jokin täysin uusi ominaisuus tuntuu siltä, kuin näin olisi ollut aina, vaikka tilanne olisikin juuri muuttunut uuden päivityksen myötä. Yksi tällainen ominaisuus liittyy linkkien lisäämiseen. Työkaluissa on käytettävissä aivan sama linkkikuvake ja linkkien lisääminen tapahtuu aivan samalla tavalla, kuin ennenkin. Pienenä uudistuksena kuitenkin ikkuna, johon linkki syötetään, listaa sivuston sisäiset sivut jo automaattisesti. Aiemmin hakukenttään piti ensin kirjoittaa jotain ennen kuin WordPress alkoi listata kohteita hakusanan perusteella. Toinen muutos on se, että linkin lisäämisen jälkeen linkkiä editorissa napauttamalla nähdään kompaktissa koossa linkitettävän sivuston nimi, osoite sekä favicon-kuvake. Aiemmin tämä näkymä oli hieman erilainen. Lisäksi uutena kuvakkeena on nyt mukana Kopioi linkki (Copy Link), jollaista ei aiemmin ollut. Nämä kaikki asiat olisivat voineet olla näin jo kauan aikaa sitten, joten muutos on hyvin huomaamaton.

Asiakirjan yleiskatsaus (Document Overview)

Aiemman uudistetun linkityksen ohella toinen hyvin huomaamaton uudistus koskee Asiakirjan yleiskatsaus -toimintoa (Document Overview), joka listaa sisällössä olevat lohkot. Aiemmin oli mahdollista uudelleennimetä ryhmät (group), mutta ei yksittäisiä lohkoja, kuten vaikkapa kuva tai kappaleteksti. WordPress 6.5 tarjoaa nyt mahdollisuuden uudelleennimetä kaikki lohkot miten tahansa. Esimerkiksi yksittäinen Kappale-lohko (Paragraph) voisi olla mieluummin vaikkapa Ingressiteksti tai toisena esimerkkinä yksittäinen Painike (Button) voisi olla mieluummin vaikkapa Tarjouspyyntöpainike. Nimeä uudelleen -komento (Rename) löytyy kunkin lohkon vierellä olevan kolmea pientä pistettä esittävän kuvakkeen sisältä. WordPress 6.5 -version pieni uudistus on se, että nyt Nimeä uudelleen -komennon kuin tietysti kaikki muutkin kolmea pistettä esittävän kuvakkeen sisältä löytyvät komennot voi poimia nopeammin napauttamalla lohkoriviä hiiren oikealla napilla. Juuri tällaisiin pieniin ominaisuuksiin tottuu hyvinkin nopeasti ja pian unohtuu se tosiseikka, että tämäkin ominaisuus on tullut vasta hetki sitten mukaan WordPressiin.

Gutenberg-asetukset

Gutenberg-sisältöeditorin sisällä olevat asetukset ovat nyt hieman eri tavalla esitetty ja jaoteltu, kuin aiemmissa WordPress-versioissa. Voit valita missä tahansa Gutenberg-sisällössä oikean sivupalkin kolmea pientä pistettä esittävän kuvakkeen takaa Asetukset (Settings). Vanhemmissa WordPress-versioissa esille tulevat asetukset koostuivat Yleiset (General), Lohkot (Blocks) ja Paneelit (Panels) -välilehdistä. WordPress 6.5 -versiossa asetukset koostuvat sen sijaan Yleiset (General), Ulkoasu (Appearance), Saavutettavuus (Accessibility) ja Lohkot (Blocks) -asetuksista.

Muita WordPress 6.5 -version muutoksia ja uudistuksia

Latausnopeus

Gutenberg-editoria on viilattu entistä nopeammaksi sekä lohkoteemoihin kuuluvassa sivustoeditorissa että perinteisten teemojen yhteydessä olevassa sisältöeditorissa. Esimerkiksi sisällön tuottamisen ja komentojen käytön mainostetaan WordPress 6.5 -versiossa olevan 4 kertaa nopeampaa, kuin aiemmassa WordPress 6.4 -versiossa. Samoin ensimmäisen lohkon latauksen pitäisi tapahtua kaksi kertaa nopeammin, kuin aiemmassa versiossa.

Saavutettavuus

WordPress 6.5 sisältää yli 65 saavutettavuusparannusta. Versio 6.5 lisää muun muassa kontrastiasetuksiin, kohdistimen tarkennukseen, alivalikoihin ja elementtien sijoitteluun liittyviä korjauksia, jotka auttavat parantamaan WordPress-kokemusta.

WordPress-asetukset

Yksi pieni mutta kiva uudistus on se, että WordPressin yleisiin asetuksiin on tullut mukaan ns. favicon-kuvakkeen lisäämismahdollisuus. Aiemmin tämä on tehty yleensä erillisen Mukauttimen (Customizer) avulla. Nyt voidaan siirtyä Asetukset/Yleinen (Settings/General), jolloin Sivuston kuvake -asetus on esillä Sivuston otsikko ja Kuvauksen -asetuskohtien alapuolella. Sivuston kuvake tarkoittaa pienikoista kuvaketta selaimen välilehden sisällä.

Lohkoihin perustuvat sivupohjat

Lohkoteemojen muokkausta on parannettu siten, että Sivupohjia (Patterns) voidaan muokata joko niin, että muutos kohdistuu vain yhteen lohkoon ja yhteen paikkaan tai niin, että muutos kohdistuu kaikkialle missä kyseistä sivupohjaa on käytetty. Lisäksi Hallitse sivupohjia (Manage patterns) -luetteloon on tullut mukaan uusia suodatustoimintoja ja pieniä lisäyksiä, kuten esimerkiksi mahdollisuus valita, kuinka monta kohdetta esitetään per sivu.

AVIF-kuvatiedoston tuki

WordPress 6.5 -version AVIF-tuen myötä verkkosivustoilla voidaan käyttää laadukkaita mutta pienikokoisia kuvatiedostoja, mikä johtaa sivuston nopeampaan latausaikaan. AVIF, joka tulee sanoista AV1 Image File Format, on moderni, avoimen lähdekoodin kuvanpakkausmuoto. Se hyödyntää AV1-kodekin käyttämiä pakkaustekniikoita ja tarjoaa laadukkaan kuvan vain murto-osalla perinteisten kuvamuotojen, kuten JPEG ja PNG, tiedostokoosta. AVIF-muotoa ovat alkaneet tukemaan suuret verkkoselaimet, kuten Google Chrome (2020), Mozilla Firefox (2021) ja Microsoft Edge (tammikuussa 2024) sekä tietyt kuvankäsittelysovellukset, kuten Adobe Lightroom (2023) ja Adobe Illustrator (2022). Ota huomioon, että markkinoilla on myös muunmerkkisiä selaimia ja kuluttajilla saattaa olla käytössä myös vanhentuneita selainversioita. Lisäksi puhelimien ja tablet-laitteiden selaimissa ja niiden tiedostotuessa on eroja tietokoneiden selaimiin verrattuna. Täydellinen selaintuki kannattaakin tarkistaa muualta.

Lisäosat

Lisäosien (Plugins) luetteloa on parannettu siten, että lisäosien kehittäjät voivat luetella siinä kaikki muut lajennukset, joita jonkin yksittäisen laajennuksen käyttäminen vaatii tai jotka olisi suositeltavaa asentaa. Myös laajennusten poistaminen voidaan tehdä niin, että yhden laajennuksen poistaminen poistaa samalla kaikki muut tähän samaan ominaisuuteen liittyvät laajennukset. On myös mahdollista estää yhden laajennuksen poistaminen ennen, kuin jokin toinen tähän samaan ominaisuuteen liittyvä laajennus on poistettu.

Sisältölohkot ja Custom Fields -kentät

WordPress 6.5 tarjoaa uuden rajapinnan Custom Fields -ominaisuutta varten (vapaasti suomennettuna ”mukautetut kentät”). Custom Fields tarkoittaa WordPress-sivustoon joko koodaamalla tai esimerkiksi lisäosien avulla kehitettyä kustomoitua kenttää, johon voidaan tallentaa metatietoa. Tämä metatieto voi olla numeroarvo, tekstiä tai jokin muu sisältö, joka voidaan muuttaa suoraan WordPressin sisällä ja sitten tallentaa tietokantaan. WordPress 6.5 tarjoaa nyt rajapinnan näiden metatietojen muuttamiseen niin, että tällaisia kenttiä ja niissä olevien metatietojen muuttamista varten ei tarvitse rakentaa omia kustomoituja lohkoja tai muita työkaluja. Tämä ominaisuus liittyy lähinnä WordPress-kehittäjiin.

Interactive API

Interactive API on uusi rajapinta, jonka avulla WordPress-kehittäjät voivat luoda dynaamisia sisältöjä WordPress-verkkosivuille. Käytännössä ominaisuus mahdollistaa sivulla tapahtuvien asioiden esittämisen ilman sivulatausta. Esimerkkeinä vaikkapa kommenttien näyttäminen ja hakutulosten esittäminen nappia painamalla viiveettä ja ilman sivun uudelleenlatausta. Tämä tekee sivuston käytöstä nopeampaa ja tarjoaa paremman käyttökokemuksen,