Kategoriat
Larux tmi (yritys) www-sivustot

Kurkistus sivustoni tekniikkaan

Tässä artikkelissa paljastan kuinka www-sivuni on tehty. Mitä laajennuksia olen käyttänyt ja miten olen tuunannut käytössä olevaa teemaa. Käyn läpi myös hieman hakukoneoptimointia jne.

Tämä sivusto on toteutettu palvelinhotellipohjaisella wordpress.org -järjestelmällä. Jos et ole ennestään tuttu teknistä ylläpitoa vaativan wordpress-alustan kanssa suosittelen sinulle yksinkertaisempaa wordpress.com -pilvipalvelua. Nykyään sekin on todella monipuolinen työkalu, vaikka monet hienommista ominaisuuksista erikseen maksavatkin.

Itse pidän WordPressistä, koska se on suunniteltu siten, että sen taustajärjestelmä on suunniteltu hyvin. Eli se on intuitiivinen työkalu sisältöä tuottaville toimijoille, jotka eivät välttämättä toimi itse kuitenkaan sivuston ylläpitäjinä.

Myös ylläpitäjän näkökulmasta WordPress on kiitollinen, koska varsinaista ohjelmointiosaamista ei tarvita. Käytännössä sinun tulee ymmärtää wordpress.org alustan, teeman ja laajennusten väliset erot ja suhteet sekä osata käyttää Gutenberg editoria, joka onkin melkoinen parannus aiempiin editoreihin.

Käytännössä sinä voit nykyään muokata sivuston ulkoasua tekstiä kirjoittaessasi, tai pitäisikö pikemmin todeta, että taittaessasi. Sillä nykyään WordPressillä tosiaan taitetaan “lennosta” sisällöt paikalleen ja se on varsin palkitseva tapa tehdä sisältöjä!

Mitä eroa on WordPress.org ja WordPress.com alustoilla?

Jos sinulla ei ole wordpress.org sivustoa vielä asennettuna, aloita täältä

Jos päätät, että asennat wordpress.org palvelun www-hotelliin, ole hyvä ja aloita täältä: https://fi.wordpress.org/support/topic/wp-asennus-helppoko/

Seuraavaksi oletan, että sinulla on peruswordpress käynnissä tai jo oleva sivusto toiminnassa ja olet kiinnostut millainen teema ja millaiset pluginit minulla on tällä kertaa asennettuina ja käytössä?


Seuraavaksi pieni yllätys! Nimittäin käytän WordPressin vakioteemaa

Yleensä en ole pitänyt sivustoista, jotka syntyvät WordPressin vakioteemalla eli sivupohjalla. Nyt vuoden 2020-2021 taitteessa olen joutunut syömään periaatteeni, koska sivun ulkoasua voi säätää niin kovin paljon myös Gutenberg editoriossa, eli sivua taittaessa. Minä olen siis jättänyt käyttöön vakiosivupohjan, joka on Twenty Twenty.

Twenty Twenty on varsin minimalistinen sivupohja, mutta niinpäs se Veikko Mynttinen aikoinaan totesikin tietojenkäsittelytieteen digitaalisen median suuntautumisvaihtoehdon harjoitusryhmässä että “less is more”

Aikoinaan minulle oli tärkeätä se, että tekstin ympärillä oli paljon erilaisia vimpaimia sivun vasemmassa ja oikeassa reunassa. Onhan se vähän järkyttävää, että nyt noita pieniä kategorialistauksia, kirjoittajan kuvauksia ym. ei voi laittaa kuin sivun alaosaan. Eli ainoa vimpainalue twenty twentyssä on sivun alaosassa. Ehkä keski-ikäisyys on paljastanut minussa minimalistin, ehkä ei, mutta yllättävän hyvin olen pärjännyt tämän valintani kanssa.

Halusin kuitenkin pikkuisen enemmän säätää sen ulkoasua..Twentig!

