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.