Tiistaina, 17.8.2021

Duden WordPress-hallintapaneelin avulla verkkosivujen päivittäminen sujuu kuin tanssi

WordPress + Gutenberg + Lohkosisältö = Sujuvasti toimiva hässäkätön hallintapaneeli. Dude rakastaa nopeita, selkeitä ja superhelppokäyttöisiä hallintapaneeleja. Siksi toteutamme kaikki projektimme niin, ettei tekstejä ja kuvia päivitellessä kenenkään tarvitse hakata päätä seinään.

Avasimme kesällä 2020 tapoja, joilla toteutamme projektien sisällönhallinnan WP-adminin eli ylläpidon puolelle. Sisäinen kehitys ja kehittyminen on ollut Dudelle elinehto ja kaiken toiminnan taustalla koko kahdeksanvuotisen toimintakauden ajan ja siksi voimmekin syvällä rintaäänellä ylpeydeksemme todeta, että pakka on mennyt uusiksi tuosta viimevuotisesta. Taas.

Hallintapaneelin kehityskulku on mittava, joten alustan matkaa hieman. Jos haluat hypätä suoraan katsomaan miltä Duden hallintapaneeli näyttää, klikkaa tästä ja hyppää suoraan kohtaan.


Aiemmin meilt√§ kysyttiin ”Mit√§ pagebuilder-lis√§osaa k√§yt√§tte WordPressiss√§?” ja vastasimme: Emme mit√§√§n. Vastaamme niin edelleen. Emme ole koskaan k√§ytt√§neet lis√§osia kuten Visual Composer, Themify Builder, Elementor, The Divi Builder, Beaver Builder, Brizy, WPBakery tai SeedProd. Hyh sent√§√§n, pelk√§st√§√§n n√§iden mainitsemisesta tulee tilkka puklua suuhun. Sori vaan, mutta n√§m√§ lis√§osat tuovat sivuston hallintaan sen verran ylim√§√§r√§ist√§ sekoilua niin k√§ytt√∂liittym√§n kuin toimintojenkin puolesta, ett√§ ei kiitos. N√§iden k√§ytt√§misen takana on yleens√§ se, ett√§ ei ole paneuduttu riitt√§v√§sti laadukkaisiin toteutustapoihin, ei ole riitt√§v√§√§ tietotaitoa koodipuolella tai yritet√§√§n muuten vaan p√§√§st√§ helpommalla ja rahastaa pelk√§st√§ lis√§osan asennuksesta ja jonkinasteisesta sis√§ll√∂ntuotannosta. En suoraan sanottuna keksi yht√§√§n hyv√§√§ syyt√§ miksi k√§ytt√§√§ pagebuildereita ammattimaisella WordPress-sivustolla.

WordPress-suunnittelijan ja sisällöntuottajan painajaisunet

Huonoista WordPress-lisäosista ja -käytänteistä saisi oman kirjoituksensa, mutta niiden sijaan demonstroin nyt seuraavaksi miltä WordPress-suunnittelijan tai sisällöntuottajan verkkosivusto näyttää pahimmissa painajaisunissa.

Nämä tilanteet ovat tosin kokemukseni ja kuulemani mukaan valitettavasti hyvin monella todellisuutta.

1. Liikaa lisäosia asioihin, joita ei pitäisi tehdä random kolmannen osapuolen lisäosilla

Sivuston valikoita, karuselleja, gallerioita, jakonappeja tai mit√§√§n muutakaan sivustoon ”kuuluvaa” visuaalista osaa ei pit√§isi tehd√§ kolmannen osapuolen valmislis√§osalla. Erityisesti sis√§ll√∂ntuotanto ei saisi olla kiinni jossain umpim√§hk√§isess√§ lis√§osassa, joka sotkee WordPressin muuten selke√§√§ yll√§piton√§kym√§√§ kummallisilla toiminnoillaan.

Tällaista ei kukaan halua:

T√§lt√§kin sivustolta saisi 90% lis√§osista karsittua pois, kun toteutus teht√§isiin kerralla hyvin…

2. Jonkun satunnaisen toimijan tekem√§ ”r√§√§t√§l√∂ity” sis√§ll√∂nhallintaty√∂kalu, josta ei ota tolkkua

Vastaan on tullut my√∂s mit√§ ihmeellisimpi√§ itse koodattuja lis√§osia, joista ei ota kukaan selv√§√§. Miten n√§ill√§ p√§ivitet√§√§n mit√§√§n? Mihin n√§m√§ tulevat n√§kyviin? Kertokaa joku? Ja ei kun yhteyksi√§ tekij√§√§n, joka on kadonnut maan pinnalta…

Esimerkki omituisesta custom-lisäosasta.

3. Ne (surullisen)kuuluisat pagebuilderit

Pagebuilderissa on l√§j√§p√§in ongelmia, joista keskeisimp√§n√§ on k√§ytt√∂liittym√§n sekavuus ja asioiden hankala p√§ivitett√§vyys. Kukaan ei ole ottanut huomioon milt√§ lopputulos n√§ytt√§√§. ”V√§h√§n sinnep√§in” -taktiikalla saa ehk√§ jotain aikaan, mutta ei n√§it√§ osaa Erkkik√§√§n k√§ytt√§√§.

Mittee?

4. Ei sisällönhallintatyökalua Рkäytössä vain WordPressin klassinen WYSIWYG-editori

Olemme aina tykänneet tehdä WordPressin sisäänrakennetuilla tavoilla asioita, mutta sisällönhallinnassa WordPressin peruseditori on aikaisemmin ontunut. Klassisella WYSIWYGillä on ollut mahdotonta tehdä niinkin helppoa asiaa kuin asettaa kahta kuvaa vierekkäin järkevästi. Puhun siis tämän näköisestä näkymästä, joka oli käytössä vielä WordPressin versiossa 4.9:

Mikä siinä on, että tavallinen asemointi on niin vaikeaa?

N√§ist√§ syist√§ olemme k√§ytt√§neet Advanced Custom Fields -lis√§osaa jo alkuajoista l√§htien ja rakentaneet sen tarjoamilla kentill√§ asiakkaille helppok√§ytt√∂isi√§ sivustoja. T√§t√§ tapaa avasimme jo √§sken mainitsemassani viimevuotisessa kirjoituksessamme: Sano ei pagebuildereille ‚Äď katso milt√§ n√§ytt√§√§ Duden r√§√§t√§l√∂ity WordPress-hallintapaneeli.

Heippa joustavat kentät РTervetuloa Gutenberg!

Gutenberg tuli WordPressiin virallisesti mukaan syksyllä 2018 WordPress-version 5.0 myötä. Gutenbergin tavoite oli uudistaa kankeaa oletuseditoria, jolla pystyi käytännössä Microsoft Wordin tapaan muokkaamaan tekstin perusmuotoiluja. Muokkaukseen verkkosivukäyttöön se ei kuitenkaan ollut enää riittävä, vaan jäänne jostain 2000-luvulta.

Gutenbergist√§ on hohkattu WordPress-piireiss√§ nyt viimeisen vuoden ja viimeist√§√§n nyt k√§sill√§ olevan version my√∂t√§ (4.9.8) se on tullut my√∂s loppuk√§ytt√§jien ja asiakkaiden tietoon.

Perinteisesti WordPressin yll√§piton√§kym√§ n√§ytt√§√§ erilaiselta verrattuna sivustoon, eik√§ aina ihan tied√§ mist√§ pit√§isi p√§ivitt√§√§ mit√§kin (etenk√§√§n silloin jos tekij√§ on suunnitellut yll√§piton√§kym√§n huonosti tai haastavasti). Gutenbergiin suunnitellaan lohkot, joita voi lis√§t√§ ja ne my√∂s n√§ytt√§v√§t yll√§pidossa samalta kuin varsinaisen sivuston puolella. WordCamp Europessa Gutenbergist√§ puhuttiin t√§n√§(kin) vuonna todella paljon ja v√§hint√§√§n 5.0 versiossa se ‚ÄĚpakotetaan‚ÄĚ k√§ytt√§j√§lle. Toki Classic Editoria voi k√§ytt√§√§ jatkossakin, lis√§osan kautta.