Vaikka minimalismi on tiettyyn rajaan saakka mukavaa, totesin varsin pian, että olisipas mukava säätää twenty twentyn värejä, eri elementtien kokoa jne. Siinäpäs tuli vastaan tarve ensimmäiselle varsinaiselle laajennukselle. Pienellä googlailulla löysin ilmaisen twentig -laajennuksen, jonka avulla pystyin säätämään sivupohjaan liittyviä asetuksia yllättävänkin runsaasti. Sain säädettyä värit kohdalleen, asetettua uudenlaisia visuaalisia asetuksia blogi- ja sivunäkymille sekä Gutenberg editoriin sain lisälohkoja sivujen taittoa varten.


Äh, eikös Gutenbergin kategoria-vimpain anna määrätä kategoriaa? Eli sivujen taittoon liittyvää hienosäätöä!

Sivustoni layout on jossain määrin monimutkainen, sillä sen täytyy olla yhtäaikaisesti portfolio akateemiselle työlleni, yritykseni sivu ja vieläpä kunnallispoliitikkaan liittyvä sivusto. Olikin selvää, että haluan hyödyntää sivuillani WordPressin kohtalaisen hyvin toteutettua avainsana- ja luokittelutyökalua.

Eli sama suomeksi: haluan tehdä Worpdressin työkaluilla sivuja, joiden yläosassa on esimerkiksi minun henkilöesittely ja alaosassa listattuna artikkeleita haluamani luokittelun perusteella. Tällainen oli ihan arkea aikoinaan, kun tein Drupalilla pari sivustoa. Samoin odotin sen toimivan toki WordPressissä, jota olen käyttänyt lukuisissa eri projekteissa tätä ennen. Kauhukseni huomasin, että muutoin monipuolinen Gutenberg-editori ei siihen kyennyt venymään!

Kuinka tehdä erilaisia listauksia artikkeleista ja muista sisällöistä sivuille?

Haaste 1: Kuinka Tehdä artikkeleista luokiteltu listaus yhdelle sivulle luokittain?

Koska olen kirjoittanut erittäin paljon mielipidekirjoituksia, kolumneja, puheenvuoroja jne. halusin ne listata yhdellä ja ainoalla sivulla käyttäen sopivia väliotsikoita. Hieman keskeneräisen lopputuloksen voitte katsoa täältä: Jari Larun puheita ja kirjoituksia

WordPressin normaali “bloginäkymä” ei riittänyt niiden jäsentelyyn sopivalla tavalla. Sehän vain listaa kirjoitukset allekkain. Toki olisin voinut tehdä sivun yläosan valikkoon soveltuvan luokittelun, mutta visuaalisena ihmisenä en ollut siihen tyytyväinen. Sen sijaan etsin soveltuvaa laajennusta, jonka avulla voisin tehdä soveltuvat näkyvät alaotsikoiden alle (esim. mielipidekirjoitukset).

Huomasin varsin nopeasti, että toimivat ratkaisut olivat maksullisia. Ensimmäinen vaihtoehto eli Archive-Pro-Matic oli edullisempi, mutta ei tarjonnut riittävän mukavia mahdollisuuksia virittää näkyville tulevia sisältöjä. Toinen laajennus eli Posts Table Pro mainosti olevansa “paras mahdollinen ratkaisu”, mutta ensikokeilujen perusteella matkapuhelimen näytöllä sisältöä oli liikaa. Pienen tutkiskelun perusteella paljastui, että mobiilinäkymää voi säätää erikseen ja sekin ongelma poistui.

Posts Table Pro:n avulla sain siis tehtyä tuon puheita ja kirjoituksia sivun taulukkonäkymän, johon olen alustavasti varsin tyytyväinen! Varjopuolena oli se, että laajennuksen hintataso on siellä 70 dollarin tienoilla.

HAASTE2: Kuinka liittää relevantteja artikkeleita osaksi sivun rakennetta?

Tämä toinen haaste oli samankaltainen kuin edellinen, mutta tässä tapauksessa tavoitteena oli saada listattua sopivat artikkelit esimerkiksi henkilökohtaisen esittelyn jatkeeksi. Nyt kyse ei siis ole samanlaisesta tarpeesta kuin “puheita ja kirjoituksia sivustolla”. Päinvastoin, tarkoituksena on tehdä esittelysivuja on kyse sitten työstä, yritystoiminnasta tai politiikasta ja kytkeä soveltuvat artikkelit luontevasti esittelyn perään.

