< Takaisin blogiin

04/08/2016

Näin me tehdään WordPress nettisivut

Asiakkaamme sivusto on valmis. Täällä kerta kyseessä on Keski-Suomen matkailusivusto joka on suunnattu venäläisille turisteille. Tämän blogipostauksen ajatus on kertoa miten me tehdään nettisivut asiakkaille ja mahdollisesti antaa joitakin vinkkejä mitä voisit hyödyntää omissa nettisivuissa varsinkin jos sinun sisältöhallintajärjestelmä on WordPress.

Ulkoasu

Sivuston design on meidän graafikon käden jälkeä ja tavoitteena oli korostaa sisältöä ja luoda hyvin raikas ja toimiva ulkoasu. Monesti ulkoasu on monelle asiakkaalle tärkein asia nettisivuissa, mutta se on yksi niistä asioista jolla luodaan käyttäjäkokemusta.

Ulkoasu on makuasia, mutta kannattaa muistaa että “rumakin” sivusto voi myös tehdä miljoonia.

Woprdress lisäosat

Asiakkaamme sivusto on toki responssiivinen ja tehty WordPress järjestelmän päälle. WordPress plugareita sivustolla on suhteellisen vähän (ja se on hyvä asia): W3 Total Cache (sivuston latauksen optimointi), Yoast WordPress SEO (hakukoneoptimointi), Easy SMTP Mail, Revolution Slider,Contact Form 7 ja toki monien rakastama Duplicator.

Revolution slider

Revolution Slider on maksullinen (19$) lisäosa WordPressiin jonka avulla voi helposti luoda todella kivoja slidereita jotka toimivat myös mobilissa ja voivat sisältää jopa animaatioita joita perinteisesti tehtin Flash:lla (muistaako kukaan enää kun sliderit tehtiin Flash:lla?).

Ainoa huono puoli Revolution Sliderissa on se että se on jopa liian monipuolinen.

Contact Form 7

Contact Form 7 on hyvin yleinen lisäosa jonka avulla voi toteuttaa hyvinkin monimutkaisia lomakkeita WordPress sivustoille. Sen parhaimpia puolia on ehkä suhteellisen helppo integraatio Google Analytics:in konversioseurannan kanssa.

W3 Total Cache

 

W3 Total Cache lisäosan avulla sivusto latautuu nopeammin sillä sivu generoidaan vain kerran ja lopputulos tallennetaan tavalliseen html tiedostoon. Näin palvelin voi ohittaa tietokannan ja toimittaa sivuston vierailijalle HTML tiedoston suoraan. Vaikutus on todella iso varsinkin jos sivusto on suosittu tai palvelin on ylikuormitettu. W3 Total Cache osaa tehdä paljon muutakin, mutta ottamalla käyttöön ihan perusominaisuuksia nopeusero on huomattava.

Duplicator

Duplicator lisäosan avulla voit helposti tehdä varmuuskopiot sivustostasi hetkessä. Duplicatorin parhaita ominaisuuksia on kuitenkin miten helpoksi se tekee palautusprosessin. Varmuskopioinnin jälkeen sinulla on kaksi tiedostoa: zip tiedosto sekä installer.php tiedosto. Näiden avulla voit minuutissa palauttaa sivustosi tai siirtä sen toiselle palvelimelle – Duplicator hoitaa kaikki ne toimenpiteet mitä ennen tehtiin käsin.

Duplicatorin avulla voit tehdä varmuuskopiot ennen kuin teet merkittäviä muutoksia sivustolle kuten päivität WordPress uuteen versioon.

Yoast WordPress SEO

Tämän lisäosan avulla voidaan parantaa sivuston hakukonenäkyvyyttä ja sen tärkeimpiä ominaisuuksia on mahdollisuus hallita sivuston meta data kuten title, Facebook OpenGraph ja niin edelleen. Tämän lisäksi lisäosa tiedottaa hakukoneita silloin kun sisältö päivitetään ja luo automaattisesti sivuston XML-sivuston kartta.

