Budujemy własny motyw WordPress cz. 1

Jak zapewne wiedzą osoby odwiedzające stronę na Facebook ruszyłam z kursem tworzenia szablonów z pomocą, których można budować motywy do WordPress. Czyli szaty graficzne.

Od razu uprzedzam, że nie będą to bardzo rozbudowane motywy. Jednak ich budowa może przysporzyć trochę problemów. Podczas kolejnych omawianych tematów postaram się jednak dodać do szablonów, motywu dodatkowe opcje.

Jakie pliki, szablony wchodzą w skład motywu?

Na początek warto zacząć od struktury motywu. Podstawowy motyw zawiera więc pliki takie jak:

  • index.php
  • header.php
  • footer.php
  • functions.php
  • 404.php
  • category.php
  • page.php
  • single.php
  • style.css

W skład niego mogą też wchodzić inne pliki jak np. search.php.

Tutorial został podzielony na kilka części:
Część 1 znajdziecie poniżej
Część 2 w kolejnym wpisie

Jeśli masz problem z kodem możesz już teraz pobrać fragment gotowego motywu.

Pobierz

Nazwy katalogów w większości są dowolne chociaż przeważnie występują następujące:

  • css
  • img lub images
  • js
  • include

W WordPress większość opcji jest przedefiniowana, co oznacza że zadaniem twórcy motywu jest jedynie utworzenie odpowiedniego pliku, szablonu. Plik ten musi oczywiście posiadać określoną strukturę z od wołaniami do odpowiednich funkcji.

Obecnie większość nowych szablonów wożona jest tak by mogła być responsywna dlatego postanowiłam tworząc ten tutorial mieć to na uwadze. Nie użyje jednak Bootstrap gdyż wymaga on wielu modyfikacji użyje za to bardzo prostego skeleton. Nie posiada on wielu opcji, ale dla małego projektu się sprawdzi. Dodatkowo nie trzeba będzie go mocno modyfikować by uzyskać pożądany efekt.

Tak więc zaczynamy.

Co nam będzie potrzebne

Pobieramy pliki biblioteki CSS skeleton można je pobrać ze strony http://getskeleton.com/

Dodatkowo można pobrać również pliki:

  • https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js
  • http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
  • http://getskeleton.com/js/site.js
  • http://getskeleton.com/css/github-prettify-theme.css
  • http://getskeleton.com/css/custom.css

Pliki .CSS umieszczamy w katalogu css a .JS w js – zachowujemy układ jaki ma biblioteka skeleton

Ułatwi to pracę jeżeli nie jesteśmy zaawansowanymi programistami i samodzielnie nie potrafimy tworzyć responsywnych stron (RWD) obecnie to standard. Alternatywnie można pobrać inną bibliotekę dającą RWD jak Bootstrap.

Paczka Skeletona zwiera 2 katalogi CSS i images z plikami oraz plik index.html.

Jeżeli nie posiadamy edytora kodu trzeba go ściągnąć (Notatnik się do tego nie nadaje ze względu na kodowanie strony). Ja wykorzystuje do tych celów najczęściej Notepad++, jest to darmowy program przypominający Notatnik więc obsługa nie powinna sprawić nikomu problemu.

Trzeba również mieć postawionego WordPressa np. na localhost (ja używam serwera XAMPP) lub na serwerze w internecie.


Kiedy już posiadamy to wszystko możemy przystąpić do pracy. Zaczynamy od utworzenia folderu, w którym zbudujemy nasz template a w nim na początek dodajemy:

  • index.php
  • header.php
  • footer.php
  • functions.php
  • style.css

header.php – nagłówek

Zaczniemy może od zawartości pliku header.php. Będzie to nagłówek w naszym motywie a jego szablon przedstawia się następująco:

<!DOCTYPE html>
<!--[if IE 7]>
  <html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
  <html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
  <html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width">
     <title><?php wp_title( '|', true, 'right' ); ?></title>
   <link rel="profile" href="http://gmpg.org/xfn/11">
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script> 
   $(document).ready(function(){
     $("#flip").click(function(){
       $("#panel").slideToggle("slow");
     });
   });
  </script>
</head>
<body <?php body_class(); ?>>
<header id="top" role="banner" class="container">

  <div class="row">
   <div class="three columns"><a href="/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.png" alt="Twoje logo" style="width:120px;"/></a> 
    <div id="flip">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
	</div>
   </div>
   <div class="nine columns"></div>
   <div class="twelve columns">
   <hgroup>
				<h3 id="site-title">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
				<?php bloginfo( 'name' ); ?></a> </h3>
				<p><?php bloginfo( 'description' ); ?></p>
    </hgroup>
    <nav class="nav-collapse navbar" id="panel">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'navbar-list', 'menu_id' => 'primary-menu' ) ); ?>
    </nav>
   </div>
  </div>
</header>

Jeśli dobrze się przyjrzeć to w kodzie tym znajduje się deklaracja podstawowych funkcji niezbędnych w szablonie.

<?php wp_head(); ?>

