Przewodnik po tworzeniu motywów dla dzieci WordPress

Istnieje wiele powodów, dla których programiści WordPress zaczynają używać motywów potomnych. Dają one możliwość dostosowania unikalnego układu do innego istniejącego motywu. Jest to idealne rozwiązanie dla początkujących, którzy chcą bawić się budując własne motywy.

Ponadto wiele projektów premium wyda z czasem nowe aktualizacje. Jeśli wprowadzasz zmiany w podstawowych plikach motywu, zostaną one zastąpione podczas wykonywania aktualizacji, ale motywy potomne są oddzielne i starannie schowane. Oznacza to, że możesz wykorzystać istniejące motywy premium i zaoszczędzić mnóstwo czasu.

W tym przewodniku chcę przedstawić podstawowe pojęcia dotyczące budowania motywu potomnego WordPress i dlaczego jest to taki dobry pomysł.

Rozpoczęcie pracy

Motywy potomne nie są tak trudne, jak mogą się wydawać. Korzyści płynące z pracy z motywem nadrzędnym oznaczają, że nie musisz pisać całego HTML / CSS od podstaw. Motyw potomny automatycznie użyje wszystkich dołączonych plików szablonów, takich jak sidebar.php lub footer.php. Ale jeśli ich brakuje, motyw potomny pobierze te same pliki od rodzica.

Ta funkcjonalność oferuje ogromną swobodę w dostosowywaniu już istniejących szablonów. Świetnie nadaje się również do retuszowania obszarów wokół witryny w przypadku specjalnych wydarzeń, takich jak dodawanie wzorów na Boże Narodzenie czy Nowy Rok.

Twoje wymagane pliki

Potrzebujesz tylko jednego arkusza stylów .css, aby ustawić motyw potomny w WordPressie. Musisz także utworzyć nowy katalog w / wp-content / themes folder, który będzie zawierał motyw Twojego dziecka. Zwróć uwagę, że ty nie są tworzenie tego folderu wewnątrz motywu nadrzędnego, ale zaraz obok niego w tym samym katalogu motywów.

Programiści często dołączają funkcje.php i screenshot.png w tym samym folderze, co nowy plik CSS. Zrzut ekranu jest wyświetlany w panelu administracyjnym WordPress, a plik motywu funkcji może być używany do ton zmian w backend.

Ale na razie powinniśmy skupić się na głównym arkuszu stylów. Jest to powszechnie nazywane style.css i zawiera nagłówek komentarza z kluczowymi metainformacjami. Jest to ważne, ponieważ motyw będzie wyświetlany tylko jako dziecko, jeśli podasz nazwę katalogu nadrzędnego. Poniżej znajduje się przykładowy komentarz nagłówka:

 / * Nazwa motywu: Identyfikator URI motywu Twenty Eleven: http: //example.com/ Opis: Motyw dziecka dla projektu Twenty Eleven Autor: Jake Rocheleau Autor URI: http: //www.hongkiat.com/blog/ Szablon: twentyeleven Wersja: 0.1 * / 

Wartość dla szablon powinna być nazwą katalogu towarzyszącego tematu nadrzędnego. Poza tym wszystkie inne znaczniki powinny być znane standardowemu motywowi WordPress.

Mimo że zostaną użyte wszystkie macierzyste szablony PHP, oryginalny style.css rodzica będzie nie być importowane automatycznie. Jeśli chcesz pracować nad oryginalnymi stylami, musisz umieścić je w górnej części dokumentu style.css Twojego dziecka. Poniżej znajduje się przykład z motywem WP Twenty Eleven.

 @import url („… /twentyeleven/style.css”); 

Konfigurowanie nowych stylów

Stosowanie reguł CSS do motywu jest tak proste, jak edycja oryginału. Jeśli wiesz, które elementy musisz wycelować, użyj tych samych selektorów we własnym temacie potomnym.

