Dlaczego nigdy nie powinieneś dostosowywać WordPressa^(WordPress) w istniejącym motywie nadrzędnym? Co dzieje się z Twoimi dostosowaniami, gdy używany motyw zostanie zaktualizowany?

Odpowiedź jest taka, że ​​są stracone, a Twoja ciężka praca nad stworzeniem witryny zgodnie z Twoją marką oraz wytycznymi i preferencjami dotyczącymi wiadomości również zostanie utracona.

Motyw potomny umożliwia utworzenie oddzielnego arkusza stylów CSS^{(child theme enables you to create a separate CSS stylesheet)} i dodanie dodatkowych funkcji, które nie zostaną utracone ani zmienione, gdy motyw nadrzędny zostanie zaktualizowany.

Można to zrobić ręcznie lub instalując wtyczkę do tworzenia motywów potomnych. Zacznijmy od procesu ręcznego.

Utwórz nowy katalog^{(Create a New Directory)}

Zacznij^(Start) od utworzenia nowego katalogu dla motywu potomnego. Możesz użyć klienta FTP^{(FTP client)} lub uzyskać dostęp do istniejącego katalogu wp-content/themes za pośrednictwem cPanel.

Aby użyć cPanel, przejdź do panelu sterowania hostingu. Wybierz menedżera plików^{(file manager)} i przejdź do katalogu, w którym zainstalowano WordPress .

Zwykle znajduje się w katalogu o nazwie public_html . Znajdź i otwórz folder wp-content . Kliknij Utwórz nowy folder^{(create new folder)} i wprowadź nazwę motywu podrzędnego. Pamiętaj, aby nadać mu nazwę, którą rozpoznasz później. Dobrym przykładem jest nameofparenttheme-child .

Nie dodawaj spacji w nazwie pliku, aby uniknąć błędów.

Ze względu na wewnętrzną obsługę nazwa folderu musi zawierać nazwę motywu nadrzędnego (motyw „slug”), jak pokazano w poniższym przykładzie.

Utwórz arkusz stylów CSS^{(Create a CSS Stylesheet)}

Arkusze stylów są używane w motywach WordPress z dwóch powodów.

• To lokalizacja stylów wpływa na wygląd Twojej witryny.
• Główny arkusz stylów motywu to miejsce, w którym WordPress szuka informacji o motywie.

Możesz nie chcieć dodawać żadnych nowych stylów w motywie potomnym. Jednak arkusz stylów nadal musi istnieć, aby zdefiniować szczegóły, takie jak nazwa motywu i nazwa motywu nadrzędnego.

Dlatego musisz utworzyć nowy arkusz stylów dla motywu potomnego. Następnym krokiem jest więc utworzenie pliku tekstowego dla arkusza stylów CSS , który zdefiniuje reguły kontrolujące wygląd motywu potomnego.

Plik CSS^(CSS) motywu potomnego będzie miał wtedy pierwszeństwo przed motywem nadrzędnym.

W swoim pliku tekstowym musisz zawrzeć następujące informacje:

• Nazwa twojego motywu.
• Nazwa katalogu nadrzędnego motywu.
• Tytuł i opis, które mają sens.

Pamiętaj, aby umieścić w arkuszu stylów następujący komentarz nagłówka u góry pliku. WordPress przeczyta te informacje i będzie wiedział, że używany jest motyw potomny.

Chcesz zwrócić szczególną uwagę na tag szablonu. Informuje WordPress , jaki jest motyw rodzicielski Twojego dziecka. Pamiętaj, że w folderze, w którym znajduje się motyw nadrzędny, rozróżniana jest wielkość liter.

Technicznie rzecz biorąc, możesz teraz aktywować motyw potomny. Jeśli jednak chcesz stworzyć bardziej złożony motyw potomny, będziesz musiał dodać niestandardowe funkcje PHP .

Utwórz plik functions.php w motywie potomnym (w tym samym katalogu, co utworzony plik style.css ). W tym miejscu należy dodać takie rzeczy, jak dodatkowe formaty postów.

Podobnie jak w przypadku pliku CSS , zmiany lub dodatki do pliku PHP zostaną automatycznie połączone lub zastąpią funkcje rodzica.

W przypadku takich rzeczy, jak formaty postów, które są dodawane za pomocą add_theme_support() , działają one jako nadpisania zamiast scalania.

Używając add_theme_support() , musisz wykonać kilka dodatkowych kroków, aby upewnić się, że motyw potomny zastępuje motyw nadrzędny.

