Dodano 2016-11-19 14:06:35 przez Daniel
Zazwyczaj gdy tworzymy stronę internetową składającą się z więcej niż jednej podstrony (nie onepage) strona taka zawiera powtarzające się elementy, na każdej z podstron. WordPress udostępnia doskonały system umożliwiający zaprogramowanie tych elementów raz aby były widoczne w obrębie całej strony lub gdzie chcemy je umieścić. Najpopularniejsze z nich to nagłówek i stopka, którymi zajmiemy się w tej części oraz sidebar, w którym umieszczamy różne widgety (taki panel boczny), którym zajmiemy się w następnej części.
Na początek zajmiemy się częścią nagłówkową naszej strony. Na początek dodajemy do katalogu naszego szablonu plik o nazwie header.php. W nim zawrzemy wszystkie elementy, które znajdą się na początku naszego kodu strony. Tradycyjnie jak to bywa w HTML zaczynamy od otwarcia znaczników strony:
<!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js">
Warto tutaj zwrócić uwagę na funkcję language_attributes(); , która jak łatwo się domyślić zwraca atrybut językowy ustalony w kokpicie. Oczywiście można go wpisać na sztywno ale wtedy nasz szablon będzie mniej elastyczny.
Następnie umieszczamy część nagłówkową strony:
<head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php wp_head(); ?> </head>
Tutaj warto zwrócić uwagę na dwie funkcje:
A dalej to już się zaczyna właściwa część naszej strony czyli w zasadzie to umieszczamy to co tylko chcemy. Najpopularniejszymi elementami umieszczanymi w części nagłówkowej są: jakieś logo, tytuł strony i menu. Menu omówimy w dalszych częściach a tutaj umieścimy sobie logo i tytuł strony. Na początek otwieramy ciało:
<body <?php body_class(); ?>>
Funkcja body_class() wyświetla klasy ciała.
A następnie nagłówek:
<header>
<img src="<?= get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?= bloginfo("name");?>" />
</header>
Tutaj użyliśmy od razu dwóch elementów. Jako parametru „alt” użyliśmy nazwy naszego bloga, zdefiniowanego przy instalacji lub w kokpicie za pomocą funkcji bloginfo(„name”) oraz umieściliśmy linku do obrazku. Funkcja get_styleszeet_directory_uri(); zwraca ścieżkę do katalogu z naszym szablonem. Później będziemy tej funkcji używać do dołączania innych plików takich jak obrazy, style czy skrypty js.
Teraz jeszcze pozostaje stworzenie podkatalogu w katalogu naszego szablonu na obrazki o nazwie images i umieszczenie w nim loga lub jakiegoś obrazka o nazwie logo.png.
Teraz aby wykorzystać nasz plik nagłówkowy wklejamy na początku dokumentu index.php i wszędzie tam gdzie chcemy umieścić część nagłówkową strony funkcję php get_header();. No i to by było na tyle, na ten moment po odświeżeniu naszej strony testowej powinniśmy otrzymać obrazek z logo w naglówku.
W przypadku stopki sytuacja wygląda dość analogicznie do nagłówka. Na początku tworzymy plik footer.php w katalogu naszego szablonu, następnie umieszczamy to co chcemy aby było widoczne w stopce, dodajemy funkcję odpowiedzialną za dodawanie pozostałych elementów, które mają się znaleźć w stopce, dodane przez wordpress i wtyczki a następnie zamykamy dokument:
<footer>
Daniel Kuczewski
</footer>
<?php wp_footer(); ?>
</body>
</html>
Tutaj najważniejsze jest aby pamiętać o dodaniu funkcji wp_footer() , ponieważ to właśnie ona jest odpowiedzialna za dodanie tego co wordpress dodaje przy końcu dokumentu. Tutaj właśnie przeważnie umieszczamy skrypty js.
To by było na tyle w tej części. Końcowy efekt jeszcze nie jest zbyt powalający i wygląda jak na obrazku poniżej:
Jak zwykle dołączam też kod naszego szablonu po tej części. zwp2
2016-11-26 10:14:57
zapowiada się bardzo fajny materiał o wp :) sam co nie co działam na wordpress w temacie projektowania stron więc się przyda, natomiast popracowałbym tylko nieco nad warstwą wizualną i była by gitara.