WordPress Theme -opas, osa 2
14.03.2008 Oppaat luettu 627 kertaaEilisessä 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.
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.
(1 arviota, keskiarvo: 4/5)Sinun täytyy kirjautua sisään arvioidaksesi artikkelin.
Loading ...
Loading ...
Erittäin hyvä opas, yksinkertaisesti mutta hyvin kirjoitettu.