Reklama sponsora

2. Nagłówek i stopka



Wstęp

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.

Nagłówek

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:

  • bloginfo( ‚charset’) – w tym przypadku pobieramy i wyświetlamy kodowanie strony. Bloginfo ma też kilka innych parametrów, całą ich listę można znaleźć na oficjalnej stronie Tutaj.
  • wp_head() – to bardzo ważne by umieścić tę funkcję w części „head” strony ponieważ ta funkcja załącza wszystkie elementy jakie w tej części dodaje WordPress, wtyczki do wordpressa oraz to co zdefiniujemy później w naszym szablonie. Mowa tutaj na przykład o stylach czy skryptach JavaScript.

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.

Stopka

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:

wsnis1

Jak zwykle dołączam też kod naszego szablonu po tej części. zwp2

 

 

Dodany przez best dating apps for gay men
2022-01-15 14:23:03

dating gay bbc meet twinks https://speedgaydate.com/

Dodany przez gay guy chat rooms no registration
2022-01-14 22:27:29

gay men webcame and chat https://gay-buddies.com/

Dodany przez dick.net gay chat
2022-01-14 18:23:24

gay video chat free https://gaytgpost.com/

Dodany przez gay black dating apps
2022-01-14 16:01:22

phone number dating gay https://gaypridee.com/

Dodany przez best free gay chat
2022-01-14 13:08:19

gay daddy cam chat https://bjsgaychatroom.info/

Dodany przez 2partaken
2022-01-13 00:42:00

1precept

Dodany przez hauerpower
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.


Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *