Kategoriat
WordPress

Live Wire WordPress-teema julkaistiin

Live Wire WordPress-teema on nyt virallisesti julkaistu.

Live Wire WordPress-teemaa tehtiin hitaasti mutta varmasti ja vihdoinkin se on valmis. Teeman roolimalleina ovat My Life ja Prototype. Perinteiseen Oscar-gaala malliin haluan kiittää Justin Tadlock:ia ja Theme Hybrid yhteisöä. Suurimman osan WP:n saloista olen oppinut heiltä. Teema on rakennettu fantastisen Hybrid Coren päälle.

Mukautuva ulkoasu

Live Wire on rakennettu ’Mobile first’ -asenteella, joten kaikki päätelaitteet saavat aluksi yhden sarakkeen ulkoasun. Tietyillä näytön resoluutiolla (768px) ulkoasu muuttuu kahdeksi sarakkeeksi käyttämällä media queries -tekniikkaa. Muut ’raja-arvot’ ovat 1024px, 1224px ja 1524px. Juu, kyllä olen tietoinen, että raja-arvot tulisi määrittää em-yksikkönä. Muuten teema käyttää em-yksikköjä. Paitsi yhden pikselin reunoviivoissa, koska en halunnut, että reunaviivan voi määrittää alle yhden pikselin leveydeksi vaihtamalla fontin kokoa alle 100 prosenttiseksi (16px).

Aloitin teeman ulkoasun suunnittelun käyttämällä valmiita CSS gridejä, kuten 1140px CSS Grid. Mutta jossain vaiheessa huomasin, että valmiit ratkaisut enemmänkin rajoittivat teeman suunnittelua kuin auttoivat. Lisäksi selaimet laskevat ja pyöristävät prosentuaalisia leveyksiä eri tavoilla, joten päätin tehdä oman mahdollisimman yksinkertaisen pohjagridin käyttämämällä vain kokonaislukuja.

Navigointi

Mukautuvan ulkoasun yksi suurimmista haasteista on mukautuvan navigaation toteuttaminen. Päätin valita Tiny Nav:in omaksi ratkaisuksi, vaikka huonot puolensa on tässäkin. Halusin käyttää mobiililaitteilla pystysuunnassa mahdollisimman vähän tilaa ja vaakakupissa painoi myös kotimaisuus: kiitos Tiny Nav:stä kuuluu siis Viljami Salmiselle. Aika näyttää tottuvatko käyttäjät pudotusvalikon käyttöön myös menuissa. Seuraavassa teemassa saatan kokeilla jotain muuta ratkaisua.

Vanhemmat selaimet ja tuki niille

Teemaa on testattu kaikilla yleisimmillä selaimilla ja mobiililaitteista ainakin iPhone4:lla, Samsung S II:lla, Nokia Lumia 800:lla ja iPad II:lla. Suurimmat ongelmat luonnollisesti aiheuttavat IE7 ja IE8 selaimet. IE6:sta en enää edes mieti. Koska teema käyttää paljon mediakyselyitä ulkoasun mukautumiseen, niin kokeilin ensin Googlen css3-mediaqueries.js scriptiä, jotta myös IE7 ja IE8 ymmärtäisivät mediakyselyt. Kyseiset selaimet lukivat scriptiä kuitenkin todella hitaasti ja vaihdoin Respond.js scriptiin. Nopeuseroa on ole mitannut, mutta ero on silminnähtävä.

Tavoitteet

Tällä teemalla on kolme tavoitetta. Ensimmäiseksi olen opiskellut työn ohessa verkkoviestinnän ammattitutkintoa ja Live Wire on samalla tutkinnon lopputyö. Mainittakoon, että olen siviiliammatiltani opettaja ja siltä pohjalla on varaa sanoa, että Suomessa on käsittämättömän hyvä koulutusjärjestelmä.

Toisekseen lähetin teeman juuri wordpress.org teemahakemistoon, joten tavoitteena on saada teema sinne ladattavaksi. Kolmas ja ehken tärkein tavoite on saada teema themehybridin sivulle. Tämän jälkeen voi sanoa osaavansa jotakin WordPress-teeman rakentamisesta. Katsotaan miten käy.

Live Wire WordPress-teema olkaa hyvät.

Kirjoittanut Sami Keijonen

Opettaja, joka haluaa oppia webin ja WordPressin salat

2 vastausta aiheeseen “Live Wire WordPress-teema julkaistiin”

Great theme! I chose this over paid ones available on Themeforest.

Responsive, readable font size, clear typography, post formats… yours was the only design that fit all of my requirements.

One thing I wish you’d add is unlimited sidebars… the ability to create sidebars and assign them to specific pages… so, for example, the blog homepage might have one set of sidebars, a specific post might have sidebars related to just that post, etc.

Thanks!

Thanks!

You can assign spesific widgets to spesific pages with plugins like Widget Logic or Widget Context. I use them all the time. I might consider spesific sidebar for home page but other than that it’s more plugin territory.

Kommentit on suljettu.