Reklama sponsora

6. Szablon podstron i strony głównej



Szablon podstron?

W tej części nauczymy się tworzyć szablon strony głównej, określimy jak mają wyglądać standardowe podstrony oraz poznamy mechanizm wbudowany w WordPress pozwalający na tworzenie odmiennych szablonów dla różnych podstron.

Standardowy szablon podstrony

Na początek utworzymy sobie standardowy plik podstrony. Na ten moment nie mamy jeszcze odpowiedniego pliku pozwalającego na wyświetlanie treści podstron, ale zaczniemy od dodania takiej podstrony. Aby dodać podstronę przechodzimy w lewym menu kokpitu do zakładki „Strony” a następnie „Dodaj nową”.

W tym miejscu wypełniamy tytuł i jakąś treść, ja przeważnie używam do tego jakiegoś generatora treści „lorem ipsum” takiego jak tutaj. Po wypełnieniu tytułu i treści klikamy opublikuj. Jeśli są to standardowe ustawienia to powinien nam się ukazać link do naszej podstrony tak jak zostało to zaznaczone na obrazku poniżej.

Szablon podstrony - dodawanie strony

Klikamy w link naszej podstrony i.. nic się nie dzieje, po prostu strona główna. Teraz czas zakodować najprostszą jak to tylko możliwe podstronę.

Plik podstrony

Przechodzimy do kodowania. Aby dodać standardowy szablon podstrony tworzymy plik o nazwie page.php umieszczając go w katalogu głównym szablonu. W pliku pobierzemy nagłówek i stopkę oraz wyświetlimy tytuł i treść, tak jak na zamieszczonym poniżej listingu.


get_header();
?>
<h1><?php the_title();?></h1>
<?= apply_filters('the_content',$post->post_content);?>
<?php
get_footer();

W tym oto przykładzie przy okazji przedstawiam jak wykorzystuje się filtry do wyświetlania treści na stronie, tutaj między innymi wykonują się shortcode i możemy tego filtra wykorzystywać do wyświetlania własnych treści jeśli takowe zakodujemy.

W efekcie powinniśmy otrzymać podstawowy widok podstrony jak na obrazku poniżej.

Standardowa podstrona

No i na razie tyle jeśli chodzi o szablon podstawowej podstrony teraz przejdźmy do trochę bardziej nietypowych szablonów.

Szablon niestandardowy

Do tej pory nasza strona główna znajdowała się po prostu w pliku index.php, teraz utworzymy sobie niestandardowy szablon dla podstrony, dodamy podstronę o nazwie „Strona główna” przypiszemy do niej nasz szablon i ustawimy ją na stronę główną.

Plik szablonu strony głównej

Zaczynamy od utworzenia pliku o nazwie home.php następnie na początku pliku umieszczamy komentarz mówiący dla WordPressa że jest to szablon.


/* Template Name: Strona główna */

To jest najkrótszy możliwy komentarz ale powinien działać. Dalej umieszczamy kod naszej strony głównej, co tylko chcemy i potrzebujemy. Na nagłówek, trzy boxy i stopkę jak w kodzie poniżej, gdzie drugi box zawiera tytuł i treść podstrony.


/* Template Name: Strona główna */

get_header();
global $post;
?>
<div>Box 1</div>
<div>
 <h1><?= the_title();?></h1>
 <?= apply_filters('the_content',$post->post_content);?>
</div>
<div>Box 3</div>
<?php get_footer();?>

Analogicznie tworzymy szablony nie tylko dla strony głównej ale także dla innych podstron jeśli takowe mają się w jakiś sposób różnić. Oczywiście taki szablon można przypisać do wielu podstron.

Teraz potrzebujemy stronę główną, tworzymy ją analogicznie do przykładowej podstrony. Jeśli plik został umieszczony w katalogu głównym szablonu i zawiera komentarz to w panelu strony powinna się pojawić dodatkowa lista rozwijana z wyborem szablonu tak jak zostało to zaznaczone na obrazku poniżej.

Szablon strony głównej

Po zapisaniu pozostaje nam tylko ustawić tę podstronę na stronę główną. Aby to zrobić należy przejść do menu głównego i wybrać wygląd, a następnie personalizacja. Teraz powinien się pojawić podgląd strony, z lewego menu wybieramy ustawienia strony głównej i teraz z tych ustawień zaznaczamy statyczna strona główna po czym wybieramy utworzoną stronę, do której został przypisany szablon strony głównej tak jak na obrazku poniżej.

Ustawienia strony głównej

Klikamy opublikuj i od tej chwili stroną główną jest nasza podstrona.

To by było na tyle w tej części. Plik obecnej wersji szablonu po tej części można pobrać: zwp6

 

 


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *