8.4. Oman osaamisen CV-sivu

WordPress.org – Sisällönhallintajärjestelmä

WordPress on nettisivujen julkaisujärjestelmä ja sisällönhallintajärjestelmä (CMS), jonka avulla voidaan tehdä verkkosivusto helposti. Verkkosivun HTML- tai CSS-osaamista ei välttämättä tarvitse olla, jollei halua tehdä sivulle erityisiä omia muotoiluja tai räätälöityjä ratkaisuja. WordPressin toiminta perustuu MySQL tietokantaan jonne verkkosivujen sisältö tallennetaan. Ohjelmointikielenä WordPressissä toimii pääasiallisesti PHP, jonka avulla mm. sisältö sivuille haetaan. Myös itse WordPress ohjelmistona toimii PHP-ohjelmointikielellä.

Oman osaamisen sivusto

Kansalaisen digitaidot kurssilla luodaan ohjatusti itse tehden sivustot, jotka kuvaavat omaa osaamista. Koska wordpress.org vaatii palvelimen toimiakseen, osallistujille on asennettu ja otettu käyttöön oma kehitysympäristö verkkoon. Saat kirjautumistunnukset omille sivuillesi kurssin aikana.

Tutustumme kurssilla WordPress:in toimintaperiaatteisiin ja kuinka sivuja rakennellaan. Käymme läpi mm. hallintapaneelin toiminnan, teeman ja lisäosien asentamisen, teeman muokkaamisen sekä luonnollisesti sivujen luomisen ja tekemisen. Osuuden jälkeen ymmärrät perusteet verkkosivujen luomisprosessista ja WordPressistä verkkosivujen tekemisessä.

Harjoituksen kulku

WordPressin aihealueen käsittely vie kurssista noin kolme tai neljä kokoontumiskertaa ja oman osaamisen CV-sivuston tekemisen vaiheet ovat karkeasti ottaen seuraavat:

1. Teeman asentaminen: Otamme käyttöön teeman WordPressissä
2. Lisäosien ja editorin asentaminen: Asennamme järjestelmään lisäosia ja sivueditoriksi Elementor-editorin.
3. Teeman muokkaaminen: Muokkaamme teeman omaan tarkoitukseemme sopivaksi
4. Sivujen suunnitteleminen: pohdimme oman sivuston rakennetta:
   • Mitä sivuja sivustolle tulee?
   • Millaista sisältöä kullekin sivulle tulee?
   • Mitä fontteja käytetään ja typografia yleisesti?
   • millainen sivuston värimaailma on?
5. Kuvien hakeminen ja muokkaaminen: Jos tarvetta haetaan sivustolle käyttöön tulevat kuvat ja käsitellään ne sivuille sopivaan muotoon. Kuvia voidaan hakea myös sitä mukaa kun tarvetta ilmenee.
6. Sivujen luominen: Luodaan sivustolle tulevat sivut ja tehdään sisällöt sivuille
7. Ladataan sivut omalle koneelle: Jos osallistuja haluaa, hän voi ladata valmiin teoksen omalle koneelle asennettavana tiedostona, jonka voi myöhemmin käyttää omassa webhotellipalvelussa ja julkaista sivut.

Teeman asentaminen ja mikä se on?

Otetaan aluksi käyttöön sivustolla käytettävä teema. Teema on käytännössä sivuston ulkoasu eli layout. WordPress ei toimi ilman jotain teemaa eli yksi teema on aina oltava aktiivisena. Teemoja voi niinikään olla aktiivisena vain yksi kappale. Asennamme oman osaamisen sivustolle teeman nimeltä Resume-X. Voitkin siirtyä seuraavaksi WordPressin ahllintapaneelissa kohtaan Ulkoasu/Teemat ja klikata avautuvan sivun vasemmassa ylälaidassa olevaa lisää uusi painiketta. Avautuvasta sivusta voit hakea teemaa nimellä oikeassa ylälaidassa olevasta hakutoiminnosta. Kirjoita siihen teeman nimi Resume-X ja paina -painiketta.

Layout

Layout on englanninkielinen termi, josta kuullaan myös nimityksiä ”leiska” ja ”design”. Layout on kotisivujesi graafisen ulkoasun runko eli se minkä näköisen sivuston selaaja näkee, kun hän saapuu sivustollesi. Se määrittelee kotisivujesi ulkoasun rakenteen sekä sen, miten graafiset elementit asettuvat sivuillesi.

Lisäosien asentaminen

