Pierwsze kroki z motywami dziecięcymi WordPress

Artykuł napisany przez:
  • WordPress
  • Zaktualizowano: Jul 27, 2013

Wyobrażasz sobie, że zaczynasz swoje poprawki w świecie WordPress i znalazłeś wiele niesamowitych motywów. Znajdziesz nawet wiele motywów premium i większość z nich jest naprawdę warta swojej ceny (kilka książek o profesjonalnym wyglądzie i kodzie). I większość motywów, które znajdziesz tak blisko, ale żadna nie jest dokładnie tym, czego chcesz. Dobrze byłoby móc nieco przesunąć pasek menu, aby zastąpić czcionkę, aby dodać nowy blok tekstu.

Cóż, jeśli to brzmi znajomo, ten przewodnik jest dla Ciebie. Tutaj zanurzymy się w świecie motywów potomnych, w którym możesz zrobić prawie wszystko, co chcesz, bez przerywania zakupionego wspaniałego motywu lub utraty przyszłych aktualizacji, ponieważ wszystko, co zrobisz, zostanie cofnięte.

Edytowanie wyglądu bez modyfikowania plików kompozycji

W skrócie, na tym polega temat Child: Dostosowywanie bez modyfikowania oryginalnych plików. Motyw dla dzieci będzie miał zasadniczo takie same funkcje i wygląd głównego motywu (rodzica), chyba że wyraźnie powiesz inaczej.

Będzie zawierał co najmniej pliki 2, style.css i plik functions.php, wszystkie pozostałe pliki zostaną pobrane z kompozycji nadrzędnej, więc jeśli nie utworzysz nowego pliku w katalogu tematów podrzędnych, będziesz używać plików nadrzędnych.

Mamy tu wiele możliwości, ale główną zaletą jest to, że łatwo można wrócić do pierwotnego motywu, a więc można również zaktualizować główny motyw bez utraty jakichkolwiek zmian, ponieważ są one wykonywane w zupełnie innym folderze.

Chrońmy nasze ręce

Tak więc pierwszym krokiem jest utworzenie nowego katalogu tematów podrzędnych w folderze / wp-content / themes /. Nazwijmy to "Twenty-Child", i stwórzmy nasz podstawowy plik styles.css:

/ * Nazwa motywu: Twenty Child Theme URI: http://www.webrevenue.co Opis: Learning Child themes right autor: Rochester Oliveira Autor URI: http://www.webrevenue.co/author/rochester/ Szablon: twentytwelve * / / * Wywołanie głównego pliku CSS tematu * / @import ("../ twentytwelve / style.css"); / * Dodaj wszystko, co chcesz poniżej * /

Parametry są (pomijając inne opcjonalne parametry):

  • Nazwa motywu: nazwa, którą zobaczysz pod ekranem wyboru motywów
  • Theme URI: Link, który będzie tam wyświetlany
  • Opis: Krótki opis, dzięki któremu będziesz pamiętać o co chodzi
  • Autor: Kto stworzył temat dziecka
  • Identyfikator URI autora: jeśli chcesz utworzyć link do strony autora
  • Szablon: główny folder motywu (jeśli chcesz użyć innego motywu jako głównego, po prostu zastąp ten parametr)

Po dodaniu tego kodu zobaczysz Motyw dziecka w grupie WP admin> Appearance> Themes. Możesz go teraz wybrać, a wszystkie wprowadzone zmiany będą widoczne w Twojej witrynie.

Motyw dziecka edytuje 101

Może to być bezużyteczne, jeśli masz zerową wiedzę o CSS, prawda? Źle! CSS jest w rzeczywistości dość łatwe i można znaleźć wiele fragmentów, które pomogą ci w tym. Oto kilka prostych wskazówek, które pomogą Ci w dostosowaniach.

#1 Zainstaluj Firebug

Wielu ludzi po prostu kocha Chrome i Safari (tak robię!), Ale dla mnie FireFox jest znacznie lepszy do rozwoju. Tak więc, jeśli chcesz go użyć, polecam również zainstalowanie firebug, który jest niesamowitym narzędziem do zrozumienia wszystkich selektorów, które są aktywne w bieżącym elemencie.

Po zainstalowaniu możesz nacisnąć F12 lub kliknąć prawym przyciskiem myszy gdzieś na stronie i wybrać "Inspect Element". Zobaczysz nowe okno z bieżącym HTML strony i CSS (i wiele innych kart, które są przydatne, może możemy o nich później porozmawiać).

W polu CSS zobaczysz od góry do dołu wszystkie reguły CSS zastosowane do bieżącego elementu i bardziej "specyficzną" regułę na górze. To fajne, ale zobaczmy, co możesz zrobić z tymi informacjami

#2 Weź pod uwagę specyfikę CSS (lub wagę selektora)

Każda reguła CSS ma swój selektor, właściwości i wartości. Ale kiedy przeglądarka znajdzie 2 lub więcej reguł, które wpłyną na ten sam element, musi wybrać, który z nich jest bardziej odpowiedni. Zwykle mamy tę "regułę", aby zrozumieć, co zostanie rozważone:

  • ! ważna deklaracja zastąpi cokolwiek innego
  • Inline CSS nadpisze wszystko, ale! ważne zasady
  • ID (#header, #footer, # container ...) o wartości 100
  • Klasy (.main, .nav, .box) o wartości 10
  • Tagi (body, div, p, a) warte punktu 1
  • Uniwersalny selektor i pseudo-klasy (*,: hover,: after) o wartości 0, ale będą obowiązywać, jeśli istnieje "remis"

Ok, zobaczmy przykład, aby lepiej to zrozumieć. Kliknij prawym przyciskiem myszy nagłówek strony, używając dwudziestu dwunastu, a zobaczysz, że pierwszy CSS, który się pojawi:

.site-header {padding: 1.71429em 0; } artykuł, na bok, szczegóły, figcaption, rysunek, stopka, nagłówek, hgroup, nav, sekcja {display: block; }

Pierwszy selektor ma punkty 10 (ponieważ jest to klasa), a drugi ma punkt 1 każdy (ponieważ przecinki dzielą tylko różne selektory), dlatego pojawia się na górze. Gdybyś miał coś takiego jak #header div, ten selektor z pewnością byłby pierwszym, który się pojawi.

Dlaczego to takie ważne?

Ponieważ w celu edycji głównego motywu bez edytowania jego plików CSS musisz ZAWSZE używać reguł, które mają więcej punktów niż reguły zdefiniowane w głównym motywie. I możesz być sprytny w tym i używać prostego kodu. Na przykład, aby zastąpić tę właściwość:

.site-header {padding: 1.71429em 0; }

Możesz dodać to do CSS motywu potomnego, ale nie powinieneś:

.site-header {padding 15px 0! ważny; }

Ponieważ jest to zły kod i trudniej jest go zastąpić, jeśli trzeba to zmienić na przykład na pojedynczej stronie. Więc możesz to łatwo wykorzystać:

body .site-header {padding: 15px 0; }

Ten selektor ma punkty 11, które są większe niż oryginalny 10, więc ten kod zostanie zastosowany.

#3 Dobrze wykorzystaj funkcje

Plik child functions.php jest jedynym plikiem, który zostanie załadowany IN ADDITION do oryginalnego pliku. To sprytne rozwiązanie opracowane przez zespół WP, dzięki czemu możesz zachować oryginalne funkcje i dodawać własne funkcje. Połów jest taki, że funkcje motywu potomnego zostaną załadowane jako pierwsze, a programista kompozycji MUSI zrobić coś takiego, aby uniknąć konfliktów podczas deklarowania funkcji:

if (! function_exists ('top_menu')) {function top_menu () {// fajny kod tutaj} add_action ('wp_head', 'top_menu'); }

Dzieje się tak, ponieważ jeśli zdefiniujesz funkcję w pliku motywu podrzędnego, może ona zastąpić oryginalną. Jeśli twórca motywu nie zrobi tego w ten sposób, otrzymasz brzydki błąd PHP (ponieważ ta sama funkcja jest tworzona dwukrotnie).

#4 Dowiedz się niektóre właściwości CSS

Czy wiesz, że możesz ukrywać i dodawać rzeczy za pomocą CSS? Musisz zainstalować firebuga, aby znaleźć właściwy selektor, ale możesz ukryć przedmiot, dodając ten kod:

body a {display: none}

Aby dodać, jest to bardziej skomplikowane, ponieważ możesz dodawać tylko małe teksty, jeśli chcesz mieć tekst "Na wyprzedaży!" Po tagu ceny, na przykład możesz użyć tego kodu:

.price del: after {color: red; treść: "Na wyprzedaży!"; }

Co o tym myślisz?

Co myślisz o tym przewodniku? Czy rozważysz zastosowanie motywów potomnych? Czy już go używasz? Daj nam znać, korzystając z poniższej sekcji komentarzy!

O Rochester Oliveira

Jestem web designer i przedsiębiorca z Itajubá (MG), Brasil. Uwielbiam pisać o niejasnych tematach i robić fajne rzeczy.