WordPress i pełna edycja witryny: jak stworzyć motyw potomny i motyw blokowy

Opublikowany: 2022-12-09

Kiedy powinieneś używać motywu potomnego dla WordPress? Ważne jest, aby utworzyć motyw potomny , jeśli planujesz wprowadzić niestandardowe zmiany w kodzie.

W ten sposób, gdy motyw zostanie zaktualizowany, wszelkie niestandardowe zmiany w kodzie nie zostaną nadpisane.

Tradycyjnie podczas pracy z WordPressem wymagało to wykonania kopii functions.php i style.css w celu utworzenia motywu potomnego i dodania motywu potomnego do motywu nadrzędnego.

Ze względu na inną strukturę plików w pełnej edycji witryny konieczne było wprowadzenie pewnych poprawek, aby można było znaleźć wszystkie odpowiednie pliki.

Na szczęście, dzięki stworzeniu wtyczki Create Block Theme przez WordPress.org, tworzenie nie tylko motywu potomnego, ale także całkowicie niestandardowego motywu lub odmiany stylu jest łatwiejsze niż kiedykolwiek.

Utwórz wtyczkę Block Theme Zrzut ekranu z repozytorium wtyczek WordPress.org, grudzień 2022 r

Konfigurowanie wtyczki Create Block Theme w WordPress

Najpierw będziesz chciał zainstalować i aktywować motyw blokowy WordPress, dla którego chcesz utworzyć nowy motyw lub motyw potomny – w tym przypadku używam Twenty Twenty-Two.

Dwadzieścia dwadzieścia dwa motyw Zrzut ekranu z WordPress Dashboard, grudzień 2022 r

Następnie wykonaj następujące kroki:

Przejdź do Wtyczki > Dodaj nowy .

W oknie wyszukiwania znajdź „Utwórz motyw blokowy”.

Kliknij Zainstaluj i aktywuj .

Strona z wtyczkami Zrzut ekranu z WordPress Dashboard, grudzień 2022 rPo zainstalowaniu wtyczki będziesz mieć kilka nowych opcji w obszarze Wygląd, w tym Utwórz motyw blokowy i Zarządzaj czcionkami motywu .

Opcje wyglądu Zrzut ekranu z WordPress Dashboard, grudzień 2022 r

Tworzenie motywu potomnego WordPress

Wtyczka Utwórz motyw bloku to niezwykle prosty sposób na utworzenie motywu potomnego dla bloku, w tym motywu pełnej edycji witryny. Wtyczka automatycznie utworzy folder części, folder szablonów, plik theme.json i styl.css.

Po zainstalowaniu wtyczki możesz utworzyć motyw potomny:

  • W obszarze Wygląd wybierz opcję Utwórz motyw blokowy .
  • Następnie wybierz Utwórz dziecko dwudziestego dwudziestego drugiego (jeśli wybrałeś inny motyw, wyświetli się ten motyw).
  • Po prawej stronie wpisz nazwę motywu, opis motywu, identyfikator URI motywu, autora i identyfikator URI autora.
  • Kliknij niebieski przycisk Generuj , aby utworzyć motyw potomny.
informacje o motywie potomnym Zrzut ekranu z WordPress Dashboard, grudzień 2022 r

Twój motyw potomny zostanie wyeksportowany jako plik ZIP.

plik ZIP z motywem potomnym Zrzut ekranu przedstawiający wygenerowany plik motywu podrzędnego, grudzień 2022 r

W obszarze Wygląd > Motywy kliknij opcję Dodaj motyw i prześlij motyw, a następnie wybierz wygenerowany plik ZIP.

Przejdź do motywów i upewnij się, że widzisz nowy motyw potomny.

Tworzenie niestandardowego obrazu dla motywu potomnego WordPress

Wadą wtyczki jest to, że nie pozwala ona na dodanie pliku screenshot.png dla motywu potomnego ani nie korzysta z tego dostarczonego z motywem nadrzędnym.

Można to łatwo naprawić i zapewnia miły, niestandardowy akcent dla motywu dziecka.

Używając swojego ulubionego edytora obrazów, utwórz nowy obraz o rozmiarze 1200 na 900 pikseli i nazwij go screenshot.png.

Umieść nowy plik screenshot.png w folderze utworzonego motywu potomnego.

pliki w motywie potomnym Zrzut ekranu plików motywu motywu potomnego WordPress, grudzień 2022 r

Wróć do motywów, a nowy obraz powinien pojawić się z motywem podrzędnym.

Obraz aktywnego motywu potomnego Zrzut ekranu z WordPress Dashboard, grudzień 2022 r

Teraz, gdy motyw potomny jest ustawiony w motywie blokowym, można wprowadzać zmiany w plikach szablonów theme.json i style.css bez zastępowania nadrzędnych plików motywu.

W ten sposób motyw nadrzędny można aktualizować bez żadnych problemów.

Możesz także wyeksportować nowy motyw podrzędny z wprowadzonymi zmianami, takimi jak obraz, aby użyć go jako motywu podrzędnego dla nowych instalacji motywu nadrzędnego.

Tworzenie niestandardowego motywu blokowego w WordPress

Wtyczka Create Block Theme zapewnia szereg opcji tworzenia własnego motywu. Możesz sklonować bieżący motyw i wprowadzić własne niestandardowe zmiany, używając go jako szablonu.

Gdy już dokonasz zmian i będziesz z nich zadowolony, możesz użyć wtyczki, aby wyeksportować motyw ze wszystkimi wprowadzonymi zmianami, aby używać nowego motywu na innych stronach internetowych.

Dodatkowo możesz utworzyć całkowicie pusty nowy motyw, który wykorzystuje bieżący motyw jako szablon. To świetny sposób na zrobienie czegoś całkowicie niestandardowego.

Aby stworzyć zupełnie nowy motyw, wykonaj następujące czynności:

W obszarze Utwórz motyw blokowy wybierz opcję Utwórz pusty motyw .

Wpisz wszystkie informacje po prawej stronie, nazwij je i dodaj swoje imię jako twórcy, a następnie naciśnij Generuj .

Utwórz pusty motyw Zrzut ekranu z WordPress Dashboard, grudzień 2022 r

Twój nowy motyw zostanie pobrany jako plik ZIP.

W obszarze Wygląd > Motywy możesz przesłać i aktywować nowy motyw.

Wykonaj te same czynności, co motyw potomny, jeśli chcesz dodać niestandardowy obraz do screenshot.png.

Aktywuj nowy motyw i użyj go jako punktu wyjścia dla nowego motywu.

nowy pusty motyw Zrzut ekranu z WordPress Dashboard, grudzień 2022 r

Użyj wzorów, bloków, części szablonów i edytora stylów, aby stworzyć nowy motyw o pożądanym wyglądzie.

Po zakończeniu pracy nad nowym motywem wróć do Wygląd > Utwórz motyw blokowy i wyeksportuj nowy motyw, który zawiera wszystkie wprowadzone w nim zmiany.

Zostanie wyeksportowany jako plik zip i można go przesłać do dowolnej nowej instalacji WordPress.

Zarządzanie czcionkami motywu WordPress

Kolejną wspaniałą funkcją wtyczki Utwórz motyw blokowy jest możliwość łatwego dodawania i usuwania czcionek dla motywu.

Zazwyczaj, aby dodać nowe czcionki do motywu, należy je pobrać, dodać do folderu czcionek i umieścić w kolejce w pliku functions.php lub dodać link Google do kodu.

Dodanie wielu czcionek może jeszcze bardziej skomplikować ten proces.

Dzięki wtyczce czcionki Google i czcionki lokalne z Twojego komputera mogą być łatwo dodawane lub usuwane z motywu niestandardowego lub motywu, który zainstalowałeś i aktywowałeś.

W przypadku czcionek Google kliknij Dodaj czcionkę Google , a w rozwijanym oknie pojawi się lista dostępnych czcionek Google.

Wybierz czcionkę, zaznacz pole wyboru i kliknij przycisk, aby dodać czcionkę Google do swojego motywu.

Zarządzaj czcionkami motywu Zrzut ekranu z WordPress Dashboard, grudzień 2022 r
Dodaj czcionki Google Zrzut ekranu z WordPress Dashboard, grudzień 2022 r

Dodanie pobranej lokalnej czcionki to podobny proces.

Kliknij, aby dodać lokalną czcionkę , prześlij plik czcionki, wpisz nazwę czcionki, styl i grubość, a następnie naciśnij przycisk, aby przesłać lokalną czcionkę do motywu.

Czcionki lokalne Zrzut ekranu z WordPress Dashboard, grudzień 2022 r

Łatwe motywy potomne WordPress

Dzięki pełnej edycji witryny i wtyczce Utwórz motyw blokowy tworzenie własnych motywów i wariacji stylów jest łatwiejsze niż kiedykolwiek wcześniej.

Korzystanie z wtyczki zamiast ręcznego kolejkowania plików i zmiany kodu sprawia, że ​​tworzenie motywu potomnego i dodawanie nowych czcionek jest prostym procesem.

Wzory , wariacje stylów i bloki wielokrotnego użytku używane z wtyczką to świetne proste sposoby tworzenia własnego niestandardowego motywu, który można wyeksportować i używać ponownie.

Wszystko bez konieczności dotykania kodu motywu.

Więcej zasobów:

  • Jak utworzyć niestandardową stronę 404 w WordPress
  • Jak wybrać najlepszy motyw WordPress dla SEO
  • Zaawansowane techniczne SEO: kompletny przewodnik

Obraz wyróżniony: Kaspars Grinvalds/Shutterstock