Miten WordPress-teema tehdään (kevytversio)

Opastukset · 06.04.2012

Valmiita WordPress-teemoja löytyy jokaisen makuun, mutta entä jos haluatkin tehdä täsmälleen sellaisen sivuston kuin itse haluat ilman kompromisseja. Kenties olet koulussa harjoitellut HTML:n ja CSS:n perusteita ja osaat jo itse tehdä sivun ulkoasun. Tai olet uusimassa yrityksesi www-sivuja ja ostat Photoshop/HTML version ulkopuoliselta taholta. Seuraavaksi haluat julkaista sivun WordPress-julkaisujärjestelmän päälle, mutta miten?

Otsikkona olisi voinut olla myös kuinka siirrän oman index.html tiedoston ja ulkoasun WordPress-julkaisujärjestelmään. Tämän oppaan tavoitteena ei ole kattavasti kuvata kaikkia WordPress-teeman vaatimuksia, vaan käydä läpi minimivaatimukset toimivan teeman rakentamiseen oman ulkoasun ja index.html-tiedoston pohjalta.

Alkuvalmistelut

Ihan ensimmäisenä tarvitset valmiin index.html tiedoston, jossa olet CSS tyylimäärittelyllä tehnyt ulkoasun juuri sellaiseksi kuin haluat. Käytän tässä oppaassa tämän demon ulkoasua ja käännän siitä toimivan WordPress-teeman. Teeman ominaisuuksina ovat sivupalkki (sidebar) oikealla ja menuvalikko (menu) ylhäällä. Molemmat tehdään WP:n standardien mukaisesti, jotta päivittäminen olisi helppoa WP:n hallintaliittymän avulla.

Asenna seuraavaksi XAMPP tai vastaava omalle koneelle, jotta voit harjoitella rauhassa teeman tekoa omalla koneella. Asenna WordPress ja teeman rakentaminen voi alkaa. Jos nämä vaiheet eivät ole tuttuja, niin kannattaa lukea tämä artikkeli.

Kansiorakenne ja teeman nimeäminen

Teeman nimi ei kannata olla ihan mikä tahansa vaikka teema tulisi vain henkilökohtaiseen käyttöön. Teeman nimessä ei esim. tule käyttää ääkkösiä tai termiä WordPress. Annan testiteemalleni nimeksi Riff Raff Demo. Tee tämän jälkeen WP:n kansioon wp-content/themes alikansio nimeltään riff-raff-demo. Kansion nimessä ei saa olla välilyöntejä, eikä alaviivaa tai isoja kirjaimia tule käyttää.

Kopioi wp-content/themes/riff-raff-demo-kansioon tekemäsi sivu index.html ja vaihda sen nimeksi index.php. Kopioi myös käyttämäsi tyylitiedosto samaan kansioon ja anna sille nimi style.css. Jos olet tehnyt tyylimäärittelyt suoraan index.html tiedostoon, niin siirrä kaikki tyylimäärittelyt tiedostoon style.css. Ulkoasuun liittyvät kuvat olisi hyvä olla kansiossa wp-content/themes/riff-raff-demo/images, jotta teeman tiedostot pysyvät järjestyksessä.

Tällä hetkellä tilanne pitäisi näyttää tältä.

index.php tiedosto on kansiossa wp-content/themes/riff-raff-demo
style.css on kansiossa wp-content/themes/riff-raff-demo
Mahdolliset kuvat ovat kansiossa wp-content/themes/riff-raff-demo/images

style.css otsaketiedot

Avaa style.css ja laita seuraavat tyylitiedoston otsaketiedot tiedoston yläreunaan.

 /* 
Theme Name: Riff Raff Demo 
Theme URI: https://foxnet.fi 
Description: Test how to make a WordPress theme.
Author: Sami Keijonen 
Author URI: https://foxnet.fi
Version: 1.0 
*/

Vaihda toki kaksoispisteen oikealla puolella olevia termejä, mutta älä muuta kaksoispisteen vasemmalla puolella olevia termejä. Niistä WP tunnistaa teemasi tiedot ja tämän jälkeen voit aktivoida teemasi kohdasta Ulkoasu >> Teemat . Muistithan nimetä index.html tiedoston uudelleen nimellä index.php.

Aktivoinnin jälkeen vieraile sivulla ja kenties huomaat, että sivu näyttää olevan ilman tyylimäärityksiä. Seuraavaksi otetaan käsittelyyn index.php.

Tyylitiedoston liittäminen index.php-tiedostossa

Avaa index.php ja etsi rivi, jossa liität style.css tyylimäärittelyt sivulle. Rivi voi näyttää esim. tältä.

<link rel="stylesheet" href="style.css" type="text/css" media="all" />

Poista rivi ja laita sen tilalle koodi

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />

Funktio get_stylesheet_uri() palauttaa style.css url-osoitteen, joten voit huoletta siirtää teeman mihin tahansa domainiin ja tyylitiedoston url-osoite on aina oikein.

WordPressin luuppi – the loop

WordPressin sydän on luuppi, joka hakee tietokannasta tekemiäsi sivuja ja artikkeleita. Ilman sitä sinulla on edelleen staattiset sivut, joita et voi päivittää WP:n hallintaliittymän avulla.

Avaa index.php uudelleen. Jos sisältösi oli Lorem Ipsum tekstiä, niin poista kaikki testisisältö ja laita sen tilalle WP:n luuppirakenne.


<?php if ( have_posts() ) : ?>

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

		<h1><?php the_title(); ?></h1>
				
		<?php the_content(); ?>

	<?php endwhile; ?>

<?php else : ?>

	<p>Valitettasti yhtään artikkelia ei löytynyt</p>

<?php endif; ?>

the_title()-funktio tuottaa sivun/artikkelin otsikon ja the_content()-funktio vastaavasti sivun/artikkelin sisällön kokonaisuudessaan. Katso lisäohjeita WordPressin sivuilta, jos esim. haluat otsikkoon linkin. Tämä on tarpeellinen varsinkin arkistosivuilla.

Periaatteessa nyt sivut toimivat ja pystyt päivittämään sivuja WP:n avulla. Muutama ratkaiseva vaihe on kuitenkin tekemättä.

Dynaamisen menuvalikon tekeminen

Seuraava vaihe on muuttaa staattinen valikko WP:n dynaamiseksi valikoksi, jotta voit päivittää sitä kohdasta Ulkoasu >> Valikot. Tee teeman kansioon uusi tiedosto nimeltään functions.php. Rekisteröi uusi valikko esim. nimellä minun-menu käyttäen register_nav_menu()-funktiota. Lisää seuraava koodi functions.php tiedoston alkuun.

 
<?php 
add_action( 'init', 'register_my_menu' ); 

function register_my_menu() { 
	register_nav_menu( 'minun-menu', 'Minun Menu' );
} 
?>

Tämän jälkeen kohdassa Ulkoasu >> Valikot voit tehdä oman valikon ja Sijainnit teemassa -kohtaan voit liittää tekemäsi valikon.

Tämän jälkeen avaa uudelleen index.php tiedosto ja etsi tekemäsi kiinteä valikko. Poista staattinen valikko ja laita tilalla äsken tekemäsi valikko wp_nav_menu()-funktiolla.


<?php 
wp_nav_menu( array( 'theme_location' => 'minun-menu' ) ); 
?>

Dynaamisen sivupalkin (sidebar) tekeminen

Seuraava vaihe on rekisteröidä sivupalkki (sidebar), jotta myös demosivuston oikealla puolella olevia elementtäjä voi päivittää kohdasta Ulkoasu >> Vimpaimet. Avaa functions.php ja rekisteröidään sivupalkki WP:n register_sidebar()-funktiolla.


add_action( 'widgets_init', 'my_register_sidebars' );

function my_register_sidebars() {

	/* Rekisteröi 'sivupalkki' sivupalkki. */
	register_sidebar(
		array(
			'id' => 'sivupalkki',
			'name' => 'Sivupalkki',
			'description' => 'Tämä on minun ensimmäinen sivupalkki',
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>'
		)
	);

}

Nyt kohdasta Ulkoasu >> Vimpaimet pääset lisäämään sisältöä eli vimpaimia juuri luomaasi sivupalkkiin.

Tämän jälkeen avaa jälleen index.php ja etsi sivupalkin paikalla oleva testisisältö ja poista se. Haetaan tilalle äsken tehty sivupalkin sisältö dynamic_sidebar()-funktiolla.

<?php dynamic_sidebar( 'sivupalkki' ); ?>

Ugh! WordPress-teema on valmis! Älä kuitenkaan innostu liikaa. Paljon asioita on vielä tekemättä ja monia WP:n ominaisuuksia käyttämättä, mutta teema kuitenkin toimii ja se on tässä vaiheessa pääasia.

Viimeistely ja yhteenveto

Juuri ennen </head>-tagia on syytä lisätä wp_head()-funktio, koska WP ja monet lisäosat käyttävät sitä moninaisiin tarkoituksiin.

<?php wp_head(); //wp_head ?>

Lisää samasta syytä juuri ennen </body>-tagia wp_footer()-funktio

<?php wp_footer(); //wp_footer  ?>

Tässä oppaassa on käyty vain perusteet läpi siitä kuinka oma ulkoasu muutetaan WordPress-teemaksi. Esim. kommentointityökaluja ei ole aktivoitu millään tavalla ja miljoona muutakin asiaa teemasta vielä puuttuu. Koitan kirjoittaa kattavamman oppaan jossakin vaiheessa. Suunnitelmissa on kirjoittaa kuinka WordPress-teema tehdään käyttäen Hybrid Corea, mikä antaa lisävalmiudet monen ominaisuuden käyttöönottoon. Mutta se jääköön toiseen kertaan.

Vaikka demo näyttää ja vaikuttaa köykäiseltä, niin siitä kuitenkin kehkeytyi uljas Live Wire -teema, josta voi tarkemmin tarkastella WP:n ominaisuuksia.

Lataa riff-raff-demo.zip

Lisää lukemista

WordPress · 17.02.2016