W miejscy powyższego kodu zostaną umieszczone odnośniki do wszystkich styli CSS oraz skryptów wykorzystanych później.

<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

Z kolei ten kod dobiera odpowiednio informację o języku naszego szablonu. Jak widać nie jest to sztywne ustawienie.

Teraz by szablon był bardziej funkcyjny dodamy do niego menu.

<nav class="nav-collapse" id="panel">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'navbar-list', 'menu_id' => 'primary-menu' ) ); ?>
</nav>

oraz

<div id="flip"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button></div></div>

W całości kod z zastosowaniem formatowania będzie prezentował się tak:

<div class="container">
  <div class="row">
   <div class="three columns"><a href="/"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.png" alt="SSS" style="width:120px;"/></a> 
    <div id="flip">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button></div></div>
   <div class="nine columns">
    <nav class="nav-collapse" id="panel">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'navbar-list', 'menu_id' => 'primary-menu' ) ); ?>
    </nav>
   </div>
  </div>
</div>

Za pomocą zmiennej umieszczonej poniżej można uzyskać adres do aktualnie wykorzystywanego szablonu. Jest to bardzo przydatne gdyż nie musimy podawać całego adresu do np. obrazków umieszczonych w szablonie.

<?php echo esc_url( get_template_directory_uri() ); ?>

Więcej o odnośnikach do strony głównej.

index.php

Teraz pora na index.php

<?php get_header(); ?>

<div class="container">
  <div class="row">
     <?php while ( have_posts() ) : the_post() ?>
   <div class="entry-content">
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?>
        <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&amp;after=</div>') ?>
      </div><!-- .entry-content -->
    </article>
    <?php endwhile; ?>
  </div> 
</div>

<?php get_footer(); ?>

Powyższy kod wypisze stronę główną jeżeli ta będzie statyczną stroną, będziemy mieć jednak problemy z stroną blogową.

<?php get_header(); ?>

<div class="container">
  <div class="row">
    <?php if ( is_home() ){ ?>
      <h1 class="entry-title">Blog</h1>
   <?php } ?>

<?php while ( have_posts() ) : the_post() ?>
    <div class="entry-content">
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     <?php if ( is_home() ){ ?>

<div class="imgpost four columns"><?php the_post_thumbnail(); ?></div>
<div class="content nine columns">
<div class="title"><h3 class="entry-title"> <?php echo get_the_date( 'Y-m-d' ); ?> | <?php the_title(); ?></h3></div>
<?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?></div>

<?php } else{ ?>

<h1 class="entry-title"><?php the_title(); ?></h1>
<?php the_content( __( 'Continue reading <span class="meta-nav">&amp;raquo;</span>', 'your-theme' ) ); ?>
<?php } ?>
<div class="clear"></div>

<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&amp;after=</div>') ?>
</div><!-- .entry-content -->


<div class="clear"></div>
</article>
<?php endwhile; ?>
</div>
</div>

<?php get_footer(); ?>

Trochę objaśnień:

Powyższy kod spina w pewnym sensie całą stronę poprzez dodanie odwołań do pozostałych elementów:
Dodanie header.php

<?php get_header(); ?>

Dodanie footer.php

<?php get_footer(); ?>

footer.php

Kolejnym elementem jest footer.php

<footer>
<div class="container">
<div class="clear"></div>

<p>Copyright &copy; </p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

functions.php

Kiedy mamy już te elementy pora na to by szablon stał się zdatny do użytku. W tym celu tworzymy plik functions.php na razie umieścimy w nim tylko kilka elementów.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );
function enqueue_and_register_my_scripts()
{
//register scripts for our theme
wp_register_script('jquery-min', get_stylesheet_directory_uri() . '/js/jquery.min.js');
wp_register_script('run_prettify', get_stylesheet_directory_uri() . '/js/run_prettify.js' );
wp_enqueue_script( 'site', get_stylesheet_directory_uri() . '/js/site.js' );

}

function shape_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'shape_scripts' );

add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary', __( 'Primary Menu', 'nazwa-szablonu' ) );
register_nav_menu('second-menu', __('Second Menu'));
}
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'nazwa-szablonu' ),
) );

add_theme_support( 'post-thumbnails');
function remove_more_link_scroll( $link ) {
$link = preg_replace( '|#more-[0-9]+|', '', $link );
return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<div class="more"><a class="more-link" href="' . get_permalink() . '">Zobacz</a></div>';
}

function cats_meow($glue) {
$current_cat = single_cat_title( '', false );
$separator = "n";
$cats = explode( $separator, get_the_category_list($separator) );
foreach ( $cats as $i => $str ) {
if ( strstr( $str, ">$current_cat<" ) ) {
unset($cats[$i]);
break;
}
}
if ( empty($cats) )
return false;

return trim(join( $glue, $cats ));
}

?>

Każda z tych funkcji pełni inną rolę.

Po zadeklarowaniu poniższej funkcji trzeba utworzyć katalog o nazwie „js” i umieścić w nim pliki javascript (kończące się na js).

