WordPress

Kaksi uutta verkkosivua

 

ethical_800

Kirjoitan hieman taustaa kuinka kaksi uutta verkkosivuani valmistuivat nopeasti tämän maaliskuun aikana.

Etsin jonkin aikaa sopivia WordPress-teemoja sekä portfoliosivuani sekä Natja K. Ethical-sivuani varten. Minulla oli tiettyjä vaatimuksia, jotka ratkaisivat minkä teeman valitsin. Halusin Natja K. Ethical-sivuston etusivulle koko Macbookin näytön täyttävän sliderin ja portfolio-sivulle halusin sosiaalisen median ikonit ylälaitaan.

Natja K. Ethical

Natja K. Ethical sivullani on käytössä ilmainen versio Zebrathemesin teemasta Photozilla. Teema on rakennettu Twitterin Bootstrap-teknologiaa käyttäen. Muokkasin teeman ulkoasua erilaiseksi aika paljon, mutta bootstrap-tiedostoihin ei tarvinnut koskea juurikaan. Editorial-sivun kuvagalleriaan käytin Nextgen Gallery-lisäosaa, joka on WordPressin suosituin galleria-lisäosa.

Otsikoihin käytin ilmaista fonttia Fjalla ja kappaleisiin käytin fonttia Open Sans, joista molemmista tein verkkofontteja verkkofonttigenaraattorilla.

Linkki sivuilleni: natjak.com/ethical

Portfolio

Portfoliosivuni teema on ilmainen versio teemasta Inkness, josta on saatavilla myös maksullinen versio. Tein portfolioni nopeasti parissa päivässä alkamatta muuttaa teeman ulkoasua paljonkaan. Minulla on tarkoitus tehdä uusi keväinen slider-kuva huhtikuun aikana ja uusia slider-kuvia jatkossakin aika ajoin. Teema on rakennettu käyttäen Bootstrap 3.0-teknologiaa, eikä tämänkään teeman ulkoasua muokatessa tarvitse koskea paljonkaan bootstrap.css-tiedostoon.

Sosiaalisen median ikonit ylälaidassa kuuluvat teeman omaan frameworkiin myös WordPressin käyttöliittymän puolella ja vaikka etsin ikoneiden kuvia teeman sisältä myös selaimen “Inspect Element”-toiminnolla, en löytänyt niitä. Teemaan ei siis voinut lisätä haluamiani Behancen ja WordPress-blogin sosiaalisen median ikoneita lisäämällä samanlaisia koodinpätkiä lisää, koska ikonit eivät ole teemassa kuvina, vaan teeman sisällä vektoreina. Halusin kuitenkin tehdä portfolio-sivuni tällä kertaa helposti ja lisäsin linkit Behanceen ja tähän blogiin About-välilehdelle.

Otsikkoihin käytin fontin Oswald regular-leikkausta ja kappeleisiin fonttia Tikal Sans, joista molemmista tein verkkofontteja.

Linkki sivuilleni: natjak.com

 

natjak_800

Front-end koodausta ja muita projekteja

 

Huomasin, että on korkea aika kirjoittaa muista töistäni kuin vaatesuunnittelusta ja valokuvauksesta, ettei koko työnkuvani profiloituisi pelkästään vaatesuunnitteluun. Aloin viime syksynä tekemään Natja K. vaatemallistoa juuri vastapainoksi pitkään jatkuneelle koodaukseen keskittyneelle ajanjaksolle, jota oli kestäny yhteensä 14 kuukautta yhteen menoon. Olin toki käyttänyt päivittäin Photoshopia koko tuon jakson ajan ja pitkiä pätkiä Illustratoria ja InDesignia, mutta koodaus oli vienyt kaikkein eniten aikaa. Kerron tässä postissa jotakin siitä, kuinka olen kehittynyt koodaajana ja esittelen lyhyesti yhden videoprojektin.

Koodaus on osa-alue, jota ei yleisölle näy ja olen käyttänyt lukemattomat yksinäiset tunnit sen lisäopetteluun omaan koulutukseeni kuuluneen perus-HTML- ja CSS-koodauksen lisäksi. Pääasiassa olen tehnyt WordPress-sisällönhallintajärjestelmällä verkkosivuja, joka minun kohdallani on tarkoittanut sitä, että en käytä vain olemassaolevien teemojen rakenteita, vaan toteutan oman tai jonkun muun suunnitteleman leiskan koodaamalla teemasta uuden teeman. Ainoastaan toiset WordPressillä sivuja paljon sivuja tehneet voivat tunnistaa tutkittuaan lähdekoodiani, minkä teeman perusrunko on ollut sivujen pohjana.

Koulutukseeni ei kuulunut lainkaan responsiivisen koodauksen opetusta ja lähdin tutkimaan sitä samalla, kun aloin tutustumaan kunnolla WordPress-sisällönhallintajärjestelmään heinäkuussa 2012. Responsiivisten sivujen toteuttamiseen olen löytänyt suhteellisen helposti fluid-CSS:ää, jota osaan nykyään muokata toimimaan lähes mihin muotoon tahansa. Fluid-CSS saa tekstipalstat kapenemaan selainikkunaa pienennettäessä saumattomasti niin, että sanat hyppivät selainikkunan koon mukaan kapeammiksi riveiksi. Minulla kesti jonkun aikaa ymmärtää yksinään, mihin kuvien saumaton prosentuaalinen skaalaus perustuu koodissa ja mitä tarkoittaa fluid-teknologiat, mutta ymmärrettyäni mihin ne perustuvat olen kokenut sen helpoksi.

Pääasiassa kaikki mitä koodaan itse on front-endiä, eli sitä, mikä näkyy internetin käyttäjille. Php:tä tai muuta ohjelmointia en kirjoita juuri lainkaan itse, mutta WordPressin php:tä muokkaan toimimaan eri tavoin. WordPress itsessään toimii php:llä, joten WordPressillä layoutien koodaamisessa ei voi välttyä php:n muokkaamiselta. Olen ehdottomasti ensimmäisenä visuaalinen ja käyttöliittymien suunnittelija, mutta saan toteutettua nykyään niin hyvin verkkosivuista halutun näköisiä ja responsiivisia, että voin kutsua itseäni myös front-end koodaajaksi. JavaScriptiä nollasta en osaa kirjoittaa, mutta hyödyntää ja muokata JavaQueryja.

koodaus_2_800

Bootstrap

Olen opetellut käyttämään jonkin verran myös Bootstrap front-end teknologiaa, joka on itsenäinen responsiivisen koodin ja JavaScriptien koodipaketti. Bootstrap on ladattavissa sen omilta sivuilta ja alun perin sen on kehittänyt Twitterin suunnittelija ja kehittäjä vuonna 2010. Bootstrap julkaistiin avoimen lähdekoodin ladattavana koodipakettina ensimmäisen kerran 2011 ja versio 2:stä lähtien se on ollut responsiivinen.

Bootstrap perustuu valmiisiin nimettyihin palstajakoihin ja sitä käytettäessä div-nimet ovat vakioita. Bootstrap vaatii tutustumista sen kooditiedostoihin ja toimintaan, mutta kun hallitsee ne, voi keskittyä vain sivuille tulevien elementtien ulkoasujen koodaamiseen ja kaikki responsiiviset eri levyiset palstat ovat koodissa valmiina.

koodaus_1_800

 

Video HSL:lle venäläisiä matkailijoita varten

Lopuksi esittelen viime kesäkuussa Xtrem Media -osuuskunnan kautta toteutetun videon, jonka käsikirjoitin ja ohjasin. Video on tehty Youtube-videoksi, jossa esitellään HSL:n joukkoliikennettä ja näytetään miten vuorokausilippua voi hyödyntää. Videon on kuvannut, äänittänyt ja editoinut Jarno Paavola.

Vuosi WordPressin kanssa

 

Olen nyt tehnyt reilun vuoden päätyökseni WordPress-sivuja lukuunottamatta muutamaa viikkoa, jolloin olen tehnyt html-sivuja tai taittoa. Teen tässä yhteenvetoa joistakin WordPressin perustavanlaatuisista asioista, jotka ovat selvinneet vuoden aikana. Tähän aluksi haluan mainita, että olen asentanut juuri äsken tämän blogin täysin alusta uuteen tietokantaan ja se tuntuu nykyisin rutiinitoimenpiteeltä.

Aloitin WordPressin itseopiskelun vuosi sitten heinäkuussa. Tietoa löytyy pääasiassa WordPress.orgista ja alan ammattilaisten blogeista. WordPress on open sourcea, eli avointa lähdekoodia käyttävä järjestelmä ja sitä opetellessa täytyy olla kiitollinen kaikista keskustelupalstoilta löytyvistä tiedoista, koska ne ovat usein ainoat ja parhaat mahdollisuudet saada tietoa koodatessa eteen tuleviin pulmiin. Tieto on todella pirstaleista ja ratkaisut perustuvat omaan kokeiluun.

