WordPress sivusto Tietostartti uudistui

WordPress sivusto uudistui! Miten niin uudistui?! Minä itse uudistin ne! Minä haastoin itseni ja uudistin ne. Tein pitkiä päiviä, jopa klo 3:een asti yöllä ratkaisin erilaisia ongelmia. Heräsin usein myös klo 5:n aikaan miettimään, miten toteuttaisin uudella sivustolla haluamani toiminnot. Mieheni ei oikein aina ymmärtänyt WordPress-jargoniani, kun yritin hänelle selvittää ongelmiani. Muutenkin elelin niin tiiviisti omassa wordpress-kuplassani, että hän monesti tunsi itsensä täysin unohdetuksi.

Ajatuksia pää täynnä

Mikä oli lähtötilanne?

WordPress sivustoni oli ennen Nettihotellissa ja minulla oli käytössä StudioPressin Genesis Framework ja ulkoasuteemana Daily Dish Pro, josta olin aikoinaan maksanut pienen kertakorvauksen. Perustamisvaiheesta voit lukea artikkelistani WordPress kasvatti luovuuden siivet.

Nyt kuitenkin halusin sekä muuttaa web-hotellia että myös ulkoasuteemaa. StudioPressin Genesis teemat ovat erinomaisia ja suosittuja, mutta halusin haasteita ja muutosta. Sivusto oli ollut muuttumattomana jo melkein neljä vuotta eli siitä asti kun sen perustin.

Taustalla on toki tapahtunut paljonkin muutosta. WordPress on kokenut varsin ison rakennemuutoksen jo loppuvuonna 2018, sillä WordPress-version 5.0 mukana saapui uutena ominaisuutena Gutenberg-editori eli lohko-editori. Tämä mullisti todella sisällöntuotannon ja olihan siinäkin opettelemista minulle.

Mitä halusin muuttaa?

Joka tapauksessa nyt oli jälleen muutoksen aika!

Valitsin uudeksi web-hotelliksi Zonerin, joka on jo useina peräkkäisinä vuosina valittu parhaimmaksi kotimaiseksi web-hotelliksi. Ulkoasuteemaksi valitsin GeneratePressin, joka on valittu yhdeksi suosituimmaksi ja nopeimmaksi WordPress-teemaksi koko maailmassa. Vaihtoehtoja toki oli, mutta valitsin joka tapauksessa tällä kertaa nämä.

Siitä sitten alkoikin noin kuukauden pituinen urakka. Selvitettävää riitti. Miten siirrän sivustoni siten, että kaikki blogi postausten url-linkit säilyisivät muuttumattomina? Miten saisin uuteen ulkoasuteemaan kaikki haluamani ominaisuudet? Miten luon Zonerille tarvittavat sähköpostitilit? Miten teen varmuuskopiot?

WordPress sivuston siirto

WordPress sivuston siirrossa käytin All-In-One WP Migration -lisäosaa, jolla sain siirrettyä koko sivuston Zoner:iin. Siirrossa sinänsä ei ollut ongelmia, mutta Zoner:in väliaikaisen osoitteen kanssa  oli kyllä ongelmia tuotantoon siirron jälkeen. Väliaikainen osoite kummitteli jopa Googlen hakutuloksissa. Itse asiassa taitaa kummitella vieläkin.  Ilmeisesti se pitänee mennä korjaamaan Google Analytics:in kautta.

Sivuston siirto onnistui All-In-One WP Migration -lisäosalla.

Huomasin myös, että Googlen hakutuloksia sotki se, että aikaisemmin sivustoni lähti suoraan blogikirjoituksista ja nyt käytössä on erillinen etusivu. Jouduin itse asiassa korjaamaan jokaisen artikkelin osoitteen. Onneksi minulla on käytössä Redirection -lisäosa, jolla tällaiset muutokset saa tehtyä näppärästi.

Zonerin asiakaspalvelu on toiminut kuitenkin aivan upeasti ja olen aina saanut tarvittavan avun ja opastuksen.

Mahtava WordPress-yhteisö

WordPress-yhteisö on mahtava

Enemmän ongelmia olikin sitten ulkoasuteeman kanssa, sillä aikaisemmin Genesis Framework sisälsi myös ns. ”Child”-teeman. Olin oppinut ohjeiden avulla tekemään muutoksia suoraan Child-teeman Functions.php:hen ja CSS:ään. GeneratePress ei alkuasetuksissaan sisältänyt Child-teemaa, joten ominaisuuksien muokkaaaminen on vaikeampaa. Toki Child-teeman pystyisi asentamaan jälkeenpäinkin, mutta toistaiseksi yritän pärjätä ilman sitä.

WordPress tukifoorumeilta saa vastauksen lähes kaikkiin ongelmiin!

Google-haku on ollut ahkerassa käytössä lähes yötä päivää, sillä hyvin samanlaisia ongelmia on muillakin käyttäjillä. GeneratePressin tukifoorumilta löytyy valmista css-koodia, jotka olen innokkaasti napannut käyttööni. Tukifoorumilta voi myös suoraan kysyä, jos aikaisemmin käsitellyistä aiheista ei löydy vastausta. Tukifoorumeita kannattaa muuten käyttää suoraan Google-haun kautta, sillä osumatarkkuus on huomattavasti nopeampi.