Moglibyśmy zaprezentować kilka naprawdę łatwych zmian w linkach i akapitach. Użyłem kodu z oryginalnego motywu Twenty Eleven do kierowania różnych elementów. Czasami konieczne jest użycie bardziej specyficznego selektora, aby zastąpić starszy projekt.

 body padding: 0 1.4em;  #page margin: 1.667em auto; max-width: 900px;  a color: # 5281df; dekoracja tekstowa: brak; font-family: Calibri, Tahoma, Arial, sans-serif;  a: focus, a: active, a: hover text-decoration: podkreślenie;  

W tych zmianach zmniejszyłem całkowitą wielkość ciała, a także usunąłem trochę obicia z krawędzi. Wszystkie te selektory można znaleźć w oryginalnym dokumencie .css. Warto zauważyć, że zmieniam także niektóre właściwości dla wszystkich linków kotwiczących, które zawierają inny stos czcionek i wybór kolorów.

Ważne rzeczy

CSS ma specjalną deklarację oznaczającą priorytet nad innymi stylami. Składnia jest wyświetlana jako !ważny zaczynając od wykrzyknika i kończąc na końcu swojej własności CSS. Jest to konieczne, jeśli masz style kaskadowe z motywu nadrzędnego, które nadpisują własne reguły niestandardowe.

 a color: # 5281df! important; dekoracja tekstowa: brak; font-family: Calibri, Tahoma, Arial, sans-serif;  

