WordPress Jak zrobić motyw potomny (Child Theme)

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:

• 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:

/*
Theme Name: Typowy Potomek
Template: twentysixteen
*/

• 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:

<?php
  function child_theme_enqueue_styled() {
    wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
    wp_enqueue_style('child-theme', get_stylesheet_directory_uri().'/style.css', array('parent-style'));
  }
  add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');

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.

• Na koniec wystarczy go włączyć i spawdzić czy działa.

Udał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′] WordPress Jak zmienić kolejność wpisów na blogu  Inne posty z kategorii WordPress