Googlen AMP on haaste

Googlen AMP -tekniikkaa käytetään mobiilisivustoilla ja sen tavoitteena on nopeuttaa sivustojen latautumista mobiililaitteilla. Tutkimusten mukaan useimmat mobiilisivustojen käyttäjät poistuvat sivulta, jos sen lataaminen kestää yli kolme sekuntia. AMP-tekniikkaa ei ole pakko kuitenkaan ottaa käyttöön tai sen voi ottaa rajoitetusti käyttöön eli vain niiltä osin kuin oma ulkoasuteema sitä tukee.

AMP poistaa kaiken latausta hidastavan javascriptin, iframet ja osan CSS:ää ja keskittyy mobiilissa nopeuteen.

Tottahan toki otin AMP-tekniikan käyttöön (Transitional-mode) ja sen jälkeen olenkin painiskellut vaikka minkälaisten ongelmien kanssa.  AMP heittää nimittäin kaiken ylimääräisen ja sivuston latausta hidastavan javascriptin, iframet, osan CSS:ää ja muuta ”turhaa” omaan säilöönsä, ja keskittyy lataamaan sivun olennaisen sisällön – tekstin ja kuvat – äärimmäisen nopeasti. Valitettavasti lähes jokaisessa wordpressin lisäosassa tämä on jäänyt huomioimatta ja mobiilissa kaikki ei toimikaan siten kuin on tarkoitus. Tällöin vaihtoehtoina on luopua kokonaan ko. ominaisuudesta tai etsiä lisäosa, joka on AMP-yhteensopiva. Ja täytyy sanoa, että tällä hetkellä sellaisia lisäosia on vaikea löytää.

AMP -yhteensopivia WordPress lisäosia on vaikea löytää.

Jos minulla olisi enemmän koodaustaitoja ja käytössä child-teema, niin AMP-ongelmat voisi kiertää suoraan koodaamalla eikä niitä lisäosiakaan tarvitsisi silloin niin montaa.

Vaikka moni manaakin Googlen AMP-tekniikkaa, niin pakko se vain on Googlen mukana pysyä.

Välillä Googlelta tulee myös korjauspyyntöjä kuten esimerkiksi viime viikolla:

Google Search Team – Videoissa ongelmia

Apua, miten minä voin vaikuttaa videoiden source-koodiin meneviin teksteihin! Lopulta välähti! Minulla oli Arve-lisäosa, jonka olin joutunut ottamaan käyttöön, koska Google muutti youtube-videoiden upotukseen liittyviä tekniikoita. Käyttämällä Arven-block:ia juuri noille puuttuville tiedoille löytyi omat tallennuskentät. Muutosten jälkeen tein Google-validoinnin uudelleen ja jäin jännittyneenä odottamaan Googlen vastausta. Parin päivän päästä vastaus tuli ja kaikki tekemäni korjaukset oli hyväksytty. Alla esimerkki yhdestä hyväksynnästä:

Google Video Search Team – Videot hyväksytty

Näin taas mentiin Googlen talutusnuorassa.

Ylpeänä valmiina tuotantoon

Lopulta sitten olin valmiina tuotantoon ja ylpeänä esittelin pojalleni uudistunutta WordPress sivustoani juhannuksena. Tarkkasilmäinen poikani havaitsi heti muutaman epäkohdan. Muutama linkki sivustollani johti edelleen Zonerin väliaikaiseen osoitteeseen joka aiheutti virheilmoituksen ja sivu ei auennut. Sivustolinkit sain korjattua osittain Redirection-lisäosalla ja loput Zonerin ehdottamalla lisäosalla Better Search Replace.

”Mitä ihmettä, miksi kuvat eivät aukene isommaksi?” Ihmetteli poikani. Samaa sitten ihmettelin minäkin. Näköjään GeneratePress-ulkoasuteema ei sisällä Lightbox-ominaisuutta ja siihen piti hankkia Simple Lightbox-lisäosa. No, se ei toimi täydellisesti tietenkään AMP:ssa eli mobiilissa, mutta ainakin nyt tietokoneella kuvat aukeavat hienosti. ”Miksi sivuston logo on nuhruinen? Eikö sen voisi muuttaa svg:ksi eli vektorigrafiikaksi?” Jahas, no se on vielä työlistalla.

Ratkaisemattomat ongelmat

Tietostartti -logon lisäksi ratkaisematta on, miksi GPDR ja evästeet -lisäosa ei toimi lainkaan AMP:ssa eli mobiilissa, vaikka sen pitäisi olla AMP yhteensopiva. Tästä laitoin AMP Enhancer -tukifoorumille viestiä ja sainkin ystävällisen viestin heiltä, että he ovat tehneet tästä korjauspyynnön GitHuB:lle. GitHub on miljoonien kehittäjien ja yritysten kehitysalusta, jossa ylläpidetään koodia keskitetysti. Mainiota!