Ote WordPress-seminaari WordCamp Turku -koosteesta 1.10.2018

Ensimm√§iset vuodet hieman karsastimme Gutenberg-sis√§lt√∂editoria. Konsepti eli jatkuvasti ja tuntui, ett√§ joka p√§ivityksen j√§lkeen oltiin menty askel taaksep√§in. Bugejakin l√∂ytyi. Gutenberg oli hy√∂dyllinen erityisesti blogikirjoittajille, mutta muiden sis√§lt√∂tyyppien ja sivujen muokkailuun ajatus tuntui haastavalta, etenkin kun meill√§ oli oma joustaviin sis√§lt√∂kenttiin pohjautuva ratkaisu. Menimme ns. ”hybridimallilla”, jossa sis√§lt√∂sivut tulivat joustavien kenttien kautta ja ”artikkelimuotoinen” sis√§lt√∂ tapahtui Gutenbergill√§ (t√§m√§ tosiaan esitelty aiemmassa hallintapaneelibloggauksessa).

Vuosien aikana Gutenberg kuitenkin kehittyi ja ajauduimme pikku hiljaa lähemmäs Gutenberg-editoria, kunnes keväällä 2021 uudistimme koko hallinnan siirtymällä pysyvästi Gutenbegiin.

Mit√§ t√§m√§ suomeksi sitten tarkoittaa: Sivuston muokkausn√§kym√§ ja varsinainen sivusto n√§ytt√§√§ samalta, eli sivujen esikatseleminen ei vaadi toista v√§lilehte√§ ja ”Esikatsele” -linkin painamista, vaan voit muokata sis√§lt√∂j√§ suoraan. My√∂nnett√§k√∂√∂n, valikoita ja sivuston alaosaa ei p√§√§se viel√§ samasta n√§kym√§st√§ muokkaamaan, mutta WordPressin v√§ki hahmottelee niinsanottua ”Full Site Editing” -p√§ivityst√§, jolla t√§m√§kin tulisi mahdolliseksi.

Miltä Duden WordPress-ylläpitonäkymä näyttää?

Tällä hetkellä olemme lähes täydellisen tyytyväisiä siihen miten sivuston päivittäminen tapahtuu. Otan näihin kuvankaappauksiin esimerkiksi Eepos-oppilaitoshallinnan sivuston, jonka saimme uunista ulos nyt kesällä 2021 ja jota saimme ihan luvan kanssa esitellä blogissamme.

Tältä näyttää hallintapaneeli, jossa ei ole mitään turhaa. Ja tukea saa aina tarvittaessa.

WordPress-hallinnan näkymässä on tärkeää, että kaikki näyttää selkeältä. Minkään ei pitäisi pomppia silmään tai häiritä päivitettäessä. Meidän hallinnassa keskeisintä on, että asiakas tietää missä mennään sivuston suhteen ja siksi Ohjausnäkymässä näkyy vain kaikista oleellisimmat tiedot. Nurkassa lilluu pelastusrenkaan kuva, josta voi lähettää koko tiimillemme suoraan viestiä tai reaaliaikaista palautetta.

Kyllä. Tämä on Etusivun hallintanäkymä. Näyttää samalta kuin sivusto, siistiä, eikös?

Suunnittelemme WordPress-sivustot asiakkaillemme alusta l√§htien ”lohkoajattelua” hy√∂tynt√§en. Eli jokainen sivusto koostuu ns. Lohkoista, joiden avulla voi kasata jokaisen sivun haluamansa n√§k√∂iseksi kuitenkin niin, ett√§ kokonaisuus tuntuu ehe√§lt√§ ja yhdenmukaiselta, eik√§ mik√§√§n hajoa tai r√§j√§hd√§. My√∂sk√§√§n mit√§√§n ”koodia” tai ihmeellisi√§ valintoja ei tarvitse tehd√§, eik√§ raapia p√§√§t√§√§n mist√§s mit√§kin saa aikaan.

Kuvassa näkyvä pinkillä reunalla korostettu on lohko nimeltä Kuva ja teksti.