Yoast WordPress SEO-lisäosan avulla on mahdollista myös hallita mitä tekstiä ja kuvia näytetään kun henkilö jakaa sivuston sosiaalisessa mediassa kuten Facebook:issa. Ehkä kuitenkin tärkein ominaisuus on esikatsella miltä sivusto tulee näyttämään Google:n hakutuloksissa sekä hakukoneoptimoida tiettyä alisivua valittuja avainsanoja varten.

Easy SMTP Mail

Easy SMTP Mail on “tylsä” lisäosa sillä se mahdollistaa sähköpostien lähetyksen käyttäen esimerkiksi Gmail SMTP palvelimia. Tämä on todella iso apu silloin kun esimerkiksi turvallisuussyistä ei ole mahdollista käyttää palvelimen paikallista sähköpostipalvelinta.

.htaccess tiedoston salat

Monet palvelimet tukevat palvelinasetuksien säätämistä .htaccess tiedoston kautta. Näin voimme saada lisää potkua sivuston latausnopeuteen.

Tämän lisäksi .htaccess tidostoon säädetään 301 ohjaus joka automattisesti ohjaa kaikki ilman www:ta tulevat pyynnöt oikeaan domainiin. Näin http://centralfinland.ru/jotakin pyynnöt automaattisesti ohjataan http://www.centralfinland.ru/jotakin osoitteeseen kuten Google ohjeistaa.

Meidän .htaccess tiedoston voit katsoa täältä. Muista olla varovainen ja älä käytä meidän tiedostoa ellet tiedä mitä teet sillä se on helpoin tapa “rikkoa” sivustosi.

Tietoturva asiat kuntoon

Voit välttää suurimman osan tietoturva ongelmista tekemällä seuraavia asioita:

  • Varmista että admin salasanasi on todella hyvä. Salasana “muistaTAMA” ei ole hyvä salasana. Käytä tähän mielummin jotakin generattoria.
  • Pidä WordPress aina ajan tasalla.
  • Älä asenna lisäosia joita et oikeasti tarvitse ja pidä ne myös ajan tasalla.
  • Tee pääsy wp-admin kansioon vaikeammaksi. Näin voit tehdä murtautumisen vaikeammaksi ja hyökkääjä todennäköisesti siirtyy etsimään helpompaa kohdetta.
  • Varmista että sinulla on aina varmuuskopiointiasiat kunnossa. Sivustosi tulisi varmuuskopioda automaattisesti kerran päivässä.

Suomea puhuu suhteellisen pieni määrä ihmisiä maailmassa ja siitä voi olla hyötyäkin. Helpoin tapa rajata pääsy wp-admin kansioon on luoda salasanaesto käyttäen .htaccess/.htpasswd tiedostoa wp-admin kansiossa. Tämä salasana ja tunnus ovat täysin erillään WordPress:sta ja ilman sitä henkilö ei voi tehdä tuhoisia toimintoja sivustolla kovin helposti. Uuden salasanan muistaminen voi olla vaikeaa joten salasana dialogissa voimme suomen kielellä kertoa mitä tulisi laittaa tunnukseksi ja salasanaksi. Näin estetään automaattisia hyökkäyksiä ilman että meidän tulisi muistaa taas yksi salasana lisää.

Lisää informaatiota WordPress tietoturvan parantamisesta löydät täältä.

Kuvat pienemmäksi laadusta tinkimättä

Isoilla kuvilla voidaan pilata hyvinkin optimoitu sivusto. Eikö olisi mahtavaa jos olisi jokin työkalu jonka avulla voisit pakata kuvia niin että tiedostokoko pienenisi, mutta laatu ei kärsisi. Onneksi sellaisia työkaluja on olemassa sekä MacOS:lle että Windows:lle.

Ennen sivuston julkaisua pistämme kaikki kuvat ImageOptim työkalun läpi varmistaaksemme että kaikki kuvat ovat mahdollisimman pienikokoisia nopeaa sivunlatausta varten. Tämän voi tehdähelpommin palvelintasolla, mutta palvelimeen ei aina ole mahdollista vaikuttaa.

