Tworzenie pierwszego motywu dziecięcego WordPress
Niezależnie od tego, czy chcesz stworzyć nieco dostosowaną tematykę, czy coś zupełnie unikalnego, tworzenie motywu potomnego WordPressa może znacznie przyspieszyć proces tworzenia.
Motywy dla dzieci pozwalają zacząć od podstaw istniejącego motywu, dzięki czemu nie musisz wymyślać koła. Możesz wybrać motyw, który ma funkcjonalność i podstawowy układ, którego potrzebujesz, ale dostosuj wszystko, tak jak projektujesz od zera.
W tym samouczku utworzymy motyw potomny oparty na najnowszym domyślnym motywie WordPress, Twenty Eleven. Będziemy także używać przydatnych wtyczek i innych sztuczek, aby jeszcze łatwiej było stworzyć motyw dla dzieci.
Będziesz potrzebował bardzo podstawowej wiedzy o HTML i CSS, ale dobra wiadomość jest taka, że dla podstawowego motywu dziecięcego nie musisz znać żadnego PHP! Utworzony motyw jest bardzo prosty, ale zapewni elementy potrzebne do rozpoczęcia tworzenia własnych motywów, nawet jeśli nigdy wcześniej nie tworzyłeś motywu WordPress!
Temat, który będziemy tworzyć
Oto krótki przegląd ostatecznego tematu, który będziemy tworzyć:
Słowo o tematach rodziców
Prawdopodobnie najważniejszym krokiem w tworzeniu tematu potomnego jest wybór motywu macierzystego. W tym samouczku, 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.
Ten ostatni jest najważniejszy przy wyborze tematu rodzica: upewnij się, że jest dobrze zakodowany. Głównym powodem tego jest to, że jeśli Twój motyw macierzysty jest dobrze zakodowany, będzie nieskończenie łatwiejsze stworzenie tematu dla dzieci, który będzie dobrze zakodowany, ponieważ nie będziesz musiał używać hacków, aby wszystko działało.
Za każdym razem, gdy chcesz dostosowywać motyw, lepiej jest użyć motywu potomnego zamiast bezpośrednio edytować motyw macierzysty. W ten sposób, jeśli zostanie wydana aktualizacja oryginalnego motywu, twój motyw nie zostanie zerwany. Jeśli zarówno motyw główny, jak i motyw są dobrze kodowane, prawdopodobnie nie zauważysz żadnych różnic w zaktualizowanym temacie na stronie front-end witryny.
Motyw dla dzieci z jednym kliknięciem
Najszybszym i najprostszym sposobem na rozpoczęcie korzystania z motywu potomnego jest użycie Motyw dla dzieci z jednym kliknięciem podłącz. Po prostu zainstaluj, uaktywnij motyw macierzysty, na którym ma się opierać motyw potomny (jeśli nie jest już aktywny), a następnie kliknij "Motyw dziecka" pod wyskakującym Wyglądem na pulpicie nawigacyjnym WP.
Następnie wprowadź nazwę nowego motywu podrzędnego, krótki opis i swoje imię i kliknij "Utwórz dziecko". To wszystko. Jedno słowo lub ostrzeżenie: po kliknięciu "Utwórz dziecko" pojawił się komunikat o błędzie, ale motyw potomny został utworzony bez problemu.
Alternatywnie możesz utworzyć motyw potomny od podstaw. Aby to zrobić, otwórz wybrany przez siebie edytor tekstu lub kodu i wprowadź następujące informacje (biorąc pod uwagę, że będziesz używać motywu rodzica Twenty Eleven):
/*Theme Name: Your Child Theme's NameDescription: Your theme's description.Author: Your Name HereTemplate: twentyeleven(optional values you can add: Theme URI, Author URI, Version)*/@import url("../twentyeleven/style.css");Część "Szablon" sprawia, że jest to motyw potomny, a nie zwykły, więc upewnij się, że właściwie zidentyfikowałeś rodzica tematu.
Ustawianie opcji motywu
Przed rozpoczęciem dostosowywania nowego pliku CSS motywu potomnego należy sprawdzić opcje motywu i dokonać w nim pewnych dostosowań. Lepiej wprowadzić zmiany w istniejącym schemacie kompozycji, jeśli jest to opcja, ponieważ ułatwia to zarządzanie kodem kompozycji.
W tym dostosowaniu wybrałem układ "treść po lewej stronie" z pojedynczym paskiem bocznym i pozostawiłem schemat kolorów i domyślny kolor linku (na razie). Pozostawiłem też białe tło, nagłówek z jednym z domyślnych obrazów i kolor tekstu nagłówka czarny.
Uwaga: Jeśli chcesz wyłączyć wybór koloru w opcjach kompozycji, dodaj !important do specyfikacji kolorów w twoim CSS.
Podstawy edytowania Twojego motywu
Jeśli przejdziesz do edytora motywów WordPress, zobaczysz przeważnie czysty arkusz stylów dla nowego motywu potomnego. Pierwszy wiersz nowego pliku CSS (po informacji o motywie potomnym) importuje arkusz stylów z motywu rodzica. Jest to bardzo ważne i musi pozostać na górze arkusza, ponieważ jego macierzysty arkusz stylów zostanie unieważniony i nie zostanie zaimportowany.
Jedną rzeczą, którą możesz chcieć zrobić w tym momencie, jest zainstalowanie lepszej wtyczki edytora kodu do edycji motywów. Kodowana kolorami składnia znacznie ułatwia kodowanie bezpośrednio w WP, a szczególnie przyda się tym, którzy używają kolorowej składni w zewnętrznych edytorach. Mój osobisty wybór jest Zaawansowany edytor kodu .
Będziesz także potrzebował jakiegoś edytora tekstu do konfigurowania naszego pliku functions.php, najlepiej takiego, który ma podświetlanie składni.
Znajdowanie kodu do zmiany
Może to być jedna z najbardziej frustrujących elementów rozwoju tematu dla dzieci: ustalenie, które części kodu należy edytować i które można pozostawić w spokoju. Celem motywu dziecięcego jest ułatwienie tworzenia i utrzymywania kompozycji. W tym celu chcemy stworzyć jak najmniej nowego kodu.
Aby było to łatwiejsze, powinieneś zainstalować wtyczkę podobną do tej Firebug . Umożliwi to kliknięcie części projektu strony i wyświetlenie powiązanego elementu div i klasy CSS. Możesz także wypróbować kod, aby zobaczyć, co działa, a następnie skopiować i wkleić go do CSS Twojego motywu. Odkryłem, że utrzymywanie motywu front-end w jednej karcie obok innej karty z pulpitem WP, w którym edytujesz pliki, jest najbardziej efektywnym sposobem edycji kodu.
Podstawy
Zacznijmy od zdefiniowania takich rzeczy jak kolor tła ciała, typografia i inne podstawy, które dadzą nam podstawę do naszego motywu dziecięcego. Ten kod ustawia wszystko w nagłówku, z wyjątkiem przenoszenia naszego menu nawigacyjnego. Podzielmy to na kilka różnych kroków.
Ten pierwszy blok kodu daje nam całą naszą podstawową typografię (będziemy ściągać "Droid Sans" i "Dancing Script" z Google Web Fonts; więcej na ten temat w dziale 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;}W następnej sekcji ustawiono główne tło 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 wprowadzimy pewne zmiany w tytule i opisie bloga, a także zmienimy górną granicę nagłówka i usuniemy formularz wyszukiwania (który zostanie zastąpiony naszym menu nawigacji 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;}Daje nam to nagłówek, który wygląda następująco:
Przesuń główne menu nawigacyjne
Następną zmianą, którą chcemy wprowadzić, jest przesunięcie menu nawigacji z domyślnej pozycji pod obrazem nagłówka w prawym górnym rogu, naprzeciwko tytułu lub logo bloga.
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ć dodatkowego rozważenia i prawdopodobnie nie będą działać z takim układem.
Oto kod, którego potrzebujesz:
#access {clear: both;display: block;float: right;margin: 0 auto 6px;position: relative;top: -410px;width: 500px;background: none;box-shadow: none;}Twoje menu nawigacyjne powinno znajdować się nad obrazem nagłówka obok logo. Następnie dodamy kilka stylów do naszej nawigacji i zamieniamy je w przyciski zamiast zwykłego paska. Oto kod podstawowej stylizacji czcionek:
#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 do dodawania cienia za przyciskami, gdy są one przeskakiwane (co faktycznie daje wrażenie efektu animacji w użyciu):
#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 twój nagłówek będzie wyglądał następująco:
Podstawowa stylizacja paska bocznego
Dodajmy bardzo proste style na pasku bocznym. Zmiany, które tutaj wprowadzamy, mają na celu przede wszystkim dostosowanie 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;} The .widget-title jest już w znaczniku H3, więc przyjmuje czcionkę już tam podaną.
A oto jak to wygląda:
Zmienia format postu
Najpierw chcemy zmienić dopełnienie dla górnych słupków, tak aby pierwszy wpis był wyrównany do górnej części paska bocznego.
.entry-title {padding-top: 0px;}Następnie zmienimy ikonę komentarza, która pojawi się obok tytułu wpisu na stronie głównej. Ta jest prosta: po prostu utwórz nową ikonę (stworzyłem wersje dla wersji aktywnych i nieaktywnych), a następnie wgraj je za pomocą narzędzia do przesyłania plików WP. Pobierz adres URL każdego z nich i wstaw je w ten sposób:
.entry-header .comments-link a {background: url("https://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("https://blogetic.com/site/wp-content/uploads/2011/11/comment-active.png") no-repeat scroll 0 0;background-color: #f5f5dc !important;} Musisz dodać !important do background-color atrybut stanu zawisu w celu nadpisania stylizacji wykonanej w łączach znajdujących się w innym miejscu motywu. Obraz najechany to wypełniona bańka tekstowa, podczas gdy normalny stan to tylko kontur. Oto wynik:
Następnie zajmiemy się stylizacją komentarzy. 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:
Wstawianie kodu do głowy lub w innym miejscu w motywie
Jest to prawdopodobnie najbardziej techniczna część tworzenia kompozycji podrzędnej i jest niezbędna tylko wtedy, gdy chcesz dodać coś na kształt Czcionek internetowych Google do swojej witryny. Dokładnie to zamierzamy tutaj zrobić. Jest to jedyny czas tworzenia motywu potomnego, który będzie potrzebny do pracy z PHP, a jeśli nie musisz wstawiać niczego do nagłówka twojego 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, którego będziesz używać, będzie wyglądał mniej więcej tak:
W przypadku motywu potomnego powyżej, musieliśmy wstawić kod do naszego nagłówka, aby połączyć odpowiednie czcionki Google Web, abyśmy mogli je nazwać w naszym CSS. Oto jak to robimy (możesz dostać link bezpośrednio od Google przy użyciu dowolnych czcionek, których chcesz użyć):
Teraz wszystkie czcionki powinny działać poprawnie! Wszystkie funkcje uwzględnione w oryginalnym temacie nadrzędnym również będą działać.
Pobierz pliki motywów
Jeśli chcesz zobaczyć cały kod zarówno pliku CSS, jak i functions.php, możesz je pobrać tutaj . Dołączone są również ikony dymków komentarzy.
Wniosek
Tworzenie kompozycji podrzędnej jest niezwykle proste w porównaniu do projektowania i kodowania motywu od zera. Przy odrobinie podstawowej wiedzy o CSS i odrobinie PHP możesz stworzyć praktycznie dowolny motyw. Motywy dziecięce, w wielu przypadkach, mogą być również wykorzystywane komercyjnie (o ile motywy macierzyste pozwalają na takie użycie) lub sprzedawane jako motywy giełdowe (pamiętaj tylko, aby powiadomić kupujących, że motyw wymaga motywu rodzica).
Upewnij się, że Twój kod jest dobrze napisany, skomentowany i zorganizowany. W ten sposób, jeśli twój motyw macierzysty zostanie zaktualizowany, Twój motyw potomny raczej się nie zepsuje.
Temat dziecka, który stworzyliśmy w tym samouczku, jest bardzo, bardzo prosty. Zapewnia jednak informacje potrzebne do rozpoczęcia projektowania własnych motywów. Zacznij od podstawowej zmiany, aby zmoczyć stopy, a następnie zacznij odkrywać, co możesz zrobić z PHP w pliku functions.php. Kompozycje podrzędne, gdy są zbudowane na świetnym motywie rodzica, mogą być tak potężne, jak każdy inny dostępny motyw. Aby uzyskać więcej informacji na temat tematów podrzędnych, zobacz Kodeks WordPress .
Czy masz więcej wskazówek, jak tworzyć świetne motywy dziecięce? Daj nam znać w komentarzach!