Sen sijaan Sassy Social Share -lisäosan tekijöiltä en ole saanut tyydyttävää vastausta, miksi heidän lisäosansa ei toimi AMP:ssa jos sivulla on käytetty Hook:ia sivuston content-alueella tai sivupalkkia (joka mobiilissa laskeutuu content-alueelle). Some-ikonit eivät häviä, mutta ne muuttuvat AMP:ssa läpikuultaviksi. Tällä hetkellä pitää siis vain olla käyttämättä ominaisuuksia, jotka estävät Sassyn toimintaa. Huom! 20.7.20221 Korvasin tämän lisäosan AddToAny Share Buttons -lisäosalla, joka on AMP-yhteensopiva.

Blogi postausten lopussa olevat ”edellinen” ja ”seuraava blogi postaus” -linkitys vaatisi fixausta, sillä se tuo mukaan nyt myös blogi postaukset ”Puutarhaunelmia” -kategoriasta. Tähän joutuisi tekemään funktion (löytyi), mutta funktioiden käyttö taas vaatisi joko Child-teeman (muutos Functions.php:hen) tai Code Snippets -lisäosan. Tämä on toistaiseksi harkinnassa, koska vaatineen lisää opiskelua. Toisaalta Code Snippets -lisäosan avulla ratkeaisi jatkossa varmaan moni muukin ongelma…

Haasteita siis piisaa pitkäksi aikaa.

Käytössäni olevat lisäosat

  • 404page – your smart custom 404 error page – (404-sivun toiminnallisuus kun haettua sivua ei löydy)
  • AddToAny Share Buttons – (some-ikonit artikkeleiden lopussa)
  • Akismet-roskaviestisuodatus
  • AMP – (Googlen virallinen AMP-lisäosa)
  • AMP Enhancer – (huolehtii lisäosien AMP-yhteensopivuudesta)
  • AMP for GeneratePress – (lisää GeneratePressin AMP-yhteensopivuutta)
  • Easy WP SMTP
  • Embed Plus for YouTube – Gallery, Channel, Playlist, Live Stream – (youtube-videoiden linkitys sivuille)
  • Featured Images in RSS for Mailchimp & More
  • FooBox Image Lightbox – (lightbox kuville, toimii vain non-amp versiossa)
  • GenerateBlocks – (GeneratePress -lohkot)
  • Google XML Sitemaps
  • GP Premium – (GeneratePress ulkoasuteeman muokkaustyökalu – ei täysin AMP yhteensopiva)
  • Gutenberg – (WordPress lohkoeditori)
  • Loco Translate – (käännöstyökalu suomen kielelle)
  • MC4WP: Mailchimp for WordPress – (Artikkelitilausten Mailchimp-työkalu, oli pakko hankkia AMP:in vuoksi)
  • MC4WP: Mailchimp for WordPress Premium – (tilauslomakkeen muokkaustyökalu)
  • Schema App Structured Data – (muuttaa artikkelien sisällön Googlen määrittelemään rakenteelliseen muotoon)
  • ShortPixel Image Optimizer – (kuvien optimointi)
  • TaxoPress – (avainsanojen hallinta)
  • Ultimate Category Excluder – (voidaan hallinnoida eri kategorioiden näkyvyyttä eri sivuilla)
  • Uudelleenohjaus – (sivun osoitteen uudelleenohjaus)
  • Wordfence Security – (sivuston tietoturva)
  • WP GDPR Cookie Notice – (GBDR ja evästeiden hallinta, ainoa joka toimii myös amp-sivuilla!)
  • WP Rocket – (välimuistin käsittely, tietokannan optimointi ja sivuston nopeus)
  • WP Show Posts – (artikkelien listaus kuvina tai teksteinä vaikka sivun alalaidassa)
  • WPForms Lite – (lomaketyökalu)
  • Yoast Comment Hacks – (kommenttien hallinnointiin)
  • Yoast SEO – (artikkelikohtainen SEO valvonta Googlen hakukoneita varten)

Blogi postauksia tulossa

WordPress sivustoa voisi toki hieroa aivan loputtomiin. Aina löytyy korjattavaa ja aina löytyy uusia kivoja ominaisuuksia, jotka voisi ottaa käyttöön. Johonkin kohtaan pitää kuitenkin pistää piste – tai ainakin pitää tauko.

Eikös Blogin päätehtävä ole kuitenkin kirjoittaa uusia artikkeleita, tehdä lisää sisältöä joka kiinnostaa lukijoita.

Tämä blogi postaus taisi sisältää vähän liian paljon erikoissanastoa. WordPress-sivuston itsenäinen hallintakaan ei välttämättä kiinnosta kovin montaa lukijaa. Mutta tarkoitus on kyllä jakaa aivan perustietoakin älypuhelimien käytöstä ja ennen kaikkea opetella lisää hyödyllisiä sovelluksia.

Malttakaahan vain, lisää on tulossa!

Jakaminen on välittämistä:

Jätä kommentti

Exit mobile version