Sivupalkit

Sivupalkit eli Sidebar

Sivustolla voidaan käyttää sivupalkkeja, joiden sisällä on ns. vimpaimia (Widgets). Vimpaimet ovat WordPressin perustoiminto ja niillä voidaan toteuttaa toimintoja, kuten avainsanapilvi, kuukausittainen artikkelilistaus, hakutoiminto jne.

2. Sivupalkki näkyviin

Harjoitussivulla on käytössä Responsive-niminen teema ja toiminto, jossa sivupalkit otetaan näkyviin, joko oikealla tai vasemmalla puolella sisältöosaa, ei toimi kokemukseni mukaan itseäni tyydyttävästi. Sen sijaan että käyttäisimme sivupalkkien teeman asetusta, voidaan sivupalkit ottaa näkyviin sivustolla elementorista löytyvällä toiminnolla.

2.1 Etusivun avainsanapilvi

Aloitetaan asettamalla etusivulle avainsanapilvi, jonka avainsanat muotoillaan CSS:n avulla painikkeiksi. Luo aluksi vaikka kymmenen avainsanaa artikkeleille. Avainsana ei tule näkyviin avainsanapilveen ennen kuin se asetetaan vähintään yhteen artikkeliin. Siksi meidän tulee luoda yksi artikkeli ja asettaa sille kaikki ”orvot” avainsanat.

Kun olet luonut avainsanat ja artikkelin, avaa etusivu muokattavaksi Elementorissa ja lisää sivun alalaitaan yksi sisältörivi. Lisää sisältöriviin Elementorin toiminnoista toiminto nimeltä Sivupalkki. Voit käyttää hakusanana hakutoiminnossa Widget. Raakaa Sivupalkki riville ja aseta sivupalkin sivupalkiksi Footer Widgets-1.

Siirry vimpainten hallintatoimintoon hallintapaneelissa ja lisää Footer Widgets-1 sivupalkkiin avainsanapilvi vimpaimeksi.

Muotoillaan avainsanapilven avainsanat painikkeeksi CSS-muotoilulla, joka asetetaan sivun sisäiseen muotoiluun. Lisää seuraava koodi sivun sisäiseen CSS-muotoiluun Classic Editorissa etusivun editoinnissa.

3. Vimpaimien hallinta

Vimpaimet ovat sivupalkissa näkyviä toiminnallisia lohkoja, kuten hakupalkki, avainsanapilvi jne. Vimpaimia voidaan lisätä ja poistaa sivupalkeista hallintapaneelin toiminnossa Ulkoasu/Vimpaimet (Widgets).

Näkymässä on oikealla puolella teemassa käytössä olevat sivupalkit (Sidebar) ja vasemmalla puolella sivupalkkeihin lisättävät vimpaimet. Kuten huomaat oletussivupalkkiin on jo lisättu Sienet, Hakupalkki ja
Kategoriat, joka listaa sivuston kategoriat eli sienten syötävyysluokittelun sivupalkkiin.

3.1 Ylimääräisten sivupalkkien poistaminen?

Ylimääräisiä sivupalkkeja ei voida poistaa muuten, kuin muokkaamalla teeman tiedostoja. WordPressissä ei ole toimintaa, jolla voidaan ottaa sivupalkkeja käytöstä vaan täytyy poistaa muokkaamalla teeman php-tiedostoa. Käytännössä sivupalkkien koodaus sijaitsee usein teeman functions.php-tiedostossa. Jos teemassa on kuitenkin paljon toiminnallisuuksia koodaus on voitu laittaa erilliseen tiedostoon selkeyden vuoksi, kuten Responsive-teeman johdalla on tehty.

Tiedostojen muokkaaminen täytyisi käytännössä tehdä lapsiteemaan, jonka tiedostoihin luotaisiin vastaava tiedosto, kuin pääteemassa. Sen koodia muokattaisiin, jotta vain pääsivupalkki tulisi näkyviin. Jos muokkaamme pääteeman tiedostoa ja poistetaan sivupalkit sieltä käsin, seuraava teeman päivitys yliajaa muutoksemme sivupalkkien osalta, jos teeman omistaja päivittää tiedoston. Jos haluat, voit kuitenkin tehdä poiston php-tiedostosta.

Avaa siis muokattavaksi kuvanmukainen php-tiedosto ja poista koodaus kuvan ohjeita noudattamalla.

4. Kehittäjäntyökalun käyttäminen

Selaimen kehittäjäntyökalu on kätevä tapa testata omia CSS-muotoiluja ja käytänkin toimintoa todella usein.

Työn kulku menee usein seuraavaan tapaan:

1. Avataan sivun esikatselu yhteen välilehteen ja muokkausnäkymä toiseen. Kehittäjän työkalua käytetään sivun esikatseluvälilehdessä.
2. Etsitään kehittäjäntyökalua käyttäen sivun elementti, johon halutaan tehdä muokkauksia. Paina elementin päällä hiiren oikealla painikkeella ja valitse avautuvasta valikosta Tarkista. Vaihtoehtoisesti voit hakea kohdan sivun html-lähdekoodin näkymästä.
3. Tee muutokset elementin CSS-koodiin ja muotoile elementti haluttuun muotoon. Voit tehdä muutoksia olemassa oleviin CSS-määrityksiin tai luoda uuden CSS-määrityksen CSS-paneelin ”+” -painikkeesta.
4. Kopioi muokkaamasi/luomasi CSS-muotoilu leikepöydälle. Voit avata muotoilun sisältävän CSS-tiedoston työkalun lähdetiedoston paneelissa (Sources Panel) klikkaamalla kohdetiedoston osoitetta -painikkeella ja valitsemalla avautuvasta valikosta toiminnon Reveal in Sources Panel, josta koodin kopioiminen on helpompaa sillä se toimii samaan tapaan kuin koodieditori.
5. Siirry sivun muokkausnäkymään ja lisää leikepöydältä omat muotoilut tiedostoon. Voit myös avata teeman CSS-tiedoston, jossa korvattava muotoilu on ja korvata vanha muotoilu uudella muutetulla muotoilulla. Usein kuitenkin on suotavampaa luoda omat muotoilut, jotka korvaavat sivun lataamisvaiheessa teeman muotoilut.
6. Tallenna muutokset ja tarkista toimiiko muotoilu.