Tworzenie szablonu WordPress

WordPress to popularny CMS - system do zarządzania stroną internetową.

Tworzenie szablonu WordPress

3 października, 2017 Tworzenie strony, tworzenie motywu WordPress 0

Szablony WordPress są napisane w języku php i zawierają funkcje wbudowane. Pamiętajmy, że każda strona i wpis powinien mieć inny tytuł i opis.

Dla prawidłowego działania szablonu WordPress w pliku style.css musimy umieścić informacje o szablonie

/*
 Theme Name: Nazwa szablonu
 Description: Opis
 Author: Autor
 Version: 1.0
 */

 

Standardowy szablon składa się z kilku plików php:

  • nagłówek – header.php
  • panel boczny – sidebar.php
  • strona główna – index.php
  • funkcje – functions.php
  • strona – page.php
  • wpis – single.php
  • stopka – footer.php

 

Nagłówek szablonu

Zawiera tytuł strony, opis, słowa kluczowe i inne meta tagi. System kodowania znaków (dla języka polskiego stosujemy utf-8), link do stylów strony i funkcji JavaScript. WordPress posiada funkcję wp_head(), która  powinna być zastosowana w pliku header.php. Funkcja wp_head() wstawia te elementy odpowiednio dla wczytanej treści. Pominięcie funkcji spowoduje błędy włączone wtyczki mogą nie działać lub ich działanie będzie nieprawidłowe.

<!-- header.php -->
<!DOCTYPE html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<meta name="Description" content="OPIS STRONY" />

<meta name="Keywords" content="SŁOWA KLUCZOWE STRONY" />

<meta name="Author" content="AUTOR" />

<link rel="stylesheet" href="../wp-content/themes/SZABLON_STRONY/style.css" type="text/css" />

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

<?php wp_head(); ?>

</head>

<body>

<header>

<nav><?php wp_nav_menu(array('sort_column' => 'menu_order', 'theme_location'=>'menu')); ?></nav>

</header>

Strona główna szablonu

W pliku index.php  mamy zawartość strony startowej. Wstawiamy funkcję get_header(), która wstawia nagłówek strony oraz get_footer()  – stopka strony.

<!-- index.php -->
<?php get_header(); ?>

KOD_STRONY

<?php get_footer(); ?>

Panel boczny

Blok znajdująca się  po lewej lub prawej stronie zawierająca Widgety WordPress. W przykładzie nazwa_sidebar to nazwa stworzonego panelu w pliku function.php

<!-- sidebar.php -->
<?php dynamic_sidebar('nazwa-sidebar'); ?>

Strona WordPress

Plik page.php zawiera ustawienia dla strony szablonu WordPress i podobnie jak index.php  stawia nagłówek i stopkę

<!-- page.php -->
<?php get_header(); ?>

<section>

<?php

if ( have_posts() )
while ( have_posts() ) : the_post();
the_content();

endwhile;

?>

</section>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Wpis WordPress

Wpisy na stronie WordPress są wyświetlane z wykorzystaniem funkcji:

the_content(‚Czytaj dalej »’) – link do wpisu.

the_tags( ‚Tagi: ‚, ‚, ‚, ”) – słowa kluczowe podane przy tworzeniu wpisu.

the_category(‚, ‚) – kategorie wpisu.

the_time(‚F , Y’) – data utworzenia wpisu.

the_author() – autor wpisu.

comments_template() – komentarze.

<!-- single.php -->
<?php get_header(); ?>

<section>

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

<article>
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Link do <?php the_title_attribute(); ?>">
<?php the_title(); ?></a>
</h2>

<div class="entry">

<?php the_content('Czytaj dalej &raquo;'); ?>

<?php the_tags( 'Tagi: ', ', ', ''); ?>

</div>

<div class="categorylink">Temat: <?php the_category(', ') ?></div>

<div class="postmetadata">

<div>
<?php the_time('F , Y') ?> <!-- by <?php the_author() ?> -->
</div>

</div>

</article>

<article>

<?php comments_template(); ?>

<?php endwhile; else: ?>

<p>Brak wpisów</p>

<?php endif; ?>

</article>

<?php get_sidebar(); ?>

</section>

<?php get_footer(); ?>

Funkcje szablonu WordPress

Funkcje szablonu umieszczamy w pliku functions.php. W przykładzie rejestracja menu strony oraz panela bocznego.

<!-- functions.php -->
<?php
register_nav_menus(array('menu1' => 'Menu1', 'menu2' => 'Menu2'));  
register_sidebar ( array( ‚name’ => ‚nazwa-sidebar’, ‚description’ => ‚Panel boczny’, ‚before_widget’ => ‚<div class=”col-md-12″><div class=”panel”>’, ‚after_widget’ => ‚</div></div></div>’, ‚before_title’ => ‚<div><h3>’, ‚after_title’ => ‚</h3></div><div class=”panel”>’ ));
?>

Stopka strony

Może zawierać informacje takie jak prawa treści na stronie, menu oraz Widgety.

<!-- footer.php -->
<?php wp_footer(); ?>

</body>

Wszystkie pliki należy spakować do archiwum zip i wgrać na serwer z poziomu kokpitu WordPress lub umieścić w katalogu wp-content/themes/twoj_szablon przy pomocy klienta FTP.


Strony WordPress

Profesjonalny Hosting