1 Teeman rakentaminen Wordpressiin Jari Sarja lokakuu 2009 Sisältö Johdanto... 2 Valmiin teeman muokkaaminen... 2 XHTML:n perussäännöt... 4 Teeman tiedostot... 5 Sanasto... 5 Hierarkia... 5 Template... 6 Uuden teeman luominen... 7 CSS... 7 Header ja Footer pohjat...10 Index pohja...11 Sivupalkki...13 Kommentit...13 Leiskasta koodiksi...14 Style.css...15 Header.php...15 Teeman tekeminen verkossa...16 WordPress Theme generator...16 Dotemplate...17 CSSEZ...18 Theme Generator...19 Koneelle asennettavat ohjelmat...20
2 Johdanto Wordpress on blogialustana numero 1. Sillä on jo miljoonia käyttäjiä. Wordpress on myös alkanut vallata tavallisia CMS-markkinoita eli se on nykyisin myös julkaisualusta. Wordpressille on saatavissa valmiita ulkoasuja eli teemoja (theme). Usein tulee kuitenkin eteen tilanne, että valmiista teemasta ei saa muokattua mieleistään silloin on tehtävä kokonaan uusi teema. Tässä oppaassa käydään läpi uuden teeman luomisen perusteet. Wordpressteemaa tehdessä pitää muistaa yleiset periaatteet. Tärkein sääntö on, että pyrit hyvään ja valiidiin koodiin niin HTML:n kuin CSS:n osalta. Tee lisäksi teema viimeisimmälle WP:n versiolle. Valmiin teeman muokkaaminen Wordpressin mukana tulee aina valmis teema nimeltä default. Kopioi koko kansion sisältö omaan kansioosi. Teema löytyy seuraavalla kaavalla eli ensin wamp -> www -> kansio -> wp content -> themes Kun kopiointi on valmis eli kansiossa themes on kansio omalla nimelläsi ja sen sisällä on sama sisältö kuin kansiossa default on kaikki kunnossa. Avaa seuraavaksi omasta kansiostasi tiedosto style.css ja tee muutokset.
3 Theme Name: (sama nimi kuin kansiolla) Theme URI: (missä teema sijaitsee?) Description: (kuvaus) Version: (versio) Author: (kuka loi teeman?) Author URI: (kotisivusi) Mene tämän jälkeen ylläpitoon ja valitse oma teemasi. Sitten voit katsella sitä tai laittaa vaikka aktiiviseksi.
4 XHTML:n perussäännöt Uusi teema kannattaa luoda käyttäen validia XHTML-koodia. XHTML:n perussäännöt on kuvattu W3C:n kotisivuilla. Seuraavat esimerkit perustuvat pääosin sivuilta saatuihin tietoihin. Pienet kirjaimet XHTML:ssä kaikki muut elementit paitsi <!DOCTYPE> kirjoitetaan pienaakkosilla. Se on XHTML-standardi. Oikein Väärin <html> <p> <HTML> <P> Sisäkkäisten elementtien järjestys Ensin aloitettu elementti päätetään aina viimeksi. Ei siis päällekkäisyyksiä. Sama sääntö HTML:ssä, mutta sitä ei koskaan noudateta. Oikein Väärin <p><b>lihavoi</b></p> <p><b>lihavoi</p></b> Tagien päättäminen Kaikki tagit mitkä aloitetaan, pitää myös päättää. Oikein Väärin <p>tämä on oikein</p> <p> Ei näin <b>lihavaa... Tyhjät tagit päätetään myös XHTML:ssä päätetään myös tyhjät tagit. Tyhjiä tageja ovat <hr> <br> ja <img>, jota siis päätettään kauttaviivalla näin <hr />. Oikein <br /> <hr /> <img src="jussi.jpg" /> Väärin <br> <hr> <img src="jussi.jpg>. HUOM! Ennen kauttaviivaa on siis välilyönti. Ei siis näin <hr/> vaan näin <hr />
5 Arvot lainausmerkkeihin Koskee myös numeroita. Oikein Väärin <table width="50%" border="0" cellpadding="5" cellspacing="0"> <table width= 50% border= 0 cellpadding=5 cellspacing=0> Teeman tiedostot Teemalla on aina kaksi tiedostoa style.css ja index.php. Ulkoasun määrää style.css ja mukaan otettavat elementit päättää index.php. Tai on tietenkin muitakin tiedostoja, mutta jotta teeman voi valita tarvitaan nuo kaksi em tiedostoa. style.css (sisältää tiedot teeman luojasta ja säätää ulkoasun, Pakollinen) index.php (kaikista tärkein, se kerää mukaan muut elementit, Pakollinen) single.php (usein sama kuin index.php tarvitaan lähinnä yksittäistä blogimerkintää varten) page.php (usein sama kuin index.php tarvitaan lähinnä yksittäistä sivua varten) archive.php (arkisto) category.php (luokittelu) search.php (haku) 404.php (kun sivua ei löydy) comments.php (säätää kommentit, jos puuttuu niin oletusten mukaisesti) comments-popup.php (säätää popupkommentit, jos puuttuu niin oletusten mukaisesti) author.php (tarvitaan, jos halutaan kirjoittajan mukaan) date.php (tarvitaan jos halutaan päivämäärän mukaan) Sanasto Template (malli, pohja). Template säästää työaikaa, koodi kirjoitetaan vain kerran. Template file (mallitiedosto) sisältää sivuston eri osat. Theme (teema) Sisältää kaikki tiedostot sivuston rakennetta ja ulkoasua varten. Sotketaan yleensä templateen. Hierarkia Templaten hierakian ylimmäisenä on index.php. Se kokoaa yhteen muut templatet kuten esim 404.php, joka tarkoittaa löytämätöntä sivua. Tässä kuusi tärkeintä tiedostoa templaten rakentamista varten.
6 Template Tässä alla esimerkki siitä miltä sivuston template eli pohja voisi näyttää. Yläosan nimi on header.php. Sinne tulee yleensä tietoja blogista kuten esim blogin nimi ja kuvaus. Index.php sisältää kirjoitukset ja kommentit. Se on merkattu punaisella, koska se muuttuu. Muut osat ovat lähes koko ajan muuttumattomia. Kun kirjoitat esim. blogimerkinnän tapahtuu muutos juuri tuossa osassa sivua. Sidebar.php sisältää yleensä arkiston ja kategoriat. Footer.php on osa, jossa tietoja esim. tekijästä.
7 Uuden teeman luominen Luo uusi kansio nimellä uusiteema samaan paikkaan missä muutkin teemat sijaitsevat. CSS Seuraavaksi luodaan CSS-tiedosto (style.css), jossa samalla perustiedot teemasta. Koodi css:ään tuossa alla body { padding: 0; margin: 0; text-align: center; background-color: #ccc; color: #000; font: 76% Arial, Helvetica, sans-serif; } /* layout jolla punainen reunus*/ #layout { width: 63em; margin: 0 auto; text-align: left; border: 1px solid #000; } /* ylapalkki */ #ylapalkki { width: 100%; border-bottom: 1px solid #000; float: left; }
8 #ylavasen { float: left; } #ylapalkinsisalto { padding: 5px; } /* palstat */ #palstat { width: 100%; clear: both; } /* sisalto */ #teksti{ width: 68%; float: right; } #tekstinsisalto { padding: 5px; border: 1px solid blue; } /* sininen reunus */ /* navigaatio */ #navigaatio{ width: 32%; float: left; } #navigaationsisalto { padding: 5px; border: 1px solid green; } /* vihreä reunus */ /* alapalkki */ #alapalkki { width: 100%; border-top: 1px solid #000; clear: both; } #alapalkinsisalto { padding: 5px; } CSS-tiedoston alkuun kuitenkin vielä ne perustiedot. Kopioi vaikka default-teeman css:stä perusrunko tai kirjoita alla olevan esimerkin mukaan.
9 Toinen palikka mikä tarvitaan on index.htm, joka tässä alla. <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rev="made" href="mailto:" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="tyyli.css" type="text/css"> </head> <body> <div id="layout"> <div id="ylapalkki"> <div id="ylavasen"> <div id="ylapalkinsisalto"><h1>yläpalkki</h1> <div id="palstat"> <div id="teksti"> <div id="tekstinsisalto"><h2>paulo Freire</h2> <p>paulo Freire syntyi Brasiliassa vuonna 1921 maansa köyhimmälle alueelle.</p>
10 <div id="navigaatio"> <div id="navigaationsisalto"><h2>navigaatio</h2> <div id="alapalkki"> <div id="alapalkinsisalto"><h2>alapalkki</h2> </body> </html> Header ja Footer pohjat Jokaisella sivulla ovat elementteinä header.php ja footer.php. Luodaan ne seuraavaksi. Koodi header osioon tässä <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rev="made" href="mailto:" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="generator" content="notetab Light 6.12" /> <meta name="author" content="" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="tyyli.css" type="text/css"> </head> <body> <div id="layout"> <div id="ylapalkki"> <div id="ylavasen"> <div id="ylapalkinsisalto"><h1>yläpalkki</h1>
11 Sitten laitetaan yläosa uusiksi eli haetaan tiedot WorPressiä varten. Kannattaa napata default teemasta. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes()?>> <head profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name');?> <?php wp_title();?></title> <meta http-equiv="content-type" content="<?php bloginfo('html_type');?>; charset=<?php bloginfo('charset');?>" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>" type="text/css" media="screen,projection" /> <?php wp_head();?> </head> Lopuksi vielä blogin nimi ja kuvaus paikoilleen <div id="ylapalkinsisalto"> <p class="description"><?php bloginfo('description');?></p> <h1><a href="<?php echo get_option('home');?>/"><?php bloginfo('name');?></a></h1> <ul id="nav"> <?php wp_list_pages('sort_column=menu_order&title_li=');?> </ul> wp_title() Sivun title. wp_head() Javascrptin linkit. get_option() Hakee kannasta. wp_list_pages() Hakee sivut kannasta Alapalkista tulee ulos jotain tällaista Index pohja Tämä on kaikista tärkein. Sinne laitetaan ensinnäkin footer ja header
12 <?php get_header();?> <?php get_footer();?> Tee tiedosto nimellä index.php, jonne kaivat sisällön kohdasta index.html. Kas näin. <?php get_header();?> <div id="palstat"> <div id="teksti"> <div id="tekstinsisalto"><h2>paulo Freire</h2> <p>paulo Freire syntyi Brasiliassa vuonna 1921 maansa köyhimmälle alueelle.</p> <div id="navigaatio"> <div id="navigaationsisalto"><h2>navigaatio</h2> <div id="alapalkki"> <div id="alapalkinsisalto"><?php get_footer();?> </body> </html> Sitten katsomaan miltä uusi sivu näyttää (muista valita nykyinen template)
13 Seuraavaksi haetaan sisältöä. Sijoita seuraavaa kohta siihen kohtaan jossa oli tekstiä Freirestä. <?php if ( have_posts() ) : while ( have_posts() ) : the_post();?> <h2><a href="<?php the_permalink()?>"><?php the_title();?></a></h2> <?php the_content();?> <p><?php the_time('f j, Y');?> at <?php the_time('g:i a');?> <?php the_category(', ');?> <?php comments_number('no comment', '1 comment', '% comments');?></p> <?php endwhile; else:?> <h2>woops...</h2> <p>sorry, no posts we're found.</p> <?php endif;?> <p align="center"><?php posts_nav_link();?></p> Sivupalkki Tee seuraavaksi tiedosto functions.php ja sijoita siihen koodi suoraan defaultin vastaavasta tiedostosta. Tee seuraavaksi tiedosto sidebar.php ja sijoita sinne koodi suoraan defaultin vastaavasta tiedostosta Lopuksi teet index.ph tiedostoon seuraavan lisäyksen. <?php get_sidebar();?> Kommentit Laitetaan index.php tiedostoon sinne viestin alle päivämäärän jälkeen <?php comments_template(); // Get wp-comments.php template?> Kokeile ja huomaat kuinka css repeilee. Joten sinne muutoksia.textarea#comment { width: 400px; padding: 5px; }.commentmetadata { font-size: 10px; } Viimeistelyä Muokkaa blogin ostikkon css h1 a { text-decoration:none; color:#333; } Ja tavlisten www-sivujen CSS
14 #nav ul{margin:0; padding: 10px 0px 4px 4px ; text-align:left; border:none; background:white; font:100% Verdana,Arial,sans-serif; font-weight:bold; color:#fff; background-color: transparent; } #nav li{display:inline; margin-left:0em; text-decoration:none; } #nav ul a{text-decoration:none; padding:0px 7px 0 5px; border-width:1px; border-style:none solid none none; border-color:#fff; } #nav a:link{color:#fff; text-decoration:none;} #nav a:visited{color:#fff; text-decoration:none;} #nav a:hover{background-color: transparent; color:#000; text-decoration:none;} #nav a#current{background-color: transparent; color:#fff} Leiskasta koodiksi Ensin pitää olla leiska, joka leikataan palasiksi eli saat lopputuloksena html-tiedoston ja css-tiedoston. Siirrä seuraavaksi molemmat tiedostot kansioon wp-content/themes kansioon, jonne teet vielä oman kansion. Sitten kopsaat oletustyllistä tiedostot comments.php ja searchform.php luomaasi kansioon.
15 Style.css Kansiosat default käyt kopsaamassa tyylin yläosasta tiedot ja laitat oman tiedoston (style.css) alkuun. /* Theme Name: WordPress Default Theme URI: http://wordpress.org/ Description: The default WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">kubrick</a>. Version: 1.6 Author: Michael Heilemann Author URI: http://binarybonsai.com/ Tags: blue, custom header, fixed width, two columns, widgets Kubrick v1.5 http://binarybonsai.com/kubrick/ This theme was designed and built by Michael Heilemann, whose blog you will find at http://binarybonsai.com/ The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php */ Header.php Kopioi seuraavaksi kaikki yläpalkkiin koodi index.html-tiedostosta ja tallenna se tiedostoon header.php Seuraavaksi menet knasioon default ja sieltä tiedostosta head.php kopsaat omaan kansiosi header.phptiedostoon seuraavat palikat.
16 Seuraavaksi Navigation Menu (wp_list_pages) Muuta LI kohdat pois ja tilalle <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?> Teeman tekeminen verkossa Verkosta löytyy paikkoja, joissa voit tehdä oman teemasi. Yleensä teema tallennetaan omalle koneelle zippakettina. WordPress Theme generator http://www.yvoschaap.com/wpthemegen/ Tämä on varsin helppokäyttöinen ja hyvin toimii leiskan koon ja palstojen muuttaminen. Oikealla näkyy syntynyt tilanne
17 Kun ulkoasu on valmis voit tallentaa sen. Dotemplate http://www.dotemplate.com/ Tämä on loistavan helppo käyttää. Aktivoit elementin ja pääset muokkaamaan sitä. Huono puoli on, ettei täysin valmista templatea WordPressille.
18 CSSEZ http://www.cssez.com/ Tämä on hankala käyttää ja lopuksi vie kyllä tiedot WordPressiä varten, mutta ei vakuuta. Jotenkin hankala käyttää. Lisäksi pitää vielä reksiteröityä.
19 Theme Generator http://www.theme-generator.net/ Tämä ei ihan vakuuta. Tekee kyllä jotakin, mutta teema ei vaan toimi. Tai melkein toimii.
20 Valmiit pohjat Valmiin pohjan ideana on, että sinun tarvitsee ainoastaan muokata css-koodia, jotta sivu saisi uuden ulkoasun. WP-Themer Kit http://www.wpthemerkit.com/ Kätevästi valmiita pohjia muokattavaksi. Koneelle asennettavat ohjelmat http://www.artisteer.com/ Tämä on loistava ja helpookäyttöinen työkalu. Valmiita pohjia löytyy muokattavaksi ja vienti Wordpress teemaksi sujuu leikiten.
21 Käyttöliittymä on hyvin yksinkertainen. Juhani kehuu ohjelmaa näin: Tunnustaako kukaan kokeilleensa tai peräti käyttäneensä Artisteeria? :) Itse kokeilin trial-versiota ja hämmästyttävää kyllä, sillä "tehty" teema toimi Drupal 6:ssa ilman mitään havaittavia ongelmia. [ ] Siinä mielessä, että monikin lahjakas Adoben CS:t tunteva graafikko lienee tälläkin hetkellä sisällönhallintajärjestelmien vetovoiman suhteen vielä suht latentissa tilassa, koska php+xhtml+css opintomenestys on saattanut lähimenneisyydessä jäädä turhan heikon puoleiseksi. (http://drupal.fi/fi/keskustelut/tapaus-artisteer) Lisää tietoa Webdesignerwallin ohjeet. Pitäisi toimia. http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/ How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial http://themeshaper.com/wordpress-themes-templates-tutorial/ So you want to create WordPress themes huh? http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/
22 Tämä on valitettavasti aiemmille versioille, muuten ihan hyvä. How to create wordpress theme from scratch http://themetation.com/2008/07/14/how-to-create-wordpress-themes-from-scratch-part-1/ WordPress tutorial http://www.siteground.com/tutorials/wordpress/wordpress_create_theme.htm How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial http://themeshaper.com/wordpress-themes-templates-tutorial/