Kun tehdään sivua, sinne lisätään sisältötekstiä, kuvia ja muuta sisältöä käyttämällä sivueditoria. Harjoitussivulla käytämme editoria, jonka nimi on Elementor. Se on kohtalaisen helppokäyttöinen ja voit asentaa sen käyttämällä WordPressin hallintapaneelin Lisäosat-toiminnon Lisää uusi -toimintoa. Myös sivueditori on siis WordPress-ohjelmistoon asennettava lisäosa. Asennetaan Elementorin lisäksi myös muutama muu lisäosa käyttöön:

• Disable Gutenberg: Lisäosa poistaa käytöstä WordPressin oman lohkoeditorin. Käytämme Elementoria, joten haluamme Gutenbergin pois käytöstä.
• WP Forms: Sivustolle luodaan yhteydenottolomake yhteystiedot sivulle tai johonkin sivustolle ja lisäosa on kätevä työkalu sellaisen luomiseen.
• LiteSpeed Cache: Lisäosa, jonka avulla voimme tarvittaessa poistaa sivuston välimuistin ja samalla se optimoi sivustomme toimintaa.

Asenna kaikki yllämainitut lisäosat ja ota ne käyttöön. Lisäosat haetaan samaan tapaan kuin teemoissa nimellä ja kun oikea lisäosa löytyy klikataan lisäosan laatikossa painiketta Asenna. Kun lisäosa on asentunut samassa painikkeessa lukee teksti Ota käyttöön. Klikkaa painiketta ottaaksesi lisäosan käyttöön.

Etusivu ja artikkelien sivu

Sivut ovat sivuston ns. staattista sisältöä ja niitä ei sivuston valmistumisen jälkeen säännöllisesti tehdä lisää. Artikkelit sen sijaan ovat vaihtuvaa sisältöä ja artikkeleita voidaan kirjoittaa säännöllisesti lisää sivustolle. Artikkeleille on WordPressissa myös ns. artikkeleiden sivu, jonne ilmestyy jokaisesta sivustolla julkaistusta artikkelista lyhyt kuvausteksti, otsikko ja linkki, josta selaaja pääsee lukemaan artikkelin kokonaisuudessaan.

Luodaan seuraavaksi sivustolle oma etusivu sekä artikkelien sivu. Määritetään ne myös WordPressiin Etusivuksi ja artikkelien sivuksi, jotta WordPress tietää niiden palvelevan niitä tarkoituksia. Siirry hallintapaneesin Sivut -toimintoon ja valitse toiminnosta Lisää uusi-toiminto. Kirjoita etusivun nimeksi oma nimesi ja paina Julkaise-painiketta oikealla puolella sivun muokkausnäkymää. Kun sivu on julkaistu tee samaan tapaan vielä yksi sivu ja nimeä se esimerkiksi Kokemus.

Ajatuksena on että artikkeleissa kerrotaan omasta osaamisesta ja jokainen artikkeli kertoo jostain yhdestä omasta osaamisesta, koulutuksesta tai työkokemuksesta.

Kun olet luonut molemmat sivut siirry hallintapaneelissa WordPressin Asetukset-toimintoon. Valitse asetuksista kohta Lukeminen. Ilmestyvistä asetuksista ylimpänä on kohta Kotisivusi näyttää. Vaihda valinnoista asetukseksi Sivu (valitse alta) ja aseta etusivuksi luomasi etusivu ja artikkelien sivuksi luomasi artikkelien sivun (Kokemus).

Nyt olet asettanut sivustollesi etusivun ja artikkelien sivun, johon ilmestyvät kirjoittamasi artikkelit.

Teeman mukauttaminen

Käytössä olevaa teemaa voidaan mukauttaa omaan tarkoitukseen sopivaksi. Jokaisessa teemassa on omanlaisensa mahdollisuudet vaikuttaa teemaan. Teeman mukauttamistoimintoon pääsee käsiksi valikosta kohdasta Ulkoasu/Mukauta. Toiminto avaa teeman mukautustoiminnon ja etusivun näkymän.

Mukauta-näkymässä on seuraavia toimintoja:

• Resume-X Theme settings: Voit määrittää onko sivustosi layout täysleveä vai kavennettu. Aseta oma nimesi ja omat tietosi sivun vasemmassa laidassa olevaan laatikkoon.
• Otsakekuva: Voit asettaa sivun ylälaitaan otsakekuvan. Haetaan yhdessä jokin otsakekuva verkosta esimerkiksi Pixabay-palvelusta, muotoillaan se ja asetetaan otsakekuvaksi sivustolle.
• Taustakuva: Voit asettaa sivustolle myös taustakuvan jos haluat. Lisääminen tapahtuu samaan tapaan kuin otsakekuvan lisääminen.

Edellä mainitut toiminnot ovat teeman mukana tulleita asetuksia. Itsellä on tapana asettaa muut toiminnot hallintapaneesista käsin ja niihin ei tarvitse koskea täällä Mukauta-toiminnossa. Tallenna muutokset ja palaa takaisin ohjausnäkymään sulkemalla toiminto vasemman yläkulman rastista.

Elementorin voi ladata käyttöön WordPressiin käyttämällä lisäosat-osion Lataa lisäosa-toimintoa. Asentaminen ja käyttöönotto tapahtuu normaalisti kuten mikä tahansa lisäosa.

Artikkeli tai sivu avataan editoitavaksi normaalisti klikkaamalla Edit (Muokkaa) linkkiä sivun tai artikkelin alavalikosta, joka avaa sivun muokattavaksi Classic Editorissa. Classic Editorista löytyy painike Edit with Elementor, joka avaa sivun Elementor-editoriin.

Elementor-käyttöliittymän toiminnot:

1. Voit avata editorin käyttöön liittyviä asetuksia sisältävän valikon hampurilaisikonista. Painikkeen kautta voidaan esimerkiksi sulkea sivun muokkaus editorista.
2. ELEMENTS-näkymässä on sivun tekemisessä olevat elementit. Elementin lisääminen tapahtuu yksinkertaisesti raahaamalla se sivun näkymään halutulle paikalle.
3. Navigator on irrallinen paneeli, joka näyttää sivun sisällön runkorakenteen. Navigaattori-ikkunan voi sulkea oikean yläkulman rastista tai telakoida se johonkin kohtaan käyttöliittymää.
4. UPDATE vihreä painike tallentaa (julkaisee) sivun. Painikkeen oikealla puolella on lisäpainike, jonka kautta avautuu lisätoimintoja. Voit esimerkiksi tallentaa sivun luonnoksena, jolloin se ei näy selaajalle.
5. Silmäpainike avaa sivun toiseen välilehteen esikatseltavaksi
6. Hammasratas avaa sivun asetukset, josta voit muuttaa sivun otsaketta ja muita asetuksia.
7. Yhdeksän täplan painike palauttaa toimintonäkymään ELEMENTS-näkymän

Rivit ja sarakkeet – (Row ja Column)

Kun aloitamme luomaan sisältöä sivulle Elementorilla tai millä tahansa muulla lohkoeditorilla, luodaan aluksi sisältölohko, johon lisätään sivun sisältöä. Klikkaa sivun näkymästä rivin lisäämispainiketta. Painike avaa laatikon, jossa on vaihtoehtoja millä tavoin rivi jaetaan sisältölohkoihin (sarakkeisiin, columns). Jokaiseen lohkoon voidaan laittaa sisältöelementti, kuten teksti tai kuva ja lisätä elementtiin omaa sisältöä.

Elementti lisätään riville raahaamalla valittu elementti Elements-näkymästä rivin sarakkeen päälle ja pudottamalla se siihen. Kun elementti ilmestyy vasemmalla puolella oleva näkymä muuttuu elementin asetuksien asetusnäkymäksi.

Sivu koostuu riveistä, jotka jakautuvat sarakkeisiin. Sarakkeet sisältävät elementtejä, joissa on erilaista sisältöä, kuten kuvia, tekstiä ym. Sarakeiden asetuksiin pääsee klikkaamalla sarakkeen vasempaan yläkulmaan ilmestyvää harmaata ikonia. Rivin (Section) asetuksiin taas pääsee klikkaamalla rivin yläosassa olevista painikkeista keskimmäistä.

Katsotaan kaikki hallintaa liittyvät painikkeet:

1. Muokkaa rivin saraketta. Voit lisätä esimerkiksi täytteitä (padding) tai vaikuttaa muuten miten sisältö asettuu sarakkeeseen.
2. Lisää uusi rivielementti.
3. Avaa rivin asetukset, joista voit vaikuttaa miltä rivi näyttää. Toiminto on vastaavantyyppinen kuin sarakkeiden asetukset.
4. Poista koko rivi, jolloin rivi sisältöelementteineen poistetaan.
5. Jos rivi on jaettu useaan sarakkeeseen niiden välissä on ohut katkoviiva. Voit tarrata painikkeella rajaan ja muuttaa sarakkeen leveyksiä.