Tämä yläpuolella oleva näkymä on sivuston eepos.fi varsinaisen kävijän näkymä, eikä ylläpitopuolella, mutta näyttää täsmälleen samalta kuin muokkausnäkymässä.

Lohkojen lisäämisen lisäksi suora esikatselu löytyy myös lohkovalinnoista. Tiedät heti jo ennen lisäämistä miltä lohko tulee näyttämään.

Lohkoa klikkaamalla muokataan lohkon sisältöjä. Varsinainen kirjoittamisnäkymä näyttää hieman erilaiselta, koska toteutamme lohkot edelleen hyödyntämällä yksinkertaisia kenttiä (ACF) ja lisäksi jotkin lohkot vaativat muitakin valintoja kuten millä puolella kuva näytetään tai tehdäänkö lohkosta tumma versio.

Tässä muokataan aika perinteistä lohkoa nimeltään Kaksi tekstipalstaa.

Lohkoja voi milloin vain raahata eri kohtiin tai painaa nuolista ylös tai alas.

Tämän lohkon sisältö päivittyy dynaamisesti ja valittavissa on mm. sisältötyypit ja määrät.

Kirsikkana kakun päällä uusimpana herkkuna (rumpujen pärinää), saanko esitellä, kuvakevalitsimemme, voiko selkeämpää ollakaan:

”Saat mit√§ n√§et” -tyyppinen p√§ivittely on t√§t√§ p√§iv√§√§

Pitkään mekin menimme erilaisella admin-näkymällä, mutta onneksi Gutenberg lopulta kehittyi toivomaamme suuntaan niin, että pystyimme kätevästi lyömään yhteen jo hyväksi havaitut tapamme (ACF:n parissa) ja tekemään lohkojen suunnittelusta kaikista toimivimman ja sujuvimman prosessin.

Lohkoajattelu auttaa myös suunnittelijoitamme paremmin hahmottamaan alusta asti miten sivusto rakentuu kasaan myös teknisellä puolella. Nimeämme lohkojen nimet ja ominaisuudet jo kauan ennen kuin riviäkään koodia on kirjoitettu.

Kiinnostaako kokonainen Gutenberg + Dude -lohkoeditori sivujen päivittelyyn? Onko oma WP-saittisi hallintapaneeli elähtänyt ja hidastunut kymmenistä mainosspämmiä suoltavista lisäosista? Kaipaatko supernopeaa ja superselkeää WP-hallintaa? Jos vastauksesi johonkin näistä on kyllä, ota ihmeessä yhteyttä! PS. Jos koodipuoli kiinnostaa, nämä ja paljon muuta löytyvät GitHubistamme.

Lue myös nämä

WordPress verkkosivualustana

Tällä hetkellä WordPress on kaikista suosituin alusta, jolle verkkosivuja julkaistaan (noin neljäsosa kaikista maailman sivustoista). Aina näin ei ole ollut.

Duden digitiimi WordCamp Europessa – kuulumiset Wienin reissulta

Juhannuksena järjestettiin tähän mennessä maailman suurin WordCamp (=WordPress-tapahtuma) nimeltään WordCamp Europe, jossa Duden tekninen jaosto eli minä (Roni) ja Timi oli mukana alusta loppuun saakka. Jyväskyläläisten remmissä mukana reissasi myös naapuritoimiston MEOMin Natanael Sinisalo.

WordPress-verkkosivut Рvieläkö joku kysyy miksi?

WordPress on maailman suosituin alusta verkkosivuille ja t√§n√§ vuonna 2016 k√§ytt√∂aste l√§hentelee jo kolmasosaa maailman nettisivuista (26,6%). WordPressist√§ on kirjoitettu kaikenlaista liirumlaarumia, mutta my√∂s hyvi√§ kirjoituksia, esimerkkein√§ menk√∂√∂n Contrastin viisi syyt√§ miksi valita WordPress julkaisualustaksi, WP-Palvelun viisi syyt√§ valita WordPress ja Sofokuksen WordPress sivut yritykselle ‚Äď 5 ajankohtaista syyt√§ miksi.