Webtaidoista virtaa

Kuinka oma teema luodaan?

Tagged with

Teeman tiedostot

Aloitetaan oman teemamme rakentaminen luomalla tarvittavat tiedostot. WordPressissä on tietyt tiedostot, jotka on luotava, jotta teema yleensäkään toimii ja katsomme aluksi mitä ne ovat ja millaisia asioita tiedostoihin on koodattava. Koodit ovat valmiina, joten php-ohjelmointitaitoa sinulla ei tarvitse olla.

Teeman ”core”-tiedostot

Jotta teema saadaan otettua käyttöön WordPressissä minimivaatimuksena on kolme tiedostoa: style.css, functions.php, index.php. Jotta sivustoja voidaan alkaa kunnollisesti rakentamaan, tulee kuitenkin luoda huomattavasti monipuolisempi lista tiedostoja. Luodaan omateema-kansioon kuvanmukainen tiedosto/kansiorakenne.

Visual Studio Code -ohjelmassa kansiot ja tiedostot luodaan yksinkertaisesti klikkaamalla omateema-kansion päällä projektinäkymässä ja valitsemalla New File… tai New Folder…. Kirjoita sitten tiedoston nimi tiedostopääte mukaanlukien ja paina -painiketta.

Lisätään seuraavaksi tiedostoihin tarvittavaa koodausta ja HTML-merkkausta tiedosto kerrallaan. Kerron samalla hieman mitä minkäkin tiedoston tehtävä teemassa on.

WordPressin perustiedostorakenne.

style.css

Tiedoston nimi viittaa tyylitiedostoon. Tiedostoon voidaan asettaa tyylejä mutta itse käytän mieluummin erillistä tyylitiedostoa tyylien asettamiseen. Style.css -tiedostoon asetetaan WordPressissä teeman nimi ja muut tiedot, jotka ”tulostuvat” WordPressin ohjauspaneelin Themes (Teemat) osiossa teeman laatikkoon. Tiedosto on välttämätön, jotta teema voidaan ottaa käyttöön WordPressissä.

Luo siis tiedosto Visual Studio Core -editorissa omateema-kansioon ja kopioi alla oleva koodi tiedostoon. Korvaa koodissa olevat tiedot oman teemasi tiedoilla.

/*

Theme Name: Oman teeman nimi

Theme URI: https://example.com/

Author: Sinun Nimesi

Author URI: https://example.com/

Description: Yksinkertainen WordPress-teema alusta asti.

Version: 1.0

License: GNU General Public License v2 or later

License URI: https://www.gnu.org/licenses/gpl-2.0.html

Text Domain: omanteemannimi

*/

Teeman tunnuskuva?

Jos haluat voit vielä lisätä kuvan joka näkyy ohjauspaneelin Themes (Teemat) toiminnossa teeman kohdalla. Käsittele kuva esimerkiksi suositeltuun resoluutioon 1200x900px ja tallenna se jpg-muodossa teeman kansion juureen. Mitä kuvan läpinäkyvyyteen tulee, käytettäessä png-kuvaa, läpinäkyvät alueet näyttävät kuvassa WordPressissä käytännössä mustana.

header.php

Aloitetaan sivuston sisältötiedostoihin tutustuminen header.php -tiedostosta, joka on vastuussa sivun metatiedoista ja ylätunnisteen koodauksesta. Header.php tiedostoon tullaan asettamaan navigointi, CSS-tiedostojen lataaminen ym.

Laitoit ehkä jo merkille, että header ja footer sijaitsevat WordPressissä erillisissä tiedostoissa. Periaate on se, että molempien tiedostojen sisältö tuodaan php:llä index.php tai muihin sivun päätiedostoihin.

Luodaan siis Visual Studio Code -editorissa sivustolle header.php tiedosto ja kopioidaan alla oleva merkkaus ja koodaus tiedostoon.

<!DOCTYPE html>

<html lang="fi">

<head>



<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title><?php bloginfo('name'); ?></title>

<?php wp_head(); ?>


</head>

<body>



<header>



<h1><?php bloginfo('name'); ?></h1>

<nav>



<?php wp_nav_menu(array('theme_location' => 'primary')); ?>



</nav>



</header>
headerin php-tiedoston koodaus
  1. Dokumentin tyyppinä HTML sekä HTML-merkinnän kieliasetus
  2. Head-osa eli dokumentin metatiedot. Sisältää mm. Merkistö UTF-8, sivun tai artikkeli (dokumentin) otsake eli nimi, CSS-tiedostot linkitetään metatietoihin wp_head -koodin avulla.)
  3. Body eli sivun (dokumentin) sisältöosan aloitustagi. Header.php tiedostossa on body-osan aloitustagi ja footer.php osassa lopetustagi.
  4. Header-osan merkintä ja koodaus Sivun ylätunnisteessa (header) on tavallisesti myös navigointivalikko (5) ja vasemmassa laidassa sivuston nimi tai logo.
  5. Navigointivalikko, jossa php-koodilla määritetään Primary eli päävalikon paikka ylätunnisteeseen.

footer.php

Footer eli alatunniste luodaan footer.php tiedostolla. Käytännössä siis html-dokumentin footer-osa on footer.php -tiedoston hallinnassa. Alatunnisteen koodaukseen lisätään tavallisesti myös mahdolliset Javascript-tiedostojen latauslinkit. Javascriptien lataaminen vasta sisällön jälkeen nopeuttaa sivuston lataamista. Varsinkin, kun kyseessä on scriptit, jotka eivät ole erityisen oleellisia ladata alkuvaiheessa.

Luodaan siis seuraavaksi footer.php tiedoston koodaus kopioimalla alla oleva koodi tiedostoon.




<footer>



<p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>



</footer>

<?php wp_footer(); ?>



</body>



</html>
footerin php-tiedoston koodaus
  1. Alatunniste (footer) ja sen näkyvään sisältöön liittyvä koodaus ja merkinnät. Huomaa copyright-koodi sekä vuosiluvun generointi.
  2. wp_footer tuo esimerkiksi aiemmin luomamme javascript-tiedoston linkityskoodin alatunnisteeseen.
  3. Body eli sisältöosan sekä html-tagin lopetustagit Header.php tiedostossa on body-osan aloitustagi ja footer.php osassa lopetustagi.

index.php

WordPressin index.php-tiedosto on ensisijainen oletusmallitiedosto ja sivuston perusta. Se otetaan käyttöön sivun sisällön esittämisessä sivustolla, jos muita mallitiedostoja ei löydy. Se sisältää tyypillisesti erilaisia ​​PHP-elementtejä, jotka auttavat hakemaan ja näyttämään sisältöä tietokannasta.

Luodaan siis Visual Studio Code -editorissa sivustolle index.php tiedosto ja kopioidaan alla oleva merkkaus ja koodaus tiedostoon.

<?php get_header(); ?>

<h1><?php bloginfo('name'); ?></h1>

<p><?php bloginfo('description'); ?></p>

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

<h2><?php the_title(); ?></h2>

<p><?php the_content(); ?></p>

<?php endwhile; endif; ?>

<?php get_footer(); ?>
index.php -tiedoston koodaus.
  1. Ylätunniste (header) tuodaan sivulle header.php -tiedostosta.
  2. Sivuston nimi tuodaan HTML h1 -otsikoksi sisältöosaan php:llä.
  3. Sivuston iskulause (description) tuodaan sisältöosaan php:llä.
  4. WordPress loop: Ohjelmalauseke tarkoittaa. Jos (if) on artikkeleita, Näytä artikkelit sivulla. Lisäksi on määritelty kuinka artikkelit näkyvät sivulla. Lopussa vielä päätetään loop käskyillä endwhile ja endif
  5. Alatunniste (footer) tuodaan sivulle footer.php -tiedostosta.

functions.php

