Oman teeman luominen Underscore pohjateemalla

WORDPRESS – asentaminen lokaaliin kehitysympäristöön

ohjeet verkossa: https://themeisle.com/blog/install-xampp-and-wordpress-locally/

Hakusana: xampp wp install

  1. Kännistä XAMPP
  2. Lisää uusi tietokanta
    • XAMPP hallintapaneeli
    • MySQL -> admin -> tietokannat -> uusi
  1. Lataa WP
  2. Luo ja lataa uusi Underscore-teema
  3. Asenna wp lokaaliin ympäristöön
    • Etsi XAMPP kansio C:tä -> C:\xampp\htdocs
    • Luo uusi kansio (kennel-2019)
    • Siirrä kansioon wp-tiedosto ja pura (siirrä tiedostot kansion juureen)
    • Asenna WP osoitteessa: http://localhost/kennel-2019

OMAN TEEMAN LUOMINEN POHJATEEMALLA – Header – valikko

  1. Avaa header-template ja tutustu rakenteeseen
  2. Rakennetaan NAV-lohko yläreunaan
    • Kopio Bootsrap navbar ”skip content” lohkon jälkeen
    • Muokkaa nanbar tummaksi ”navbar-dark bg-dark”
    • Lisää Sitetitle ”navbar-brand” jos se ei ole navbar-elementissä (muokataan sisältö myöhemmin)
    • Poistetaan Div-lohko (<div class=”collapse navbar-collapse” …) ja kopioidaan sen tilalle wp_nav_menu
    • Lisätään tarvittavat muuttujat (arguments)
    • Poista ylimääräinen menu-valikko
<?php
	wp_nav_menu( array(
		'theme_location' => 'menu-1',
		'menu_id'        => 'primary-menu',
		'container_id'    => 'navbarText',
		'container_class' => 'collapse navbar-collapse',
		'menu_class'      => 'navbar-nav ml-auto',
	) );
?>

Navbar-brand : Muokataan ”sitetitle” linkiksi ja vaihdetaan siihen blogin nimi

  • bloginfo( ’name’ );
  • Url ->

OMAN TEEMAN LUOMINEN POHJATEEMALLA – Header – Jumbotron

Kopio Bootstrap jumbotron navin alapuolelle

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p
</div>
  1. Vaihdetaan sisällöt WP sisältöihin
    • bloginfo( ’name’ );
    • bloginfo( ’description’ );
  2. Listätään taustakuva css-style atribuutilla
  3. viimeistellään ulkoasu
<div class="jumbotron text-white py-2" style="background-image:url('<?php header_image(); ?>')">

Mukautetaan jumbotron näkymään vain etusivulla

  • luodaan if -ehto etusvulle
  • if ( is_front_page()):