Wordpress tutuksi päivässä

www.lumolink.com Puh: 0504044299 Email: [email protected]

Wordpress tutuksi päivässä

Artem Daniliants / LumoLink

mailto:[email protected]?subject=

http://www.lumolink.com


Minun tausta• Nörtti

• (Wannabe) sarjayrittäjä

• Jo lukioaikana loin ison internetportaalin

• Olen toiminut LumoLink-nimisessä yrityksessä 3 vuotta

• LumoLink on sähköiseen markkinointiin erikoistunut yritys Oulussa

• LumoLink on toteuttanut lukuisia Wordpress-sivustoja Seuraa minua verkossa:

http://www.lumolink.com

http://slideshare.net/lumolink

https://www.facebook.com/lumolink







http://www.linkedin.com/in/artemdaniliants







http://twitter.com/artemd








Koulutuksen palaute

• Koulutuksen aikana voitte avata palautelomakkeen, jotta voisitte päivän aikana kirjata siihen kommentteja

• Näin varmistetaan, että koulutuksemme ovat tarpeisiinne sopivia jatkossakin

• Koulutuspalaute: http://bit.ly/kpalaute

http://bit.ly/kpalaute


Mistä on pienet nettisivut tehty?


Staattiset tiedostot

Tyylitiedostot

JavaScript-tiedostot

HTML-tiedosto


HTML-tiedosto• HTML (Hypertext Markup Language) on

merkintäkieli, jolla kuvaillaan www-sivujen sisällön rakenne

• Kielen juuret ovat 1990-luvun alkupuolella, kun Tim Berners-Lee kehitti WWW:n

• Olennaista HTML:ssä on sivujen rakenteen kuvaaminen

• HTML:llä ei voi määritellä sivujen ulkoasua täsmällisesti, vaan sillä hahmotellaan rakenne (esim. kappaleiden rajat, otsikot jne.)

• Lue lisää aiheesta

• Mikä on HTML?

• HTML esimerkkien kautta

http://www.heikniemi.fi/svwww-vukk/k9.html

http://www.w3schools.com/html/html_examples.asp


Tyylitiedostot (CSS)• CSS tarkoittaa tyylisivuja, Cascading Style

Sheets

• CSS on tekniikka, jolla määritellään ulkoasu HTML-kielellä kuvatulle rakenteelle

• Yksinkertaistettuna siis HTML kuvailee, mitä sisältö on, ja CSS määrittelee, miten se näytetään

• Käytännössä vuosien saatossa HTML:ään on kertynyt kuitenkin paljon myös ulkoasun määrittelyyn liittyvää ainesta

• Viime vuosina on kuitenkin palattu puhdasoppisempaan sisällön ja ulkoasun erotteluun, ja tämä kehitys näyttää jatkuvan

• Lue lisää aiheesta:

• Mikä on CSS?

• CSS esimerkkien kautta

http://www.heikniemi.fi/svwww-vukk/k13.html

http://www.w3schools.com/css/css_examples.asp


JavaScript• JavaScript on ohjelmointikieli, jota

yleensä käytetään selainskriptien tekemiseen (client-side scripting)

• Ohjelma voi olla hyvin yksinkertainen, esimerkiksi alert('heippa'), joka luo ruudulle ikkunan ja siihen tekstin ”heippa” ja odottaa, että käyttäjä "kuittaa" tämän klikkaamalla ikkunassa olevaa OK-painiketta


• Mikä on JavaScript?

• JavaScript esimerkkien kautta

http://www.cs.tut.fi/~jkorpela/webjulk/3.2.html

http://www.w3schools.com/js/



• Staattisia tiedostoja ovat esimerkiksi kuvat, videot, ikonit jne.

• Staattisia tiedostoja voi ladata ja avata omalla koneella

• Staattiset tiedostot on voivat olla hyvinkin suuria (esim. videot)


Yhteenveto

• HTML vastaa rakenteesta ja sisällöstä

• JavaScript tuo interaktiivisuutta sivustolle

• CSS vastaa siitä, miltä sivuston elementit näyttävät


Staattiset ja dynaamiset sivut


Verkkosivut jaetaan staattisiin ja dynaamisiin sivuihin. Staattinen sivu on tiedosto palvelinkoneella. Se näkyy selaimella aina samanlaisena ja muuttuu vain, jos tiedostoa muokataan palvelimella.Dynaaminen sivu luodaan vasta, kun selain sitä pyytää. Selaimen hakupyyntö käynnistää palvelinkoneella toimintoja, joiden tuloksena syntyy uusi verkkosivu. Tällaisella järjestelyllä on kaksi etua. Ensinnäkin verkkosivun sisältö voi riippua hakuajankohdasta, mikä mahdollistaa esimerkiksi kellonajan näyttämisen sivulla tai tietokantahaut käyttäjän antamien parametrien pohjalta. Toiseksi html-muotoisen tiedon muodostumismekanismi voidaan piilottaa palvelimelle. Selaimessa ei saa selville, miten dynaaminen tieto on muodostunut.


Staattinen sivusto

Palvelin Selain


Tyylitiedostot

JavaScript tiedosto

HTML


Kun kyse on staattisesta sivusta, palvelin toimittaa kaikki tarvittavat tiedostot selaimelle. Selain kasaa kaikki tarvittavat palikat ja näyttää lopputuloksen ruudulla.


Dynaminen sivusto

Palvelin Selain


Tyylitiedostot

JavaScript-tiedosto

HTML

TietokantapalvelinPalvelinohjelma


Mikä on tietokanta?• Tietokannalla tarkoitetaan

kokoelmaa tiettyä kohdetta kuvaavista tiedoista. Tietokanta voi olla yrityksen arkistokaapissa oleva asiakasrekisteri, joka sisältää tiedot yrityksen asiakkaista, heidän tilauksistaan, heille toimitetuista tavaroista ja laskuista.

• Sisällönhallintajärjestelmät käyttävät tietokantoja tallentamaan informaatiota kuten nettisivujen sisällön, käyttäjätiedot, tilastot jne.


• Mikä on tietokanta?

http://fi.wikipedia.org/wiki/Tietokanta


Dynaamisen sivuston kanssa palvelimella ajetaan ohjelma, joka mahdollisesti ottaa yhteyttä tietokantapalvelimeen ja sen avulla lennossa luo HTML-koodin, joka lähetetään selaimelle.!Näin esimerkiksi kaksi henkilöä näkevät eri versiot samasta sivusta. Näin tapahtuu, kun yksi käyttäjä on kirjautunut palveluun sisään ja toinen ei.!Dynaamiset sivut tuovat “älyä” nettisivuille.


Sisällönhallintajärjestelmät


Sisällönhallintajärjestelmä (engl. "content management system" tai "CMS") on yleisnimitys tietojärjestelmälle, joka palvelee koko organisaation sisällönhallintaa sen sijaan, että olisi keskittynyt pelkästään johonkin yksittäiseen osa-alueeseen, kuten verkkopalveluiden hallintaan. Sisällönhallintajärjestelmälle ei täten ole olemassa mitään kovin selkeätä määritelmää vaan toimialasta riippuen sillä saatetaan viitata eri tavoin painottuneeseen tietojärjestelmään.


Mitä sisällöhallintajärjestelmä tekee?

• Data layer (sisällön hallinta)

• Teksti, kuvat, tiedostot, linkit jne.)

• Application layer (ohjelman äly)

• Mitä näytetään ja kenelle?

• Miten sisältöä hallitaan?

• Presentation layer (ulkoasu)

• Miltä sisältö näyttää, kun se näytetään vierailijoille?


Miksi ihmiset käyttävät CMS:ää?

• Sisältöä voi helposti päivittää itse

• Ei tarvitse maksa sivuston toteuttajalle sivuston päivityksestä

• Sisällönpäivityksen voi tehdä nopeasti

• Sivustoa voi tarvittaessa laajentaa/parantaa/päivittää myöhemmin ilman sisällön menettämistä


Linsessi/Käyttöehdot• Sisältöhallintajärjestelmä on

ohjelmisto, ja kuten muillakin ohjelmistoilla, sillä on lisenssi

• Lisensissä kerrotaan, kuka omistaa ohjelmiston, miten sitä saa käyttää ja millä ehdoilla.

• Lisenssissä kerrotaan myös siitä, kuka kantaa vastuun ohjelmiston toiminnasta

• Lisenssi on valitettavasti monelle yritykselle viimeinen asia, mitä he miettivät, kun tilaavat uuden sivuston, ja monesti se voi kostautua myöhemmin


Avoimen lähdekoodin ratkaisut verrattuna suljetun koodin ratkaisuihin

• Avoimen lähdekoodin ratkaisu

• Voi muokata ohjelmistoa itse

• Ohjelmiston tekijä ei kanna vastuuta ohjelmistosta

• Ohjelmisto on helposti laajennettavissa valmiilla “lisäpalikoilla”, joista monet ovat ilmaisia

• Ohjelmiston tekijä harvoin tarjoaa asiakastukea

• Ohjelmistokehitykseen osallistuu suuri määrä ihmisiä ympäri maailman

• Sisältö on suhteellisen helppo siirtää toisiin järjestelmiin

• Usein avoimen lähdekoodin ratkaisut ovat turvallisempia

• Monesti kustannustehokkaampi

• Suljettun koodin ratkaisu

• Harvoin voidaan muokata ohjelmistoa itse

• Ohjelmiston tekijä monesti kantaa vastuuta ohjelmiston toimivuudesta

• Laajenettavuusmahdollisuudet ovat paljon suppeampia ja harvoin ilmaisia

• Ohjelmiston tekijä monesti tarjoaa maksullisen asiakastuen

• Ohjelmistokehitykseen osallistuu monesti vain yksi ohjelmistotalo

• Sisältöä on hankala siirtää muihin järjestelmiin

• Tietoturva mahdollisesti heikompi, koska ohjelmiston koodia näkee hyvin harva

• Hinnoittelusta päättää ohjelmiston tekijä

http://en.wikipedia.org/wiki/Open-source_software_security


Miten yrityksen kannattaa hyödyntää avoimen lähdekoodin ratkaisuja?

Yritys voi tilata ohjelmiston (esimerkiksi CMS:n) toisesta yrityksestä, joka on erikoistunut avoimen lähdekoodin ratkaisuhin. Näin yritys voi saada sekä avoimen lähdekoodin edut että asiakastuen ja tahon, joka vastaa ohjelmiston toimivuudesta.!Avoimen lähdekoodin ratkaisut mahdollistavat sen, että yritys voi vaihtaa palvelun toimittajan toiseen ja viedä oman ohjelmistonsa mukanaan. Tämän takia monet yliopistot ja julkishallinnot ovat siirtymässä avoimen lähdekoodin ratkaisuihin.!Suljetuilla ratkaisuilla on ehdottomasti oma paikkansa tässä maailmassa, ja jokaiseen ongelmaan on haettava oikea ratkaisu. Avoimen lähdekoodin ratkaisut perustuvat siihen, ettei pyörää tarvitse keksiä aina uudestaan. Kuitenkin on hyvä tiedostaa eri ratkaisujen erot ja niiden pitkäaikaiset vaikutukset.!Lue lisää aiheesta

http://en.wikipedia.org/wiki/Open_source


Mikä on Wordpress?


Wordpress lyhyesti

WordPress (lyhennettynä WP) on alunperin blogien luomiseen ja ylläpitoon tarkoitettu, avoimeen lähdekoodiin perustuva sisällönhallintaohjelmisto. WordPress on kirjoitettu PHP-kielellä ja se käyttää tietojen tallentamiseen MySQL-tietokantaa, joka tulee asentaa palvelimelle.


Wordpress on melko suosittu

• Maailmassa on yli 72 miljoonaa sivustoa

• 27 850 lisäosaa

• 2110 teemaa


• Wordpress infographic

• Wordpress tilastot

http://yoast.com/wordpress-stats/

http://en.wordpress.com/stats/


Wordpress käyttää GPL-lisenssiä

• Vapaa levitysoikeus. Lisenssi ei saa estää ketään myymästä tai muuten levittämästä ohjelmaa osana yhdistettyä ohjelmistoa. Lisenssissä ei saa määrätä ohjelmiston myymisen ehdoksi tällaisessa tapauksessa rojaltia tai muuta maksua.

• Lähdekoodi. Ohjelman täytyy sisältää lähdekoodi, ja ohjelman levityksen täytyy olla sallittua sekä lähdekoodina että käännetyssä muodossa.

• Johdannaiset teokset. Lisenssin on sallittava muutosten tekeminen ja johdannaisten teosten luominen. Näitä on saatava levittää samoilla ehdoilla kuin alkuperäistä ohjelmaa.

• Lisenssi asettaa vaatimuksen, että kokonaisuus pitää vastavuoroisesti lisensioida samoin ehdoin kuin sen yksittäinen komponentti.


• GPL v2 lisenssin suomennos

• Avoimen lähdekoodin lisenssit lyhyesti

http://www.turre.com/licenses/gpl-2.0_fi.html

http://www.jarisotka.fi/node/60


Wordpress.com-palvelu• Kaupallinen web-palvelu

Wordpressin tekijöiltä

• Saat Wordpress-sivuston pystyyn muutamassa minuutissa

• Palvelu on ilmainen, mutta jotkut ominaisuudet ovat maksullisia

• Sivuston muokkausmahdollisuudet ovat paljon rajoitetumpia verrattuna Wordpressiin, joka ajetaan omalla palvelimella

• Siirtyminen wordpress.com-palvelusta omaan palvelimeen on tehty hyvin helpoksi

http://wordpress.com


Wordpress-asennus


Wordpress-asennus paikallisesti

• Palvelinvaatimukset

• MySQL- tai MariaDB-tietokanta

• HTTP-palvelin (esim. Apache)

• PHP-ohjelmointikielen tulkki

• Voit halutessasi käyttää Wordpressiä myös paikallisesti käyttäen tavallista työpöytäkonetta seuraavilla ilmaisilla ohjelmilla

• MAMP (MacOS) (Video-ohjeet)

• WAMP (Windows) (Video-ohjeet)

• LAMP (Linux)

• Jos käytät Wordpressiä paikallisesti omalla koneellasi, sinun tulee siirtää se oikealle palvelimelle, jos haluat, että muut ihmiset näkevät sen

• Suomenkielisen Wordpressin lataat täältä: http://fi.wordpress.org/

http://www.mysql.com/

https://mariadb.org/en/

http://httpd.apache.org/

http://www.php.net/

http://www.mamp.info/en/mamp/index.html

http://www.youtube.com/watch?v=nz6X-MT4xKU

http://www.wampserver.com/en/

http://www.youtube.com/watch?v=MHMV6tUuadA

http://en.wikipedia.org/wiki/LAMP_(software_bundle)

http://codex.wordpress.org/Moving_WordPress

http://fi.wordpress.org/


Wordpress perustoiminnot


Blogin pitäminen• Blogin pitäminen on

Wordpressin avulla hyvin yksinkertaista

• Pääset luomaan ja muokkaamaan blogiartikkeleita “Artikkelit”-kohdasta

• Artikkeleilla on eri tyyppejä (esim. Normaali, galleria jne.) Teema vastaa siitä, miten eri artikkelityyppejä näytetään.


Artikkelikuva

• Monet teemat käyttävät hyväksi artikkelikuvia esimerkiksi artikkelilistauksessa

• Artikkelikuva automattisesti muutetaan teemaan sopivan kokoiseksi


Avainsanat• Avainsanat on hyvä tapa

luokitella artikkeleita

• Vierailijat voivat sitten helposti löytää muuta samaan asiaan liittyvää sisältöä

• Tälle esitykselle sopivat avainsanat olisivat wordpress, asennus, esitys, koulutus, lisäosat


Ulkoasu• Ulkoasun pystyy muuttamaan

Wordpressissä helposti, mutta ulkoasun rakentaminen on hyvin vaativaa

• Valmiita ulkoasuja voi ostaa muutamalla kympillä esimerkiksi ThemeForest palvelusta

• Wordpressiä varten on myös tehty satoja ilmaisia teemoja, joita voi ladata admin “Ulkoasu” -> “Teemat” -näkymästä

• Teemoja voi vaihtaa ilman sisällön menettämistä

http://themeforest.net/?ref=Artem33


Valikko

• Teema määrittelee paikan valikolle.

• Teemassa voi olla useampia paikkoja valikolle

• Valikko muokataan ”Ulkoasu” → ”Valikko” näkymän kautta


Vimpaimet (Widgets)• Vimpaimet ovat pieniä

komponentteja, joita voi lisätä tai poistaa teeman määrättyihin alueisiin

• Vimpaimiin pääsee “Ulkoasu” -> “Vimpaimet” -kohdasta

• Asentamalla JetPack lisäosan saat lisää kontrollia siihen, missä tilanteessa tietty vimpain näkyy

http://wordpress.org/plugins/jetpack/


Sisällön näkyvyyden hallinta

• Julkinen sisältö on näkyvillä kaikille

• Salasanasuojattu sisältö vaatii oikean salasanan ennen kuin sitä voidaan nähdä

• Yksityiseksi merkattu sisältö näkyy vain kirjautuneille käyttäjille, joilla on siihen oikeus


Mediakirjasto• Ladatut tiedostot, kuvat

ja videot löytyvät mediakirjastosta

• Mediakirjaston avulla voit ladata sivustoon uusia tiedostoja ja hallita olemassaolevia tiedostoja

• Mediakirjasto löytyy “Media” -> “Mediakirjasto” -kohdasta


Artikkeleiden ja sivujen ajastaminen

• Voit valita milloin sisältö julkaistaan “Julkaise”-kohdasta

• Tämä on todella hyvä tapa esimerkiksi luoda monta artikkelia kerralla ja ajastaa niitä. Näin se luo vaikutelman, että sivustoa päivitetään jatkuvasti


Sisällön versiohallinta• Wordpress pitää

automaattisesti vanhat versiot sisällöstä (artikkelit, sivut)

• Selaamalla versioita voit palauttaa vanhan version tai nähdä, mitä muutoksia sisältöön on tehty

• Tämä on todella hyvä ominaisuus, jos sivustoa ylläpitää useampi kuin yksi henkilö


Käyttäjät• Wordpress-sivustoa voi ylläpitää useampi

kuin yksi henkilö, ja jokaisella voi olla oma tunnus/salasana sivustoon

• Pääset lisäämään/muokkaamaan käyttäjiä adminnäkymästä “Käyttäjät”-kohdasta

• Kun luot käyttäjän, voit valita sille sopivan roolin

• Tilaaja voi vain lukea sisältöä

• Avustaja voi muokata sisältöä sivustoon

• Kirjoittaja voi luoda myös uutta sisältöä

• Päätoimittaja voi muokata, poistaa ja luoda sisältöä

• Pääkäyttäjällä ei ole mitään rajoituksia (voi asentaa lisäosia jne.)


Lisäosat• Lisäosat on Wordpressin tapa

tuoda uusia ominaisuuksia sivustoon

• Lisäosat on kasa tiedostoja, jotka tuovat jotain uutta toiminnallisuutta joko adminpaneliin tai sivuston vierailijoille

• Lisäosat suurelta osin ovat ilmaisia

• Lisäosien asentaminen tapahtuu adminpaneelista “Lisäosat” -> “Lisää uusi”


Mobiilisovellukset• Wordpress mobiilisovelluksien avulla

voit helposti ylläpitää sivustoasi tabletista tai älypuhelimesta

• Android

• iOS

• WindowsPhone

• BlackBerry

• Toiminnot ovat rajalliset ja rajoittuvat sisällön päivittämiseen ja tilastojen katsomiseen

• Kuvien lataus sivustoon on todella näppärä toiminto

http://en.support.wordpress.com/apps/


Wordpressin säätäminen


Sivuston otsikko ja kuvaus• Sivuston otsikko ja

kuvaus vaikuttavat erittäin paljon hakukonenäkyvyteen

• Kuvausteksti näkyy jokaisessa otsikossa (oikea osa otsikkoa). Vasen osa on sivun oma otsikko.

• Sivuston otsikko on vasen osa etusivun otsikkoa


Hakukoneystävälliset URL-osoitteet

• Oletuksena Wordpress ei käytä hakukoneystävällisiä URL-osoitteita

• Esimerkki: http://www.sivusto.fi/?p=123

• Adminnäkymästä voit säätää hakukoneystävälliset URL-osoitteet kohdasta “Asetukset” -> “Osoiterakenne”

• Suositeltu osoiterakenne blogipostauksille on

• /blog/%category%/%postname%/

• Näin blogipostaussivut saavat tällaiset URL-osoitteet: http://www.sivusto.fi/blog/kategoria/otsikko/

http://www.sivusto.fi/?p=123

http://www.sivusto.fi/blog/kategoria/otsikko/


Tuo sisältö muista palveluista

• Kohdasta “Työkalut” -> “Tuo” voit tuoda sivustoon sisältöä toisesta Wordpress-sivustosta, wordpress.com-palvelusta tai monesta muusta lähteestä

• Voit viedä oman sisällön helposti “Työkalut” -> “Vie” –kohdasta, jolloin voit tuoda sitä toiseen järjestelmään, joka tukee Wordpress export -tiedostoja

http://wordpress.com


Kuvien optimointi hakukoneita varten

• Lisätessä kuvia sisältöön on todella tärkeää, että kuvalla on hyvä vaihtoehtoinen teksti

