Asensin juuri uusimman version WP:stä. Kaikki meni mainiosti ja erittäin nopeasti. Jos huomaatte jotain virheitä niin ilmoitelkaapas niistä joko kommenteilla tai jotain muuta kautta.

Ilmainen theme alkaa muuten olemaan valmis, vielä muutama lisäys ja viilausta. Alla kuva themestä. Muistakaa, että kyseessä ensimmäinen ja ilmainen theme Nettikulmaukselta. Lisää tulee varmasti.

Tuli netin aallokoilla vastaan erittäin hyödyllinen sivusto webmastereille: Browsershots. Sivuston kautta voi tarkistaa oman sivuston näkyminen useilla eri selaimilla ilman, että joutuisi lataamaan useampia eri selaimia omalle koneelle. Valitsin testaukseen kaikki valmiiksi valitut, eli 44 eri selainta Linux, Windows, Mac OS ja BSD alustoilta.

Parinkymmenen minuutin jälkeen sain ensimmäiset kuvakaappaukset sivustosta ja tunnin odottelun jälkeen oli kaikki 44 kuvaa valmiina. Tulos oli mielestäni erittäinkin hyvä: Nettikulmaus näytti toimivan useimmissa selaimissa, vain muutamassa selaimessa sivut ei näkyneet ollenkaan

Omia tuloksia odotellessa kannattaa muistaa klikkailla sitä “Extend” painiketta aina 30 minuutin välein, muuten sivujen kuvaus loppuu.

Nettikulmauksen kuvat: http://browsershots.org/http://www.kulmaus.com/
Browsershots: http://browsershots.org/

Viimeaikoina on ollut aika hiljaista sivujen suhteen. Olen yrittänyt saada koulun ohella värkättyä ensimmäistä ilmaista WP-themeä. Themen valmistamisessa julkiseen käyttöön täytyy olla erityisen tarkka, että vaadittavat sivut on mukana, sekä koodin olisi oltava W3C-validaattorin hyväksymä, joten themen valmistamisessa kestää hieman.

Sitten vielä ilmestyi tuo 2.5 versio WP:stä ja olen sitä hieman tutkaillut. Siihen ei vielä ole suomenkielistä versiota saatavilla, joten taidan odotella suomenkielistä versiota, koska suomalainen WP-yhteisö on kääntämässä sitä.

Opas/vinkkitoiveita voi lähettää minulle liittyen WP:hen/nettisivujen tekoon. Laitan lähiaikoina muutaman lyhyen vinkin WP:n themen ehostamiseen.

Tänään on julkaistu uusi versio WordPressistä. Version numero on 2.5 ja sen mukana näyttäisi tulevan kaikenlaista uutta. Mukaan on ahdettu myös gravatar-plugin, eli kommenttien lähettäjän avatar näkyy kommentin vieressä ilman minkää lisäosan lataamista erikseen. Myös tietoturva-asioita on paranneltu ja WP:n toimintaa nopeutettu

En ole kuitenkaan vielä päivittämässä siihen, koska täytyy ensin tutkia sitä koneelta käsin ettei tule turhaa säätämistä myöhemmin jos kaikki ei menekään hyvin.

Linkit:
WordPress.org
WordPress 2.5 uudet ominaisuudet

Tällä kertaa vuorossa on kommenttien näyttö blogimerkinnän lopussa, sekä muutama viilaus ulkoasuun.

comments.php

Kopioi default -teeman kansiosta comments.php ja laita se oman teemasin kansioon. Avaa index.php ja liitä seuraava koodinpätkä <p><?php the_content(); ?></p> seuraavalle riville:

<?php comments_template(); ?>

Poista <p> ja </p>, koska xhtml-validaattori valittaa niistä. Avaa jokin blogimerkintä ja tee muutama kommentti sinne. Muokataan seuraavaksi jokainen blogimerkintä linkiksi. Avaa index.php ja lisää <h2> perään:

<a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>

Sen jälkeen laita </a> <?php the_title(); ?> perään. Koodin pitäisi näyttää » Lue lisää…

Kuten varmasti tiedätte, sain neliosaisen WordPress Theme -opas sarjan valmiiksi. Tai no, valmiiksi ja valmiiksi. Siitä jäi puuttumaan vielä monia osia, joten tulossa on ainakin viides osa missä käsitellään kommenttiosiota mikä jäi kokonaan themestä pois. Saatan myös muokata themen värejä yms pientä.

Sivuille on tulossa myös uusi osio: Themet. Eli tarkoituksena on valmistaa ilmaisia WP -teemoja. Tulevaisuudessa ehkä myös muihinkin järjestelmiin, esimerkiksi foorumeille. Teemojen lataus onnistuu vain rekisteröityneiltä käyttäjiltä.

Edellinen ulkoasu oli kohtalaisen kehno viritelmä, koitetaan uudella. Antakaa palautetta ulkoasun virheistä ja kehitysehdotuksia. Ja muistakaa lukea neliosainen WP-theme opas!

Tänään on vuorossa themen ulkoasun tyylittely, eli style.css tiedoston muokkaus. Siihen ei olla koskettu sitten ensimmäisen osan, joten avaa style.css, index.php, header.php, sidebar.php ja footer.php.

Themen tyylit

Themen tyylitiedosto (style.css) määrittelee miltä blogin theme näyttää. Sen takia se onkin yksi tärkeimmistä tiedostoista ulkoasuja tehdessä, teki sitten ulkoasun WP:lle tai ihan normaalin nettisivuston. Tällä hetkellä teema näyttää erittäin tylsältä ja kaikki on yhdessä jonossa. Vieressä on teeman nykyinen asetelma. Tarkoituksenamme on tässä osassa saada teemasta hieman selkeämpi.

Tavoitteemme on vasemmalla oleva kuva. Ennen sivuston ulkoasun tekemistä, täytyy sivusta tehdä jonkinlainen suunnitelma ja ottaa mahdolliset haittatekijät huomioon. Päätin tehdä teemasta 750px leveän ja keskitetyn. Tämä sen takia, että 750px leveä sivusto näkyy vielä 800×600 näyttöillä ja voimme keskittää sivuston helposti <div></div> tageilla.

style.css

Tehdään sivustolle pieni muutos ennen muihin sivuihin koskemista. Jätä pari riviä väliä */ rivin jälkeen ja kirjoita:

body {
background-color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin: 0;
padding: 0;
}

Tallenna style.css ja lataa blogisi etusivu. Huomaa, että fontti ja fontin koko muuttui. Myös marginaali ja padding laitettiin nollaksi, eli sivulla ei ole enää näkymättömiä reunoja estämässä tekstin kosketusta selaimen reunoihin. Laitoimme myös taustavärin valkoiseksi sekä tekstin mustaksi ja Verdana -fontilla. Jos vierailijan koneelta ei löydy Verdanaa, etsitään Arial fontti jne.
» Lue lisää…

Edellisessä osassa kävimme läpi sivun koostumisen ja tänään jaamme sivuston osiin.

- Tämän hetkinen index.php ja style.css

Avaa index.php ja maalaa ensimmäiseltä riviltä lähtien ja päättyen riville <?php bloginfo(’description’); ?><br />.

Leikkaa (Ctrl+x) valittu teksti ja tallenna index.php. Avaa uusi tyhjä sivu, liitä sinne index.php:stä leikkaamasi teksti ja tallenna nimellä header.php. Avaa taas index.php ja kirjoita ensimmäiselle riville:

<?php get_header(); ?>

Yllä oleva koodi hakee nyt header.php nimisen tiedoston themen kansiosta. Yksinkertaista, eikö? Näin tulemme tekemään koko sivulle.

Seuraavaksi aloita maalaaminen index.php tiedostosta kohdasta <h2>Valikko</h2> ja päättyen kohtaan </ul>.

Leikkaa (Ctrl+x) valinta, tallenna index.php ja avaa uusi tiedosto. Liitä juuri leikkaamasi teksti ja tallenna se nimellä sidebar.php. Lisää index.php tiedostoon juuri leikkaamasi tekstin kohdalle:

<?php get_sidebar(); ?>

Arvaat varmaankin jo mitä tämä sitten tekee? Tietenkin se hakee themen kansiosta sidebar.php tiedoston.

Sitten viimeinen leikkaus. Maalaa <?php get_sidebar(); ?> koodin jälkeinen osa index.php:stä (eli koko loppusivu).

Leikkaa (Ctrl+x) ja tallenna index.php. Avaa uusi tiedosto ja liitä leikkaamasi teksti sinne. Tallenna se nimellä footer.php. Osaatko arvata mitä kirjoitetaan index.php sivun loppuun, että saamme footer.php:n ladattua? Yllättäen se tapahtuu näin:

<?php get_footer(); ?>

Tallenna nyt index.php ja tarkista selaimessa, että sivusi näkyvät edelleen oikein.

Loppusanat

Nyt sivumme on jaettu järkevän kokoisiin osiin ja nimetty ne hyvin. Tässä vielä tämän osan viimeiset muokatut tiedostot:

- index.php
- style.css
- header.php
- sidebar.php
- footer.php

Tämän osan sisältö oli sitten tässä. Lyhyempi kuin toinen osa, mutta kuitenkin kohtalaisen tärkeä osa WP:n themen kokonaisuutta. Theme alkaa olemaan jo aikalailla valmis, mutta kuten huomaat, kaikki on yhdessä jonossa ja tyylittömiä. Seuraavaksi on vuorossa sivuston tyylitiedoston muokkaus.

WordPress Theme -opas, osa 4
WordPress Theme -opas, osa 5

Eilisessä oppaassa kävimme läpi perusasioita WP:n themestä ja sen toiminnasta. Tänään aloitamme ulkoasun teon. Tässä oppaassa emme kuitenkaa tee kovinkaan graafista sivua, koska siitä tulee opas myöhemmin. Nyt on vain tarkoitus opastaa miten WP:n theme muodostuu. Suosittelen lukemaan jokaisen luvun, ettei tule väärinymmärryksiä. Koodit on myös hyvä kirjoittaa itse, eikä käyttäen kopioi/liitä toimintoa.

1. Luo kansioon C:\apache-kansio\kansio-missä-wp-sijaitsee\wp-content\themes, kansio opas (tai jokin muu haluamasi). Kansiossa pitäisi olla classic ja default kansiot jo ennestään.

2. Luo kaksi tiedostoa kansioon opas: index.php ja style.css
3 Avaa index.php tiedosto ja lisää sinne (voit kopioida): index.txt
3. Avaa style.css tiedosto ja lisää sinne (voit kopioida): style.css

Seuraavaksi hieman index.php:n koostumuksesta. HTML/PHP osaajalle tylsä osuus, pahoittelen.

index.php

<title><?php bloginfo(’name’); ?><?php wp_title(); ?></title>

Selaimen otsikkoikkunassa näkyvä sivun nimi (name) ja blogin kuvaus (title). Ei kannata muuttaa, WP täyttää ne automaattisesti. <?php ja ?> tarkoittavat, että kyseessä on PHP skripti, eli toiminto mikä suoritetaan palvelimella ja näytetään selaimessa. Kyseisiä skriptejä ei kannata muuttaa, ellei ole tietoinen mitä on tekemässä.

<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />

Hakee tyylitiedoston themen kansiosta, ei kannata muuttaa. Tässä oli tärkeimmät index.php tiedoston rivit.

style.css

Tyylitiedosto sisältää themelle tärkeät ulkoasun määritykset. Seuraavassa selitykset sen ensimmäisille riveille.

/*
Theme Name: Opas
Theme URI: http://www.kulmaus.com
Description: Theme-oppaan ulkoasu
Version: 1.0
Author: Sami Kallio
Author URI: http://www.kulmaus.com/
*/

• Theme Name: Themen nimi, näkyy adminpaneelissa kun valitaan themeä
• Theme URI: Themen kotisivut
• Description: Ulkoasun selitys.
• Version: Themen versio, näkyy adminpaneelissa valitun themen nimen perässä.
• Author: Themen tekijä.
• Theme URI: Themen tekijän kotisivut.

Kuvakaappaus adminpaneelin ulkoasun valintasivusta. Harmaalle osalle tulee vielä oma kuva ulkoasusta myöhemmin.

Themen aloitus

Valitse Opas -theme klikkaamalla sen nimeä hiiren vasemmalla. Avaa uuteen välilehteen WP:n etusivu, sivun pitäisi olla nyt täysin valkoinen. Avaa index.php jollain tekstieditorilla.
» Lue lisää…