{"id":233762,"date":"2023-02-21T13:22:00","date_gmt":"2023-02-21T10:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233762"},"modified":"2022-11-11T12:15:32","modified_gmt":"2022-11-11T09:15:32","slug":"samouczek-motywu-wordpress-dla-poczatkujacych-czesc-7-konfiguracja-motywu-i-polecane-obrazy","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/samouczek-motywu-wordpress-dla-poczatkujacych-czesc-7-konfiguracja-motywu-i-polecane-obrazy\/","title":{"rendered":"Samouczek motywu WordPress dla pocz\u0105tkuj\u0105cych \u2013 cz\u0119\u015b\u0107 7: Konfiguracja motywu i polecane obrazy"},"content":{"rendered":"\n

Ta lekcja samouczka motywu WordPress dla pocz\u0105tkuj\u0105cych jest kontynuowana, dodaj\u0105c podstawowy, wymagany kod do konfiguracji motywu. Uczymy si\u0119 dodawa\u0107 wsparcie dla motyw\u00f3w, w wyniku czego funkcja polecanych obraz\u00f3w WordPressa zostaje aktywowana. W tej lekcji naprawimy r\u00f3wnie\u017c tytu\u0142 strony g\u0142\u00f3wnej, stosuj\u0105c nasz pierwszy filtr.<\/p>\n

B\u0119dziemy pracowa\u0107 g\u0142\u00f3wnie w functions.php<\/code>pliku, kt\u00f3ry dodali\u015bmy w poprzedniej lekcji<\/a>. Na koniec dodamy kod do wy\u015bwietlania polecanych obraz\u00f3w w naszych szablonach.<\/p>\n

Konfiguracja motywu<\/h2>\n

Wszystkie motywy wymagaj\u0105 kodu, aby go skonfigurowa\u0107, m\u00f3wi\u0105c WordPressowi, aby aktywowa\u0142 okre\u015blon\u0105 funkcjonalno\u015b\u0107. Obejmuje to aktywacj\u0119 menu, wid\u017cet\u00f3w, t\u0142umaczenia i tak dalej. Zwykle robi si\u0119 to w \u201efunkcji motywu konfiguracji", zwykle podpi\u0119tej pod wygodn\u0105 nazw\u0105 hooka after_setup_theme<\/code>. W przypadku niekt\u00f3rych konkretnych rzeczy musimy u\u017cy\u0107 inicjuj\u0105cego hooka WordPressa o nazwie init<\/code>.<\/p>\n

Pisanie niezb\u0119dnego kodu konfiguracji motywu dlaafter_setup_theme<\/code><\/h3>\n

Skonfigurujmy tak\u0105 \u201efunkcj\u0119 motywu konfiguracji” w naszym functions.php<\/code>, podpi\u0119tym do after_setup_theme<\/code>:<\/p>\n

add_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n\u00a0\n}<\/code><\/pre>\n
Wewn\u0105trz tej funkcji dodamy kilka popularnych i przydatnych funkcji konfiguracyjnych dla motyw\u00f3w WordPress. Umie\u015b\u0107 wszystkie poni\u017csze fragmenty kodu w swojej funkcji konfiguracji.<\/p>\n
Najpierw musimy zdefiniowa\u0107 maksymaln\u0105 szeroko\u015b\u0107 obraz\u00f3w i embed\u00f3w (takich jak filmy). Dzi\u0119ki temu autorzy wstawiaj\u0105 do post\u00f3w du\u017ce obrazy, kt\u00f3re maj\u0105 okre\u015blon\u0105 szeroko\u015b\u0107. Ustawi\u0142em go na 840 pikseli (poniewa\u017c chc\u0119 mie\u0107 miejsce na pasek boczny), ale mo\u017cesz to dostosowa\u0107 do w\u0142asnych upodoba\u0144.<\/p>\n
$GLOBALS['content_width'] = 840;<\/code><\/pre>\n
Powinni\u015bmy r\u00f3wnie\u017c poinformowa\u0107 WordPressa, \u017ce \u200b\u200bmotyw mo\u017cna przet\u0142umaczy\u0107 i gdzie mo\u017ce szuka\u0107 plik\u00f3w do t\u0142umaczenia. Szczeg\u00f3\u0142owo om\u00f3wi\u0119 t\u0142umaczenie motywu WordPress w nast\u0119pnym kroku<\/a> w tej serii samouczk\u00f3w tematycznych.<\/p>\n
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');<\/code><\/pre>\n
Zwr\u00f3\u0107 uwag\u0119 na u\u017cycie nowej funkcji, aby uzyska\u0107 katalog motywu, get_stylesheet_directory()<\/code>. Jest to bardzo podobne do tego, z get_stylesheet_directory_uri()<\/code>kt\u00f3rym spotkali\u015bmy si\u0119 w poprzednim kroku, ale tutaj potrzebujemy \u015bcie\u017cki wzgl\u0119dnej, a nie adresu URL.<\/p>\n
Nast\u0119pnie musimy doda\u0107 kilka \u201eobs\u0142ug motyw\u00f3w”, kt\u00f3re aktywuj\u0105 funkcjonalno\u015b\u0107 WordPress, kt\u00f3ra nie jest domy\u015blnie aktywowana.<\/p>\n
add_theme_support('automatic-feed-links');\nadd_theme_support('post-thumbnails');\nadd_theme_support('html5', [\n    'search-form',\n    'comment-form',\n    'comment-list',\n    'gallery',\n    'caption',\n]);\nadd_theme_support('custom-logo', [\n    'height'      => 100,\n    'width'       => 300,\n    'flex-width'  => true,\n    'flex-height' => false,\n]);\nadd_theme_support('customize-selective-refresh-widgets');<\/code><\/pre>\n
To by\u0142a ca\u0142a masa add_theme_support<\/code>telefon\u00f3w! Jak sama nazwa wskazuje, add_theme_support<\/code>m\u00f3wi WordPressowi, aby aktywowa\u0142 funkcje, kt\u00f3re nie s\u0105 domy\u015blnie aktywowane. Na przyk\u0142ad polecane obrazy (\u201epost-miniaturki”), obs\u0142uga tag\u00f3w HTML5 i funkcja niestandardowego logo WordPress w Customizer (dostosuj \u017c\u0105dany obraz logo, je\u015bli chcesz!).<\/p>\n
Istnieje wiele innych fajnych funkcji, wi\u0119c zach\u0119cam do przejrzenia dokumentacji add_theme_support<\/a>. Na przyk\u0142ad istnieje ca\u0142kiem nowy, title-tag<\/code>, kt\u00f3ry obs\u0142uguje tag title. Pomin\u0105\u0142em to w tym samouczku, poniewa\u017c dodali\u015bmy ju\u017c header.php<\/code>r\u0119cznie tag tytu\u0142u.<\/p>\n
Pami\u0119taj, \u017ce je\u015bli dodasz obs\u0142ug\u0119 title-tag<\/code>, powiniene\u015b usun\u0105\u0107 tag tytu\u0142u z pliku nag\u0142\u00f3wka, aby unikn\u0105\u0107 zduplikowanych tag\u00f3w tytu\u0142u.<\/p>\n
Na koniec dodajemy kilka add_theme_support<\/code>dla nowego Gutenberga w WordPress. Dodamy obs\u0142ug\u0119 szerokich sekcji, aktywuj\u0105c funkcjonalno\u015b\u0107 styl\u00f3w blokowych i obs\u0142ug\u0119 responsywnych osadze\u0144:<\/p>\n
add_theme_support('wp-block-styles');\nadd_theme_support('align-wide');\nadd_theme_support('responsive-embeds');<\/code><\/pre>\n
Wynik ko\u0144cowy<\/h3>\n
Oto ostateczna funkcja konfiguracji w naszym functions.php<\/code>:<\/p>\n
add_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n    $GLOBALS['content_width'] = 840;\n    \/\/ Make your theme ready for translation\n    load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');\n    \/\/ Add theme support for WordPress functionality\n    add_theme_support('automatic-feed-links');\n    add_theme_support('title-tag');\n    add_theme_support('post-thumbnails');\n    add_theme_support('html5', [\n        'search-form',\n        'comment-form',\n        'comment-list',\n        'gallery',\n        'caption',\n    ]);\n    add_theme_support('custom-logo', [\n        'height'      => 100,\n        'width'       => 300,\n        'flex-width'  => true,\n        'flex-height' => false,\n    ]);\n    add_theme_support('customize-selective-refresh-widgets');\n    \/\/ Add theme support for Gutenberg specific functionality\n    add_theme_support('wp-block-styles');\n    add_theme_support('align-wide');\n    add_theme_support('responsive-embeds');\n}<\/code><\/pre>\n
Po zapisaniu powiniene\u015b teraz m\u00f3c dodawa\u0107 polecane obrazy do post\u00f3w w admin! Dodajmy jeszcze jedn\u0105 poprawk\u0119 motywu w naszym functions.php<\/code>, zanim dodamy polecane obrazy do naszych szablon\u00f3w; pami\u0119tasz, \u017ce wp_title<\/code>w naszym header.php<\/code>domy\u015blnie nie mo\u017cesz wybi\u0107 niczego na pierwszej stronie? Naprawmy to.<\/p>\n
Dodawanie filtra dowp_title<\/code><\/h2>\n
Dodajmy nasz\u0105 pierwsz\u0105 w\u0142a\u015bciw\u0105 funkcj\u0119 modyfikuj\u0105c\u0105 filtr, u\u017cywaj\u0105c add_filter()<\/code>. Filtr, do kt\u00f3rego si\u0119 pod\u0142\u0105czymy, ma tak\u0105 sam\u0105 nazw\u0119 jak funkcja, kt\u00f3rej u\u017cyli\u015bmy w WordPressie do dynamicznego pobierania tytu\u0142u strony; wp_title<\/code>. To, co naprawimy, to upewnienie si\u0119, \u017ce tytu\u0142 nie jest pusty na stronie g\u0142\u00f3wnej \u2013 co jest domy\u015blne w WordPressie. Gdy na stronie g\u0142\u00f3wnej chcemy, aby by\u0142a wype\u0142niona nazw\u0105 witryny WordPress.<\/p>\n
Pami\u0119taj, aby zawsze zwraca\u0107<\/strong> przefiltrowan\u0105 zmienn\u0105 w funkcjach filtruj\u0105cych! Wszystkie filtry modyfikuj\u0105 zmienn\u0105, a je\u015bli nic nie zwr\u00f3cisz, zmienna staje si\u0119 niezdefiniowana. Mo\u017ce to powodowa\u0107 wiele problem\u00f3w. Aby uzyska\u0107 wi\u0119cej informacji na temat filtr\u00f3w, sp\u00f3jrz na m\u00f3j post wyja\u015bniaj\u0105cy wszystko o haczykach i filtrach<\/a>.<\/p>\n
Wiedz\u0105c, kiedy dostosowa\u0107 tytu\u0142<\/h3>\n
Chcemy dostosowa\u0107 zmienn\u0105 title tylko wtedy, gdy jeste\u015bmy na pierwszej stronie. W przypadku wszystkich innych stron chcemy zostawi\u0107 go w spokoju (po prostu zwr\u00f3\u0107 go bez zmian). Ale sk\u0105d wiemy, kiedy jeste\u015bmy na pierwszej stronie?<\/p>\n
Mo\u017cemy skorzysta\u0107 z tag\u00f3w warunkowych WordPressa<\/a>, czyli ca\u0142ej gamy przydatnych funkcji, kt\u00f3re zwracaj\u0105 prawd\u0119 lub fa\u0142sz na podstawie warunku. S\u0105 one najcz\u0119\u015bciej u\u017cywane, aby zapyta\u0107, czy jeste\u015bmy na okre\u015blonej stronie lub szablonie. Mo\u017cemy po prostu zapyta\u0107 \u201eCzy jeste\u015bmy na pierwszej stronie?”. Je\u015bli ta metoda zwr\u00f3ci true, dopiero wtedy zmodyfikujemy zmienn\u0105 tytu\u0142ow\u0105.<\/p>\n
Warto zauwa\u017cy\u0107, \u017ce istniej\u0105 dwa tagi warunkowe dla strony g\u0142\u00f3wnej, a mianowicie is_home()<\/code>i is_front_page().<\/code>Te r\u00f3\u017cni\u0105 si\u0119 w zale\u017cno\u015bci od ustawienia \u201eCzytanie” \u2013 niezale\u017cnie od tego, czy Twoja strona g\u0142\u00f3wna wy\u015bwietla najnowsze posty, czy jest ustawiona na sta\u0142\u0105 stron\u0119. Je\u015bli post\u0119pujesz zgodnie z tym samouczkiem z zupe\u0142nie now\u0105 instalacj\u0105 WordPress z ustawieniami domy\u015blnymi, u\u017cyjesz is_front_page()<\/code>.<\/p>\n
Uzyskiwanie nazwy witryny WordPress<\/h3>\n
Teraz wiemy, jakiego filtra u\u017cy\u0107 i jak upewni\u0107 si\u0119, \u017ce zmienimy tytu\u0142 tylko wtedy, gdy jeste\u015bmy we w\u0142a\u015bciwym miejscu. Ale jaki powinien by\u0107 tytu\u0142? Zwykle tytu\u0142em strony g\u0142\u00f3wnej b\u0119dzie nazwa Twojej witryny WordPress. Ale jak otrzymujemy te informacje?<\/p>\n
Do pobierania informacji o aktualnej instalacji WordPressa korzystamy z bloginfo()<\/code>funkcji. Jako parametr prosimy o zwr\u00f3cenie nazwy strony, co odbywa si\u0119 poprzez ustawienie parametru na ’ name<\/code>’. A poniewa\u017c jest to filtr i musimy go zwr\u00f3ci\u0107, a nie powtarza\u0107, u\u017cywamy jego siostrzanej metody get_bloginfo()<\/code>. Wywo\u0142anie bloginfo()<\/code>zawsze spowoduje wyj\u015bcie echa.<\/p>\n
add_filter('wp_title', 'wptutorial_title_filter');\nfunction wptutorial_title_filter($title) {\n    if (is_front_page()) {\n        return get_bloginfo('name');\n    }\n    return $title;\n}<\/code><\/pre>\n
Je\u015bli od\u015bwie\u017cysz swoj\u0105 stron\u0119 g\u0142\u00f3wn\u0105, powiniene\u015b zobaczy\u0107, \u017ce nazwa Twojej witryny pojawia si\u0119 w <title><\/code>tagu (i w zak\u0142adce przegl\u0105darki)! Nasz filtr ma wp\u0142yw tylko na stron\u0119 g\u0142\u00f3wn\u0105, wi\u0119c wszelkie inne strony, takie jak pojedynczy post, powinny nadal zwraca\u0107 to samo, co poprzednio; tytu\u0142 posta.<\/p>\n
Wyprowadzanie polecanych obraz\u00f3w w plikach szablon\u00f3w<\/h2>\n
Wcze\u015bniej, gdy konfigurujemy obs\u0142ug\u0119 motyw\u00f3w, dodali\u015bmy obs\u0142ug\u0119 polecanych obraz\u00f3w. Po aktywacji mo\u017cemy teraz wy\u015bwietla\u0107 te obrazy w naszych szablonach. Zr\u00f3bmy to teraz!<\/p>\n
Otw\u00f3rz si\u0119 index.php<\/code>i znajd\u017a dla nich miejsce w p\u0119tli. Zdecydowa\u0142em si\u0119 umie\u015bci\u0107 go po tytule, ale od Ciebie zale\u017cy, gdzie chcesz. U\u017cywasz tej funkcji the_post_thumbnail()<\/code>do wyprowadzania obrazu. Zaleca si\u0119 najpierw sprawdzi\u0107, czy post ma w og\u00f3le wyr\u00f3\u017cniony obraz, co robimy za pomoc\u0105 has_post_thumbnail()<\/code>.<\/p>\n
...\n    <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?><\/a><\/h2>\n    <?php if (has_post_thumbnail()) {\n        the_post_thumbnail();\n    } ?>\n    <?php the_excerpt(); ?>\n...<\/code><\/pre>\n
Je\u015bli Tw\u00f3j post nie zawiera polecanego obrazu, po tytule nic nie b\u0119dzie wy\u015bwietlane. Je\u015bli jednak ustawisz polecany obraz na jednym ze swoich post\u00f3w, the_post_thumbnail()<\/code>wy\u015bwietli <img><\/code>tag z wybranym obrazem. Ta funkcja akceptuje dodatkowe parametry. Na przyk\u0142ad mo\u017cesz zdefiniowa\u0107 rozmiar obrazu, kt\u00f3rego chcesz u\u017cy\u0107, i kontrolowa\u0107 atrybuty dodawane do obrazu. Jak zwykle zach\u0119cam do szybkiego zapoznania si\u0119 z dokumentacj\u0105<\/a> i dostosowania si\u0119 do w\u0142asnych upodoba\u0144.<\/p>\n
Dokumentacja dotycz\u0105ca zastosowanych metod<\/h2>\n