add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );
function enqueue_and_register_my_scripts()
{
//register scripts for our theme
wp_register_script('jquery-min', get_stylesheet_directory_uri() . '/js/jquery.min.js');
wp_register_script('run_prettify', get_stylesheet_directory_uri() . '/js/run_prettify.js' );
wp_enqueue_script( 'site', get_stylesheet_directory_uri() . '/js/site.js' );

}

W WordPress skrypty najlepiej dodawać w ten sposób.

Teraz pora na dodanie skryptów CSS. Dzięki tej funkcji po utworzeniu pliku style.css będzie on się automatycznie wczytywał.

function shape_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'shape_scripts' );

Kolejny fragment umożliwia nam dodanie własnego menu co z pewnością ułatwi personalizacje szablonu

add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary', __( 'Primary Menu', 'nazwa-szablonu' ) );
register_nav_menu('second-menu', __('Second Menu'));
}
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'nazwa-szablonu' ),
) );

Teraz pora na dodanie możliwości umaszczenia obrazków do wpisu. Nie jest to obowiązkowe, ale szablon będzie o wiele ciekawszy.

add_theme_support( 'post-thumbnails');

Następnie przychodzi czas na red more czyli czytaj dalej. W tym przykładzie przetłumaczyłam to na Zobacz.

$link = preg_replace( '|#more-[0-9]+|', '', $link );
return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<div class="more"><a class="more-link" href="' . get_permalink() . '">Zobacz</a></div>';
}

style.css

W ostatnim kroku utworzymy plik style.css.

/*
Theme Name: WP test
Theme URI: http://www.aurainweb.pl
Description: Przykładowy szablon.
Author: Aura
Author URI: http://www.aurainweb.pl
Version: 1.0
Tags: responsive, white, scelton

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This simple theme was built using the example Sceleton theme "Basic marketing site" found on the Bootstrap
*/

@import url('css/normalize.css');
@import url('css/skeleton.css');
@import url('css/custom.css');

Poniżej tej deklaracji samodzielnie uzupełnia się plik styli. Warto też pamiętać by dodać pozostałe style w katalogu css

Skeleton i dociągnięte do niego style i skrypty powinien część pracy wykonać za nas. Nie posiada on jednak typowych dla WordPress klas oraz nie ma responsywnego menu dlatego do pliku style.css trzeba dopisać

img{
	max-width: 100%;
	height:auto;
} 
a{
 text-decoration: none;
}
header.container{
	margin-bottom:30px;
}
 
#primary-menu{
 list-style: none;
}
 .navbar-list{
	width:100%;
}
.navbar-list{
	width:100%;
}
.navbar-list li{
	display: inline-block;
	position:relative;
}
.navbar-list li a{
	display: block;
    padding: 21px 10px;
	margin: 0;
}
.navbar-list li ul{
	width: 100%;
    padding: 0;
    margin: 0;
}
.navbar-list li ul li{
	display: none;
    padding: 10px;
    position: absolute;
    top: 40px;
    background: #fff;
    z-index: 100;
    margin: 0;
	border-bottom: 1px dashed #000;
}
.navbar-list li:hover ul li{
	display: inline-block;
}
 .navbar-list li:hover ul li a{
	 padding:15px;
 }
@media screen and (min-width: 750px) {

.nav-collapse ul ul{
	z-index:1;
	}
.nav-toggle {
	display:none;
}
#flip{
	display:none;
	}
#panel{ 
	display: block !important;
}

.home .oferty .column, .home .oferty .columns, .category .oferty .columns{
	margin-left: 2%;
	}
.home .column:first-child, .home .columns:first-child{
	margin-left: 0%;
	}
.navbar-list li:last-child a{
	border-right:none;
	}
}
@media screen and (max-width: 750px) {
#panel {
padding: 5px;
text-align: center;
background:#0a0a0a;
}
#flip {
padding: 5px;
text-align: center; width:30px;
float:right;
}
 
#panel {
padding: 0px;
display: none;
position: relative;
width:100%; z-index: 1;
}
#panel .navbar-list{width:100%; display:block; background:#0a0a0a;}
#panel .navbar-list li {border-bottom:1px solid #fff;}
#panel .navbar-list li a{color:#fff;}
 
.navbar-toggle {
 position: relative;
 float: right;
 padding: 9px 10px;
 margin-top: 8px;
 margin-right: 15px;
 margin-bottom: 8px;
 background-color: transparent;
 background-image: none;
 border: 1px solid #ddd;
 border-radius: 4px;
 width: 45px;
}
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 border: 0;
}
.navbar-toggle .icon-bar {
 background-color: #ddd;
 display: block;
 width: 22px;
 height: 3px;
 border-radius: 1px;
 margin-bottom:3px;
}
}

Warto Pamiętać że:

Theme Name: WP test – to nazwa motywu
Tags: responsive, white, scelton :tagi, hasła do motywu

Masz problem pobierz gotowy fragment szablonu.

Pozostałe części motywu pokaże jak utworzyć w kolejnych częściach.

Budujemy własny motyw WordPress cz. 2