Harjoitussivusto

Alkutoimet

Luo sivustolle kaksi uutta sivua, joista toisesta Hair-do, tulee sivuston etusivu ja toinen Artikkelit on sivuston artikkelien sivu. Ennen aloittamista oletan, että osaat hallintapaneelin käytön ja olet oppinut WordPress-hallintapaneelin toiminnot. Jos jokin asia herättää kysymyksiä, kannattaa kerrata asioita artikkelista 3.1 WordPress hallintapaneeli

Hairdo-sivustolla asetetaan seuraavat perusasetukset WordPressissä. Siirry hallintapaneelissa Asetukset (Settings) toimintoon.

1. Yleinen (General)
   • Sivuston kieli: Suomi
   • Aikavyöhyke: Helsinki
   • Voit tutkia tarkemmin kellonaikojen merkintäkoodeja TÄÄLTÄ.
   • Päivämäärän oletusmuoto: j.n.Y
   • Kellonajan oletusmuoto: G.i (Kellonaika on 24 tunnin muodossa ilman ensimmäistä nollaa.)
2. Lukeminen (Reading>
   • Sivustosi näyttää: Aseta etusivuksi juuri luomasi sivu Hair-do ja artikkelien sivuksi Artikkelit-sivu
   • Hakukonenäkyvyys: Piilota sivusto hakukoneilta
3. Keskustelu (Discussion): Hairdo-sivusto on yrityksen sivusto, joten kommentointi halutaan kokonaan pois käytöstä. Tarkista seuraavat asetukset.
   • Yritä lähettää ilmoitus tässä artikkelissa linkitettyihin blogeihin: poista
   • Salli linkki-ilmoitukset muista blogeista (pingbackit ja trackbackit): poista
   • Salli uusien artikkelien kommentit: poista
   • Vain rekisteröityneet ja sisäänkirjautuneet käyttäjät voivat kommentoida: lisää
   • Kommentti on hyväksyttävä käsin: lisää
   • Kirjoittajan aikaisemmista kommenteista ainakin yhden tulee olla hyväksytty: lisää
4. Media
   • Aseta kaikkiin kuvakokoihin arvoiksi nolla (0), joska sivuston kuvat optimoidaan käytettäväksi sivustolla kuvankäsittelyssä.
   • Poista täppä kohdasta Järjestä siirtämäni tiedostot kuukauden ja vuoden mukaan nimettyihin kansioihin (Organize my uploads into month- and year-based folders)
5. Osoiterakenne (Permalinks)
   • Aseta osoiterakenteeksi /%category%/%postname%/

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. Etsittäessä Hair-do kampaamon sivun suunnitelmaan soveltuvaa teemaa päädyin aluksi teemaan nimeltä Sydney. Kun aloitin luomaan suunnitelman taittoa sivustolle teeman asetuksissa. Törmäsin ongelmaan, jossa teeman tiedostot tuottivat tyhjän tilan ylimmän elementin ympärille content-sisältöosassa. Tyhjän tilan ongelmaan ei ollut ratkaisua teeman asetuksissa vaan ne olisi poistettava kuvan mukaisilla CSS-muotoiluilla. Näin ollen päädyin tutkimaan muita teemoja sivuston toteuttamiseksi.

Kadence-teema

Soveltuvaa teemaa joudutaan käytännössä etsimään tarjolla olevista teemoista testaamisen kautta asentamalla teema ja kokeilemalla kuinka sivun luominen onnistuu. Testasin erilaisia teemoja ja päädyin lopulta teemaan nimeltä Kadence, jossa edellä mainittua tyhjien tilokejen ongelmaa ei esiintynyt.

Navigointivalikot

Sivuston navigointivalikko on saavutettavuuden ja sivuston käytettävyyden kannalta tärkein objekti sivustolla. Sivustolle voidaan luoda päänavigoinnin lisäkti useita muitakin navigointivalikkoja. Kdence-teema antaa luoda useita valikkoja ja sivustollemme 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 suunnitelman mukaisesti.

Alatunnisteen Secondary Menussa voit käyttää Custom Links toimintoa ja asettaa URL-määritteeksi risuaidan (#), joka edustaa ns.dummy linkkiä. Kuulet lisää tunnilla.

Teeman mukauttaminen

Teeman mukauttaminen tarkoittaa käytössä olevan teeman muotoilemista omaan tarkoitukseen (taittoon) sopivaksi. Mukauttamisella pyritään samaan ulkomuotoon (layout, taitto), joka sivustolle on suunniteltu. Kaikissa saatavilla olevissa valmisteemoissa on erilaiset mahdollisuudet vaikuttaa sivuston layoutiin. On hyvin tavallista, että jotain sivuston elementin muotoa ei valmisteemassa voida mukauttaa teeman asetuksista vaan on turvauduttava CSS-muotoiluun. Jos tällainen ongelma ilmenee, kannattaa asentaa sivustolle ns.lapsiteema (child-theme), josta voit lukea erillisestä artikkelista.

Jos teen sivustoja valmisteemaan, tavallisesti otan käyttöön lapsiteeman sillä yleensä joudun asettamaan sivustolle myös omia asetuksia teeman tiedostoihin.

Siirrytään seuraavaksi Kadence-teeman mukauttamiseen ja tehdään siitä suunnitelman mukainen ratkaisu sivuston ulkomuotoon. Siirry siis Mukauta toimintoon ohjauspaneelin toiminnosta Ulkoasu/Mukauta (Appearance/Customize)

Kokeile seuraavia teeman asetuksia:

1. General/Layout: Aseta Content Max Width width asetus HD-leveyteen 1920 sillä haluamme luoda koko HD-levyisen sivuston ja Narrow Container saa jäädä olemassa olevaan arvoon. Aseta avo nolla (0) sekä Content Left/Right Edge Spacing että Content Top/Bottom Spacing eli poistetaan tyhjät tilat kaikilta reunoilta. Tässä vaiheessa asetetaan vain sivujen asetukset. Palataan artikkeleiden (Single) ja muihin asetuksiin myöhemmin.
2. Posts/Pages Layout -> Page Layout: Asetuksessa määritetään kuinka sivuston Sivutyyppiset html-sokumentit esitetään. Otetaan kaikilta sivuilta Page Title pois käytöstä sillä asetetaan sivuille sivun pääotsikko sisältöä luodessa. Default Page Layout asetetaan Fullwidth sillä haluamme kokoleveän sivun. Kohdassa Content Style aseta arvoksi Unboxed. Sivuilla ei näytetä artikkelikuvaa eikä kommentteja.

Ylä- ja alatunniste (header/footer)

Sivun ylä- ja alatunnisteen muotoilu tapahtuu riveittäin, jotka voidaan jakaa sarakkeisiin, joihin sisältö tulee. Molemmissa tunnisteissa on kolme riviä, joista sivustolla käytetään keskimmäistä riviä, joka jaetaan kolmeen sarakkeeseen.

Ylätunnisteessa sarakkeissa käytetään sarakkeeseen lisättäviä elementtejä, kuten logo, Primary Navigation, Search jne.

Toteuta ylätunnisteen asetuksissa riveille seuraavanlainen ”setti”:

• Vasen sarake: logo, johon tuodaan logokuva ilman osoitetietoja. Logon Max Width arvo voi olla esimerkiksi 200px.
• Keskisarake: Primary Navigation
• Oikea sarake: Search, joka tuo sivustolle hakutoiminnon.

Vimpaimet (esimerkkisivusto)

Vimpaimet (Widgets) ovat WordPressissä tavallisesti sivupalkissa (sidebar) tai alatunnisteessa käytettäviä toimintoja. Vimpaimet löytyvät ohjauspaneesista Ulkoasu/Vimpaimet (Appearance/Widgets) -asetuksesta. Harjoitussivustolla käytetään vimpaimia alatunnisteen sivupalkeissa sekä etusivun sivupalkki lohkossa, jossa oikella puolella on Uusinta uutta! viimeisimpien artikkeleiden vimpain.

Alatunniste

Kadence-teemassa alatunnisteeseen voidaan asettaa elementit vimpainten avulla.

Toteuta alatunnisteen sisältö vimpaimilla käyttäen Footer 1, Footer 2 ja Footer 3 sivupalkkeja:

• Footer 1: Vimpain 1 – Kuva (image-vimpain) ja logo kuvaksi. Vimpain 2 – HTML-elementti ja osoitetiedot html-merkkauksella (tehdään tunnilla)
• Footer 2: Vimpain 2 – HTML-elementti, johon Y-tunnus sekä iskulause (tehdään tunnilla)
• Footer 3: Vimpain 3 – Navigaatioksi Secondary Menu

Alatunnisteen logo ja osoitetiedot

Jos halutaan saada aikaan suunitelman mukainen taitto alatunnisteeseen, sen muotoileminen tuottaa hieman haasteita ja joudumme käyttämään joitain CSS-muotoiluja, jotta elementit saadaan ”taipumaan” oikeille paikoilleen alatunnisteessa. Yrityksen logokuva ja osoitetiedot halutaan tiiviisti alekkain niin, että osoitetiedot tulevat logokuvassa olevan graafisen värikkään viivaelementin reunustamaksi sen oikealle puolelle.

Logokuva on asetetaan vimpaimeen kuvaelementtinä ja osoitetiedot html-elementtinä. Kuvalle asetetaan asemoinniksi CSS:llä absoluuttinen asemointi ja z-index-arvoksi 999, jolloin logokuva on päällimmäisenä z-suunnassa ja teksti on sen alla. Jotta teksti asemoituu logon alapuolelle, html-elementille asetetaan marginaalit.

Helpompi vaihtoehto – Pelkkä kuva

Helpompi vaihtoehto on luoda logokuvasta toinen versio, joka sisältää osoitetiedot ja käyttää sitä footer-osassa. Kurssimateriaalissa on logosta osoitteellinen versio ja otetaan se käyttöön teeman alatunnisteessa.

Vimpainten luominen alatunnisteeseen

Siirry Vimpaimet-toimintoon ohjauspaneelin Ulkomuoto-asetuksissa. Sivupalkeista (Sidebar) keskitytään nyt siis vain Footer 1, Footer 2 sekä Footer 3 sivupalkkeihin, joihin raahataan seuraavat vimpaimet näkymän vasemman reunan käytettävänä olevista vimpaimista:

1. Footer 1: Image-vimpain, johon haetaan logokuva osoitteella.
2. Footer 2: Custom html-vimpain, johon asetetaan seuraava html-merkintä:

   <p>Y-123456-7</p>
   <p>Kokonaisvaltaista hyvinvointia<br>
   ja kampaamopalveluita Ranualla</p>
   

   Määritä tekstien tasaus keskelle elementin muotoiluasetuksista.

3. Footer 3: Navigation Menu, johon valitaan menuksi Footer menu, jonka loimme aiemmin.

Muista tallentaa aina sivupalkki, kun olet lisännyt vimpaimet palkkiin.

Siirry seuraavaksi taksisin teeman mukauttamiseen ja alatunnisteen asetuksiin. Lisää vimpaimet alatunnisteen keskimmäisen rivin kolmeen sarakkeeseen. Jos rivissä ei ole kolmea saraketta ota kolmen sarakkeen rivi käyttöön rivin asetuksista. Huomaa rivin asetuksien painikkeena hammasratas ja elementin muotoilupainikkeena on erilainen ikoni.