Wordpress Jak zrobić motyw potomny? Dobre pytanie, sam się nad nim kiedyś zastanawiałem – i to nie raz!
Po co tworzyć motyw potomny?
Większość z Was, czyli osób, które trafiły na ten post pewnie wie, po co im motyw potomny. Jeżeli jesteś jedną z tych osób od razu przejdź do tworzenia. ????Najprościej rzecz ujmując – tworzenie motywu potomnego to najlepsza opcja dostosowywania motywu.
Od razu Wam to napiszę – jeżeli chcecie czegoś więcej od strony na WordPress’ie to zwykłe ustawienia motywu w sekcji “Personalizacja” nie wystarczą. Nie warto też edytować plików bezpośrednio w motywie, ponieważ tracimy wszystkie zmiany podczas jego kolejnej aktualizacji przez autora. Łatwo też się zgubić nie zapisując sobie listy zmian. Ktoś może powiedzieć – “no, ale ja sobie zapiszę co zmieniłem i nie będę aktualizował motywu” – no jak masz chęci samemu wprowadzać poprawki, usprawnienia, szukać ukrytych błędów i cały czas pracować nad motywem, to proszę bardzo, ale chyba już wygodniej napisać własny od podstaw ????.Nie zapominajmy też o tym, że na pierwszy rzut oka nie wszystko można zmienić używając motywu potomnego. W kolejnych poradnikach zobaczycie co nas ogranicza, a co uda nam się poskromić.No to teraz przechodzimy do głównego tematu.
Samo tworzenie motywu potomnego nie jest ani trochę trudne. Potrzebujemy dostępu do naszego serwera przez klienta FTP, notatnika i chwili czasu ????.
Łączymy się z naszym serwerem przez jakiegoś klienta FTP.
Przechodzimy do katalogu ze swoją stroną.
Następnie wchodzimy do wp-content i themes.
Tutaj znajdują się nasze zainstalowane już motywy. Utwórzmy tutaj folder, nazwij go jak chcesz, oczywiście nie używając spacji, znaków specjalnych i znaków diakrytycznych, na przykład:
WordPress Jak zrobić motyw potomny – Folder motywu
Taki sam folder stwórzmy lokalnie, np. na pulpicie, żeby wygodnie nam się pracowało.
Znajdźmy folder z motywem, z którego chcemy dziedziczyć (który będzie rodzicem) i zapiszmy gdzieś jego nazwę. W moim przypadku jest to Twenty Sixteen, więc zapisuję sobie twentysixteen. Na tę chwilę zostawiamy klienta FTP.
Teraz wchodzimy do naszego nowego motywu (tego na pulpicie, tu będziemy sobie pracować) – zbudujemy jakieś podstawy motywu potomnego.
Tworzymy plik style.css, bedzie on głównym plikiem ze stylami naszego motywu potomnego. Po otwarciu pliku wpisujemy do niego:
/*
Theme Name: Typowy Potomek
Theme URI: https://aimweb.pl/blog
Description: To jest taki typowy potomek
Author: Mateusz Mikos
Author URI: https://aimweb.pl/blog
Template: twentysixteen
Version: 1.0.0
*/
O co tu chodzi? Już tłumaczę:Theme Name to nazwa naszego nowego motywu (musi być unikalna), która wyświetla się np. w sekcji Motywy w kokpicie WordPress.
Theme URI to bezpośredni link do strony o naszym motywie.
Description to opis motywu.
Author to autor motywu.
Template to rodzic naszego motywu, musimy tu wpisać dokładnie to, co zapisaliśmy sobie w punkcie 6., czyli nazwę folderu z naszym motywem-rodzicem.
Version to wersja naszego motywu.Jeżeli nie chcesz, to nie musisz wpisywać wszystkiego, obowiązkowe pola to:
Teraz tworzymy następny must-have plik – functions.php.
Tutaj musimy zakojekować (czyli po prostu wywołać) nasz plik style.css. Tworzymy więc funkcję i dodajemy akcję takim kodem:
Wytłumaczę Wam, co tak właściwie robimy:function nazwa_funkcji() – tworzymy funkcję o wybranej nazwie, warto nazwać ją tak, abyśmy wiedzieli co ona robi, bo potem się pogubimy ????;
wp_enqueue_style – kolejkujemy style, najpierw jest to ‘parent-style’, czyli plik ze stylami rodzica, a potem ‘child-style’ czyli plik style.css, który utworzyliśmy;
Pierwszy argument w wp_enqueue_style jest to taki uchwyt, dzięki któremu możemy się potem odwoływać do stylu. Drugi argument to ścieżka do stylu, użyte tu get_template_directory_uri() i get_stylesheet_directory_uri() dają odpowiednio ścieżkę do głównego folderu rodzica i do głównego folderu potomka, do tego dopisujemy sobie ‘/style.css’, co daje nam mniej więcej coś takiego:
– https://adresstrony.pl/wp-content/themes/twentysixteen/style.css
– https://adresstrony.pl/wp-content/themes/typowypotomek/style.css
Ostatni argument, którego użyłem do zakolejkowania naszego stylu potomnego to dependences, czyli zależności. Dlaczego to zrobiłem? Zrobiłem to, bo w naszym potomnym stylu będą tylko zmiany, natomiast główny wygląd będziemy czerpać ze stylu rodzica. Jeżeli chcesz całkiem wyeliminować style.css rodzica możesz zakolejkować tylko styl potomny, o tak:
<?php
function child_theme_enqueue_styles() {
wp_enqueue_style('child-theme', get_stylesheet_directory_uri().'/style.css');
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');
Zapiszmy nasze dwa pliki.
Wracamy do klienta FTP (zapewne musimy się zalogować ponownie, bo trochę czasu minęło), przenosimy pliki functions.php i style.css z naszego folderu na pulpicie do wp-content/themes/nazwa_motywu. W moim przypadku jest to wp-content/themes/typowypotomek.
Zamykamy FTP, przechodzimy do kokpitu na naszej stronie, następnie Wygląd -> Motywy. Naszym oczom na liście powinien ukazać się nowopowstały motyw.
Motywy – WordPress jak zrobić motyw potomny?
Na koniec wystarczy go włączyć i spawdzić czy działa.
WordPress jak stworzć motyw potomny – Strona głównaUdało się! ????Plik style.css (zależnie od tego, co zrobimy w punkcie 9.) może albo dołączać się do styli rodzica, albo je nadpisywać, natomiast plik functions.php jest dołączany.Na ten post to wszystko, niżej macie do pobrania pliki, gdyby coś było niejasne. W kolejnej części serii trochę pogrzebiemy w kodzie, więc warto pobrać sobie jakiś edytor z podświetlaniem składni.[wpdm_package id=’1133′]
Czysto hobbistyczny blog na temat WebDev, WordPress i Internetu
Zanim przejdziesz na stronę...
Nasza strona używa plików cookies, by dostarczać treści jak najlepiej. Zapoznaj się z naszą Polityką i zdecyduj, czy ją akceptujesz. AkceptujęPolityka i Ustawienia prywatności
Nieźle, dzięki za ten poradnik. Same mięcho, bez owijania w bawełnę ????????
Wszystko proste i jasne. Dzięki za wyświetlenie tematu. 😉
Cieszę się, że jest to “czytalne”. ????