Lopputulos kaikkien säätöjen jälkeen on sivusto joka parhaimmillaan latautuu alle sekunnissa.

Sivusto on julki, mutta mitä nyt?

Google Webmaster Tools

Sivuston julkaisun jälkeen XML-sivuston kartta lisättiin automaattisesti Google Webmaster Tools:iin jotta hakukone aina tietäisi kun sisältöä lisätään, päivitetään tai poistetaan. Sivusto on hyvä lisätä Google Webmaster Tools:in aina koska sen avulla voit nähdä todella paljon hyödyllistä tietoa. Sivuston lisäämisen jälkeen Google lähettää sinulle sähköpostin mikäli sivustolla on joitakin kriittisiä ongelmia kuten palvelin virheitä, epäilyksiä tietoturva ongelmista jne.

Google Analytics

Jokaisella sivustolla on oltava Google Analytics sillä se on todennäköisesti maailman paras ilmainen kävijäseurantatyökalu. Siitä voi kirjoittaa kirjoja joten palaamme tähän tulevissa blogipostauksissa vielä moneen otteeseen.

Yandex Metrika ja Yandex Webmaster tools

Koska sivusto on suunattu venäläisille niin siihen on asennettu Yandex Metrika ja Yandex Webmaster tools seuranta. Nämä seurantatyökalut ovat ilmaisia ja Yandexin yhtiön tekemiä. Yandex on Venäjän suosituin hakukone ja kuten Google yhtiö julkaisee lukuisia ilmaisia työkaluja sivuston ylläpitäjille.

Jos sivustosi ei ole suunnattu venäläisille niin älä ohita kuitenkaan Yandex Metrika:a sillä sen avulla voidaan nauhoittaa sivuston käynnit myöhempää analyysiä varten. Työkalu luo interaktiivisia videoita sivuston vierailijoiden käynneistä joissa näkyy mitä he tekivät sivustolla, mitä alisivuja he katsoivat, mitä klikkasivat ja miten paljon he liikuttivat hiirtä jne. Nämä interaktiiviset videot antavat mahdollisuuden analysoida sivuston käytettävyyttä vierailijan näkökulmasta. Yandex Metrika on saatavilla myös englannin kielellä ja on todella helppo ottaa käyttöön.

Loppusanat

Lopputuloksena on helppokäyttöinen sivusto joka toimii myös mobiilissa ja latautuu nopeasti. Meille toki tärkein on se että asiakas on tyytyväinen. Tässä on asiakkaan kommentit projektista:

LumoLink on toiminut Keski-Suomen matkailun kehittämishankkeen, matkailun kv-markkinointikonttorin, kumppanina uuden venäläisiä asiakkaita houkuttelevan verkkosivun rakentamisvaiheessa.

LumoLink on vastannut sivun teknisestä toteutuksesta sekä toimii sivun ylläpidon kumppanina. Yhteistyö LumoLinkin kanssa on sujunut hienosti. Projekti pysyi hyvin asetetussa aikataulussa ja säännölliset videopalaverit takasivat hyvän kommunikaation projektin aikana. Lopputulos vastasi hienosti pyydettyä niin teknisten kuin ulkonäöllisten ominaisuuksiensa puolesta.

Kokemuksen pohjalta voin suositella LumoLinkiä vastaavanlaisiin projekteihin.

– Hanna Äijänen / Matkailun KV-markkinointikonttori / Keski-Suomen kauppakamari

Haluaisitko lisää WordPress vinkkejä? Kerro meille kommenteissa niin voisimme luoda lisää blogipostauksia WordPress:sta.

Oletko hankkimassa yrityksellesi kotisivuja?

Keräsimme tärkeimmät asiat, joita kannattaa ottaa huomioon uusia sivuja hankkiessa. Voit itse peruuttaa uutiskirjeen tilauksen milloin vain.

Tilaa uutiskirjeemme ja saat kotisivu ostajan oppaan ilmaiseksi