Hairy-do kampaamopalvelut

Kampaamo Ranuan raitilla

Kurssilla luodaan harjoitussivusto kuvitellulle kampaamolle nimeltä Hairy-do. Tein jonkinlaisen suunnitelman sivuston rakenteesta sekä sivuston sivujen layoutista. Voit ladata koko harjoituksen materiaalin suunnitelmineen ja mediasisältöinen oheisesta painikkeesta ”Lataa kurssimateriaali Drivesta”. Materiaali latautuu Google Drivesta jaetusta hair-do.zip-tiedostona. Tiedosto on melko suuri mutta sen voi huoletta silti ladata vaikka selain ilmoittaakin, että virustarkistusta ei voi tehdä.

Pura paketti omalle koneellesi ja aloitetaan tutkimaan mitä se pitää sisällään.

Sivustosuunnitelma

Suunnitelman tekeminen muodostaa tietynlaiset raamit projektin toteuttamiselle ja sellainen kannattaa aina tehdä jollain tasolla. Hahmotelma auttaa jäsentämään sivuston rakennettaja sivuston toteuttaminen on helpompaa. Hair-do-sivustolle on luotu suunnitelma, joka sisältää rakennekaavion, typografiaa ja layout-suunnitelman yhdessä pdf-tiedostossa. Käytetään sitä apuna navigoinnin ja alasivujen, artikkelien sekä taksonomian luomisessa. Muutoksia rakenteeseen voidaan tehdä ja tavallisesti ainakin itse matkan varrella teen. Verkkosivujen tekeminen on itselleni aina luovaa työskentelyä.

Avaa materiaalista suunnitelma ja tutustutaan niihin ennen varsinaiseen hommaan ryhtymistä. Sisältötekstejäkin on mutta tekstien luomisessa voidaan ottaa myös tekoäly avuksi tarvittaessa.

Perusasiat kuntoon

Aivan ensimmäiseksi on luotava sivustojen kehitysympäristö. Kurssilla käytetään paikalli8sen palvelimen ohjelmistoa Local, joten asennetaan se ja luodaan WordPress-asennus palvelimelle. Lisäksi tehdään vielä peruasasetukset WordPressiin kuntoon ennen varsinaisen rakentelun aloittamista. Alla luetellut perustoimet ja niiden toteuttaminen käydään tunneilla läpi vaihe vaiheelta.

1. Local paikallisen palvelimen asentaminen
2. WordPressin asentaminen paikalliselle palvelimelle
3. Perusasetukset WordPressin ohjauspaneelin Asetukset (Settings)-asetuksista

Kirje asiakkaalta

Teema lisäosat ja editori sekä ensimmäiset sivut

Harjoitussivulla tullaan käyttämään. Asenna seuraavat:

1. Teema: Kadence
2. Lisäosat Plugins: Yoast duplicate post, Contact Form 7, Disable Gutenberg.
3. Lohkoeditori, jolla muokataan sivuston sivujen sisältöä: Elementor

Asenna editori, teema sekä yllämainitut lisäosat WordPressiin.

Luo sivustolle etusivu ja artikkelien sivu ja ota ne käyttöön WordPressin asetuksista (kts.video).

Teema ja sen valinta

Teeman valinta sivustolle saattaa olla haastava tehtävä. Hyvin tavallisesti joudutaan testaamaan ja kokeilemaan erilaisia tarjolla olevia teemoja, jotta löydetään oman sivustolayoutin toteuttamiselle paras ja käytännöllisin vaihtoehto. Käytännöllisyyteen vaikuttavat käytännössä teeman antamat mahdollisuudet vaikuttaa eri osiin sivun layoutissa.

Etsi mistä teemoja etsitään ja asennetaan WordPressissä. Teema asennetaan WordPressin ohjauspaneelista Ulkoasu/Teemat (Appearance/Themes), josta löydät sivun yläosasta painikkeen Lisää Uusi (Add New)

Teeman etsintää

Soveltuvaa teemaa joudutaan käytännössä etsimään tarjolla olevista teemoista testaamisen kautta asentamalla teema ja kokeilemalla millä teemalla suunnitelman mukainen toteutus parhaiten onnistuu. Parhaaseen tulokseen ja rajattomaan muotoilujen toteutusmahdollisuuksiin päästään luonnollisesti luomalla itse tyhjä teema mutta tällä kurssilla se ei kuitenkaan ole mielekästä runsaan koodauksen takia.

Vertaile kokemuksia teemoista

Kurssin harjoitussivuston sisällön luomisessa käytetään Elementor-editoria, joten yksi aspekti sopivan teeman etsinnässä on tutkia kokemuksia Elementor-editorille parhaiten soveltuvista teemoista.

Googleta tai tiedustele tekoälyltä mistä teemoista on parhaita kokemuksia Elementorin kanssa käytettäväksi.

Tein tutkimusta teemaa valitessa ja eniten kehuttiin Elementorin omaa Hello-teemaa. Keskusteluissa ilmeni kuitenkin tuloksia, joiden mukaan Hello-teema toimisi, jos käytössä on Elementorin maksullinen Premium-versio mutta ilmaisessa versiossa teema ei toimisi järin hyvin.

Astra-teema oli toisena hyvänä vaihtoehtona, jota kehuttiin vaihtoehtona Elementorin ilmaiselle versiolle. Testasin teemaa mutta havaitsin joitain ongelmia ylä- ja alatunnisteen muotoilussa.

Sydney-teema?

Sydney-nimisellä teemalla aloin varsinaisesti luomaan harjoitussivua. Sivuston taittoa (layout) muotoillessa teeman mukauttamisessa, törmäsin kuitenkin ongelmaan. Teeman tiedostot tuottivat tyhjän tilan ylimmän elementin ympärille sivun sisältöosassa content. Tyhjän tilan ongelmaan ei ollut ratkaisua teeman asetuksissa vaan ne olisi poistettava CSS-muotoiluilla. Näin ollen päädyin tutkimaan muita teemoja sivuston toteuttamiseksi.

Kadence-teema

Hairy-do sivustolle valikoitui lopulta laajalti suosittu kevyehkö Kadence-niminen teema. Kadencen osalta joitain sivun rakenteita (esim. artikkelin subheader) joudutaan kuitenkin myös asemoimaan CSS-muotoiluilla. Kadence-teema sisältää kuitenkin runsain mitoin vaihtoehtoja sivuston muodon toteuttamiselle ja sen avulla voidaan toteuttaa suunnitelman mukainen sivutaitto ja on näin ollen hyvä vaihtoehto teemaksi sivustolle.

Asenna sivustolle Kadence -teema. Ota se myös käyttöön ja poista muiden teemojen asennukset.

Navigointivalikot

Sivuston navigointivalikko on saavutettavuuden ja sivuston käytettävyyden kannalta tärkein objekti sivustolla. Sivustolle voidaan luoda päänavigoinnin lisäksi useita muitakin navigointivalikkoja tarpeen mukaan. Kadence-teemassa on koodattu kolme valikkoa ja sivustolle luodaan niistä kaksi Primary menu (päänavigointi header-osaan) ja Secondary navigation footer-osaan.

Siirry ohjauspaneelin toimintoon Ulkoasu/Navigointi (Appearance/menus) ja luo sivustolle kaksi navigointivalikkoa nimeltään Päänavigaatio ja Alatunniste. Alatunniste -valikossa luodaan Custom Links-toiminnon avulla ns.tyhjiä linkkejä (dummy link), joiden avulla luodaan näennäiset paikat menun itemeille.

Omat CSS-muotoilut

Omia CSS-muotoiluja voidaan lisätä Mukauta-toiminnosta Oma CSS-kohdassa. Itse olen kuitenkin suosinut lisäosa-metodia, jolla koodia on omasta mielestäni mielekkäämpää kirjoittaa. On olemassa myös teknisempi vaihtoehto, jossa asennetaan lapsiteema ja luoda lapsiteemaan functions.php ja oma CSS-tiedosto linkitetään sivustolle functions.php-tiedostossa. Tällä kurssilla kuitenkin käytetään lisäosaa CSS:n lisäämiseen, jotta opitte myös millainen lisäosa on.

Lataa ja ota käyttöön Simple Custom CSS/JS-lisäosa ohjauspaneelin Lisäosat (Plugins) -toiminnossa. Tutki mihin kohtaan lisäosa lisäsi omat asetuksensa ohjauspaneelissa.

Katsotaan hieman lähemmin lisäosan toimintaa. Jos et vielä ole asentanut Simple Custom CSS/JS lisäosaa, tee se nyt ja asennettuasi avaa lisäosan toiminto All Custom Code ohjauspaneelista. Luo uusi CSS-tiedosto klikkaamalla painiketta Add CSS Code sivun ylälaidasta.

Nimeä tiedosto vaikka ”Omat muotoilut” ja paina oikeassa laidassa olevaa Publish-painiketta.

Simple Custom CSS/JS käyttöliittymä

Käyttöliittymä on hyvin yksinkertainen. Keskellä on koodinäkymä missä on kirjoitettuna automaattisesti CSS-kommentteja, joissa kaikki tekstit on kirjoitettu kommenttimerkinnän /* ja */ sisään. Kommenteissa on myö esimerkki CSS-muotoilumerkinnästä, josta saat ensikosketuksen CSS:ään. Kun olet lkukenut kommentit ja sisäistänyt idean voit pyyhkiä merkinnät pois ja kirjoittaa koodinäkymään oman kommenttisi: /*Tiedosto sisältää minun omat muotoilut sivustolleni*/

Oikealla puolella (1.) on tiedoston asetuksia (Options), joihin kannattaa myös tutustua:

1. Linking type
• External File: Tarkoittaa, että luoduista muotoiluista muodostuu erillinen tiedosto teeman tiedostorakenteeseen ja se ladataan ulkoisena tiedostona jokaiselle sivulle.
• Internal: Tarkoittaa, että muotoiluista ei muodostu erillistä tiedostoa vaan kaikki muotoilut lisätään jokaisen sivun lähdekoodin metatietoihin joko head- tai footer-osaan.
2. Where on page
• In the <head> element: Valinnalla edellisessä kohdassa 1 asetettu sisäinen CSS tulostuu sivun metatiedoissa head-elementtiin.
• In the <footer> element: Valinnalla edellisessä kohdassa 1 asetettu sisäinen CSS tulostuu sivulla footer-elementtiin.
3. Where on site
• In Frontend: Frontend tarkoittaa käytännössä, että koodi tulostuu selaajan selaavan sivun lähdekoodiin.
• In Block Editor: Block Editor tarkoittaa, että voimme vaikuttaa editorin ulkoasun muotoiluun.
• In Admin: Admin tarkoittaa käytännössä Backendia eli hallintapaneelin toimintojen muotoilemista. Lisäosalla voidaan siis vaikuttaa myös ohjauspaneelin toimintojen ulkonäköön aluttaessa.
• In Login Page: WordPressin kirjautumissivun lähdekoodiin, joten voit muotoilla kirjautumissivusi täysin uudelleen, jos haluat. Esimerkki muotoilusta login-sivusta.

Yksittäisen artikkelin muotoilu

Siirrytään yksittäisen artikkelin muotoilemiseen. Aikaisemmin tehtiin yksittäisen sivun muotoilut teeman mukauttamisesta mutta nyt on aika muoitoilla yksittäinen artikkeli. Jos halutaan toteuttaa tarkalleen suunnitelman mukainen muotoilu artikkelille, joudutaan käyttämään muotoilemisessa CSS-muotoiluja sillä teema ei suoraan tue murupolun asemoimista otsikko-osan ylälaitaan.

Tehdään aluksi Artikkelin muotoileminen teeman mukauttamistoiminnossa (Mukauta) Posts/Pages Layout -> Single Post Layout:

1. Show Post Title?: Kyllä
2. Post Title Layout: Above Content
3. Container Width: FULLWIDTH
4. Post Title Align: left
5. Container Min Height: 50px
6. Title Elements: Kaikki muut piiloon paitsi BreadCrumbs
7. Default Post Leyout: Fullwidth
8. Content Style: Unboxed
9. Design-välilehdellä aseta suunnitelman mukainen typografia Breadcrumbs (Murupolun) Fontille (Open Sans, 700, 1rem, väri: #e0cbd8 tai #d6cfff).

CSS-muotoilut murupolkuun

Lisää oheinen muotoilu sivustonlaajuiseen CSS-muotoiluun. Muotoilu asettaa elementtiin taustavärin ja asemoi sen ylätunnisteen logon alapuolelle z-suunnassa. Jotta tämä toteutuu, muista vaihtaa muotoiluissa logon z-index -arvoksi pienempi arvo kuin 9999. Esimerkiksi 9998.

.post-title .kadence-breadcrumbs {
display: block;
position: absolute;
z-index: 9999;
left: 5%;
top: 0;
}
.single header.entry-header {
background-color: #333333;
}