Powyżej skopiowałem moje oryginalne zmiany i edytowałem kolor tekstu zakotwiczenia za pomocą ważnej klauzuli. Będzie to miało pierwszeństwo przed wszystkimi innymi stylami tej samej głębokości selektora. Bardziej zdefiniowane elementy (takie jak #access li: hover> a) zazwyczaj będą posiadać własne style, chyba że kolor był nadal dziedziczony z naszego oryginalnego selektora. W tym przypadku nasz motyw nadrzędny nie konfiguruje właściwości rodziny czcionek na łączach zakotwiczonych, tak więc nie mamy żadnych problemów z dziedziczeniem.

Jeśli masz problemy z wprowadzeniem zmian, spróbuj wyświetlić jeden z tych ważnych znaków na końcu oświadczenia o nieruchomościach. To nie jest doskonała poprawka dla każdego problemu z dziedziczeniem, ale przydaje się znacznie częściej niż mogłoby się wydawać.

Klonowanie functions.php

W przeciwieństwie do głównego arkusza stylów, motyw potomny automatycznie importuje funkcje rodzica. Oznacza to, że nie musisz kopiować żadnego kodu PHP, aby nadal był aktywny w nowym temacie. Jeśli jednak chcesz ponownie zdefiniować niektóre funkcje, możesz zbudować inny function.php i zapisać w nowym kodzie wszelkie zmiany.

Jako przykład zbudowałem funkcję, która analizuje kilka plików JavaScript podczas inicjowania szablonu. Spowoduje to usunięcie wszystkich starszych wersji skryptów jQuery i SWFObject, jednocześnie dodając najnowsze wersje do wp_head powierzchnia.

 // kolejkowanie plików js dla funkcji ładowania mytheme_js () if (is_admin ()) return; wp_deregister_script ('jquery'); wp_register_script („jquery”, „http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”); wp_enqueue_script ('jquery'); wp_deregister_script ('swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ('swfobject');  add_action ('init', mytheme_js); 

Powinienem zaznaczyć, że jeśli importujesz kod z nadrzędnych funkcji.php, będziesz musiał użyć innej nazwy funkcji. W przeciwnym razie PHP wyda błąd krytyczny i będziesz musiał FTP na serwerze, aby naprawić błąd.

Praca z plikami motywów

Najszerszą kategorią motywów jest tworzenie niestandardowych układów i typów stron. Domyślnie motyw potomny dziedziczy wszystkie pliki motywu rodzica. Ale masz możliwość tworzenia nowych plików motywu podrzędnego, a WP zarejestruje je jako szablon „podstawowy”.

Na przykład archive.php i index.php są używane do wyświetlania odpowiednio archiwów postów i ekranu strony głównej. Jeśli są zmiany, które chcesz wprowadzić, które wymagają edycji w kodzie HTML, to będziesz bezpieczniej klonować pliki nadrzędne i edytować je w katalogu motywów dziecka.

Niestandardowe szablony stron

Podczas gdy mówimy o plikach szablonów, chcę również przedstawić część funkcjonalności WordPress, z którą wielu nie zna. Możesz tworzyć szablony stron i postów, które będą wybierane z panelu administracyjnego podczas tworzenia nowej zawartości. Nawet jeśli motyw nadrzędny nie ma nowego niestandardowego pliku szablonu, WordPress nadal będzie używać dziecka w miejsce a page.php lub single.php.

Najpierw utwórz nowy plik o nazwie page-offer.php. To będzie “oferta specjalna” strona promocyjna, która jest tematycznie inna niż wszystkie inne. W tym miejscu możesz skopiować oryginalny kod strony lub nawet całkowicie zbudować motyw od podstaw. Jedynym kodem, który potrzebujemy, aby WordPress wiedział o tym nowym szablonie, jest ustawienie komentarza w PHP.

Inną alternatywą dla tej metody jest tworzenie niestandardowych stron o nazwach zgodnych z unikalnym numerem ID. Więc zamiast ładować domyślne archive.php dla stron autora możesz utworzyć plik taki jak autor-ID.php gdzie ID to unikalny numer identyfikacyjny WordPress użytkownika. Chociaż ten system jest bardziej podatny, ponieważ trzeba utworzyć nowy plik szablonu dla każdego z autorów w witrynie.

Staje się bardziej przydatne, jeśli można połączyć te dwie techniki z innymi plikami szablonów. Szczególnie kategorie i znaczniki działają dobrze przy użyciu własnych plików motywów. Również, jeśli linkujesz do załączników w treści, będziesz chciał rozważyć różne możliwe układy szablonów dla każdego typu MIME. Poniżej przedstawiłem hierarchię szablonów dla prostego załącznika obrazu JPEG:

• image.php
• jpeg.php
• image_jpeg.php
• attachment.php

Pomocne narzędzia WordPress

Sam WordPress ma wszechstronny system wtyczek, który może zarządzać wieloma modyfikacjami. Ponieważ motywy potomne są tak nowe, nie ma jeszcze całego ataku wydań innych firm (jeszcze). Istnieje jednak kilka narzędzi, które możesz sprawdzić, aby skrócić czas programowania.

Oczywistą wzmianką jest wtyczka One-Click Child Theme stworzona i przetestowana pod kątem najnowszej wersji WordPress 3.x. Dodaje link do menu administratora “Tematy” sekcja, aby automatycznie zbudować dziecko przy użyciu aktualnie aktywnego motywu. Jest to fantastyczne, jeśli nie chcesz mieszać z FTP i chcesz bawić się nowymi pomysłami.

Jeśli planujesz edytować te pliki w panelu administracyjnym, będziesz także cieszyć się wyraźniejszym podświetlaniem składni. Domyślnie nie jest to oferowane w WordPressie, ale możesz zainstalować zaawansowany edytor kodu dla niektórych znacznie ulepszonych funkcji. To sprawia, że ​​brodzenie przez bloki kodu PHP i HTML / CSS jest o wiele łatwiejsze w zarządzaniu.

Dodatkowe zasoby

Wraz ze wszystkimi wskazówkami w tym przewodniku chcę udostępnić zestaw ważnych linków dla twórców motywów. Istnieje już tak wiele wspaniałych artykułów i darmowych motywów dziecięcych, które możesz sprawdzić, aby pogłębić ten temat. Dodałem wspaniałą kolekcję tych zasobów poniżej:

• 8 darmowych dwudziestu jeden motywów dziecięcych
• WordPress Online Codex »Motywy dziecięce
• Jak zbudować motyw dziecka WordPress za pomocą haków i filtrów
• Kilka słów na tematy dziecięce
• Jak tworzyć, modyfikować i używać motywów potomnych w WordPressie

Wniosek

Mam nadzieję, że proces tworzenia motywów potomnych WordPressa będzie dla Ciebie bardziej czytelny po przeczytaniu tego artykułu. Próbowałem wyjaśnić, w jaki sposób kompozycje potomne mogą dziedziczyć szablony CSS i PHP od rodzica. Dodatkowo bardzo łatwo jest manipulować określonymi plikami i tworzyć własne unikalne motywy.

.