Kategoriat
WordPress

Uusi WordPress teema: Eino

Tälle WordPress teemalle oli pakko antaa lempinimeksi Franter – puoliksi Frankenstein, puoliksi Monsteri. Se pitää sisällään oikeastaan kaiken mitä tällä hetkellä tiedän teemojen tekemisestä ja on ehken liiankin monipuolinen. Jatkossa tullen keskittymään tiettyyn temantiikkaan enemmän.

Eino

WordPress teema Eino tukee seuraavia lisäosia:

Teema on ilmainen ja sen voi ladata täältä.

Kategoriat
WordPress

Kaksi uutta WordPress-teemaa

Julkaisin kaksi uutta teemaa. Toinen on business ja portfolio -teema nimeltään Hopeareunus.

Hopeareunus

Teemassa on suuri header-kuva ja Font Awesome ikonit antavat sopivan lisämausteen. Tarkempi kuvaus löytyy Foxnet Themes -sivuston blogista.

Hopeareunuksen sisar on Kultalusikka. Vaikka se on luotu Easy Digital Download -lisäosaa varten, niin melkein enemmän pidän tämän teeman blogiominaisuuksista. Tarkempi kuvaus löytyy Foxnet Themes -sivuston blogista.

Kultalusikka

Kategoriat
WordPress

Live Wire WordPress-teema julkaistiin

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.

Kategoriat
WordPress

Live Wire WordPress-teema

Foxnet on suunnitellut ja tehnyt kaikessa hiljaisuudessa WordPress teemaa nimeltään Live Wire, jonka moottorina toimii Hybrid Core. Teema on suunniteltu ’mobile first’ -periaatteella, mutta ennemminkin käyttäisin sanoja luettavuus säilyy myös mobiililaitteilla. Aikaisemmin kyselin mitä muut toivoisivat WP:ltä vuoden aikana ja vaikka vastauksia ei tullut montaa, niin toteutan ainakin oman toiveeni: Foxnet julkaisee vuoden 2012 aikana WordPress teemoja, jotka ovat riittävän hyvin tehtyjä, jotta ne kelpaavat julkaistavaksi sivuille wordpress.org/themes ja themehybrid/themes. Live Wire on ensimmäinen julkaistava teema, johon olen käyttänyt lähes kaiken tietotaitoni WordPress-teeman anatomiasta ja Hybrid Coresta.

Beta versio Live Wirestä on nyt valmis ja jos joku haluaa testailla sitä omaksi tai minun ilokseni, niin tässä infot.

Ominaisuudet

  • Murupolku
  • Taustan vaihtaminen
  • Artikkelityypit (Post Formats)
  • Sivun/artikkelin ulkoasun vaihtaminen: 1 sarake, kaksi saraketta sisältö oikealla tai vasemmalla
  • Teeman voi kääntää mille kielellä tahansa
  • Artikkelille/sivulle voi tehdä oman tyylitiedoston (Post Stylesheets)
  • Teemassa ei ole turhia asetuksia; ainoastaan alapalkin tekstiä voi vaihtaa teeman asetuksissa
  • Mukautuva ulkoasu: videot, kuvat ja sisältö skaalautuvat näytön resoluution mukaan, joten luettavuus säilyy melkein mille tahansa päätelaitteelle
  • Kolme menuvalikkoa
Kategoriat
Koodivinkit

wp_editor:in käyttö WordPress 3.3 versiossa

WordPressin versiossa 3.3 tuli paljon uudistuksia, joista wp_editor on yksi mielenkiintoisimmista. Se on tarkoitettu lähinnä teemojen ja lisäosien kehittäjille, jotka voivat käyttää WYSIWYG editoria haluamallaan tavalla kuten normaalissa artikkelin/sivun textarea -kentässä. Alla pieni koodiesimerkki, miten wp_editoria voi käyttää esimerkiksi elokuvien näytösaikojen textarea -kenttään, jossa saa käyttää vain lihavointia ja listoja.


 	/* wp_editor settings */
	$foxnet_kino_editor_settings = array(
	'wpautop' => true,
	'media_buttons' => false,
	'tinymce' => array(
		'theme_advanced_buttons1' => 'bold, bullist, numlist , ordered_list, separator, undo, redo',
		'theme_advanced_buttons2' => '',
		'theme_advanced_buttons3' => '',
		'theme_advanced_buttons4' => ''
	),
	'quicktags' => array(
		'buttons' => 'b,ul,ol,li,close'
	)
);

Tinymce -painikkeita voi lisätä neljälle eri riville. Yllä on käytetty vain ylintä riviä, jossa on lihavointi, järjestemätön lista, järjestetty lista, erotin (separator) ja kumoa/toista painikkeet.

WYSIWYG Editori lisätään käyttäen funktiota wp_editor.


<?php wp_editor( $foxnet_kino_showtimes, 'foxnet_kino_showtimes', $foxnet_kino_editor_settings ); ?>

Lopputulos näyttää tältä. Foxnet Kinon lähdekoodissa on nähtävissä koodi kokonaisuudessaan.

Lähteet:

Kategoriat
WordPress

WordPress 3.3. julkaistu

WordPress 3.3 versio julkaistiin 12.12.2011. Kuten aina ennenkin, niin uusimpaan versioon kannattaa päivittää heti kuin mahdollista. Suomenkielinen WP 3.3 löytyy osoitteesta http://fi.wordpress.org. Huom! Omien asiakkaiden WordPressit olen jo päivittänyt uusimpaan versioon.

Sekä käyttäjien että kehittäjien kannalta 3.3 versio tuo uusia ominaisuuksia ja parannuksia.

  • Uusi tervetuloasivu päivityksen jälkeen.
  • Median lataus on uusittu ja myös ”drag and drop”-lataus onnistuu.
  • Uusi työkalupalkki ja menuvalikko (Flyout menus) ohjausnäkymässä. Ohjausnäkymä toimii nyt myös paremmin tablet-tietokoneilla.
  • Osoiterakenneongelmat on ratkaistu.
  • jQuery on päivitetty versioon 1.7.1
  • Uusia funktioita kehittäjille kuten wp_editor(), is_main_query() ja check_theme_switched().

Jotta en toistaisi kaikkea mitä WordPressin versiosta 3.3 on jo kirjoitettu, niin kannattaa lukea ainakin seuraavat artikkelit.

WPCandyn artikkeli uusista ominaisuuksista

Virallinen tiedote wordpress.org sivulla

WP 3.3 laskuri

Kategoriat
WordPress

Teemojen kääntäminen suomeksi

Kaikki keskivertoa paremmat teemat on rakennettu siten, että ne pystytään kääntämään mille tahansa kielelle ilman, että teeman tiedostoja tarvitsee muuttaa. Jos lataat esimerkiksi Prototype-teeman, avaat languages-kansion, niin huomaat sen sisällä olevan käännöstiedostot prototype-en_EN.po ja prototype-en_EN.mo.

prototype-en_EN.po-tiedoston saat auki esim. Poedit ohjelmalla ja tämän jälkeen voit kääntää teeman haluamallesi kielelle. Jos olet kääntämässä teemaa suomeksi, niin toimi seuraavasti.

  • Tallenna tiedosto nimellä prototype-fi. Poedit tekee molemmat tiedostot prototype-fi.po ja prototype-fi.mo, jota WordPress lukee.
  • Tallenna / siirrä tiedostot lapsiteeman languages-kansioon. Muuten menetät käännöstiedostot teeman päivittämisen yhteydessä.
  • Avaa wp-config.php-tiedosto WordPressin juurikansiosta ja muuta WPLANG-asetus seuraavaksi:define ('WPLANG', 'fi');

Päivitä sivusto ja teema on käyttövalmiina suomenkielellä!

Alla Hybridin aikuisteemojen käännöstiedostoja, joita voit käyttää joko sellaisenaan tai muokata omiin tarpeisiin.

Lataa finnish-language-pack-fi.zip

Language-pack pitää sisällään seuraavien teemojen käännökset.

  • Prototype 0.3
  • Hybrid 1.0
  • Trending 0.2
  • Retro-fitted 0.2
Kategoriat
WordPress

Nimipäivät – lisäosa

Etsin jonkin aikaa lisäosaa, jolla voisi luetella suomalaisten nimipäivät kyseiselle päivälle. En löytänyt kunnollista lisäosaa suomalaisten nimipäiville, vaikkakin muille maille mantuville lisäosa oli jo tehtynä. International Namedays toimi oivana virikkeenä tehdä oma lisäosa, joka printtaa selaimelle kyseisen päivän, päivämäärän ja suomalaisten nimipäivät. Idea on siis suoraan International Namedays -lisäosasta.

Kehitän nimipäivät – lisäosaa julkiseen jakeluun asti, mutta tässä toimiva betaversio Foxnet Namedays ja alla funktio, jolla saa nimipäivät haluamaansa kohtaan omassa teemassa.


	// Display name of the day
	if (function_exists( 'sk_fn_nimipaivat' ) ) {
		sk_fn_nimipaivat(); 
	}

Lataa betaversio Foxnet Namedays

Kategoriat
WordPress

Foxnet Kino julkaistu

Foxnet KinoFoxnet kino WordPress-teema on nyt ladattavissa.

Kategoriat
WordPress

Foxnet Kino-teeman ennakkoa

Foxnet julkaisee lähiaikoina elokuvateattereille, teattereille tai vastaaville tarkoitetun WordPress teeman Foxnet Kino. Foxnet Kino on ilmainen, avoimen lähdekoodiin perustuva teema, joka pohjautuu täysin Trending-teemaan.

Foxnet Kinon ominaisuuksia, joita voi päivittää www-selaimen avulla

  • Elokuvan nimi
  • Synopsis / Juoni
  • Pikkukuva
  • Kuvagalleria
  • Näytösajat
  • Trailerin linkki
  • Kotisivun linkki
  • Elokuvan pituus
  • Lipun hinta
  • Elokuvan ajankohta (elokuvissa nyt, tulevat elokuvat tms.)
  • Lajityyppi
  • Ohjaaja(t)
  • Näyttelijät
  • Ikäraja

Tutustu teemaan Foxnet Kinon demosivulla.

Foxnet Kino
Lisätietoja Sami Keijonen, sami.keijonen (a) foxnet.fi