• Hakukoneet näkevät vaihtoehtoisen tekstin, jonka pitäisi kuvata lyhyesti kuvaa

• Vaihtoehtoisessa tekstissä on hyvä mainita avainsanoja, jolla ihmiset voivat löytää sivustosi (älä laita avainsanoja, jotka eivät liity kuvaan)

• Vaihtoehtoinen teksti näkyy vierailijalle, jos hän vie hiiren kuvan päälle ja pitää sen siinä


Yhteydenottolomake hetkessä (Contact Form 7)• Contact Form 7 -lisäosan

avulla voit helposti luoda palaute- ja yhteydenottolomakkeita

• Asennuksen jälkeen voit luoda lomakkeen adminnäkymästä Yhteydenotto-valikosta

• Kun olet luonut lomakkeen, sinun tulee kopioida sen koodi (muotoa [contact-form-7 id=…) sivulle tai artikkeliin johon haluat lomakkeen ilmestyvän

http://wordpress.org/plugins/contact-form-7/


Parempi näkyvyys sivustolle (WordPress SEO by Yoast)• WordPress SEO by Yoast -lisäosan

avulla voit parantaa omia mahdollisuuksiasi saada enemmän hakukonenäkyvyyttä

• Jokaista sivua voit erikseen optimoida luomalla hyvän otsikon ja kuvaustekstin

• Samalla näet esikatselun siitä, miltä tämä sivu näyttäisi hakukonetuloksissa

• Voit myös hallita otsikkoa ja kuvaustekstiä sekä kuvaa, jotka näkyvät, kun ihmiset jakavat sivun linkin Facebookissa

http://wordpress.org/plugins/wordpress-seo/


XML-sivustokartta hakukoneille (Google Sitemap Generator)

• Google Sitemap Generator -lisäosalla saat luotua helposti XML-sivustokartan hakukoneille

• Asennuksen jälkeen löydät asetukset “Asetukset” -> “XML sitemap” -kohdasta

• Asennuksen jälkeen muista luoda sivuston kartta manuaalisesti (paina “Click here to build it the first time”). Tämän jälkeen se päivitetään automaattisesti.

• XML-sivustokartan avulla varmistat, että hakukoneet löytävät kaikki sivustosi alisivut ja samalla, että uudet sivut päätyvät hakukoneindeksiin mahdollisimman nopeasti

http://wordpress.org/plugins/google-sitemap-generator/


Monikielinen sivusto (WPML)

• WPML -maksullisella lisäosalla (79$) saat sivustosi monikieliseksi

• Säätö kuitenkin vaatii koodinmuokkausta sekä teemanmuokkausta

• Asennuksen ja säädön jälkeen voit ylläpitää montaa versiota sivustostasi vaivatta

http://wpml.org/


“Julkaise tämä”-työkalu• Kohdasta “Työkalut” voit viedä

“Julkaise tämä”-näppäimen omaan suosikkityökaluusi

• Käytä Julkaise tämä -sovelluskirjanmerkkiä leikataksesi tekstiä, kuvia ja videoita miltä tahansa sivulta. Voit sen jälkeen muokata tai lisätä sisältöä sekä tallentaa tai julkaista artikkelin sivustollasi.

• Tämä on hyvä tapa tehdä luonnoksia tulevista artikkeleista, kun selaat nettiä ja löydät jotain mielenkiintoista


Disqus comment system• Disqus-lisäosan avulla

voit helposti lisätä kommentointimahdollisuuden sivustolle

• Disqus on paljon tehokkaampi kommentointijärjestelmä, se suojaa sinua spämmiltä ja mahdollistaa kommentoinnin ilman erillistä kirjautumista/rekiströintiä

http://wordpress.org/plugins/disqus-comment-system/


Taulukkojen lisääminen sisältöön (TablePress)

• Wordpress ei oletuksena tue taulukoita sisällössä (artikkelit, sivut)

• TablePress tuo mahdollisuuden helposti luoda taulukkoja Wordpress-sivustolle

http://wordpress.org/plugins/tablepress/


Aiheeseen liittyviä artikkeleita

• YARPP-lisäosan avulla voit näyttää artikkelin lopussa muita aiheeseen liittyviä artikkeleita automaattisesti

• Tämä on hyvä vieraille ja hakukoneille

http://wordpress.org/plugins/yet-another-related-posts-plugin/


Sivuston latausnopeus

• Nopea sivusto pärjää paremmin hakukoneissa

• Käyttäjät arvostavat nopeasti toimivaa sivustoa ja käyttävät sellaista sivustoa enemmän

• Verkkokaupoissa nopea lataus vaikuttaa suoraan myyntiin

• Älypuhelimissa sivun lataus on erittäin tärkeä

http://moz.com/blog/how-website-speed-actually-impacts-search-ranking

http://blog.kissmetrics.com/loading-time/


Miten saan sivuni nopeaksi? (Välimuisti)

• Asenna W3 Total Cache lisäosa

• W3 Total Cache säätä sivuston toimimaan nopeammin

• Lisäosan tärkein ominaisuus on välimuisti, johon se laittaa kutsuja, joten jos sama kutsu tulee, niin se toimitetaan välimuistista. Näin säästyy aikaa.

• Ainoa negatiivinen puoli on se, että sivusto päivittyy mahdollisesti viiveellä, koska välimuisti menee vanhaksi

• Välimuistin voi tyhjentää itse milloin vain. Näin vierailijat näkevät heti uuden sisällön.

• Lisäosan lisäyksen jälkeen tulee uusi valikko menuun: Performance. Kaikki säädöt tehdään sieltä.

http://wordpress.org/plugins/w3-total-cache/


W3 Total Cache säätäminen

Laita ainakin seuraavat ominaisuudet päälle (Enable pitäisi olla valittuna)


Välimuistin tyhjennys

• Voit milloin tahansa tyhjentää välimuistin itse adminnäkymästä ylhäällä olevasta Performance-menusta

• Tyhjennä välimuisti, jos olet asentanut uusia lisäosia tai tehnyt isoja muutoksia sivustoon (teeman muokkaus jne.)


Miten saan sivuni nopeaksi? (Hajautettu sisällönjakelu)• Hajautettu sisällönjakelu (CDN)

monistaa sivustosi ladattavat osiot monelle palvelimelle eri maihin

• Vierailijalle sitten tarjotaan lennossa sivuston osat lähemmältä palvelimelta

• Tämä nopeuttaa sivuston toimivuutta ja erittäin hyödyllinen varsinkin, jos sivustolla on tarkoitus palvella vierailijoita monesta eri maasta

• MaxCDN tarjoaa tätä palvelua alkean 6€/kk

http://www.maxcdn.com/products/edgecaching/


W3 Total Cachen säätäminen (MaxCDN)

• Kun sinulla on MaxCDN-tunnukset, voit ottaa CDN-toiminnallisuudet helposti W3 Total Cache -lisänosan avulla

• Säädä tarvittavat arvot W3 Total Cache CDN -osasta (noudata ohjeita)

• Lopuksi paina Test MaxCDN varmistaksesi, että kaikki meni oikein


Miten saan sivustoni nopeaksi? (CloudFlare)

• CloudFlare on “älykäs” CDN, joka nopeuttaa sivun toimivuutta ja samalla estää murtoyrityksiä

• Palvelussa on ilmainen sekä maksullinen taso

• Palvelun käyttöönotto vaatii nimipalvelimen muutoksia (ole varovainen)

https://www.cloudflare.com


Testa sivustosi latausnopeus

• Voit testata, miten sivustosi latautuu eri maista WebPageTest-palvelun avulla

• Google PageSpeed Insights -palvelun avulla taas näet, mitä muutoksia on tehtävä sivustoon, jotta latausnopeusluvut saa pienemmäksi

http://www.webpagetest.org/

http://developers.google.com/speed/pagespeed/insights/


Kuvien optimointi• Teeman kuvat olisi

todella hyvä optimoida saadaksesi sivuston latausnopeus alas

• ImageOptim (MacOS) ja FileOptimizer (Windows) osaavat pakata kuvia siten, ettei laatu kärsi mutta tiedoston koko pienenee

http://imageoptim.com/

http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer


Omien objektien luominen

Oletuksena Wordpressissä on kahdentyyppisiä tietokantaobjekteja - artikkeleita ja sivuja. On mahdollista kuitenkin luoda omia objekteja esimerkiksi tuotteita varten. Näin sen sijaan, että luodaan sivu jokaista tuotetta varten, voimme luoda oman objektin nimeltä tuote, jossa on ylimääräisiä attribuutteja, kuten valmistusvuosi jne.!Teemassa voidaan hyödyntää niitä uusia objekteja, ja niiden ylläpitäminen tapahtuu adminpaneelissa. Tämän ominaisuuden hyödyntäminen vaatit koodausta, mutta se on erittäin hyödyllinen ominaisuus.

http://codex.wordpress.org/Post_Types


Varmuuskopiointi tehty helpoksi (Online Backup for Wordpress)• Online Backup for Wordpress -

lisäosan avulla voit luoda varmuuskopiot koko sivustostasi hetkessä

• Asennuksen jälkeen voit tehdä varmuuskopiot “Online backup” -> “Backup” -kohdasta

• Lisäosa luo zip-paketin, jossa on kaikki tarvittava palautusta varten

• On todella tärkeää vamuuskopioida sivusto ennen kuin siihen tehdään isoja muutoksia, kuten esimerkiksi päivitetään monta lisäosaa ja itse Wordpress

http://wordpress.org/plugins/wponlinebackup/


Oma verkkokauppa Wordpressiin (WooCommerce)• WooCommerce-

lisäosalla saat yksinkertaisen verkkokaupan pystyyn Wordpressin päälle

• WooCommerce- maksullisella lisäosalla (79$) voit hyväksyä luottokortti- ja suomalaisia verkkopankkimaksuja

http://www.woothemes.com/woocommerce/

http://www.woothemes.com/products/suomen-verkkomaksut-gateway/


Päivitykset• Wordpress ja lisäosat on aina

pidättävä ajantasalla

• Päivitykset parantavat sivuston toimivuutta, korjaavat mahdollisia tietoturva-aukkoja ja tuovat uusia toiminnallisuuksia

• Voit päivittää sivustosi itse “Ohjausnäkymä” -> “Päivitykset” -kohdasta

• MUISTA AINA VARMUUSKOPIOIDA SIVUSTOSI ENNEN PÄIVITYKSIÄ!!!


Lue lisää Wordpressistä

• Wordpress - ilmainen opas (Englanniksi)

• Wordpress-opetusvideot (Suomeksi)

http://easywpguide.com/thank-you/?downloadguide=true

http://wpopas.fi/videot/


Artem Daniliants (CEO) !!!+358 40 50 40 44 299 [email protected]

Internetmarkkinoinnin yhteistyökumppanisi!


Image credits• http://www.iconarchive.com/show/adobe-

cs4-icons-by-deleket/File-Adobe-Dreamweaver-HTML-01-icon.html

• http://www.flickr.com/photos/bdesham

• http://mimamatieneunblog.com/programacion-ninos-aprender

• http://www.codeobsessed.com/css.html

• http://www.codeobsessed.com/javascript.html

• http://www.makeuseof.com/tag/2-tools-change-remove-file-type-associations-windows/

• http://www.flickr.com/photos/bobjagendorf

• http://kristiankim.com/portfolio/718-motoring/

• http://capturefour.co.uk/portfolio/europe-remove/

• http://en.wikipedia.org/wiki/Archive

• http://www.sxc.hu/photo/805571

• http://www.inqbation.com/how-a-cms-works/

• http://www.sblaw.org/lawyer-cat

• http://blog.awardspace.com/14-funny-wordpress-logos/

• http://www.sxc.hu/photo/1370392

• http://firewireblog.com/2012/05/18/

• http://en.wikipedia.org/wiki/Soldering

• http://atlantawebdesign365.com/page/3/

http://www.iconarchive.com/show/adobe-cs4-icons-by-deleket/File-Adobe-Dreamweaver-HTML-01-icon.html

http://www.flickr.com/photos/bdesham

http://mimamatieneunblog.com/programacion-ninos-aprender

http://www.codeobsessed.com/css.html

http://www.codeobsessed.com/javascript.html

http://www.makeuseof.com/tag/2-tools-change-remove-file-type-associations-windows/

http://www.flickr.com/photos/bobjagendorf

http://kristiankim.com/portfolio/718-motoring/

http://capturefour.co.uk/portfolio/europe-remove/

http://en.wikipedia.org/wiki/Archive

http://www.sxc.hu/photo/805571

http://www.inqbation.com/how-a-cms-works/

http://www.sblaw.org/lawyer-cat

http://blog.awardspace.com/14-funny-wordpress-logos/

http://www.sxc.hu/photo/1370392

http://firewireblog.com/2012/05/18/

http://en.wikipedia.org/wiki/Soldering

http://atlantawebdesign365.com/page/3/

Wordpress tutuksi päivässä

Technology

Transcript of Wordpress tutuksi päivässä