Nagłówek i stopka customowego motywu WordPress
Dzisiaj zajmiemy się (tak jak w tytule) kolejnymi częściami naszego motywu i jest to druga część kursu. Tak jak wspominałem w części pierwszej nasz motyw będzie składał się kilku plików, a każdy z nich będzie odgrywał swoją kluczową rolę.
Zadania, które dzisiaj wykonamy to:
- stworzymy pliki header.php i footer.php naszego customowego motywu do WordPressa,
- podepniemy i wstępnie skonfigurujemy główne menu naszej strony,
- podepniemy style i skrypty.
Motyw (skórka) WordPressa a szablony
Na wstępie warto wyjaśnić kwestię, która często jest mylona. Motyw (skórka,theme) w WordPressie to nie szablon. Dla całego naszego serwisu opartego na WP możemy ustawić jednorazowo jeden motyw (skórkę), który składa się z różnych szablonów. Na przykładzie: cały nasz serwis ma motyw XXX, strona główna ma szablon YYY, zakładka kontakt ma szablon ZZZ. Motywy wgrane do naszego WP znajdziemy w kokpicie w zakładce Wygląd -> Motywy. Screen:
Natomiast szablony wybieramy w panelu bezpośrednio przy edycji jakiejś podstrony – screen:
Pamiętajmy, że nie zawsze nasz motyw będzie posiadał szablony dla podstron. My w dalszej części kursu będziemy je tworzyć.
Wiemy już czym się różni motyw od szablonu teraz wytłumaczmy sobie jeszcze jedną kwestię. Jeśli spojrzymy na jakiś serwis internetowy to zauważymy, że nagłówek i stopka (często także sidebar) są elementami występującymi (a tym samym powtarzającymi się) na każdej podstronie. Można powiedzieć, że są to fundamenty każdej podstrony. My także do każdego naszego szablonu (czy to strony głównej czy podstrony bloga) będziemy dodawać taki sam nagłówek i stopkę nie tylko po to, żeby nasz serwis był spójny, ale także ze względu na funkcje, które będą tam zawarte.
Nagłówek naszego motywu czyli plik header.php
Nasz plik header.php będzie wyglądał następująco:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<title><?php wp_title( '| ', true, 'right' ); ?></title>
<?php wp_head(); ?>
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.png" />
</head>
<body <?php body_class(); ?>>
Omówmy pokrótce co się tutaj znajduje i dlaczego.
W zasadzie jeśli kiedykolwiek miałeś styczność z kodem html i wiesz jak zbudowana jest strona internetowa bez WP to nasz „nagłówek” nie będzie się wiele różnił od sekcji head strony pisanej w czystym html, a jedynie tym, że użyjemy pierwszych naszych funkcji wordpressowych.
Funkcja language_attributes – funkcja ta podepnie nam atrybut języka, który jest wybrany przez nas w naszym panelu. Robiąc stronę w czystym html ustawiamy to na sztywno, tutaj używamy fukcji po to, aby w przypadku zmiany języka witryny w panelu automatycznie nam się to podmieniło.
Funkcje bloginfo(‚html_type’) i bloginfo(‚charset’) – funkcje te podepną nam m.in. kodowanie znaków.
Po uruchomieniu naszego motywu możemy zajrzeć w kod źródłowy naszej strony (ctrl+u) i zobaczyć jak to wygląda w praktyce. Screen:
Widzimy tutaj, że kodowanie zostało ustawione na UTF-8 (z polskimi znakami).
Następnie definiujemy tryb zgodności i wsparcie dla responsywności:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Podpinamy funkcję pingbacków dla naszej witryny:
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Definiujemy, aby znacznik meta title był domyślnie pobierany z panelu.
<title><?php wp_title( '| ', true, 'right' ); ?></title>
Istnieje wiele możliwości tworzenia takiego tytułu. Osobiście ten uważam za najpopularniejszy – w praktyce wygląda on tak: tytuł wpisu | nazwa witryny. Możecie go podejrzeć na blogu webdevmaster.pl, który właśnie czytacie 🙂
Oczywiście meta title i meta description później można definiować dla wszelakich podstron i wpisów samodzielnie w panelu przy użyciu pluginów do SEO np. All in One SEO Pack czy Yoast SEO.
Teraz kluczowa funkcja w headzie naszej witryny:
<?php wp_head(); ?>
Dzięki zastosowaniu tej funkcji WP m.in. wstawia nam style i js-y zdefiniowane w pliku functions.php, linki alternatywne czy style i js-y od zainstalowanych pluginów.
Polecam po wywołaniu jej, zajrzeć do źródła strony i przejrzeć kod, który został tam wstawiony przez WP.
Dodajmy jeszcze favicon do naszej witryny, tak aby ładnie prezentowała się w przeglądarce.
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.png" />
Funkcja get_stylesheet_directory_uri zwróci nam ścieżkę plików względem naszego motywu. Swój favicon mam w katalogu images i nazwałem go favicon.png – stąd po wywołaniu funkcji dopisałem dalszy ciąg ścieżki.
Między znacznikami head naszej witryny możemy umieścić również m.in:
- kody google analytics, google search console czy yandex metrica,
- kod dopinający czcionki z google fonts,
- informacje o kanałach RSS.
Sekcję do zamknięcia znacznika head mam już skończoną, jednak to jeszcze nie koniec kodu w pliku header.php. W związku z tym, że każdy szablon mojego WP będę rozpoczynał od pobrania zawartości pliku header.php chcę dodać tutaj jak najwięcej elementów/funkcji, które będą powtarzalne na wszyskich podstronach i wpisach. Niewątpliwie umieszczę tutaj jeszcze kod html z górną belką widoczną na stronie (z logotypem i głównym menu). Sekcję body rozpocznę w pliku header.php, a zamknę dopiero w stopce:
<body <?php body_class(); ?>>
Po otwarciu znacznika body wywołuję także funkcję body_class, dzięki której WordPress podpina mi różnego rodzaju klasy do każdej podstrony, co bardzo ułatwia pracę.
Przejdźmy do przygotowania górnej belki naszej strony – zaczynam od wyświetlenia logotypu, będącego zarazem linkiem do strony głównej. Używam następującego kodu:
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/nazwa-pliku-z-Twoim-logo" alt="Alternatywny tekst Twojego logotypu">
</a>
Użyłem tutaj dwóch funkcji WordPressowych:
- esc_url(home_url(’/’)) – funkcja zwracająca adres strony głównej naszego serwisu,
- get_template_directory_uri – funkcja, która zwróci nam ścieżkę do katalogu względem której definiuję położenie mojego logotypu. U mnie jest on w folderze images, stąd po zwróceniu adresu przez funkcję doklejam resztę ścieżki ręcznie.
Logotyp pojawił się w naszej górnej belce, teraz kolej na menu.
Jak zrobić własne menu na WordPressie?
Wdrożenie własnego menu składa się z trzech 'części’:
- zarejestrowania nowego menu w pliku functions.php,
- zbudowania menu w panelu administracyjnym,
- zaimplementowania menu w wybranym miejscu w naszym szablonie.
Jeśli wszystko wykonamy zgodnie ze sztuką, nasze menu będzie całkowicie edytowalne z poziomu panelu WordPressa. Będzie można dodawać, usuwać i edytować jego elementy.
Zacznijmy od zarejestrowania menu. Tworzymy sobie w naszym katalogu skórki plik functions.php. Tak jak wspominałem w poście plik ten jest nam niezbędny, ponieważ będziemy przechowywać w nim nasze funkcje. Jedną z nich jest właśnie zarejestrowanie menu. Dodajmy w tym pliku następujący kod:
<?php register_nav_menus( array( 'main_menu' => 'Main Menu',
)
);
add_action( 'init', 'register_nav_menus' ); ?>
W panelu administracyjnym WP w zakładce Wygląd->Menu wybieramy w prawym okienku opcję utwórz nowe menu. Nazywamy je jak chcemy i poniżej zaznaczamy w opcji 'Wyświetl lokalizację’ to miejsce, które zdefiniowaliśmy w functions.php. W moim przydku jest to 'Main Menu’. Nawigacja została utowrzona, ale na obecną chwilę jest pusta.
Tak więc z okienka po lewej stronie wybieramy elementy, które chcemy umieścić w nawigacji.
Jak widzimy mamy tam 4 zakładki:
- strony,
- wpisy,
- własne odnośniki,
- kategorie.
Wybrane elementy zaznaczamy checkboxem i klikamy 'Dodaj do menu’ po czym zatwierdzamy przyciskiem 'Zapisz menu’. Elementy możemy dowolnie przesuwać / zagłębiać metodą przeciągnij i upuść.
Teraz zaimplementujmy menu w naszym pliku header.php:
<?php wp_nav_menu(array('theme_location' => 'main_menu',)); ?>
Jeśli wszystko wykonałeś jak powyżej Twoje menu powinno wyświetlić się na stronie.
Co prawda narazie nie mamy styli do niego, więc nie wygląda najlepiej, ale mamy gotową mechanikę – z poziomu panelu możemy zmieniać / edytować / dodawać jego elementy. Jeśli zajrzysz w źródło strony zauważysz, że całe menu jak i jego elementy dostały sporo dodatkowych klas html, dzięki czemu jego stylowanie będzie łatwiejsze:
Chcąc podpiąć cały nasz kod z pliku header.php użyjemy w kolejnych szablonach funkcji:
<?php get_header(); ?>
Footer.php czyli stopka naszego motywu
Tak jak wcześniej wspominałem zarówno nagłówek jak i stopka zwykle powtarzają się na każdej podstronie, w związku z tym nasz plik footer.php też będziemy podpinać do każdej innej templatki naszego motywu. Co powinna zawierać stopka naszego motywu?
Przeanalizujmy poniższy kod mojego pliku footer.php:
<footer>
Wybrane przeze mnie informacje.
</footer>
<?php wp_footer(); ?>
</body>
</html>
Dla części typowo frontowej w stopce naszego motywu dodaje jakieś informacje, które chce aby wyświetlały się na całym serwisie.
Oczywiście dowolnie możemy sobie tutaj konfigurować stopkę: na wielu serwisach internetowych w stopce są menu, informacje o polityce cookies, informacje o właścicielu serwisu.
Stopka powinna zawierać również następujące rzeczy:
- funkcję wp_footer();
- domknięcie naszego tagu body
- domknięcie naszego tagu html
Objaśnijmy:
Funkcja wp_footer() dopina (podobnie jak wp_head()) różnego rodzaju style i skrypty, które wykonują się przed zamykającym się znacznikiem body. Jeśli zajrzymy do kodu źródłowego naszego serwisu i odnajdziemy miejsce w którym ta fukcja wykonuje jakieś operacje, zauważymy że zarówno nasze skrypty jak i skrypty niektórych pluginów, ktore mamy na naszym serwisie, dopinane są w tym miejscu. Kwestia czy style i js-y powinny się ładować w headzie czy w footerze naszego serwisu jest kwestią optymalizacji i na pewno kiedyś ten temat poruszę.
Chcąc podpiąć zawartość naszego pliku footer.php używamy następującej funkcji:
<?php get_footer(); ?>
Podpięcie własnych styli i skryptów pod motyw
W katalogu naszej skórki w pliku functions.php ( tam gdzie dodawaliśmy funkcję rejestrowania menu) dodajmy po prostu funkcję implementującą nasze style i skrypty.
Kod odpowiedzialny za te funkcjonalności będzie wyglądał następująco:
function register_my_style()
{
wp_enqueue_style('style.css', get_template_directory_uri() . '/style.css', array(), '1', 'all');
wp_enqueue_script('script.js', get_template_directory_uri() . '/scripts/script.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'register_my_style');
Mój plik ze stylami nazywa się style.css i jest w bezpośrednim katalogu mojej skórki, natomiast plik ze skryptami nosi nazwę script.js i znajduje się w katalogu scripts – stąd po wywołaniu funkcji get_template_directory_uri() dodaję jeszcze ścieżkę katalogu.
Gotowe.
Po spojrzeniu w źródło naszego serwisu zauważamy, że nasz plik ze stylami załadował się w headzie naszego serwisu, a plik z javascriptami w footerze.
W następnej części kursu tworzenia własnych motywów do WP zajmiemy się listowaniem naszych postów.
Bardzo dobry poradnik! Warto przedłużać. 😉
Dzięki. Naprawdę dobry tekst.
Wielki szacunek. Bardzo pomocny Poradnik!