Może się to skomplikować, więc zapoznaj się z postem Williama Pattona, który prowadzi zespół ds. recenzji motywów WordPress , ^{(WordPress Theme Review Team)}na temat korzystania z formatów postów WordPress^{( post on using WordPress post formats)} . 

Dodaj style i skrypty, aby zastąpić funkcjonalność motywu nadrzędnego^{(Add Styles & Scripts To Override Parent Theme Functionality)}

Następnym krokiem jest upewnienie się, że motyw podrzędny dziedziczy funkcje i style motywu nadrzędnego lub odzwierciedla nowe, których chcesz użyć.

Style służą do zmiany wyglądu Twojej witryny. Skrypty^(Scripts) zwiększają funkcjonalność. Sposób dodawania stylów i skryptów do witryny WordPress jest tak samo istotny, jak zawartość plików.

Funkcja enqueue WordPressa pozwala to osiągnąć.

Kolejkowanie odnosi się do sposobu, w jaki style i skrypty są dodawane do witryn WordPress , aby mogły wpływać na to, co widzą użytkownicy odwiedzający Twoją witrynę.

Korzystanie z wielu wtyczek w celu osiągnięcia tego samego wyniku często prowadzi do problemów ze zgodnością i uszkodzonych witryn.

Wp_enqueue nie tylko poprawia wydajność Twojej witryny poprzez zmniejszenie obciążenia wtyczki, ale także poprawia wrażenia użytkownika.

Jak korzystać z „wp_enqueue”^{(How To Use ‘wp_enqueue’)}

Aby wyprowadzić style dla motywu potomnego, musisz użyć funkcji o nazwie wp_enqueue_style() .

Ta funkcja pobiera kilka bitów informacji, ale najważniejsza jest nazwa (lub „uchwyt”) i lokalizacja pliku.

Wewnątrz pliku functions.php dodaj następujący kod.

Ten kod dodaje arkusz stylów z katalogu nadrzędnego, a następnie dodaje arkusz stylów dla dziecka, które stworzyliśmy wcześniej. Zauważ, że tekst stylu rodzica^{(parent-style)} powinien pasować do nazwy motywu rodzica z dodanym na końcu -style .

Aktywuj swój motyw potomny^{(Activate Your Child Theme)}

Jeśli utworzyłeś pliki dla swojego motywu podrzędnego na serwerze w folderze wp-content/themes/yourthemename , będzie on dostępny do aktywacji na pulpicie WordPress .

• Zaloguj się do swojego panelu.
• Przejdź do Appearance > Themes .
• Twój motyw potomny powinien być wymieniony.
• Wybierz Podgląd^(Preview) , aby zobaczyć, jak witryna wygląda z nowym motywem podrzędnym.
• Gdy będziesz zadowolony z tego, jak wygląda, kliknij Aktywuj^{(Activate )} , aby uruchomić.

Jeśli utworzyłeś motyw potomny w innym miejscu niż na serwerze w folderze wp-content/themes/yourthemename , powinieneś spakować nowy folder motywu potomnego.

• Zaloguj się do swojego pulpitu WordPress.
• Przejdź do Appearance > Themes .
• Kliknij Dodaj nowy^{(Add new)} .
• Wybierz Prześlij motyw^{(Upload Theme)} .
• Przeciągnij^(Drag) spakowany plik do nowego okna, które się pojawi lub kliknij selektor plików i przejdź do niego na swoim komputerze.
• Po przesłaniu możesz go wyświetlić, a następnie aktywować.

Dodaj pliki szablonów^{(Add Template Files)}

Aby zastąpić inne szablony, możesz skopiować je z motywu nadrzędnego do motywu potomnego. Wszelkie pliki szablonów, które mają taką samą nazwę w potomku, jak w nadrzędnym, działają jako nadpisania. Następnie dostosuj zawartość szablonów według potrzeb.

Aby dodać nowe szablony^{(To add new templates)} , wystarczy utworzyć nowy plik z poprawną nazwą i dodać własną treść. Powyższa sekcja wyjaśnia proces ręczny.

Przejdźmy teraz do tworzenia motywów potomnych za pomocą wtyczki WordPress .

Użyj wtyczki WordPress^{(Use a WordPress Plugin)}

Zaloguj^(Log) się do swojego pulpitu WordPress . Kliknij^(Click) Wtyczki Plugins > Add New . Wyszukaj motyw potomny.^{(child theme.)}

Pierwszą wtyczką, którą zobaczysz, jest konfigurator motywów potomnych^{( Child Theme Configurator)} . To dobry wybór, jak widać na powyższym zrzucie ekranu, ponieważ:

• Jest kompatybilny z aktualną wersją WP.
• Ma wiele instalacji.
• Został niedawno zaktualizowany.

Kliknij Install now > Activate . Następnym krokiem jest przejście do Narzędzia^(Tools) , a następnie wybranie motywów podrzędnych.^{(child themes.)}

Znajdź^(Find) i wybierz motyw nadrzędny z menu rozwijanego. Wybierz analizuj^(analyze) , aby upewnić się, że Twój motyw nadaje się do użycia jako motyw potomny.

Poniżej^(Below) znajduje się samouczek krok po kroku, jak skonfigurować Konfigurator motywów podrzędnych^{(Child Theme Configurator)} . Jeśli zdecydujesz się użyć innej wtyczki WordPress , możesz łatwo znaleźć samouczek, jak ją skonfigurować.

Jak już wiecie, motywy potomne to odrębne motywy, które w niektórych funkcjach opierają się na motywie nadrzędnym.

Kiedy używasz motywu potomnego, WordPress będzie szukał dziecka przed rodzicem i podąża za stylem i funkcjonalnością dziecka, jeśli takie istnieje.

Oszczędź sobie dużo czasu, kłopotów i przyszłych bólów głowy, gdy motyw nadrzędny zostanie zaktualizowany, tworząc dziecko, na które aktualizacja nie wpłynie.

How To Create a WordPress Child Theme

Why ѕhould you never customize WordPress in the existing parent theme? What hapрens to your customizations when the theme you are using is updated?

The answer is they are lost, and your hard work to create your site according to your brand and messaging guidelines and preferences will also be lost.

A child theme enables you to create a separate CSS stylesheet and add additional functionality that will not be lost or affected when the parent theme is updated.

This can be done manually or by installing a child theme creator plugin. Let’s start with the manual process.

Create a New Directory

Start by creating a new directory for your child theme. You can use an FTP client or access your existing wp-content/themes directory via your cPanel.

To use cPanel, go to your hosting control panel. Select file manager and navigate to the directory where WordPress is installed.

This is usually in a directory named public_html. Locate and open the wp-content folder. Click on create new folder and input a name for your child theme. Be sure to give it a name that you will recognize later. A good example is nameofparenttheme-child.

Do not include any spaces in your file name to avoid errors.

Due to internal handling, the folder name must include the name of the parent theme (theme ‘slug’) as shown in the example below.

Create a CSS Stylesheet

Stylesheets are used in WordPress themes for two reasons.

• It is the location of the styles that affect how your site looks.
• A theme’s main stylesheet is where WordPress looks to find information about the theme.

You may not want to add any new styles in the child theme. However, the stylesheet still needs to exist to define specifics such as your theme name and the parent theme name.

Therefore, you need to create a new stylesheet for your child theme. So, your next step is to create a text file for the CSS stylesheet that will define the rules that control the look of your child theme.

The child theme CSS file will then take precedence over the parent theme.

You need to include the following information in your text file:

• Your theme’s name.
• The name of the parent theme directory.
• Title and description that makes sense.

Be sure to include in the stylesheet the following header comment at the top of the file. WordPress will read this information and know that a child theme is being used.

You want to pay close attention to the template tag. It tells WordPress what the parent theme of your child is. Note that the folder where your parent theme is located is case sensitive.

Technically, you can now activate your child theme. However, if you want to create a more complex child theme, you will need to add custom PHP functions.

Create a functions.php file in the child theme (in the same directory as the style.css file you made). This is where things like additional post formats should be added.

As with your CSS file, the changes or additions to your PHP file will automatically be merged with or override the parent’s functions.

For things like post formats that are added with an add_theme_support(), they act as overrides instead of merges.

When using add_theme_support(), you need to take some additional steps to ensure that the child theme overrides the parent.

This can get complicated, so refer to the current WordPress Theme Review Team lead William Patton’s post on using WordPress post formats. 

Add Styles & Scripts To Override Parent Theme Functionality

Your next step is to make sure your child theme either inherits the parent theme’s features and styles or reflects the new ones you want to use.

Styles are used to changing the appearance of your website. Scripts enhance functionality. The way styles and scripts are added to your WordPress site is as essential as the contents of the files.

WordPress’ enqueue functionality is how to get this accomplished.

Enqueueing refers to the way styles and scripts are added to WordPress sites so that they can affect what users see when they visit your site.

Using numerous plugins to achieve the same result often leads to compatibility issues and broken sites.

Wp_enqueue not only improves your website’s performance by way of reducing plugin overhead, but it also enhances the user experience.

How To Use ‘wp_enqueue’

To output the styles for your child theme, you will need to use a function called wp_enqueue_style().

This function takes a few bits of information, but the most important is the name (or ‘handle’) and the location of the file.

Inside the functions.php file add the following code.

This code adds the stylesheet from the parent directory and then also adds the stylesheet for the child which we created earlier. Note that the parent-style text should match the name of the parent theme with -style added to the end.

Activate Your Child Theme

If you created the files for your child theme on the server inside the wp-content/themes/yourthemename folder, it would then be available in your WordPress dashboard for you to activate.

• Log into your dashboard.
• Go to Appearance > Themes.
• Your child theme should be listed.
• Select Preview to see how the site looks with the new child theme.
• Once you are satisfied with how it looks, click Activate to make it go live.

If you created your child theme somewhere other than on the server in the wp-content/themes/yourthemename folder, then you should zip your new child theme folder.

• Log into your WordPress dashboard.
• Go to Appearance > Themes.
• Click Add new.
• Choose Upload Theme.
• Drag your zipped file to the new box that appears or click the file selector and browse to it on your computer.
• Once it has been uploaded, then you can preview it and then activate it.

Add Template Files

To override other templates, you can copy them from the parent theme into the child theme. Any template files that have the same name in the child as in the parent act as overrides. Then adjust the contents of the templates as needed.

To add new templates, it’s just a case of making a new file with the correct name and adding your own content. The above section explains the manual process.

Now let’s go over how to create child themes with a WordPress plugin.

Use a WordPress Plugin

Log into your WordPress dashboard. Click on Plugins > Add New. Search for child theme.

The first plugin you will see is the Child Theme Configurator. This is a good choice, as seen in the screenshot above, because it:

• Is compatible with the current version of WP.
• Has a lot of installations.
• Was recently updated.

Click on Install now > Activate. The next step is to navigate to Tools and then select child themes.

Find and select your parent theme from the drop-down menu. Choose analyze to make sure your theme is ok to use as a child theme.

Below is a step-by-step tutorial on how to set up Child Theme Configurator. If you decide to use a different WordPress plugin, you can easily find a tutorial on how to set it up as well.

As you now know, child themes are distinct themes that rely on their parent theme for some of their functionality.

When you use a child theme, WordPress will look for the child before the parent and follow the styling and functionality of the child if it exists.

Save yourself a lot of time, trouble, and future headaches when the parent theme updates by creating a child that will not be affected by the update.

Related posts

• Tworzenie motywu potomnego w WordPress

• Jak założyć własną witrynę podobną do Twittera za pomocą motywu WordPress P2?

• Jak przenieść witrynę WordPress z jednego hosta na drugi?

• Jak zainstalować i skonfigurować WordPress na Microsoft Azure

• Jak uruchomić niesamowicie szybki WordPress na Microsoft Azure

• Jak przyspieszyć witrynę WordPress w 11 krokach

• Przekieruj użytkowników ze strony 404 w WordPress

• Jak sprawdzić, czy witryna jest zablokowana w AdSense

• WordPress Jetpack: co to jest i czy warto go zainstalować?

• Jak korzystać z Lumen5, aby zmienić post na blogu w wideo?

• Jak skonfigurować prywatność w WordPressie i dlaczego jest to ważne

• Samouczek WordPress Gutenberg: Jak korzystać z nowego edytora

• Jak usunąć wszystkie ślady wtyczki WordPress?

• Recenzja książki: Zbuduj własną stronę internetową: komiksowy przewodnik po HTML, CSS i Wordpress

• 11 najlepszych wtyczek do podcastów WordPress

• Jak zainstalować witrynę testową WordPress na swoim komputerze?

• Jak przyspieszyć dowolną witrynę WordPress za pomocą .HTACCESS

• Najlepszy format pisania bloga, aby zdobyć punkty na całym świecie

• Jak zwiększyć wydajność w WordPressie poprzez czyszczenie bazy danych?

• 10 niezbędnych wtyczek WordPress dla witryny dla małych firm