Toteuta responsiivinen design WordPressillä

Tällä hetkellä suosituin netin julkaisualusta on WordPress (markkinaosuus uusista sivustoista globaalisti lähes 25%). Sitä hyödynnetään sekä pienissä henkilökohtaisissa sivustoissa, blogeissa että todella suurissa media-alan sivustoissa. Tunnettuihin käyttäjiin kuuluvat esimerkiksi CNN, Harvard Business Review, Justin Timberlake, Rolling Stones ja Wall Street Journal. WordPressin voi ladata ilmaiseksi joko omalla koneella toimivalle tai palveluna ostetulle netissä toimivalle web-alustalle, jossa on käytettävissä PHP-tuki ja MySQL -tietokanta. Itse olen käyttänyt WordPressiä omien sivustojen lisäksi muutaman yrityksen sivustoalustana jo vuosia, joten lienee paikallaan päättä responsiivisen designin juttusarjani yhteenvetoon nimenomaan tämän julkaisualustan käyttäjänä.

WordPress on varsin helppokäyttöinen julkaisualusta, jossa ulkoasu toteutetaan niin sanottuja teemoja käyttäen. Monia yksityiskohtia voi toteuttaa valitun teeman päälle hyödyntäen lukemattomia ilmaisia ja maksullisia lisäosia (eng. plugin). Yhä yleisempää on käyttää toiminnallisesti suhteellisen vaatimatonta perusteemaa ja jättää vaikkapa navigointipalkkien, valokuvien tai videoiden esittäminen sivuilla jonkun sopivan lisäosan varaan.

Valmiit WP-teemat ulkoasun perustana

Helpointa on toteuttaa responsiivinen sivusto käyttäen jotain valmista teemaa, joita on ilmaiseksi ladattavissa suoraan WordPressin hallintasivuilta tuhansia eri käyttötapoja varten. Lisäksi on saatavilla pitkälle erikoistuneita ja monipuolisesti ulkoasultaan muokattavia teemoja moniin tarkoituksiin, esimerkkinä vaikkapa linkki tuoreeseen listaukseen suosituimmista maksullisista valokuvausteemoista. Valokuvien esittämistä varten WordPressin suosituin lisäosa on NextGEN Gallery, jota käytetään arviolta noin 10 miljoonassa sivustossa tai blogissa.

responsiivisia-bisnes-teemoja

Suurin osa vielä tällä hetkellä tarjottavista teemoista on kiinteälevyisiä, mutta esimerkiksi WordPressin mukana tulevat pitkälti räätälöitävät uusimmat teemat ovat responsiivisia. Monissa sivustoissa kiinteän leveyden teema vaihdetaan dynaamisesti kokonaan toiseksi jos sivustoa katsotaan esimerkiksi iPhonella – tämän voi tehdä nykyisin myös WordPressin perustajien ilmaisella Jetpack-lisäosalla.

Ihan oma sivuston design

Jos sivustosta tai vaikkapa vain blogista haluaa tehdä ihan omannäköisensä, ratkaisuna on suunnitella ja toteuttaa teema ja valita siinä hyödynnettävät lisäosat. Tässä juttusarjassa on ollut jo aikaisemmin lyhyet kuvaukset tärkeimpien responsiivisten sivustojen suunnittelun periaatteista: perustana ‘responsive grid’, navigointiratkaisut sekä kuvien ja videoiden hallinta sivustolla. WordPressillä toteutettavassa teemassa pitää olla ainakin perusta, mutta navigoinnin, kuvien ja videoiden käsittelyyn löytyy paljon näppäriä lisäosia eli plugineja. Esimerkiksi videoita voi useista eri lähteistä kuten YouTubesta upottaa responsiiviseen designiin lisäosalla Advanced Responsive Video Embedder, jota olen itse käyttänyt toisen sivustoni esimerkkisivulla.

Kokonaisen laajahkoa sivustoa ja sen eri sivutyyppejä – WordPress-kielellä Page Templates – hyvin palvelevan teeman rakennus koodaten alusta alkaen edellyttää erinomaista PHP- ja CSS-kielien sekä tietysti hiukan HTML-kielenkin hallintaa sekä kokemusta niiden päälle luotujen erityyppisten sivujen täydentämiseen sopivista lisäosista. Useimmat web-sivustojen toteuttajat eivät varmaankaan halua lähteä tälle tielle, vaan etsivät myös mahdollisimman helppokäyttöisiä työkaluja responsiivisten WP-teemojen luomiseen. Onneksi näitä on olemassakin, alla muutama suosituimmista, maksullisista ohjelmistoista:

  • Artisteer: omalle tietokoneelle asennettava ohjelmisto, jolla luodaan osin valmiita mallipohjia käyttäen ensin design ja tämä voidaan julkaista monille eri alustoille kuten WordPressille tai Joomlalle.
  • Template Toaster: omalle koneelle asennettava ohjelma, jossa aluksi valitaan julkaisualusta monista eri vaihtoehdoista ja tämän jälkeen luodaan teema (tai sivupohjat) pääosin hyödyntäen valmiiksi mietittyjä pohjia.
  • ThemeFrame: omalle tietokoneelle asennettava pelkästään WP-teemoihin keskittyvä ohjelma, jolla teemat toteutetaan “alusta asti” pääosin graafisella editorilla, mutta useimmiten myös suhteellisen helposti lisättävillä PHP- tai CSS-kielisillä koodinpätkillä. Lopputuloksena on tehokkaasti toimivia, ‘kevyitä’ ja käyttäjän kyvyistä riippuen hyvin monipuolisia teemoja.

Näiden sivujen ulkoasun samoin kuin muutaman muunkin sivuston teeman olen itse luonut ThemeFrame-ohjelmistoa käyttäen. Kokemusteni perusteella kirjoitin myös lyhyen englanninkielisen askel-askeleelta oppaan responsiivisten teemojen luomiseksi ThemeFramella, sivulla Vesa’s guide to build responsive themes with ThemeFrame on oppaasta vähän enemmän tietoa sekä linkki oppaan lataamiseksi.

Jätä vastaus

Voit käyttää näitä HTML-tägejä:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Kommenttisi tulee näkyviin, kun admin on yhden kommenttisi hyväksynyt.