Sienimetsään
Santerin sieniblogi harjoitussivu (VALMIS SIVU)
WordPress-kurssilla luotiin aiemmin harjoitussivusto, joka kertoi sienestämisestä ja sienistä. Jos haluat voit tehdä harjoituksen vuoksi sivuston, jonka tekemiseen teemoineen ja lisäosineen on tällä sivulla.
Tarkoituksena on, että sivustolla on artikkeleita ja ne voidaan jakaa aihealueen mukaan artikkelikategorioihin ja mahdollisesti myös avainsanoihin. Harjoitussivulle voidaan luoda myös esimerkiksi yhteystiedot-sivu ja muita alasivuja oman mielikuvituksen mukaan.
1. Alkutoimet
Aloitamme kurssin asentamalla omalle koneelle kehitysympäristöksi WPLocal-ohjelmiston paikallisen palvelimen ja asennamme palvelimelle WordPressin. Sivuston teemaksi olen valinnut Responsive-nimisen teeman ja sivueditorina käytämme Elementor sivueditoria.
Alkutoimista on kurssimateriaalissa erillistä materiaalia muissa artikkeleissa.
- Asenna WPLocal-ohjelmisto
- Asenna Responsive teema WordPressin hallintapaneelin Teemat-osiossa
Lapsiteema – Child-Theme
Lapsiteema on perusteeman lisäksi luotu teema, johon voidaan tehdä myös ohjelmoituja muutoksia muotoilujen lisäksi ja ne eivät pyyhkiydy pois päivitettäessä perusteemaa. Voit lukea lisää lapsiteemasta täältä. Asennetaan sivustolle käyttöön myös lapsiteema sillä teemme harjoitussivustolla muutoksia teeman tiedostoihin myöhemmässä vaiheessa. Lisäosan nimi on Child Theme Configurator ja se löytyy WordPressin lisäosien hakutoiminnolla.
Lataa lisäosa ja ota käyttöön. Luo seuraavaksi Responsive-teemalle lapsiteema ohjeiden mukaan, jotka löytyvät lapsiteemaa käsittelevästä artikkelista 1.5 Lapsiteema
Harjoitusmateriaali
Harjoitusmateriaalissa on valmiiksi käsiteltyjä kuvia myös sieniartikkelien sisältöön. Materiaalissa löytyy myös sienien ja etusivun sisältötekstit tekstitiedostona (.txt). Lataa materiaali koneellesi ja pura .zip-tiedosto jonnekin sopivaan paikkaan.
2.Lisäosia toimintaan
Otetaan WordPressiin käyttöön lisäosia. Yoast Duplicate Post on lisäosa, jonka avulla voimme kopioida sivuja ja artikkeleita sisältöineen. Lataa ja ota lisäosa käyttöön.
Gutenberg-editori on WordPressin asennuksen mukana tuleva lohkoeditori, joka tulee ottaa pois käytöstä sillä se sekoittaa turhaa sivustojen muokkaamista. Käytämme mahdollisuuksien mukaan kaikkiin muokkauksiin Elementor-sivueditoria. Lataa siis lisäosa nimeltä Disable Gutenberg ja ota lisäosa käyttöön.
LiteSpeed Cache on hyödyllinen lisäosa, jonka avulla voidaan hallita sivuston cache-välimuistia. Sen avulla voidaan tarvittaessa tyhjentää välimuisti, jos sivun esikatselu lataa sivun välimuistista vanhan version. Lataa lisäosa ja ota käyttöön.
WP Add Custom CSS on lisäosa, joka lisää hallintapaneeliin mahdollisuuden lisätä sivuston laajuisia CSS-muotoiluja ilman, että tarvitsee tyytyä teeman muokkaus toimintoon. Lisäosalla voidaan myös luoda sivukohtaisia muotoiluja, joka on Elementor-editorissa mahdollista vain maksullisessa PRO-versiossa. Lisäosaa ei löydy WordPressin lisäosahausta ja se täytyy ladata lisäosan omalta sivulta osoitteesta https://10web.io/wordpress-plugin/wp-add-custom-css/ zip-tiedostona ja asentaa WordPressiin Lataa lisäosa-toiminnolla
Lisäosatiedon karttumiseksi tutustutaan vielä yhteen lisäosaan ja asennetaan se sivustolle toimintaan. Simple Custom CSS and JS on lisäosa, jolla voidaan lisätä sivustolle omat CSS-muotoilut tai javascript-koodikirjasto. Lisäosa on erittäin kätevä, jos halutaan asettaa esimerkiksi sivuston typografia CSS:ää käyttämällä.
Lopuksi vielä lista lisäosista, jotka asennetaan tässä vaiheessa:
- Yoast Duplicate post
- Disable Gutenberg
- Litespeed Cache
- WP Add Custom CSS
- Simple Custom CSS and JS
Elementor sivueditori
Asennetaan sivustolle seuraavaksi Elementor editoriksi. Käytämme editoria varsinaiseen sivuston sivujen sisällön muokkaamiseen. Kun teet sivustoa ja lisäilet sivuja sekä artikkeleita voit käyttää Elementoria sivujen rakentelussa. Jos kuitenkin muokkaat jostain syystä artikkelien sivua Sienet, älä avaa sitä Elementor-editorissa vaan pitäydy perinteisessä Classic Editorissa. Elementorin koodaus voi sotkea artikkelien sivun koodia omalla html-koodauksella ja se lakkaa toimimasta oikein.
Asenna Elementor Plugins (lisäosat) -toiminnosta.
3.Mukauta – teeman mukauttaminen
Kun olemme valinneet sivustolle teeman, joudumme aina tutustumaan teeman rakenteisiin. Kuinka sivuston tekeminen teemalla käytännössä tapahtuu ja millaisia ominaisuuksia ja säätöjä teema pitää sisällään. Responsive-teema lisää Mukauta -teeman hallintapaneeliin jonkin verran mahdollisuuksia tehdä perusasetuksia sivustoon. Jos jotain muotoiluja ei voida tehdä Customize-paneelin (Mukauta) kautta voimme aina toteuttaa muutokset käyttämällä CSS-muotoiluja.
Tehdään aluksi joitain asetuksia sivustolle Customize (Mukauta) -hallintapaneelista Appearance/Customize (Ulkoasu/Mukauta):
- Global Settings=>Layout (Asettelu): Asetetaan sivun leveydeksi valinta Full Width (Koko näytön levyinen) ja sekä Outside- että Inside Container asetuksessa kaikki arvot nollaksi (0).
Näillä asetuksilla sivu levittäytyy koko näyttölaitteen leveydelle ja tyhjät tilat poistuvat kaikista reunoista. - Breadcrumb (Murupolku): Siirry asetuksissa kohtaan Breadcrumb ja ota ne käyttöön klikkaamalla Enable Breadcrumbs. Tee murupolulle asetukset After Heading (ylätunnisteen jälkeen) ja tasaa (Alignment) vasemmalle. Muuta kohdasta Spacing (px) arvoiksi joka reunaan nolla (0). Ota murupolku pois näkyvistä kaikilta muilta sivuilta paitsi yksittäisistä artikkeleista (Single Post).
- Page (Sivu): Asetetaan sivun leveydeksi Main Content Width (Sisällön leveys) 100% ja piilotetaan kohdasta Post Elements sivun Title (otsikko) ja Featured Image (artikkelikuva) näkyvistä.
- Blog/Archive=>Blog/Archive (Blogi/Arkisto=>Blogi/Arkisto): Aseta sisällön leveydeksi Main Content Width 70%. Jätä artikkelien sivulla näkyviin kaikki Entry Elements (Tuloelementit) ja raahaa artikkelikuva ylimmäiseksi. Muokkaa Entry Featured Image -kohdasta Image Width (artikkelikuvan leveys) sopivaksi otsikkoon nähden (esim. 200 toistaiseksi). Aseta artikkelien metatiedoista haluamasi asiat näkyviin. Aseta Read More Text (sisäänkirjautumisen sisältö) kohdasta Read more >>-tekstin tilalle Lue lisää
- Blog/Archive=>Single Post: Artikkelin sisällön leveydeksi asetetaan myös 100%. Jätä kaikki muut elementit näkyviin paitsi Featured Image (artikkelikuva), jonka voit piilottaa klikkaamalla silmää. Aseta otsikolle Title Alignment (Tasaus) oikealle. Valitse myös Meta Elements-kohdasta mitä asioita haluat näkyvän yksittäisen artikkelin meta-elementissä. VOit klikata aktiiviseksi myös Related Posts-kohdassa Enable Related Posts.
- Sidebar=>Layout (Sivupalkki=>Asettelu): Asetetaan sivupalkki näkymättömiin (No Sidebar) kaikissa kolmessa sivutyypissä. Sivupalkki (Widgets) voidaan halutessa tuoda sivulle erillisellä elementillä sivueditorissa.
Kun olet tehnyt edelliset muutokset, klikkaa Publish (Julkaise)-painiketta ja sulje teeman muokkain.
4.Luodaan etusivu ja artikkelien sivu
Tässä vaiheessa Sivuston etusivu ei ole teknisesti ottaen sivu lainkaan vaan WordPressin luoma artikkelien kokoelmasivu, jota ei voi voi muokata editorilla lainkaan. Sivustolle tulisi aina luoda fyysinen sivu etusivuksi, jotta sen ulkoasuun voidaan tehokkaasti vaikuttaa. Luodaan siis seuraavaksi ”Sienimetsään”-sivustolle etusivu ja artikkelien sivu. Molemmat sivut luodaan hallintapaneelista Pages eli Sivu-osiosta Lisää uusi-toiminnolla.
Kuten aiemmin mainitsin artikkelien sivua (Sienet) ei muokata elementorilla lainkaan vaan vain luodaan se, nimetään ja julkaistaan. Muuta ei tarvitse tehdä.
Luo lisäksi sivustolle etusivu ja nimeä se esimerkiksi ”Sienimetsään” sivuston nimellä. Artikkelien sivun nimeksi voit laittaa vaikka Sienet.
Otetaan sivut käyttöön
Asetetaan sivustolle juuri luomamme sivut käyttöön etusivuksi ja blogisivuksi (artikkelien sivu)
Siirry ohjauspaneelissa kohtaan Asetukset (Settings)/Yleinen (General). Asetuksesta löytyy kohta Etusivusi näyttää.
- Lisää sivustolle Etusivu klikkaamalla Sivut-toiminnosta Lisää Uusi.
- Etusivun nimeksi kannattaa SEO:n kannalta, jokin joka sisältää sivustollemme tuleva pääavainsana. Harjoitussivusto kertoo sienistä ja pääavainsanaksi olen kaavaillut sienimetsään. Nimetään siis etusivu pääavainsanalla Sienimetsään ja tallenna (Publish). Nyt voidaan luoda vielä artikkelien sivu.
- Valitse Artikkelien sivuksi asetuksessa ”Sienet”-sivu
- Tallenna muutokset ja julkaise sivu klikkaamalla Publish (Julkaise) -painiketta.
- Avaa seuraavaksi etusivu (Sienimetsään) muokattavaksi Elementor-sivueditorissa.
5. Etusivun sisällön luominen
Lähdetään luomaan etusivulle sisältöä suunnitelman mukaisesti. Kannattaa tutustua aluksi sivun tekemisen perusperiaatteisiin ja elementorin toimintaan. Sisällön luominen verkkosivulle on monitahoinen asia, johon liittyy useita oleellisia asetuksia, jotka on hyvä ymmärtää.
Silmäile siis seuraavia artikkeleita ja niiden asioita (Linkit avautuvat uuteen välilehteen):
Header-osassa on koko näytön levyinen lohko, jossa on taustakuva ja ”johdatusteksti” (Löytämisen riemu ja yllätys kannon juurella. Lähdetään sienimetsään!)
Lohko on toteutettu Elementorissa Row-elementillä, johon on asetettu taustakuva ja riviin täyte 300px ylös ja alas. Row (rivi) elementti luodaan Elementorissa sivun näkymässä oikealla, jossa on sisältölaatikon keskellä ”+” symbolilla varustettu punainen pyöreä painike. Painike avaa lohkon, josta valitaan rivin layout eli millaisiin sektioihin (sarake, column) rivi jaetaan. Valitse vaihtoehdoista rivi, jossa on vain yksi sarake. Rivin asetuksista laitetaan se täysleveäksi layout-välilehdeltä rivin asetuksissa. Myös asetus Stretch Section on asetettu aktiiviseksi, jotta rivi levittäytyy kokonaan näyttölaitteen levyiseksi. Layout-välilehdellä on myös asetus Content align, josta voidaan asettaa sisällön asemointi rivillä. Vaihda asetukseen Middle.
Aseta vielä taustakuvan asetuksista:
- Position: bottom-right, jolloin pienennettäessä selaimen ikkunaa kuva leikkaantuu vasemmasta laidasta ja oikealla puolella oleva suuri sieni pysyy näkyvissä aina.
- Size: cover, joka määrittää että taustakuva peittää koko lohkon.
- Repeat: no-repeat eli kuva ei toistu vaikka se olisi pienempi kuin näkyvä alue.
Lisätään seuraavaksi riville tekstielementti ja kirjoitetaan sivulla oleva teksti rivinvaihtoineen tekstikenttään. Tee seuraavat asetukset tekstilaatikon asetuksiin Style-välilehdeltä:
- Text-color:
- fontin väri:#E7EDF9
- Typography:
- Family: Oregano (tai jokin muu haluamasi fontti)
- Font-size: 2rem
- line-height: 3rem
- letter-spacing: 0,1rem
Lisää vielä tekstilaatikkoon Advanced-välilehdeltä täytettä (padding) tekstilaatikon oikeaan ja vasempaan laitaan 5% ja leveys Width Full Width (100%). Siirry Style -välilehdelle ja tee asetus Alignment -kohdasta millä puolella lohkoa haluat tekstin näkyvän.
Huomionarvoista on, että termit font-size, line-height jne. tulevat suoraan CSS-muotoilukielestä, jossa ne ovat ominaisuusmääritteitä (property)
Sisältölohko
Etusivun rakenteessa vaihtelevat rivielementit (Row), jotka on jaettuna 50% levyisiin sarakkeisiin (column). Sarakkeissa kuvituskuva on vuoroin oikealla ja vasemmalla ja sisältöteksti on aina viereisessä sarakkeessa. Sisällön tasaus vertikaalisti on asetettu rivielementin asetuksissa Middle, kuten header-lohkossa.
Rivin taustaväriksi on asetettu sama vaalean sininen #E7EDF9 sävy mikä esiintyy header-rivin tekstissä.
Lisää riville kuva toiseen sarakkeeseen ja aseta kuva Style -välilehdeltä täysleveäksi (Width), jolloin kuva levitetään koko sarakkeen levyiseksi (Leveys ei vääristä kuvaa vaan rivin korkeus kasvaa kuvan kuvasuhteessa).
Siirry sarakkeen (Column) asetuksiin ja Advanced-välilehdelle ja aseta täyte (padding) nollaksi (0), jolloin sarakkeessa olevasta kuvasta poistuu täyte ja kuva täyttää täydellisesti sarakkeen. Tyhjä väli edelliseen header-rivielementtiin pitäisi poistua.
Lisää seuraavaksi toiseen sarakkeeseen tekstit. Käytämme sarakkeessa heading-elementtiä esittämään otsikko ja Text Editor -elementtiä leipätekstiin. Lisää aluksi Heading-elementti ja kirjoita ensimmäinen otsikko sisällöksi. Tee elementtiin seuraavat asetukset:
- Content/Size: XL
- Content/HTMLTag: H2 (Otsikko on väliotsikko, joten H2 otsikkotaso sopii hyvin html-tagiksi).
- Style/Text Color: #6E3207 (voit toki valita myös toisen värin, jos haluat)
Lisätään seuraavaksi riville tekstielementti ja kirjoitetaan sivulla oleva teksti rivinvaihtoineen tekstikenttään. Tee seuraavat asetukset tekstilaatikon asetuksiin Style-välilehdeltä:
- Text-color: #6E3207
Lisää vielä tekstilaatikkoon Style-välilehdeltä myös typografia-asetukset, sillä artikkelien leipätekstin typografia noudattaa perus leipätekstin asetuksia. Näissä laatikoissa käytämme erityistä muotoilua. Voit käyttää oheisia asetuksia tai muotoilla tekstit omaan tyyliin.
- Size: 19px
- Weight: 600
Kopioi seuraavaksi luotu sisältörivielementti kaksi kertaa ja muotoile muut elementit ja muuta sisällöt ja kuvat.
Lisää vielä viimeiseksi alatunnisteen yläpuolelle yksi rivi, johon vaalea kuvituskuva sienistä.
6.Artikkelien sivu
Olemme tehneet sivustollemme perusasetukset kuntoon mutta sivustolla ei ole vielä muuta kuin etusivu.
Poista sivustolta Hei Maailma -esimerkkiartikkeli artikkeleista. Luomme sivustolle artikkelien sivun, johon linkit kaikista sivuston artikkeleista ilmestyy. Luodaan myös ensimmäinen artikkeli, jota tulemme kopioimaan edelleen uusiksi artikkeleiksi. Luodaan sivustolle myös oman navigointivalikko, joka näkyy jokaisella sivulla ja artikkeleissa. Asetetaan sivustolle artikkelien sivuksi itse luomamme tyhjä sivu.
Artikkelien sivu
Klikkaa sivun muokkausnäkymässä Edit Page -otsikon vieressä olevaa Add New -painiketta ja luo uusi sivu artikkelien sivuksi. Luo artikkelien sivukäyttämällä vain Classic Editoria. Nimeä se esimerkiksi Sienet. Artikkelien sivulle tulee näkyviin kaikki sivuston artikkelit linkkeinä.
Etusivun ja artikkelien sivun asettaminen
Siirry hallintapaneelin Settings-toimintoon ja valitse asetuksista Reading (lukeminen) ja aseta Sienimetsään -sivu sivuston etusivuksi (Your homepage displays). Aseta artikkelien sivuksi (Posts page:) juuri luomasi Sienet -sivu. Aseta For each post in a feed, include (Jokaisessa syötteen artikkelissa, näytä) -kohdassa valinnaksi Excerpt (Ote) ja tallenna muutokset.
7.Ensimmäinen artikkeli
Luodaan ensimmäinen artikkeli sivustolle. Klikkaa hallintapaneelista valinta Artikkelit/Lisää Uusi. Luodaan ensimmäisenä artikkeli Kantarellista (Keltavahvero). Tee seuraavat määritykset WordPressin classic editorissa ennen Elementoriin siirtymistä:
- Nimeä artikkeli Keltavahvero (Kantarelli)
- Luo uusi kategoria editorin oikeassa laidassa. Kategoriaksi Ruokasieni ***.
- Aseta artikkelille avainsanaksi Vahvero
- Aseta artikkelille myös artikkelikuva harjoitusmateriaalista. Lataa kuva Mediakirjastoon ja ota käyttöön artikkelissa artikkelikuvana.
Kun olet asettanut edelliset asetukset paina Julkaise-painiketta ja avaa artikkeli muokattavaksi Elementorissa.
Tavallisesti kun itse luon uuden sivun tai artikkeli, teen juuri edellisellä tavalla. Classic Editorissa on tietyt asetukset helpommin käsillä, joten teen ne ensin valmiiksi ennen kuin aloitan artikkelin kirjoittamisen Elementorissa.
Kantarelliartikkeli
Muotoillaan ensimmäisen kantarellista kertovan artikkelin sisältö valmiiksi. Käytä vaihtelevasti editorin row-elementtejä ja jaa ne sarakkeisiin, joihin lisäät kuvia ja tekstielementtejä. Harjoittelemme yhdessä parin artikkelin tekemisen ja voit jatkaa omalla ajalla muiden sieniartikkeleiden muotoilemista..
8.Kategoriat ja avainsanat
Asetamme sienistä kertovalla sivulla Kategorioiksi sienistä onko sieni syötävä, syötäväksi kelpaamaton vai myrkyllinen. Olen hakenut kategoriat sivulta https://fi.wikipedia.org/wiki/Sienten_sy%C3%B6t%C3%A4vyysmerkint%C3%A4. Kategorioiden ohella asetamme avainsanoiksi mihin sukuun sieni kuuluu.
Kategorioilla voidaan WordPressissä lajitella artikkeleita niiden sisällön mukaisesti. Jokaiselle kategorialle muodostuu WordPressissa oma sivu, johon listaantuu kyseiseen kategoriaan tehdyt artikkelit.
Myös avainsanoilla voidaan lajitella artikkeleita. Avainsanoille muodostuu myös omat sivut, joihin listautuu kaikki artikkelit, joissa on käytetty kyseistä avainsanaa.
Kategoriat ja avainsanat tuovat ryhtiä sivuston rakenteelle ja ne helpottavat selaajan navigoimista sivustolla. Usein sivustolla käytetään ns. avainsanapilveä, joka sisältää avainsanalinkkejä joko painikkeina tai tekstilinkkeinä. Avainsanapilveä voidaan käyttää esimerkiksi sivuston footer-osassa tai sivupalkissa, jos sellainen on asetettu näkyviin.
9.Artikkelisivun header-osa (CSS)
Sivulla saatetaan käyttää header-osan navigoinnin alapuolella ensimmäisenä header-kuvaa. Etusivullemme loimme vastaavan kuvan käyttämällä Elementor-sivurakentajaa. Yksittäisen artikkelin osalta olen suunnitellut, että sivuston artikkeleihin asetetaan oma laidasta laitaan ulottuva header-lohko, jonka päällä oikealla on artikkelin otsikko. Header-lohkon taustakuvana on sienen mukaan vaihtuva kuva, joka asetetaan artikkelisivulle CSS-muotoilun avulla.
Artikkelin tai sivunsisäisen CSS-muotoilun lisäämiseen asensimme aiemmin lisäosan Simple CSS, joka lisää Classic Editoriin kentän sivunsisäisen CSS:n lisäämiseen.
Avaa edellä luotu ensimmäinen kantarellin artikkeli muokattavaksi Classic Editorissa. Kun vierität sivua alaspäin huomaat, että viimeisenä sivulla on tekstikenttä Simple CSS. Kopioi koko Omat muotoilut CSS-koodaus kenttään ja korvaa koodissa oleva taustakuvan osoitekohta kantarellin header-kuvan url-osoitteella. Osoitteen löydät mediakirjastosta kuvan tiedoista. Osoitteen saa kopioitua kätevästi klikkaamalla osoitekentän vieressä olevaa painiketta Copy URL.
CSS-koodi ei toimi täysin oikein. Luokkaelementti .title-background ei ole asetettu sivun html-merkkaukseen ja meidän täytyy käydä asettamassa se teeman tiedostoon.
WordPressissä yksittäisen artikkelin header-osan otsikon koodia edustaa Responsive WordPress-teemassa tiedosto nimeltä title.php, joten meidän on lisättävä siihen oikea html-merkkaus.
Teeman tiedostoeditori
Teeman tiedostoeditori on yksi vaihtoehto editoida teeman tiedostoja. Jos toimitaan paikallisella palvelimella, voidaan asentaa koneelle koodieditori jonka avulla on helppo editoida sivuston tiedostoja. Yksi hyvä koodieditori on Atom. Sivustolla löytyy myös ohjeet editorin asentamiseen. Alkeiskurssilla käytämme kuitenkin WordPress-lisäosaa tiedoston muokkaukseen.
Lisäosa
Advanced File Manager on hyvä lisäosa, jonka avulla voidaan muokata teeman tiedostoja. Lisäosa tuo WordPressiin selkeän tiedostojen hallintatoiminnon ja koodin editorissa on jopa koodin korostusvärit käytössä.
Header-osan muokkaus
Muotoillaan seuraavaksi header-osan tiedostoa teeman tiedostoista. Avaa teeman tiedostorakenteessa muokattavaksi tiedosto:
wp-content/themes/responsive/partials/single/title.php
Korvaa koko tiedoston koodi oheisella koodilla, joka sisältää myös kaipaamamme .title.background luokkaelementin otsikolle.
Tallenna tiedosto ja esikatsele kantarellista kertovaa artikkelia. Jos kaikki meni oikein headerin navigointipalkin alapuolella on komea Kantarellin kuva ja sivun otsikko on sivun oikeassa laidassa keskellä kuvaa.
<?php
/**
* Displays the post header
*
* @package Responsive WordPress theme
*/
// Exit if accessed directly.
/* MURUPOLKU-ELEMENTTI*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="title-background">
<h1 class="entry-title post-title responsive" itemprop="headline"><?php the_title(); ?></h1>
</div>
Sivun CSS-koodi
/*Artikkelin identifioivien tietojen elementit on muotoiltu CSS-muotoiluja käyttämällä. Taustakuvaksi tulee jokaiseen yksittäiseen artikkeliin oma taustakuva ja taustakuvan määritteleminen hoidetaan title-background -divin avulla. Divi on asetettu teeman tiedostossa wp-content/themes/responsive/partials/single/title.php lisäämällä otsikon ympärille div-luokkaelementti.*/
/*Sivun header-osaan asetettu taustakuva otsikon taustakuvaksi. */
.title-background {
top: 110px;
left: 0;
display: block;
height: 700px;
width: 100%;
background-image: url(KOPIOIKUVAN OSOITE TÄHÄN. ÄLÄ POISTA SULKEITA);/*Taustakuva muutetaan artikkelin mukaan*/
/*Sivun header-osassa sivun pääotsikko*/
h1.entry-title.post-title.responsive {
float: right;
position: relative;
top: 45%;
right: 2%;
background-color: rgba(234,234,234,0.55);
padding: 10px 20px;
border-radius: 10px;
/*Header-osan tekstit sisältävä laatikko (esim. murupolkulaatikko)*/
.site-content-header {
top: 740px;
left: 0;
z-index: 100;
/*Murupolkulaatikon reunan pyöristys*/
.single-post .site-content-header {
top: 780px;
left: 0;
z-index: 100;
border-top: 3px #6ec390 ridge;
border-radius: 0 30px 0 0;
padding: 5px 5px 5px 15px;
height: min-content;
width: 96%;
max-width: 570px;
background-color: #cfcfcf;
/*Artikkelin sisällön laatikko (asemoidaan sivulla headerkuvan jälkeen)*/
.entry-content {
/*Metapalkki artikkelin metatiedoista*/
.post-meta {
position: relative;
top: 680px;
10.Artikkelin/sivun kopioiminen
Kun olet muotoillut ensimmäisen artikkelin hyväksi kokonaisuudeksi voit käyttää artikkelia uuteen artikkeliin kopioimalla sen uudeksi luonnokseksi. Siirry Kaikki artikkelit näkymään hallintapaneelissa ja siirrä kursori artikkelin päälle. Huomaat, että toimintolistassa on linkkitekstit Kopio ja Uusi luonnos.
- Kopioi -toiminto kopioi artikkelin Kaikki artikkelit näkymässä ja se voidaan ottaa muokattavaksi normaalisti
- Uusi Luonnos -toiminto kopioi artikkelin uudeksi luonnokseksi ja avaa sen automaattisesti muokattavaksi. Luonnos muotoillaan ja tallennetaan, jolloin siitä muodostuu uusi artikkeli.
Kopioimalla artikkelia uusiksi artikkeleiksi samanlainen asettelu ja muotoilut periytyvät edelleen mikä on hyvä. Sivustosta tulee yhtenäinen muotoilultaan ja sivuston tekeminenkin toki helpottuu, kun ei tarvitse ns. keksiä pyörää aina uudelleen.
11.Artikkelien sivu ja tutustuminen CSS-muotoiluun
Otetaan käsittelyyn artikkelien sivu. Kun siirryt artikkelien sivulle huomaat, että sen asettelu ei ole aivan kohdallaan. Tarkoituksena on muuttaa artikkelin näkymistä niin, että vasemmalla on artikkelin tietoja (Otsikko, metatiedot ja ote artikkelin tekstistä) ja sienen artikkelikuva tulostuu laatikon oikeaan reunaan. Lisäksi oheinen muotoilu kietoo artikkelin materiaalin laatikon sisään ja tyylittelee laatikkoa hieman väreillä ja reunaviivalla.
Kategorian ja avainsanan sivut
Jos selaaja klikkaa yksittäisen artikkelin sivulta murupolusta kategorian nimeä (esim. *** Herkulliset ruokasienet), hän päätyy valitun kategorian sivulle. Sivu on luonteeltaan ”archive”-tyyppinen sivu, joka listaa artikkeleita linkeiksi ja toimii artikkelien hakemistosivuna. Artikkelien sivu listaa kaikki sivustole kirjoitetut artikkelit ja kategorian sivu eroaa artikkelien sivusta niin, että sivulle listautuu vain ne artikkelit, joiden kategoriaksi on merkitty jokin tietty kategoria esimerkiksi edellä mainittu *** Herkulliset ruokasienet.
Avainsanan sivu toimii samaan tapaan kuin kategorian sivu ja siihen listataan jonkin tietyn avainsanan artikkelilinkit.
Oman muotoilun lisääminen
Avaa Simple CSS -lisäosan toiminto hallintapaneelista. Kopioi oheinen koodi koodikenttään. Tallenna muutokset ja esikatsele uudelleen artikkeleiden sivua. Jos kaikki on kunnossa muotoilut siirsivät otsikon ja artikkelin tekstimateriaalin kuvan oikealle puolelle ja artikkelikuva jäi vasemmalle puolelle.
Sivun & yksittäisen artikkelin tausta
Kun olemme lisänneet sivuston laajuisen CSS-muotoilun ja menemme esimerkiksi etusivulle, sivun sisältöosan ympärillä on artikkelien sivulta tuttu laatikkomuotoilu reunaviivoineen. Ongelma johtuu siitä, että muotoilu vaikuttaa nyt kaikkin .post-entry luokalla merkattuihin elementteihin. Etusivulla on käytössä sama luokkamääre sisällössä, joten meidän täytyy tarkentaa luokkamäärettä niin, että se kohdistuu vain ja ainoastaan artikkelien sivun luokkaan. Muutetaan siis luokkamäärettä muotoon .blog .post-entry
Vieraile seuraavaksi artikkelien sivulla. Vertaa vielä artikkelien sivun laatikkoa kategorian sivun sekä avainsanan sivun laatikoihin. Huomaat, että muotoilumme ei toimi oikein edelleenkään kategorian eikä avainsanan sivulla vaan laatikosta puuttuu muotoilut. Kategorian ja avainsanan sivuilla on toinen luokkaelementti body tagissa html-merkinnässä, joten meidän täytyy lisätä vielä yksi määritys .blog .post-entry määrityksen perään CSS-tiedostossa.
Määrityksien ketjuttaminen CSS-muotoilussa tarkoittaa, että laitamme eri osoitteisiin kohdistuvia määritteitä pilkulla (,) eroteltuna. Lisätään CSS:ssä osoitteeseen vielä yksi määrite, jolloin sen muodoksi tulee .blog .post-entry, .archive .post-entry. Tarkista muotoilun toimivuus ja kaikki muotoilut pitäisi toimia nyt artikkelien, kategorian sekä avainsanan sivuilla.
Kohtalaisen monivaiheisen harjoituksen tarkoituksena oli kertoa hieman CSS-muotoilujen asettamisesta ja kuinka yhteen paikkaan asetettu CSS-muotoilu voi yllättäen vaikuttakin myös moneen muuhun paikkaan sivustolla. Siksi on tarpeen tarkastaa muotoilemisen jälkeen päällisin puolin sivusto, että asetettu muotoilu ei sotke muuta sisältöä sivustolla.
/* OMAT SIVUSTON LAAJUISET CSS-MUOTOILUT*/
/*ylätunnisteen asetuksia*/
/*logokuvan asetukset*/
img.custom-logo {
height: 87px!important;}
width: auto!important;
/*SIVUN TAUSTA: asetetaan sivun taustan väriksi valkoinen ja poistetaan täyte sivusta*/
.give-wrap, .site-content {
background-color: #fff;}
padding: 0;
/*ARTIKKELIEN, KATEGORIOIDEN JA AVAINSANOJEN SIVUT*/
/*Artikkelin laatikko*/
.blog .post-entry, .archive .post-entry {
background-color: #eaefea;}
padding: 20px;
margin: 5px;
border: 3px ridge #eaefea;
border-radius: 10px;
/*Artikkelikuvan asetukset*/
.blog .post-entry img.wp-post-image {
width: 100%!important;}
height: auto;
/*Artikkelin otsikon ja metatietojen asemointi sisältölaatikon suhteen.*/
.blog.title-alignment-left .hentry .entry-title, .blog.meta-alignment-left .hentry .post-meta, .archive.title-alignment-left .hentry .entry-title, .archive.meta-alignment-left .hentry .post-meta {
padding-left: 20px;}
/*Artikkelikuvan tasaaminen laatikoksi oikeaan laitaan*/
.blog.featured-image-alignment-left .hentry .thumbnail, .archive.featured-image-alignment-left .hentry .thumbnail {
float: right;}
padding: 0;
margin: 30px 20px 0 10px;
/*Artikkelin sisältötekstin muotoilu*/
.blog.content-alignment-left .hentry .entry-content, .archive.content-alignment-left .hentry .entry-content {
display: block;}
padding: 20px;
border-radius: 20px;
/*Lue Lisää linkin muotoilu painikkeeksi.*/
.hentry .read-more, article.product .read-more {
background-color: #72aee6;}
text-transform: uppercase;
display: block;
position: relative;
bottom: 0;
right: 5px;
width: fit-content;
float: right;
padding: 5px 25px;
border-radius: 0 20px 20px 0;
Sivustolla ei ole vielä asetettu navigaatiovalikkoa, jonka avulla selaaja voi liikkua sivusto. Tehdään seuraavaksi sivulle uusi päänavigointivalikko.
- Siirry hallintapaneelissa navigointiasetuksiin, joka löytyy Ulkoasu-valikosta Ulkoasu/Valikot.
- Nimeä uusi valikko jollain kuvaavalla nimellä (esim. Päävalikko).
- Valitse valikon alapuolelta olevista valinnoista aktiiviseksi Näytä valikko sijainnissa Päävalikko valinta aktiiviseksi. Valinta kertoo, että valikko tulee olemaan sivun päävalikko sivun yläosassa.
- Tallenna valikko painamalla Luo valikko-painiketta.
- Näkymän vasemmassa laidassa on kaikki sivuston sivut, artikkelit ym. Etsi etusivusi ja artikkelien sivu ja lisää ne valikkoon.
Websivusto voi sisältää useita navigaatiovalikkoja. Tavallisesti päänavigointi sijaitse joko sivun ylätunnisteessa yläreunassa tai sivun vasemmassa laidassa riippuen websivun rakenteesta (layout). Päänavigointi on nimensä mukaisesti sivuston tärkein menuvalikko. Sivuston navigaatio vaikuttaa merkittävästi sivuston saavutettavuuteen, joten sen suunnitteluun kannattaa uhrata voimavaroja.
Navigointeja voidaan tehdä myös alatunnisteessa tai vaikkapa sivun vimpainlohkossa. Harjoitussivussamme luomme vain päänavigoinnin sivuston ylävalikkoon.
13.Teeman toimintojen ja termien kääntäminen
On hyvin tavallista, että teeman käännökset eivät aina ole oikein. Tavallisimpia ongelmia käännösten suhteen ovat mm. artikkelien navigointi, jossa artikkelissa lukevat englanninkieliset sanat Next ja Prev. Korjaaminen ilman lisäosaa ei onnistu ilman koskemista teeman tiedostoihin. Jos haluat muotoilla teeman käännöksiä, se onnistuu vaivattomimmin Loco-translate lisäosan avulla.
Loco Translate on lisäosa, jonka avulla voidaan muokata teeman tiedostojen käännöstiedostoja. Sivustolla saattaa olla joitain osia, joiden teksteihin ei pääse käsiksi mistään WordPressin hallintapaneelista. Vaihtoehtona on toki muokata teeman .po- ja .mo-tiedostoja mutta se on usein hyvin monimutkaista ja aikaa vievää. Lataa ja ota käyttöön Loco Translate ja korjataan teeman käännöksiä paremmiksi joiltain osin.
