{"id":233865,"date":"2023-02-23T09:41:00","date_gmt":"2023-02-23T06:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233865"},"modified":"2022-11-11T12:52:45","modified_gmt":"2022-11-11T09:52:45","slug":"samouczek-motywu-wordpress-dla-poczatkujacych-czesc-9-menu-i-obszary-widzetow","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/samouczek-motywu-wordpress-dla-poczatkujacych-czesc-9-menu-i-obszary-widzetow\/","title":{"rendered":"Samouczek motywu WordPress dla pocz\u0105tkuj\u0105cych \u2013 cz\u0119\u015b\u0107 9: Menu i obszary wid\u017cet\u00f3w"},"content":{"rendered":"\n

Ta lekcja opisuje, jak doda\u0107 dwie podstawowe funkcje WordPress do naszego motywu; menu i obszary wid\u017cet\u00f3w. Dowiadujemy si\u0119, jak zarejestrowa\u0107 lokalizacj\u0119 g\u0142\u00f3wnego menu nawigacyjnego witryny i wy\u015bwietli\u0107 menu w naszych szablonach, a tak\u017ce umo\u017cliwi\u0107 dodawanie wid\u017cet\u00f3w w naszym pasku bocznym i obszarze stopki.<\/p>\n

Zapewne zauwa\u017cyli\u015bcie, \u017ce ani \u201eMenu", ani \u201eWid\u017cety” nie s\u0105 dost\u0119pne z menu \u201eWygl\u0105d” w panelu administracyjnym. To dlatego, \u017ce nasz motyw jeszcze ich nie obs\u0142uguje. Naprawimy to w tej lekcji \u2013 zaczynaj\u0105c od menu .<\/p>\n

Menu WordPress<\/h2>\n

Dodawanie menu do motywu sk\u0142ada si\u0119 z dw\u00f3ch cz\u0119\u015bci. Najpierw musisz zdefiniowa\u0107 jedn\u0105 lub wi\u0119cej lokalizacji menu w swoim functions.php<\/code>. Przyk\u0142adem jest menu g\u0142\u00f3wne, kt\u00f3re b\u0119dzie znajdowa\u0107 si\u0119 w nag\u0142\u00f3wku wszystkich stron. Druga cz\u0119\u015b\u0107 to dodanie kodu w tym miejscu, kt\u00f3re chcesz wy\u015bwietli\u0107 w menu. Na przyk\u0142ad w header.php<\/code>miejscu, w kt\u00f3rym chcesz umie\u015bci\u0107 menu g\u0142\u00f3wne.<\/p>\n

Rejestrowanie lokalizacji menu<\/h3>\n

W tym samouczku dodamy jedn\u0105 lokalizacj\u0119 menu do g\u0142\u00f3wnej nawigacji witryny i umie\u015bcimy jej dane wyj\u015bciowe w naszym header.php<\/code>. Zacznijmy od zarejestrowania lokalizacji w functions.php<\/code>, co odbywa si\u0119 za pomoc\u0105 funkcji register_nav_menu<\/a> :<\/p>\n

add_action('init', 'wptutorial_register_menu');\nfunction wptutorial_register_menu() {\n    register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));\n}<\/code><\/pre>\n
Musimy podpi\u0105\u0107 si\u0119 pod hak init<\/code>, kt\u00f3ry WordPress uzna\u0142, \u017ce jest dobrym \u201epunktem kontrolnym” do rejestrowania lokalizacji menu. Wewn\u0105trz naszej funkcji wywo\u0142ujemy, register_nav_menu()<\/code>kt\u00f3ra przyjmuje minimum dw\u00f3ch parametr\u00f3w; uchwyt menu, kt\u00f3ry jest unikalnym \u015blimakiem, kt\u00f3rego b\u0119dziesz u\u017cywa\u0107 jako identyfikatora podczas renderowania menu, oraz widoczn\u0105 nazw\u0119 menu, kt\u00f3ra pojawia si\u0119 w panelu administracyjnym. Zwr\u00f3\u0107 uwag\u0119, \u017ce umie\u015bci\u0142em nazw\u0119 __()<\/code>w \u015brodku, aby mo\u017cna j\u0105 by\u0142o przet\u0142umaczy\u0107, jak dowiedzieli\u015bmy si\u0119 w poprzednim kroku<\/a>.<\/p>\n
\"Samouczek<\/a><\/p>\n
Je\u015bli od\u015bwie\u017cysz panel administracyjny, powiniene\u015b zobaczy\u0107 now\u0105 pozycj\u0119 podmenu pod \u201eWygl\u0105d”; \u201eMenu”. Gratulacje, Tw\u00f3j motyw obs\u0142uguje teraz tworzenie menu!<\/p>\n
Je\u015bli nie jeste\u015b zaznajomiony z tworzeniem i administrowaniem menu w WordPressie, jest to dobry przewodnik<\/a> dla Ciebie.<\/p>\n
Utw\u00f3rz nowe menu w \u201eWygl\u0105d > Menu” \u2013 mo\u017ce zawiera\u0107 wszystko, co chcesz, w\u0142a\u015bnie doda\u0142em fa\u0142szywe posty, kt\u00f3re stworzy\u0142em w moim WordPressie.<\/p>\n
Po zapisaniu pierwszego menu pod obszarem edycji menu pojawi si\u0119 nowa sekcja o nazwie \u201eUstawienia menu”, kt\u00f3ra pozwala wybra\u0107 lokalizacj\u0119 tego menu. Powinna zawiera\u0107 jedn\u0105 dost\u0119pn\u0105 lokalizacj\u0119, kt\u00f3r\u0105 stworzyli\u015bmy; "G\u0142\u00f3wna nawigacja".<\/p>\n
\"Samouczek<\/a><\/p>\n
Zaznacz pole \u201eG\u0142\u00f3wna nawigacja” i naci\u015bnij Zapisz. Teraz nowo utworzone menu jest po\u0142\u0105czone z lokalizacj\u0105 i b\u0119dzie wy\u015bwietlane automatycznie w dowolnym miejscu, w kt\u00f3rym dodasz kod, aby wy\u015bwietli\u0107 t\u0119 lokalizacj\u0119 menu. Zr\u00f3bmy to teraz.<\/p>\n
Wyprowadzanie lokalizacji menu w szablonie<\/h3>\n
Otw\u00f3rz header.php<\/code>i gdziekolwiek chcesz, aby by\u0142o wyj\u015bcie menu, dodaj wywo\u0142anie do wp_nav_menu()<\/code>. Ta funkcja akceptuje ca\u0142\u0105 mas\u0119 argument\u00f3w w tablicy, aby naprawd\u0119 dostosowa\u0107 wyj\u015bcie menu. Co najwa\u017cniejsze, potrzebujemy parametru, kt\u00f3ry m\u00f3wi mu, aby pobra\u0107 lokalizacj\u0119 \u201eG\u0142\u00f3wna nawigacja”. W tym celu dodajemy argument \u201e theme_location<\/code>” i ustawiamy go w uchwycie naszego menu; ’ main-nav<\/code>’.<\/p>\n
Doda\u0142em wyj\u015bcie menu zaraz po rozpocz\u0119ciu <body><\/code>tagu, ale je\u015bli uzupe\u0142ni\u0142e\u015b swoje szablony za pomoc\u0105 HTML, sam zdecyduj, gdzie ma si\u0119 pojawia\u0107 menu.<\/p>\n
...\n<body <?php body_class(); ?>>\n    <nav class=\"main-nav\"><?php wp_nav_menu(['theme_location' => 'main-nav']); ?><\/nav><\/code><\/pre>\n
Od\u015bwie\u017c sw\u00f3j frontend i powiniene\u015b zobaczy\u0107 menu, kt\u00f3re utworzy\u0142e\u015b w admin, wyprowadzone jako nieuporz\u0105dkowana lista na pocz\u0105tku szablonu.<\/p>\n
\"Samouczek<\/a><\/p>\n
Jak zwykle, zach\u0119cam do zag\u0142\u0119bienia si\u0119 w parametry wp_nav_menu<\/code>w dokumentacji WordPress Codex<\/a> i pobaw si\u0119 z tym, jak chcesz, aby wynik by\u0142. Na przyk\u0142ad: mo\u017cesz sprawi\u0107, \u017ce nie b\u0119dzie wy\u015bwietlany na li\u015bcie HTML, mo\u017cesz ograniczy\u0107 pozycje menu tylko do okre\u015blonych poziom\u00f3w (aby zapobiec podmenu) i nie tylko.<\/p>\n
Je\u015bli jeste\u015b ciekawy cz\u0119\u015bci dotycz\u0105cej stylizacji; sp\u00f3jrz na klasy, kt\u00f3re WordPress automatycznie dodaje do ka\u017cdej pozycji menu. B\u0119dziesz m\u00f3g\u0142 \u0142atwo dodawa\u0107 style dla aktywnego elementu menu, element\u00f3w, kt\u00f3re maj\u0105 elementy podrz\u0119dne, elementu nadrz\u0119dnego aktywnego elementu podrz\u0119dnego itp.<\/p>\n
Uwaga: ka\u017cdy u\u017cytkownik motywu mo\u017ce zawsze utworzy\u0107 wiele menu i wybra\u0107 wy\u015bwietlanie ich poza zarejestrowanymi lokalizacjami motywu za pomoc\u0105 wid\u017cet\u00f3w. Jednak, aby to zrobi\u0107, tw\u00f3j motyw musi zdefiniowa\u0107 kilka obszar\u00f3w wid\u017cet\u00f3w! Zr\u00f3bmy to dalej.<\/p>\n
Obszary wid\u017cet\u00f3w<\/h2>\n
Obszary wid\u017cet\u00f3w dzia\u0142aj\u0105 bardzo podobnie w przypadku menu. Rejestrujesz lokalizacj\u0119 (w przypadku wid\u017cet\u00f3w definiujesz obszar, w kt\u00f3rym u\u017cytkownik motywu mo\u017ce umieszcza\u0107 wid\u017cety), a gdziekolwiek chcesz, aby lokalizacja\/obszar pojawia\u0142 si\u0119 w szablonach, dodajesz fragment kodu, kt\u00f3ry odnosi si\u0119 do identyfikatora uchwytu podanego w Twoim kod rejestracyjny.<\/p>\n
Zdefiniujmy obszar wid\u017cetu na naszym pasku bocznym i jeden w stopce. Cz\u0119sto motywy zawieraj\u0105 wiele obszar\u00f3w wid\u017cet\u00f3w w stopce, aby \u0142adnie podzieli\u0107 je na kolumny, ale w tym samouczku po prostu dodamy jeden do stopki.<\/p>\n
Obszary wid\u017cet\u00f3w s\u0105 okre\u015blane jako \u201epaski boczne” w kodzie WordPress, ale nie dotyczy to wy\u0142\u0105cznie prawego paska bocznego w dawnych czasach na stronach internetowych. Wygl\u0105da na to, \u017ce jaka\u015b starsza nazwa po prostu utkn\u0119\u0142a z czas\u00f3w, gdy witryny internetowe zwykle mia\u0142y tylko obszar wid\u017cet\u00f3w na pasku bocznym. Nie my\u015bl, \u017ce \u201epaski boczne” mog\u0105 odnosi\u0107 si\u0119 tylko do rzeczywistych pask\u00f3w bocznych.<\/p>\n
Zarejestruj obszary wid\u017cet\u00f3w<\/h3>\n
Zaczynamy od zarejestrowania dw\u00f3ch obszar\u00f3w wid\u017cet\u00f3w w naszym functions.php<\/code>. U\u017cywamy tej funkcji register_sidebar<\/code>do rejestrowania naszych pask\u00f3w bocznych, podpi\u0119tych do widgets_init<\/code>haka, kt\u00f3ry WordPress zdefiniowa\u0142 jako najlepszy hak do rejestrowania obszar\u00f3w wid\u017cet\u00f3w (i niestandardowych wid\u017cet\u00f3w).<\/p>\n
add_action('widgets_init', 'wptutorial_register_sidebar');\nfunction wptutorial_register_sidebar() {\n    register_sidebar([\n        'name' => __('Sidebar Widget Area', 'wptutorial'),\n        'id' => 'sidebar-area'\n    ]);\n    register_sidebar([\n        'name' => __('Footer Widget Area', 'wptutorial'),\n        'id' => 'footer-area'\n    ]);\n}<\/code><\/pre>\n
Funkcja register_sidebar()<\/code>przyjmuje sporo argument\u00f3w, jako minimum potrzebujesz argument\u00f3w 'id’ i 'name’. Dost\u0119pne s\u0105 parametry umo\u017cliwiaj\u0105ce zdefiniowanie sposobu wy\u015bwietlania opakowa\u0144 HTML wid\u017cet\u00f3w.<\/p>\n
Od\u015bwie\u017c panel administracyjny. Powiniene\u015b teraz zobaczy\u0107 pozycj\u0119 menu \u201eWid\u017cety” w sekcji \u201eWygl\u0105d”. W panelu administracyjnym \u201eWid\u017cety” mo\u017cesz zobaczy\u0107 dwa dost\u0119pne obszary wid\u017cet\u00f3w w prawym obszarze; czyli nasz \u201eObszar wid\u017cet\u00f3w paska bocznego” i \u201eObszar wid\u017cet\u00f3w stopki”.<\/p>\n
\"Samouczek<\/a><\/p>\n
Umie\u015b\u0107 losowy wid\u017cet w naszym obszarze wid\u017cet\u00f3w paska bocznego lub stopki, aby zobaczy\u0107 go w akcji.<\/p>\n
Wyprowadzanie obszaru wid\u017cet\u00f3w w szablonie<\/h3>\n
Ostatni\u0105 cz\u0119\u015bci\u0105 jest wyprowadzanie obszar\u00f3w wid\u017cet\u00f3w do naszych szablon\u00f3w. W tym celu korzystamy z funkcji dynamic_sidebar()<\/code>i udost\u0119pniamy uchwyt jako parametr. Otw\u00f3rz sidebar.php<\/code>i dodaj nast\u0119puj\u0105ce elementy wewn\u0105trz <aside><\/code>tag\u00f3w:<\/p>\n
<aside class=\"sidebar\">\n    <ul><?php dynamic_sidebar('sidebar-area'); ?><\/ul>\n<\/aside><\/code><\/pre>\n
Zauwa\u017c, \u017ce owin\u0105\u0142em go wewn\u0105trz nieuporz\u0105dkowanego znacznika listy (<ul><\/code>). Dzieje si\u0119 tak, poniewa\u017c domy\u015blnie dynamic_sidebar<\/code>wypisuje wszystkie wid\u017cety opakowane w <li><\/code>elementy. Zach\u0119cam do zabawy z parametrami wyj\u015bciowymi, je\u015bli nie lubisz wid\u017cet\u00f3w b\u0119d\u0105cych list\u0105.<\/p>\n
Je\u015bli chodzi o stopk\u0119, dodajemy j\u0105 na samym pocz\u0105tku footer.php<\/code>, zawini\u0119t\u0105 w <footer><\/code>tag (je\u015bli chcesz).<\/p>\n
    <footer>\n        <ul><?php dynamic_sidebar('footer-area'); ?><\/ul>\n    <\/footer>\n    <?php wp_footer(); ?>\n...<\/code><\/pre>\n
To tyle, je\u015bli chodzi o menu i obszary wid\u017cet\u00f3w. Tw\u00f3j motyw ma teraz mo\u017cliwo\u015b\u0107 tworzenia nowego menu i u\u017cywania wid\u017cetu do wy\u015bwietlania go na pasku bocznym lub w stopce. W nast\u0119pnej lekcji<\/a> z tej serii samouczk\u00f3w stworzymy wi\u0119cej szablon\u00f3w do naszego motywu.<\/p>\n
Dokumentacja dotycz\u0105ca zastosowanych metod<\/h2>\n