Tiedostossa luodaan teeman toiminnallinen ohjelmakoodi. Functions -tiedostossa otetaan sivustolla ja WordPressissä erilaisia toimintoja, kuten navigointivalikko ja sen muokkaustoiminto, linkitetään tiedostot sivuston sivujen head-osan metatietoihin jne.

Luodaan Visual Studio Code -editorilla siis myös tämä tiedosto ja kopioidaan oheinen koodaus tiedostoon. Koodi linkittää tyylitiedostot sivuston sivujen metatietoihin.

<?php

/*Tyylitiedostojen lisääminen*/

function harjoitus_script_enqueue() {



wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/harjoitus.css', array(), '1.0.0', 'all');

wp_enqueue_script('customjs', get_template_directory_uri() . '/js/harjoitus.js', array(), '1.0.0', true);



}

add_action('wp_enqueue_scripts', 'harjoitus_script_enqueue');


/*Valikon lisääminen*/

function harjoitus_theme_setup() {



add_theme_support('menus');

register_nav_menus(array(



'primary' => __('Ylätunniste'),

'secondary' => __('Alatunniste'),

'social' => __('SOME-navigaatio')



));



}

add_action('after_setup_theme', 'harjoitus_theme_setup');

?>
  1. CSS- ja JS-tiedostot, joista CSS linkitetään sivustolle head-osaan metatietoihin header.php-tiedostossa. Javascript-tiedosto tuodaan footer.php tiedostoon.
  2. CSS-tiedoston linkin tuominen ylätunnisteeseen (head).
  3. Javascript-tiedoston linkittäminen footer.php-tiedostoon.
  4. Navigointivalikkotoiminnon (menu) ja valikkojen luominen sivustolle. Kuten huomaat vertaamalla koodia ja kuvaa, voimme nimetä valikot vaikka suomenkielisenä, jolloin ne näkyvät ohjauspaneelin Menu-toiminnossa suomeksi.
  5. Navigointivalikkotoiminnon ottaminen käyttöön add_theme_support on yleinen käsky, jolla voidaan ottaa toimintoja käyttöön WordPressissä. Sulkeiden sisään kirjoitetaan vaan hipsujen kanssa halutun toiminnon nimi.
  6. Lisätään halutut menuvalikot joita voidaan lisätä haluttu määrä riippuen montako valikkoa haluamme sivustollemme luoda. On huomattava, että nimet tulee olla uniikkeja.

custom.css

Luodaan sivustolle CSS-muotoilutiedosto, johon tehdään kaikki teeman ja sivuston CSS-muotoilut. Voit lisätä tiedostoon kommentin OMAT CSS-MUOTOILUT jos haluat.

/* OMAT CSS-MUOTOILUT */

Vinkki: Kaikki CSS-muotoilut voidaan asettaa yhteen tiedostoon. Joskus saattaa olla myös mielekästä asettaa typografia erilliseen tiedostoon sillä muotoillessa omaa teemaa rivejä tiedostoon kertyy erittäin paljon. Jos halutaan lisätä typografiatiedosto erikseen, täytyy se ottaa myös käyttöön functions.php-tiedostossa.

Olemme luoneet teemaan perusasetuksia ja tiedostot. Jos et vielä ole tarkistanut teeman toimintaa käytännössä, se kannattaa tehdä tässä vaiheessa. Siirry sivuston hallintapaneeliin, ota käyttöön juuri luomasi teema ja:

  1. Luo sivustolle etusivu sekä artikkelien sivu ja ota ne käyttöön Asetuksista (Settings).
  2. Tarkista, miltä sivu näyttää esikatselunäkymässä. Katso myös lähdekoodia latautuuko CSS- ja JS-tiedosto header- ja footer-osaan sivustoa.
  3. Löytyykö Appearance-valinnan alta ohjausnäkymässä toiminto Menu?
  4. Jos navigointivalikkojen toiminto löytyy tee sivustolle päämenuvalikko ja lisää siihen luomasi sivut.