Suurin yllätys ja takaisku WordPressin kanssa tuli eteen noin vuosi sitten: WordPress-sivuja ei voi siirtää kuin html-sivuja, sillä käyttöliittymän puoli menee jumiin. Jumittuminen johtuu WordPress-järjestelmän olemisesta sidottu satelliittiaikaan, jonka se ottaa käyttöönsä WordPressin asennuksessa. Siirrettäessä sivut kansiona osoitteesta toiseen järjestelmän aikakäsitys sekoaa ja käyttöliittymä menee osittain jumiin. Useimmiten kuitenkin WordPress-sivustot devataan eli koodataan ennen julkaisua jossain muualla kuin niiden lopullisessa osoitteessa ja siirtäminen tulee eteen.

wordpress_grunge
Sivuston voi siirtää suhteellisen nopeasti kopioimalla tietokannan ja siirtämällä sivut paloina: asentamalla haluttuun osoitteeseen WordPressin, käyttämällä sivustosta kopioitua tietokantaa ja lataamalla palvelimelle teeman ja pluginit ja käymällä varsinkin pluginit käyttöliittymän puolella läpi. Viime aikoina, kohdattuani viimeisimmän WordPressin päivityksen (3.6) jälkeen suhteellisen paljon erilaisia ongelmia, olen siirtynyt “koulukuntaan”, joka kannattaa useimmissa tapauksissa sivujen asennusta täysin uuteen, freshiin tietokantaan siirrettäessä sivut lopulliseen osoitteeseen.Sivuja devattaessa on tullut useimmiten tehtyä paljon kokeiluja, kokeiltua plugineita, jotka on kuitenkin hylätty pois käytöstä ja tietokanta on usein käynyt läpi jo joitakin WordPressin versiopäivityksiä. Kaikki tämä saattaa olla tietokannan rasitteena. Asentaminen tyhjään tietokantaan teettää hieman enemmän töitä, mutta on uusi tietokanta on varmasti kevyt ja toimiva, eikä siellä ole mitään ylimääräistä rasitetta.

Olen myös huomannut, että mitä enemmän käytössä olevaan teemaan on rakennuttu käyttäjälle käyttöliittymän puolelle mahdollisuuksia ladata kuvia ja tehdä erilaisia päivityksiä normaalien blogitoimintojen lisäksi, sitä hitaammin sivut latautuvat. Parasta on korvata kaikki mahdolliset käyttöliittymän puolelle rakennetut päivitysmahdollisuudet normaalilla koodilla ja pitää käyttöliittymän kautta päivitettävien osioiden käyttö minimissä. Käyttöliittymän puolelta monipuolisiksi rakennetut teemat menevät myös WordPressin versiopäivitysten yhteydessä helpommin jumiin. Olenkin asentanut erilaisin tavoin tämän vuoden aikana WordPress-sivuja yli 20 kertaa alusta ja hommasta on tullut hyvin rutiininomaista. Pitää vain aina ottaa tiedostoista ja tietokannoista turvakopioita itselleen.

 

wordpress-plugins-bg

 

Akismet

WordPressin asennuksen mukana tuleva plugin Akismet kannattaa poistaa heti. Pluginista kerrotaan, että se on miljoonien käyttämä spam-kommenttien estämiseen tarkoitettu plugin, mutta jos erehdyt menemään pluginin sivuille, huomaat, että se on maksullinen, kun useimmat WP-pluginit ovat ilmaisia. Käytyäsi Akismetin sivustolla ostamatta pluginia käyttöön sivustollesi alkaa tulemaan paljon spam-kommentteja ja koko sivuston toiminta hidastuu. Akismet kannattaa siis poistaa ensimmäisenä ja miettiä vaihtoehtoja uudelleen sitten, jos spam-kommentteja alkaa ilmestyä.

CSS

Useissa teemoissa ja niiden muokkausohjeissa kehotetaan tekemään custom_style.css-tiedostoja. En suosittele custom_style.css:n tekemistä, sillä custom_stylea tehtäessä CSS:ää tulee usein hallittavaksi monikertainen ja päällekkäinen määrä. Jos kerran osaa CSS:ää koodata, kannattaa se tehdä suoraan style.css:n tilalle. Siltikin useimmissa teemoissa on sen lisäksi useita lisä-CSS-tiedostoja, joista osa on muokattavissa vain palvelimen puolella eikä käyttöliittymän Editor-osassa, joten muokattavaa CSS:ää riittää. En ole löytynyt mitään järkeä siihen, että useisiin teemoihin on siroteltu vielä käyttöliittymän puolelle erilaisia Custom CSS-bokseja.

blog-html5-css311