Tworzymy szablon WordPress – strona internetowa

,

Jak zrobić stronę internetową własny szablon WordPress?

Strona HTML w WordPress składa się z kilku części:

Z nagłówka strony, gdzie zawarte są informacje takie jak tytuł strony, opis, słowa kluczowe i inne takie jak autor strony. Określony jest sposób kodowania znaków, dla języka polskiego stosujemy utf-8. Podany jest link do stylów strony i innych potrzebnych funkcji. Strona HTML generuję się przy pomocy funkcji wywołanych w kodzie PHP, np. wp_head(). WordPress posiada mechanizmy uzupełniania tej części szablonu strony o różne pliki oraz style zainstalowanych wtyczek. Jeśli pominiemy funkcję wp_head() to włączone wtyczki mogą nie działać lub ich działanie będzie nieprawidłowe.

W przedstawionym darmowym szablonie WordPress menu wstawione zostało tutaj, za pomocą kodu

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

 

nagłówek – header.php

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> szablon WordPress<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/FOLDER - SZABLON STRONY INTERNETOWEJ/style.css" type="text/css" />   <title><?php bloginfo('name'); ?></title>
 <?php wp_head(); ?> //  funkcja wgrywa wszystkie ustawienia wordpress dla head. 
</head>  <body>   <header>
 <nav><?php wp_nav_menu(array('sort_column' => 'menu_order', 'theme_location'=>'menu')); ?></nav>
 </header> 

Z głównego pliku serwisu index.php, gdzie mamy zawartość strony startowej. Tutaj szablon strony internetowej korzysta z funkcji get_header() oraz get_footer(), czyli przekazujemy kod, który jest zawarty w header.php oraz footer.php.


strona główna – index.phpphp

<?php get_header(); ?>  KOD STRONY  <?php get_footer(); ?> 

Panel boczny, inaczej kolumna występująca po lewej lub prawej stronie. W tej części można wyświetlić na przykład menu z ofertą. W naszym szablonie nie ma obsługi widgetów, ale zazwyczaj sidebar.php zawiera takie mechanizmy i można dzięki tej funkcji dodawać elementy takie jak:

  • kalendarz
  • ostatnie wpisy
  • archiwum
  • panel logowania
  • menu

panel-boczny – sidebar.php

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

Do tej pory nic nie było na temat wyświetlania stron. Tą funkcję realizuje przedstawiony kod umieszczony w pliku page.php. Mamy na początek  get_header() czyli część HEAD oraz w naszym przykładzie menu strony, następnie wyświetla się treść strony i kończy wstawieniem bocznego menu oraz stopki strony.

podstrona – page.php

<?php get_header(); ?>
 <section>
 <?php
 if ( have_posts() ) while ( have_posts() ) : the_post();   strona html   the_content();
 endwhile;
 ?>
 </section>
 <?php get_sidebar(); ?>
 <?php get_footer(); ?> 

Najbardziej rozbudowany plik single.php. Lista wpisów na stronie WordPress jest wyświetlana  z wykorzystaniem kliku nowych funkcji:

the_content(‚Czytaj dalej &raquo;’) – link do całości wpisu.

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

the_category(‚, ‚) – kategorie do której wpis został przypisany.

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

the_author() – autor wpisu.

comments_template() – komentarze.

wpis na stronie – 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 class="category"><?php the_time('F , Y') ?> <!-- by <?php the_author() ?> --></div>
 </div>
 </article>
 <article>
 <?php comments_template(); ?>
 <?php endwhile; else: ?>
 <p>Przepraszamy, brak wyników wyszukiwania</p>WordPress       <?php endif; ?>
 </article>
 <?php get_sidebar(); ?>
 </section>
 <?php get_footer(); ?> 

funkcje – functions.php

<?php register_nav_menus(array('menu1' => 'Menu1', 'menu2' => 'Menu2')); ?>  

Stopka strony to gównie funkcja get_footer(), ale inne informacje takie jak prawa do zdjęć i treści na stronie.

stopka – footer.php

<?php get_footer(); ?> 
</body>

Wszystkie pliki to pliki PHP natomiast wynikiem jest strona HTML, ponieważ kod PHP jest wykonywany po stronie serwera.

W katalogu wp-content/themes znajdują się foldery z szablonami stron. To tutaj należy umieścić pliki stworzonego szablonu.

 

STRONNET Sylwia Płonka

Z pasji do informatyki Sylwia Płonka właściciel firmy STRONNET

1 Odpowiedz
  1. Admin
    Admin says:

    Jeśli masz pytania odnośnie elementów szablonu WordPress dołącz się do dyskusji na ten temat.

Odpowiedz

Chcesz dołączyć do dyskusji?
Pisz śmiało!
Proszę, nie krępuj się pisać!

Dodaj komentarz

Twój adres email nie zostanie opublikowany.