Tämän toteuttaminen on vielä käytännössä pikkaisen kesken, mutta esittelysivuni alaosassa pyörii “teknologiatuettu oppiminen” luokkaan kytkettyjä artikkeleita karusellinäkymässä. Siitä saa vähän suuntaa 🙂

No, miten tämä käytännössä tehtiin? Pienen googlauksen jälkeen ratkaisu osoittautui kohtalaisen helpoksi! Nimittäin “ultimate addons for Gutenberg” laajennus toi mukanaan paitsi kaipaamani toiminnallisuuden, niin myös hurjan määrän muita hyödyllisiä lohkoja osaksi Gutenberg editoria. Esimerkkejä hyödyllisistä lohkoista ovat varoitusboksit (katso täältä: Jari Larun puheita ja kirjoituksia) ja sisällysluettelo-lohko, jollainen löytyy mm. tääältä: Larux tmi

Haaste 3: Kuinka saan tehtyä automaattisen luettelon tekemistäni tieteellisistä julkaisuista?

Yksi käyttötarkoitus näille sivuilleni on se, että ne toimivat myös akateemisena portfoliona (sen laatiminen on toki vasta alkuvaiheessa eli kesken). Anyway, 2020-luvulla ei tietenkään kannata päivittää julkaisuluetteloa käsin niiltä osin, kuin julkaisut ovat kirjankappaleita, artikkeleita tai muita virallisia julkaisuja. Erilaiset esitelmät, konferenssiesitykset sun muut aion lisätä kuitenkin käsin tänne.

Jo aiemmilla, sittemmin manan majoille siirtyneillä sivuillani olen integroinut Mendeley-viitteidenhallintajärjestelmän sivustolleni. En kuitenkaan ole jostain syystä ylläpitänyt Mendeley-tietokantaa sitten väittelyn, joten se ei tullut kysymykseen. Sen sijaan olen nykyään pitänyt luetteloa julkaisuistani ilmaisessa Zoterossa ja ResearchGate-palvelussa. No, ResearchGatelle ei löytynyt laajennusta, mutta Zoterolleppas löytyi ja millainen löytyikään! Sen avulla nimittäin voi tehdä myös sisäisiä viittauksia wordpress julkaisuissa ja koostaa niistä julkaisun yhteyteen lähdeluettelon. Siis ihan samanlainen käyttökokemus kuin vaikkapa Wordissä olevilla Mendeley/Zotero/Refworks jne laajennuksilla.

No, mikäs se tällainen ihmelaajennus sitten oikein onkaan? No, Zotpress! Zotpress integroi sinun Zotero-tietokannan ja WordPressin yhteen ja tarjoaa periaatteessa hienot työkalut. En vain ole saanut tätä vielä täydellisesti toimimaan, koska ei ole ollut aikaa tutkia miksi tiettyjä kummallisuuksia on. Esimerkiksi värkki listaa Jari Larun puheita ja kirjoituksia sivuille kaikki tietokannassa olevat julkaisut, eikä vain omiani. No, pientä laittoa.

Anyway, toimivan oloinen työkalu.

Youtube, Youtube ja Youtube! Haluasin koko soittolistan näkyville yhdellä kertaa

Viime keväänä innostuin tekemään Youtube-striimiä eli Larun verkkoliveä. Täällä sivustolla taas halusin tuoda asiaa käsittelevän artikkelin osaksi näkymän koko verkkoliveen upottamalla soittolistan.

Youtube upottuu kyllä todella sievästi ilman erityisempiä toimia, mutta yritäppä saada näkyville soittolistan kokonaisuus tai vaikkapa Youtube-kanava. Ei onnistukaan enää! On siis mentävä tutkiskelemaan taas laajennusten valikoimaa.

Siinä aikani pengottua törmäsin laajennukseen “Embed Plus for Youtube – Gallery, Channel, Playlist, Live Stream“, joka oli juuri oikea ratkaisu tarpeeseeni! Tätä tulen käyttämään vielä ja paljon, tällä hetkellä olen lähinnä kokeillut sitä Verkkoliveä käsittelevän (keskeneräisen) artikkelini yhteydessä eli täällä: Jari Larun verkkolive

Lopuksi: muutama olennainen laajennus, jotka pysyttelevät taustalla

Lopuksi esittelen muutaman olennaisen laajennuksen, jotka asennnan yleensä aina. Ne liittyvät sivuston turvallisuuteen, varmuuskopiointiin ja hakukoneoptimointiin.

Mikään ei ole sen tärkeämpää kuin hakukoneoptimointi, no, ehkä hakukoneoptimointi

Vuosia sitten tein toiminimeni toimesta erään kohtalaisen seikkaperäisen sivustototeutuksen tutulle asiakkaalle. Sivusto oli tehty Drupal-teknologialla ja tavoitteena oli saada mahdollisimman nopeasti Google huomioimaan sivuston olemassaolo ja sitä myöten sivusto näkymään toimeksiantajan asiakkaille.

Toisin kuten usein luullaan, Google ei löydä sivuja kovin tehokkaasti noin vain. Päinvastoin, kamppailu hakukoneiden huomiosta on eräänlaista “taistelua”, jossa on olemassa selkeät säännöt. Aiheesta käytetään termiä “hakukoneoptimointi” (englanniksi SEO eli Search Engine Optimatization”) ja siihen on olemassa runsaasti erilaisia ohjevideoita ja sivustoja. Jos aihepiiri ei ole kovin tuttu, niin Google esimerkiksi voi auttaa asiassa omalla pienellä oppaallaan: https://developers.google.com/search/docs/beginner/seo-starter-guide

Hakukoneoptimoinnissa on karkeasti sanoen kaksi tasoa: 1) tekninen taso, jossa sivuston toteutus ja asennetut SEO laajennukset näyttelelevät roolia ; 2) sisällöllinen taso, jossa sisältöä kirjoittava henkilö laatii sivustolle otsikon, rakenteen, avainsanat, luokittelun jne.

Jokainen, joka tekee ammatillisen, poliittisen tai tieteellisen sivuston, haluaapi toki maksimaalisen hakukoneiden huomion. WordPressille löytyy runsaasti erilaisia SEO laajennuksia ja tällä kertaa asensin sivustolleni All-in-one SEO ja Google Analytics for WordPress by Monsterinsights -laajennukset.

Varsinkin kuntavaalien ja muiden poliittisten kamppailujen kohdalla tämä aihepiiri on erityisen keskeinen ja tätä ei voi sivuuttaa.

Hei! Suojataan liikenne asentamalla SSL sertifikaatti

Vaikka tällä sivustolla ei verkkokauppaa tai muuta SSL sertifikaattia tarvitsevaa toimintaa pyöritetäkään, se on hyvä asentaa. Esimerkiksi Google antaa paremman pagerankin https-sivuistoille (s lopussa on yhtä kuin secure). Tähän tarkoitukseen soveltuu erinomaisesti “Really Simple SSL” laajennus.

iThemes Security tarkistaa sivuston turvallisuuden

iThemes Security tarkistaa sivustosi erilaisten hyökkkäysten ja hyväksikäyttöjen varalta. Tärkeä työkalu.

UpdraftPlus – Backup/Restore varmuuskopiointiin

Tämän UpdraftPlus laajennuksen avulla pystyn varmuuskopioimaan sivustoni ja palauttamaan sen tarvittaessa. Jos teen joitain isoja muutoksia, teen tämän avulla varmuuskopion ennen muutosten tekemistä.

Hengästyttääkö? Tässä tämä kaikki!

Ei muuta kuin laajennuksia asentelemaan 😉

Kirjoittanut Jari Laru

Jari Jukka Laru (s. 9. maaliskuuta 1975) on oululainen yliopistonlehtori ja kaupunginvaltuutettu. Laru on koulutukseltaan luokanopettaja, joka työskentelee Oulun yliopiston Kasvatustieteiden tiedekunnassa teknologiatuetun oppimisen ja opetuksen yliopistonlehtorina. Laru toimii myös luennoitsijana ja kouluttajana yrityksensä (Larux tmi) kautta.

Laru asuu Jäälissä ja toimii alueen asukasyhdistyksen puheenjohtajana. Hänellä on kolme lasta, puoliso ja kissa. Hän harrastaa ruoanlaittoa, leipomista, kirjallisuutta ja 1970-luvulla rakennetun talon remontointia.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *