Tworzenie pierwszego motywu potomnego WordPress
Wtorek, 5 grudnia 2023
Niezależnie od tego, czy chcesz stworzyć tylko nieznacznie dostosowany motyw, czy coś zupełnie wyjątkowego, utworzenie motywu potomnego WordPress może znacznie przyspieszyć proces rozwoju.
Motywy potomne pozwalają zacząć od podstaw istniejącego motywu, dzięki czemu nie trzeba wymyślać koła na nowo. Możesz wybrać motyw, który ma potrzebną funkcjonalność i podstawowy układ, a następnie dostosować wszystko w nim, tak jak przy projektowaniu motywu od podstaw.
W tym poradniku stworzymy motyw potomny oparty na najnowszym domyślnym motywie WordPress, Twenty Eleven. Wykorzystamy również kilka przydatnych wtyczek i innych sztuczek, aby jeszcze bardziej ułatwić tworzenie motywu potomnego.
Będziesz potrzebował bardzo podstawowej wiedzy z zakresu HTML i CSS, ale dobrą wiadomością jest to, że w przypadku podstawowego motywu potomnego nie musisz znać żadnego PHP! Stworzony motyw jest bardzo podstawowy, ale zapewni ci elementy potrzebne do rozpoczęcia tworzenia własnych motywów, nawet jeśli nigdy wcześniej nie tworzyłeś motywu WordPress!
Oto krótkie spojrzenie na ostateczny motyw, który będziemy tworzyć:
Prawdopodobnie najważniejszym krokiem w tworzeniu motywu podrzędnego jest wybranie motywu nadrzędnego. W tym poradniku, jak już wspomniano, będziemy używać Twenty Eleven. Powodem tego jest fakt, że jest on łatwo dostępny, darmowy, prawdopodobnie jest już zainstalowany na każdej zaktualizowanej instalacji WP i jest dobrze zakodowany.
To ostatnie jest najważniejszą rzeczą, którą należy wziąć pod uwagę przy wyborze motywu nadrzędnego: upewnij się, że jest dobrze zakodowany. Głównym powodem jest to, że jeśli motyw nadrzędny jest dobrze zakodowany, nieskończenie łatwiej będzie stworzyć motyw podrzędny, który jest dobrze zakodowany, ponieważ nie będziesz musiał stosować hacków, aby wszystko działało.
Za każdym razem, gdy chcesz dostosować motyw, lepiej jest użyć motywu podrzędnego zamiast bezpośrednio edytować motyw nadrzędny. W ten sposób, jeśli zostanie wydana aktualizacja oryginalnego motywu, motyw nie ulegnie uszkodzeniu. A jeśli zarówno motyw nadrzędny, jak i motyw podrzędny są dobrze zakodowane, prawdopodobnie nie zauważysz żadnych różnic w zaktualizowanym motywie na froncie witryny.
Najszybszym i najłatwiejszym sposobem na rozpoczęcie pracy z motywem potomnym jest użycie wtyczki One-Click Child Theme. Wystarczy ją zainstalować, aktywować motyw nadrzędny, na którym ma być oparty motyw podrzędny (jeśli nie jest jeszcze aktywny) i kliknąć "Motyw podrzędny" w sekcji Wygląd na pulpicie nawigacyjnym WP.
Następnie wprowadź nazwę nowego motywu podrzędnego, krótki opis i swoje imię, a następnie kliknij "Utwórz motyw podrzędny". To wszystko. Jedno słowo ostrzeżenia: Otrzymałem komunikat o błędzie po kliknięciu "Create Child", ale motyw potomny został utworzony bez przeszkód.
Alternatywnie można utworzyć motyw podrzędny od podstaw. Aby to zrobić, otwórz wybrany edytor tekstu lub kodu i wprowadź następujące informacje (biorąc pod uwagę, że będziesz używać motywu nadrzędnego Twenty Eleven):
/*
Theme Name: Nazwa motywu podrzędnego
Opis: Opis motywu.
Autor: Your Name Here
Szablon: twentyeleven
(opcjonalne wartości, które można dodać: Theme URI, Author URI, Version)
*/
@import url("../twentyeleven/style.css");
Część "Template" sprawia, że jest to motyw podrzędny, a nie zwykły motyw, więc upewnij się, że prawidłowo zidentyfikowałeś rodzica motywu.
Zanim zaczniesz dostosowywać CSS nowego motywu podrzędnego, sprawdź opcje motywu i dokonaj tam pewnych dostosowań. Lepiej jest wprowadzać zmiany w istniejących ramach motywu, jeśli jest taka możliwość, ponieważ ułatwia to zarządzanie kodem motywu.
Na potrzeby tego dostosowania wybrałem układ treści po lewej stronie z pojedynczym paskiem bocznym i pozostawiłem schemat kolorów oraz domyślny kolor linków (na razie). Pozostawiłem również białe tło, nagłówek z jednym z domyślnych obrazów i czarny kolor tekstu nagłówka.
Uwaga: Jeśli chcesz wyłączyć wybór kolorów w opcjach motywu, dodaj !important do specyfikacji kolorów w CSS.
Jeśli przejdziesz do edytora motywów WordPress, zobaczysz w większości pusty arkusz stylów dla nowego motywu potomnego. Pierwszy wiersz nowego pliku CSS (po informacjach o motywie podrzędnym) importuje arkusz stylów z motywu nadrzędnego. Ma to kluczowe znaczenie i musi pozostać na górze arkusza, w przeciwnym razie nadrzędny arkusz stylów zostanie unieważniony i nie zostanie zaimportowany.
Jedną z rzeczy, które warto zrobić w tym momencie, jest zainstalowanie lepszej wtyczki edytora kodu do edycji motywu. Składnia oznaczona kolorami znacznie ułatwia kodowanie bezpośrednio w WP i będzie szczególnie przydatna dla tych, którzy są przyzwyczajeni do kolorowej składni w zewnętrznych edytorach. Moim osobistym wyborem jest Advanced Code Editor.
Będziesz także potrzebował jakiegoś edytora tekstu do skonfigurowania naszego pliku functions.php, najlepiej takiego z podświetlaniem składni.
Może to być jedna z najbardziej frustrujących części tworzenia motywu potomnego: znalezienie, które części kodu należy edytować, a które można pozostawić w spokoju. Celem motywów potomnych jest ułatwienie tworzenia i konserwacji motywów. W tym celu chcemy stworzyć jak najmniej nowego kodu.
Aby to znacznie ułatwić, warto zainstalować wtyczkę taką jak Firebug. Umożliwi to kliknięcie części projektu strony i wyświetlenie powiązanych klas div i CSS. Możesz także wypróbować kod, aby zobaczyć, co działa, a następnie skopiować go i wkleić do CSS motywu. Zauważyłem, że najbardziej efektywnym sposobem edycji kodu jest pozostawienie motywu front-end otwartego w jednej karcie obok innej karty z pulpitem nawigacyjnym WP, w której edytujesz pliki.
Zacznijmy od zdefiniowania takich rzeczy jak kolor tła, typografia i inne podstawy, które dadzą nam podstawę dla naszego motywu potomnego. Ten kod ustawia wszystko w nagłówku, z wyjątkiem przeniesienia naszego menu nawigacyjnego. Podzielmy to na kilka różnych kroków.
Ten pierwszy blok kodu daje nam całą naszą podstawową typografię (będziemy pobierać "Droid Sans" i "Dancing Script" z Google Web Fonts; więcej na ten temat w sekcji functions.php):
body, input, textarea, p {
color: #000000;
font-family: 'Droid Sans', sans-serif;
}
p {
font-size: 14px;
line-height: 24px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Dancing Script', cursive;
}
Następna sekcja ustawia tło głównej treści i cień.
#page {
background: #f5f5dc;
-moz-box-shadow: 0 0 10px #67949c;
-webkit-box-shadow: 0 0 10px #67949c;
box-shadow: 0 0 10px #67949c;
}
Następnie dokonamy pewnych zmian w tytule i opisie naszego bloga, a także zmienimy górne obramowanie nagłówka i usuniemy formularz wyszukiwania (który zostanie zastąpiony naszym menu nawigacyjnym w następnym kroku).
#site-title a {
font-size: 48px;
font-weight: 700;
line-height: 60px;
}
#branding {
border-top: 2px solid #67949c;
}
#branding #searchform {
display: none;
}
#site-description {
font-size: 18px;
margin: 0 270px 3em 0;
}
To daje nam nagłówek, który wygląda tak:
Kolejną zmianą, którą chcemy wprowadzić, jest przeniesienie menu nawigacyjnego z jego domyślnej pozycji pod obrazem nagłówka do prawego górnego rogu, naprzeciwko tytułu bloga lub logo.
Ten format działa najlepiej w przypadku witryn, które mają tylko niewielką liczbę stron. Większe witryny lub witryny z podstronami będą wymagały dodatkowego rozważenia i prawdopodobnie nie będą dobrze działać z tego rodzaju układem.
Oto kod, którego będziesz potrzebować:
#access {
clear: both;
display: block;
float: right;
margin: 0 auto 6px;
position: relative;
top: -410px;
width: 500px;
background: none;
box-shadow: none;
}
Menu nawigacyjne powinno teraz znajdować się nad obrazem nagłówka, obok logo. Następnie dodamy kilka stylów do naszej nawigacji i zamienimy je w przyciski zamiast jednolitego paska. Oto kod dla podstawowego stylu czcionki:
#access a {
font-family: 'Dancing Script', 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 1.4em;
font-weight: 700;
padding: 0 1em;
line-height: 2.666em;
}
Oto podstawowe formatowanie przycisku za tekstem, w tym ładny wewnętrzny cień:
#access li {
background: #84bbc5;
margin-right: 15px;
-moz-box-shadow: inset 0 0 3px 3px #739ca3;
-webkit-box-shadow: inset 0 0 3px 3px #739ca3;
box-shadow: inset 0 0 3px 3px #739ca3;
}
A oto kod dodający cień za przyciskami po najechaniu na nie kursorem (co w rzeczywistości sprawia wrażenie efektu animacji):
#access li:hover > a, #access a:focus {
background: #84bbc5;
color: #EEEEEE;
-moz-box-shadow: 0 0 3px 3px #739ca3;
-webkit-box-shadow: 0 0 3px 3px #739ca3;
box-shadow: 0 0 3px 3px #739ca3;
}
Teraz nagłówek będzie wyglądał następująco:
Dodajmy kilka bardzo podstawowych stylów dla paska bocznego. Zmiany, które tutaj wprowadzamy, mają przede wszystkim na celu dopasowanie pasków bocznych do wyglądu reszty witryny. Oto kod:
.widget a {
font-weight: 400;
font-family: 'Droid Sans', sans-serif !important;
}
.widget-title {
color: #282828;
letter-spacing: 0.1em;
line-height: 1.5em;
text-transform: none;
}
.widget-title jest już w znaczniku H3, więc przyjmuje czcionkę już tam określoną.
A oto jak to wygląda:
Najpierw chcemy zmienić wypełnienie górnej części postów, aby pierwszy post był wyrównany z górną częścią paska bocznego.
.entry-title {
padding-top: 0px;
}
Następnie zmienimy ikonę komentarza, która pojawia się obok tytułu posta na stronie głównej. To proste: wystarczy utworzyć nową ikonę (stworzyłem wersje dla wersji aktywnych i nieaktywnych), a następnie przesłać je za pomocą programu do przesyłania multimediów WP. Weź adres URL dla każdej z nich i wstaw je w następujący sposób:
.entry-header .comments-link a {
background: url("http://blogetic.com/site/wp-content/uploads/2011/11/comment-link.png") no-repeat scroll 0 0;
top: 0;
}
.entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active {
background: url("http://blogetic.com/site/wp-content/uploads/2011/11/comment-active.png") no-repeat scroll 0 0;
background-color: #f5f5dc !important;
}
Będziesz musiał dodać ! important do atrybutu koloru tła dla stanu najechania, aby zastąpić stylizację wykonaną dla linków w innych miejscach motywu. Obraz po najechaniu jest wypełnionym bąbelkiem tekstowym, podczas gdy normalny stan jest tylko konturem. Oto rezultat:
Następnie zajmiemy się stylizacją komentarzy. Jest to proste, ponieważ wszystko, co robimy, to zmiana schematu kolorów. Oto kod:
#respond {
background: none repeat scroll 0 0 #dadabe;
border: 1px solid #67949c;
}
#respond input[type="text"], #respond textarea {
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #b3b398; }
}
#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label {
background: none repeat scroll 0 0 #b3b398;
box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);
color: #555555;
}
#respond input#submit {
background: none repeat scroll 0 0 #67949c;
}
A oto wynik końcowy:
Jest to prawdopodobnie najbardziej techniczna część tworzenia motywu potomnego i jest konieczna tylko wtedy, gdy chcesz zrobić coś takiego jak dodanie Google Web Fonts do swojej witryny. Dokładnie to zamierzamy tutaj zrobić. Jest to jedyny moment podczas tworzenia motywu potomnego, w którym będziesz musiał pracować z PHP, a jeśli nie musisz wstawiać niczego do nagłówka motywu lub w innym miejscu, nie będziesz musiał w ogóle pracować z PHP.
Najpierw utwórz plik functions.php w wybranym edytorze tekstu lub kodu. Podstawowy kod będzie wyglądał mniej więcej tak:
W przypadku powyższego motywu podrzędnego musieliśmy wstawić kod do naszego nagłówka, aby połączyć odpowiednie czcionki internetowe Google, abyśmy mogli je wywołać w naszym CSS. Oto jak to zrobić (możesz uzyskać link bezpośrednio od Google z dowolnymi czcionkami, których chcesz użyć):
Teraz wszystkie czcionki powinny działać poprawnie! Wszystkie funkcje, które były zawarte w oryginalnym motywie nadrzędnym, również będą działać.
Jeśli chcesz zobaczyć cały kod zarówno CSS, jak i pliku functions.php, możesz pobrać je tutaj. Dołączone są również ikony dymków komentarzy.
Tworzenie motywu potomnego jest niezwykle proste w porównaniu do projektowania i kodowania motywu od podstaw. Dzięki podstawowej wiedzy na temat CSS i odrobinie PHP możesz stworzyć w zasadzie każdy rodzaj motywu, jaki chcesz. Motywy podrzędne w wielu przypadkach mogą być również wykorzystywane komercyjnie (o ile motyw nadrzędny pozwala na takie wykorzystanie) lub sprzedawane jako motywy stockowe (pamiętaj tylko, aby poinformować kupujących, że motyw wymaga motywu nadrzędnego).
Upewnij się, że twój kod jest dobrze napisany, skomentowany i uporządkowany. W ten sposób, jeśli motyw nadrzędny zostanie zaktualizowany, jest mało prawdopodobne, aby motyw podrzędny się zepsuł.
Motyw potomny, który stworzyliśmy w tym samouczku, jest bardzo, bardzo podstawowy. Daje jednak informacje potrzebne do rozpoczęcia projektowania własnych motywów. Zacznij od podstawowej zmiany stylizacji, aby zmoczyć stopy, a następnie zacznij odkrywać rzeczy, które możesz zrobić za pomocą PHP w pliku functions.php. Motywy potomne, zbudowane w oparciu o świetny motyw macierzysty, mogą być tak potężne, jak każdy inny dostępny motyw. Więcej informacji na temat motywów potomnych można znaleźć w WordPress Codex.
Masz więcej wskazówek dotyczących tworzenia świetnych motywów potomnych? Daj nam znać w komentarzach!
