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

Tämä opas on Nettikulmauksen ensimmäinen moneen osaan jaettu opas-sarja. Oppaassa käydään läpi monia erilaisia vaiheita, mitkä liittyvät WordPress julkaisuohjelman teemojen luontiin. Suosittelen lukemaan jokaisen luvun, ettei tule väärinymmärryksiä. Koodit on myös hyvä kirjoittaa itse, eikä käyttäen kopioi/liitä toimintoa.

Tarvittavat työkalut

- WordPress asennettuna koneelle
- Editori sivujen tekoon (Muistio, Notepad++ jne)
- FTP -ohjelma (valmiin ulkoasun siirtoon nettiin)

Perustietoa

Jokainen theme tarvitsee ainakin kaksi tiedostoa, index.php ja style.css tiedostot. Index.php kertoo missä kohdassa mikäkin elementti (tekstit, valikot yms) sijaitsee ja style.css kertoo miltä ne näyttävät. Tässä lista themen tiedostoista:

• style.css
• index.php
• home.php
• single.php
• page.php
• archive.php
• category.php
• search.php
• 404.php
• comments.php
• comments-popup.php
• author.php
• date.php

Käymme oppaan aikana kaikki tarvittavat läpi.

Hierarkia

Vaikka edellä mainittuja sivuja on 13, et välttämättä tarvitse kuin muutaman niistä, koska jos esimerkiksi vierailija lataa sivun “archive.php” ja kyseistä sivua ei ole saatavilla, WP lataa automaattisesti index.php -sivun pohjan ja näyttää sen archive.php:n paikalla. Jos taas haluat archive.php:n näyttävän erilaiselta niin silloin teet index.php:stä kopion ja tallennat sen muokattuna archive.php:ksi.

Loppusanat

Tässä oli oppaan ensimmäinen osa. Seuraavassa osassa aloitamme themen teon, teemme index.php ja style.css tiedostot. Kommentteja oppaasta ja toteutuksesta, sekä oppaassa käsiteltävien aiheiden toiveista otetaan mielellään vastaan.

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

Jos haluat valmistaa ulkoasuja WordPressiin, tarvitset sen koneelle, koska se on paras tapa nähdä miten theme toimii, ilman että joutuisi FTP:n kautta siirtelemään tiedostoja. Asennus on erittäin yksinkertainen, tarvitset:

Apache (tai jokin muu palvelinohjelma) Lue opas Apachen asentamisesta
PHP Lue opas PHP:n asentamisesta Apacheen
MySQL Lue opas MySQL:n asentamisesta
PHPMyAdmin Lue opas asennuksesta
WordPress (purettuna)

1. Siirrä WP kansio Apachen htdocs -kansioon (mistä Apache hakee sivusi)
2. Tee phpMyAdminin avulla wordpress SQL-tietokanta kirjoittamalla keskellä phpmyadmin sivua sijaitsevaan Luo uusi tietokanta laatikkoon ja klikkaa “Luo”.
3. Muokkaa wp-config-sample.php

// ** MySQL settings ** //
define(’DB_NAME’, ‘wordpress’); // Tietokannan nimi, wordpress
define(’DB_USER’, ‘root’); // MySQL käyttäjätunnus
define(’DB_PASSWORD’, ”); // MySQL salasana
define(’DB_HOST’, ‘localhost’); // ei tarvitse muuttaa

4. Tallenna nimellä wp-config.php.
5. Avaa selaimella osoite http://localhost/wpkansio/wp-admin/install.php

Tämä opas kertoo, kuinka asennat phpMyAdminin omalle koneellesi, jotta voit hallinnoida SQL-tietokantoja.

Hae uusin versio osoitteesta http://www.phpmyadmin.net/home_page/index.php

Asennus

1. Pura phpmyadmin paketti
2. Siirrä se Apachen (htdocs) kansioon, kansioon mistä Apache hakee sivusi
3. Avaa config.sample.inc.php
4. Muokkaa seuraavat rivit:

29. $cfg['Servers'][$i]['auth_type'] = ‘cookie‘; <- Muuta cookie http:ksi
35. $cfg['Servers'][$i]['extension'] = ‘mysql‘; <- Muuta mysql mysqli:ksi

Tallenna nimellä config.inc.php
5. Avaa php.ini kansiosta C:\php ja muokkaa (lisää ellei löydy) seuraavat rivit:

extension=php_mbstring.dll - poista ; -merkki edestä
extension=php_mysqli.dll - poista ; -merkki edestä
mysqli.default_host = localhost - lisää localhost, ellei jo ole
mysqli.default_user = root - lisää root, ellei jo ole

6. Avaa phpMyAdmin selaimessasi, sen pitäisi toimia nyt.

Jos virheitä ilmenee

Tarkista, että C:\Temp tai mikä tahansa php.ini tiedostossa laittamasi temp-kansio on olemassa. Katso php.ini:ssä kohta session.save_path = “……”.

Käynnistä kone uudelleen jos virheitä tulee edelleen.