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.

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/

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.

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

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ää tältä:

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

Ota |-merkki pois <?php edit_post_link(’Muokkaa ‘); ?> koodin edestä index.php sivulla. Tallenna index.php ja lataa blogisi etusivu.

sidebar.php

Lisätään seuraavaksi kirjautuminen sisään ja ulos sivun oikeaan laitaan. Lisää sidebar.php sivun loppuun <?php endif; ?> perään:

<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href=”http://validator.w3.org/check/referer” title=”This page validates as XHTML 1.0 Transitional”>Valid <abbr title=”eXtensible HyperText Markup Language”>XHTML</abbr></a></li>
<li><a href=”http://gmpg.org/xfn/”><abbr title=”XHTML Friends Network”>XFN</abbr></a></li>
<li><a href=”http://wordpress.org/” title=”Powered by WordPress, state-of-the-art semantic personal publishing platform.”>WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>

Tallenna ja päivitä etusivu. Nyt sivun laitaan ilmestyi “Meta” paneeli, missä on muutama hyödyllinen linkki.

single.php

Luo uusi tiedosto, single.php. Kopioi index.php ja liitä se single.php tiedostoon, tallenna. Etsi single.php tiedostosta kohta <?php the_content(); ?> ja lisää sen perään:

<?php wp_link_pages(array(’before’ => ‘<p><strong>Sivut:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>

Lisää edellisen koodin seuraavalle riville:

<?php previous_post_link(’« %link’) ?> <?php next_post_link(’%link »’) ?>

Tallenna single.php. Ensimmäinen koodinpätkä lisää blogimerkinnän loppuun Sivut: 1 2 3 … jos kyseisessä merkinnässä on sivutus käytössä. Sivujen lisääminen onnistuu kirjoittamalla <!- -more- -> (kaksi kertaa ‘-’ ilman välilyöntejä) blogimerkinnän “koodi” (code) puolella.

Poista index.php :stä rivi:

<?php posts_nav_link(”,’« Edellinen sivu’,'Seuraava sivu »’); ?>

Niitä on sivulla kaksi, toinen on alempana, <?php endif; (); ?> jälkeen. Poista se aiempi. Poista samanlainen rivi single.php:stä <?php endwhile;else: ?> rivin jälkeen. Nyt jokaisella blogimerkintäsivulla on linkki edelliseen ja seuraavaan merkintään linkki ennen kommentteja.

Lisätään vielä oppaan themeen kuva, mikä näyttää adminpaneelissa themen ulkoasun. Ota screenshot, eli kuvankaappaus blogin etusivusta. Liitä se kuvankäsittellyohjelmaan ja tee siitä kuva, minkä koko on 300×225 pikseliä. Tallenna se nimellä screenshot.png themen kansioon, eli “opas” kansioon. Lataa adminpaneelissa “Ulkoasu” -sivu ja nyt themen nimen alapuolella pitäisi olla ottamasi kuva.

Loppusanat

Tässä sarjan viides osa. Tämän pitäisi olla viimeinen osa, seuraavat ohjeet mitä laitan tulevat olemaan vain vinkkejä erilaisista toteutustavoista.

Lataa oppaan theme:
Note: There is a file embedded within this post, please visit this post to download the file.

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ä.

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.

header.php

Lisää header.php -tiedostoon ennen <h1> tagia <div id=”wrapper”>, seuraavalle riville <div id=”header”> ja seuraavan rivin <br /> tagin jälkeen </div>. Poista sen jälkee <br /> tagi. Tallenna header.php. Lisää </div> footer.php -tiedostoon ennen </body> tagia, jotta saamme suljettua #wrapper divin.

Avaa style.css tiedosto. Lisää body { … } määritelmän jälkeen yksi tyhjä rivi ja kirjoita:

#wrapper {
margin: 0 auto 0 auto;
width: 750px;
}

Lisäsimme nyt sen sivuston keskittäjän. Keskitys onnistuu kun laittaa width (leveys) -arvoksi vähemmän kuin 100% ja margin (marginaali) -arvoksi vasemmalle ja oikealle sivulle “auto”. Ensimmäinen nolla on ylämarginaali ja toinen nolla on alamarginaali.

Miksi #wrapper, eikä .wrapper? Laitoimme divin id:ksi, emmekä class:ksi. ID ja class eroaa toisistaan sillä, että id=wrapper ei saa ilmestyä sivulla kuin kerran, class=wrapper voi ilmestyä kuinka monesti tahansa. Käytän wrapperissa id:tä sen takia, koska sitä ei tarvita kuin sivuston alussa. Sama asia headerissa ja tulevissa osissa.

Lisää #wrapper { … } jälkeen #header ja kirjoita:

#header {
background-color: #acabae;
padding: 10px;
text-align: center;
}

Tallenna, päivitä blogisi sivu. Nyt sivun otsikon taustan pitäisi muuttua harmahtavaksi ja tekstin keskitetyksi. Laitoimme myös laatikolle 10 pikselin sisennyksen.

Kirjoita #header { … } jälkeen:

#header h1 a, h1 a:visited, h1 a:active {
color: #000000;
text-decoration: none;
}
#header h1 a:hover {
color: #ffffff;
}

Tallenna ja lataa blogin etusivu. Blogin otsikon linkin pitäisi muuttua mustaksi ja kun hiirellä osoittaa nimeä sen pitäisi muuttua valkoiseksi.

index.php

Lisää <?php get_header(); ?> rivin jälkeen yksi tyhjä rivi ja kirjoita <div id=”container”> sulje div laittamalla rivin <?php get_sidebar(); ?> eteen </div>.

Tämän jälkeen lisää style.css tiedostoon #header { … } jälkeen:

#container {
padding: 10px 0 10px 10px;
}

Päivitä blogisi sivu. Määrittelimme #container divin ylä/ala/vasemman puolen sisennykseksi 10px, eli tekstin pitäisi hieman liikkua “laatikon” keskelle.

- 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

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.

Kirjoita <body> ja </body> tagien väliin:

<?php bloginfo(’name’); ?>

Päivitä selaimessa oleva WP:n etusivu, sinne pitäisi ilmestyä blogisi nimi. Seuraavaksi muokataan tekstin koko hieman isommaksi ja tehdään siitä linkki sekä lisätään blogin lyhyt kuvaus seuraavasti:

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?><br />

Päivitä selaimesi, blogisi nimen pitäisi olla nyt linkki. Käytimme tagiparia <h1>, </h1> sivun nimen näytössä ja normaalia <a href=”…”></a> html-tagia tehdäksemme linkin ja sitten vain laitoimme WP:n sijainnin ” ” -merkkien väliin. Blogin lyhyt kuvaus saatiin laittamalla <?php ja ?> -tagien väliin bloginfo(’description’); , mikä hakee blogin asetuksissa määritellyn lyhyen kuvauksen. Kuvauksen voi vaihtaa blogin hallintapaneelin Asetukset -sivulla.

Seuraavaksi haemme blogimerkinnät. Kirjoita seuraavat kaksi pätkää edellisen koodin alle.

<?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>

Blogin sivun pitäisi mennä nyt tyhjäksi. Tämä johtuu siitä, ettei edellisen php-koodin tarvittavia osia ole vielä laitettu. Laitoimme blogin siis hakemaan vasta ne viestit, mutta emme kertoneet mitä tulostaa.