Luento 1 – WP eli WordPress

Tällä kurssilla tutustumme nopeasti WordPressin saloihin.

Kurssilla on käytössä viisi Dellin konetta, joihin on esiasennettu XAMPP-palvelinympäristö. Jokaisella koneella on myös esiasennettu WordPress (XAMPPin päälle).

Salasana koneille Oppilas tilille on k18. Koneet on jo valmiina kytkettynä langattomaan verkkoon. Älkää säätäkö mitään ominaisuuksia koneella, jotta kaikki toimii kuten pitääkin. Mitään ei tarvitse myöskään asentaa koneelle, ellei siitä erikseen mainita.

XAMPP

Palvelimen käynnistys tapahtuu painamalla Mysql start ja Apache start.

Palvelimen toiminnan voi testaa menemällä osoitteeseen localhost.

Tekstinkäsittelyohjelma

Koneille on asennettu Notepad++. Voitte käyttää tätä ohjelmaa koodaamiseen.

Suosittelen kuitenkin asentamaan koodaamiseen ohjelman nimeltä Atom. Atom on mainio, kevyt, ilmainen työkalu koodaamiseen.

Lataa Atom tarvittaessa täältä https://atom.io/download/windows_x64

Aloitetaan

Sukellamme heti oikeasti WordPressin saloihin. Emme käytä valmiita teemoja kuin pohjana.

Voimme aloittaa muokaamaan oletusteemaa (Twentynineteen). Teema löytyy koneiltanne C:\xampp\apps\wordpress\htdocs\wp-content\themes\twentynineteen.

WordPress teemoja ei kuitenkaan kannata alkaa muokkaamaan suoraan. On suositeltavampaa luoda lapsiteema (child theme). Lapsiteema sisältää kaikki samat ominaisuudet, mutta vain osa tiedostoista on kustomoitu tekijän tarpeisiin.

Lapsiteema eli child themen luonti

Netistä löytyy mainioita tutoriaaleja kuinka lapsiteema luodaan. Alla yksi ohjeista.

Child Themes

Tässä kuitenkin pikaohje lapsiteeman luomiseen. (Lähde: developer.wordpress.org)

1. luodaan lapsiteemalle kansio
   
2. Luodaan lapsiteemalle tyylitiedosto. Avaa tekstinkäsittelyohjelma (vaikka Notepad ++)
3. Tee tiedosto tyhjä style.css tiedosto ja talleta se lapsiteema-kansioon. Lapsiteeman tulisi löytyä sijainnista C:\xampp\apps\wordpress\htdocs\wp-content\themes\lapsiteema
   
4. Pastetkaa sen sisään seuraava koodi
   /*
    Theme Name:   Twenty Fifteen Child
    Theme URI:    http://example.com/twenty-fifteen-child/
    Description:  Twenty Fifteen Child Theme
    Author:       John Doe
    Author URI:   http://example.com
    Template:     twentyfifteen
    Version:      1.0.0
    License:      GNU General Public License v2 or later
    License URI:  http://www.gnu.org/licenses/gpl-2.0.html
    Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain:  twenty-fifteen-child
   */
5. Muokataan koodia meidän tarpeisiin
   /*
    Theme Name:   Laspiteema
    Theme URI:    https://hyötypeli.fi
    Description:  Lapsiteema esimerkki kurssille
    Author:       Sinun nimesi
    Author URI:   https://hyötypeli.fi
    Template:     twentynineteen
    Version:      1.0.0
    License:      GNU General Public License v2 or later
    License URI:  http://www.gnu.org/licenses/gpl-2.0.html
    Tags:         testausta
    Text Domain:  lapsiteema
   */
6. Tarkasta, että alla olevat kohdat(Template ja Text Domain) on varmasti oikein.
   
7. Tehdään tiedosto functions.php ja asetetaan juuri tehty tyylitiedosto jonoon.
   Pastetkaa alla oleva koodi juuri luotuun tiedostoon:
   <?php
   add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
   function my_theme_enqueue_styles() {
       $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
       wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
       wp_enqueue_style( 'child-style',
           get_stylesheet_directory_uri() . '/style.css',
           array( $parent_style ),
           wp_get_theme()->get('Version')
       );
   }
   ?>

   

8. Nyt lapsiteema on valmis käytettäväksi. Jos kaikki meni hyvin teema löytyy wordpressin hallinnasta.

WordPressin hallintapaneeli

Olemme nyt luoneet teeman, mutta emme ole edes kirjautuneet WordPressiin.

Kirjaudutaan ensimmäistä kertaa sivustollemme:
http://127.0.0.1/wordpress/wp-admin/
tai
http://localhost/wordpress/wp-admin/

Asetetaan juuri luotu teema aktiiviseksi

Hallintapaneelissa teeman vaihto Administration Screen > Appearance > Themes. Valitse listasta tehty Lapsiteema.
Nyt meillä on teema jota voi huoletta muokata.