Jak dostosować motyw WordPress (5 sposobów krok po kroku)

Jeśli zainstalowałeś motyw WordPress, ale nie jest on odpowiedni dla Ciebie, możesz czuć się sfrustrowany. Dostępnych jest wiele opcji dostosowywania motywów WordPress.

Wyzwaniem jest znalezienie właściwego sposobu, aby to zrobić.

W tym poście przeprowadzę Cię przez opcje dostosowywania motywu WordPress, pomóż zdecydować, który z nich jest odpowiedni dla Ciebie i pokaż, jak to zrobić bezpiecznie i efektywnie.

Wolisz obejrzeć naszą wersję wideo? Kliknij przycisk Odtwórz poniżej:

Opcje dostosowywania motywu

Zanim zagłębimy się w Twój motyw i zaczniemy go zmieniać, warto poznać dostępne opcje, ponieważ pasują one do różnych sytuacji.

Oto przegląd dostępnych opcji:

• Jeśli chcesz dodać funkcjonalność do swojego motywu, zainstaluj wtyczkę.
• Użyj Dostosuj na ekranach administratora WordPress, aby dostosować czcionki, kolory i być może także układ, w zależności od motywu.
• Jeśli pracujesz z motywem narzędzia do tworzenia stron, użyj jego funkcji, aby dostosować projekt swojej witryny.
• Jeśli zainstalowałeś motyw frameworka, użyj jednego z dostępnych motywów potomnych, aby dostosować swoją witrynę, wraz z wszelkimi możliwymi opcjami dostosowywania, które są dostępne na ekranach administratora.
• Jeśli Twój motyw jest specyficzne dla Twojej witryny i nie przeszkadza Ci to, edytuj bezpośrednio kod motywu.
• Jeśli chcesz edytować kod motywu innej firmy, utwórz motyw potomny.

Jeśli chcesz edytować kod , masz do dyspozycji wiele opcji, od używania edytora bloków, poprzez Customizer, aż po edycję plików. Przyjrzymy się im wszystkim w tym poście, ale zacznijmy od najprostszej opcji: instalacji wtyczki.

Czy naprawdę potrzebujesz dostosować swój motyw?

Czasami tego nie robisz Nie musisz w ogóle dostosowywać swojego motywu: zamiast tego musisz zainstalować wtyczkę.

Motywy dyktują projekt Twojej witryny: wygląd i sposób wyświetlania treści. Wtyczki dodają dodatkową funkcjonalność.

Jeśli zmiany, które chcesz wprowadzić, koncentrują się na funkcjonalności, a nie na projekcie, rozważ samodzielną instalację wtyczki. Może to być wtyczka, którą musisz napisać, taka, którą pobierzesz z katalogu wtyczek lub kupiona.

Jeśli chcesz edytować plik functions.php w swoim motywie, zadaj sobie pytanie:

Czy chciałbym zachować tę funkcję, gdybym w przyszłości zmienił motywy?

Jeśli odpowiedź brzmi tak, ten kod powinien trafić do wtyczki, a nie do motywu.

Dobre przykłady tego, czego użyłbyś wtyczki zamiast motywu, w tym dodawanie widżetów, rejestrowanie niestandardowych typów postów i taksonomii , tworzenie pól niestandardowych i dodawanie dodatkowych funkcji, takich jak sklep lub ulepszenia SEO.

Dostosowywanie motywu WordPress za pomocą ekranów administratora WordPress

Jeśli zmiany, które chcesz wprowadzić, dotyczą projektu i stosunkowo proste, możesz je wykonać za pomocą ekranów administratora. Moduł dostosowywania zapewnia różnorodne opcje dostosowywania motywu: dostępne opcje zależą od motywu. W menu Wygląd możesz zobaczyć coś o nazwie Edytor. Unikaj tego, z powodów, które opiszę wkrótce.

Dostosowywanie motywu za pomocą narzędzia do dostosowywania

Najłatwiejszym sposobem dostosowania motywu WordPress jest użycie modułu dostosowywania WordPress.

Dostęp do tego można uzyskać na dwa sposoby:

• Podczas przeglądania witryny (po zalogowaniu) kliknij łącze Dostosuj na pasku administracyjnym u góry ekranu.
• Na ekranach administratora kliknij Wygląd > Dostosuj.

Spowoduje to przejście do Customizer.

Na powyższym zrzucie ekranu mam zainstalował darmowy motyw o nazwie ColorMag, który ma wiele opcji dostosowywania. Dodano sekcje do narzędzia Customizer dla funkcji projektowania, w tym obrazu nagłówka, mediów społecznościowych, kolorów kategorii i karty Opcje projektu, która prowadzi do kolejnych zakładek, w których można wprowadzać zmiany w układzie i projekcie witryny.

Różne motywy mają różne opcje dostosowywania, ale nowsze motywy wydają się dodawać ich coraz więcej. Jeśli znajdziesz motyw, który Ci się podoba, ale nie jest dla Ciebie odpowiedni, może się okazać, że jego dostosowanie zapewni Ci dokładnie taki projekt i układ, jakiego potrzebujesz.

Edytor motywów (i dlaczego nie używać it)

Na ekranach administratora możesz zauważyć opcję o nazwie Edytor motywów, którą można aktywować za pomocą opcji Wygląd > Edytor motywów.

Daje to dostęp do plików w Twoim motywie , co oznacza, że możesz je bezpośrednio edytować.

Nie.

Nawet jeśli nie przeszkadza Ci pisanie CSS lub PHP, edytowanie plików w swoim motywie w ten sposób jest bardzo złym pomysłem z dwóch powodów:

• Jeśli kupiłeś lub pobrałeś motyw innej firmy, wszelkie wprowadzone zmiany zostaną utracone przy następnej aktualizacji motywu (i powinieneś aktualizować motyw ze względów bezpieczeństwa).
• Co ważniejsze, jeśli wprowadzisz zmiana, która psuje Twoją witrynę, nie będzie śledzona, a poprzednia wersja pliku nie zostanie zmieniona. Możesz nieodwracalnie zepsuć witrynę.

Jeśli chcesz edytować kod w swoim motywie, powinieneś to zrobić za pomocą edytora kodu (sprawdź najlepsze darmowe edytory HTML) i nie powinieneś Nie edytuj plików w aktywnej witrynie, dopóki nie przetestujesz jej w witrynie testowej. Jeśli chcesz edytować motyw innej firmy, powinieneś to zrobić za pomocą motywu potomnego. Więcej na ten temat w dalszej części tego postu.

WordPress wie, jak niebezpieczne jest używanie edytora motywów: wyświetla nawet ostrzeżenie, gdy próbujesz uzyskać do niego dostęp.

Więc posłuchaj rady WordPressa: nie użyj edytora motywów!

Korzystanie z kreatorów stron i struktur do dostosowywania motywu WordPress

Duża część motywów WordPress ma opcje dostosowywania, co oznacza, że możesz wprowadzać zmiany w projekcie i układzie za pomocą Customizer.

Ale niektóre motywy idą dalej i są zaprojektowane tak, aby można je było rozszerzyć i znacznie dostosować. Te motywy nazywane są strukturami motywów.

Inną opcją jest użycie wtyczki, która pozwala zaprojektować witrynę przy użyciu przyjaznego dla użytkownika interfejsu: są to tak zwane programy do tworzenia stron.

Korzystanie ze strony Builder do dostosowywania motywu

Wtyczki Kreatora Stron zostały zaprojektowane tak, aby ułatwić Ci ustawienie projektu witryny za pomocą interfejsu, który pozwala zobaczyć, co otrzymujesz.

Instalujesz wtyczkę do tworzenia stron ze zgodnym motywem, a następnie korzystasz z dostępnych opcji, aby zaprojektować witrynę dokładnie tak, jak chcesz.

Jednym z najbardziej znanych narzędzi do tworzenia stron jest Elementor, ale możesz dowiedzieć się o niektórych alternatywach w naszym zestawieniu narzędzi do tworzenia stron.

Kreatory stron umożliwiają edycję postów i stron za pomocą interfejsu przeciągnij i upuść, co oznacza, że możesz zobaczyć, jak będzie wyglądać treść i może sprawić, że każda strona będzie tak wyjątkowa.

Poniżej używam kreatora stron Elementor z motywem Hello Elementor, który jest z nim zgodny.

Kreatory stron zapewniają dużą elastyczność w zakresie układu i projektu stron. Jeśli jesteś przyzwyczajony do kreatora witryn, takiego jak Wix, mogą one ułatwić przejście na WordPress. A jeśli wolisz interfejs WYSIWYG dla treści WordPress, mogą one pomóc w szybkim projektowaniu stron.

Używanie struktury motywu do dostosowywania motywu

Alternatywą dla kreatorów stron jest motyw ramy. Są to zestawy motywów zaprojektowanych do współpracy. Jest jeden motyw nadrzędny, który jest ramą i wybór motywów podrzędnych, których możesz użyć do dostosowania głównego motywu i nadania mu odpowiedniego wyglądu.

Przykładem ram motywu jest Divi, który ma opcje dostosowywania, które pozwalają jeszcze bardziej dostosować projekt motywu podrzędnego, w tym interfejs przeciągnij i upuść podobny do tych stosowanych w programach do tworzenia stron.

Edytowanie kodu motywu WordPress

Jeśli nie przeszkadza Ci edytowanie CSS i / lub PHP, możesz edytuj kod w swoim motywie, aby dostosować motyw.

Zapewnia to największy stopień kontroli.

Jeśli edytujesz własny motyw, który jest specyficzny dla Twojej witryny i został opracowany specjalnie dla niego, możesz więc bezpośrednio edytować motyw. Ale jeśli pracujesz z motywem innej firmy i chcesz go edytować, powinieneś utworzyć motyw potomny, aby uniknąć utraty zmian przy następnej aktualizacji motywu.

Edycja plików motywu

Pierwszym krokiem do edycji motywu WordPress jest zrozumienie, które pliki motywów kontrolują co, a które należy edytować.

Arkusz stylów

Każdy motyw WordPress ma arkusz stylów o nazwie style.css. Zawiera cały kod do stylizacji witryny: układ, czcionki, kolory i nie tylko.

Jeśli chcesz na przykład zmienić kolory w swoim motywie, możesz wprowadzić zmiany w arkuszu stylów. Jeśli chcesz dodać nową czcionkę, możesz użyć arkusza stylów, aby zastosować ją do różnych elementów, takich jak tekst podstawowy i nagłówki.

Zwróć uwagę podczas edycji arkusza stylów: specyficzność oznacza, że kod elementu nie zawsze pochodzi z miejsca, w którym Myślę że jest.Elementy odziedziczą style z innych elementów znajdujących się nad nimi w hierarchii strony, chyba że dodasz styl specyficzny dla dolnego elementu.

Aby dowiedzieć się, jaki kod CSS wpływa na które elementy na stronie, możesz użyj inspektora w przeglądarce, aby wyświetlić CSS (w tym przykładzie Chrome DevTools):

Możesz następnie użyć tego do napisania nowego CSS, który będzie dotyczył pojedynczych elementów lub zakresu elementów lub klas na stronie.

Jeśli wszystkie te rozmowy o elementach, klasach i specyfice są dla Ciebie nowe, możesz unikać bezpośredniego edytowania CSS swojego motywu. Przynajmniej dopóki nie dowiesz się więcej o CSS i jak to działa.

Plik funkcji

Kolejnym plikiem, który będzie miał prawie każdy motyw, jest plik functions (functions.php) . To jest plik, który sprawia, że w Twoim motywie działa kilka rzeczy. Możesz w nim znaleźć kod rejestrujący funkcje motywu, takie jak polecane obrazy, widżety i nie tylko.

Jeśli masz ochotę dodać funkcjonalny kod do swojego motywu, to tutaj możesz go dodać. Ale uwaga: w większości przypadków naprawdę powinieneś pisać wtyczkę. Zadaj sobie pytanie:

Czy chciałbym zachować tę funkcję, gdybym w przyszłości zmienił motywy?

Jeśli odpowiedź brzmi tak, napisz wtyczkę zamiast dodawać kod do pliku funkcji. Wtyczki nie muszą być duże: nic nie stoi na przeszkodzie, abyś utworzył jedną dla kilku wierszy kodu.

Cały plik funkcji jest napisany w PHP, więc musisz się z nim zapoznać że. Nie kopiuj na ślepo kodu znalezionego w wyszukiwarce Google: poświęć trochę czasu na ustalenie, co robi ten kod i zrozumienie go. W ten sposób jest mniej prawdopodobne, że dodasz kod, który nie jest tak dobry, jak powinien.

Pliki szablonów motywów

Większość plików w motywie to pliki szablonów motywów . Są to pliki, które określają, jaką treść WordPress wyświetla na danej stronie i są wybierane zgodnie z hierarchią szablonów.

Jeśli chcesz zmienić sposób wyświetlania treści w danym typie postu, stronie lub archiwum , będziesz musiał albo edytować jeden z tych plików, albo utworzyć nowy.

Na przykład, powiedzmy, że Twój motyw ma plik archive.php, który jest używany do wyprowadzania stron archiwum dla kategorii i tagów. Chcesz wprowadzić zmiany w sposobie wyprowadzania tagów. Więc tworzysz plik o nazwie „tag.php”, który będzie oparty na pliku archive.php z Twoimi poprawkami.

Ponownie, ostrożnie edytuj pliki: mogą one uszkodzić Twoją witrynę. Zawsze testuj na lokalnym instalacja za pomocą narzędzia takiego jak DevKinsta i / lub witryna testowa jako pierwsza.

Niezależnie od tego, który z tych typów plików chcesz edytować, powinieneś to zrobić poprawnie. Przeczytaj sekcję poniżej dotyczącą najlepszych praktyk, aby dowiedzieć się, jak edytować kodu w sposób, który nie zepsuje Twojej witryny i nie spowoduje problemów z bezpieczeństwem.

Dostosowywanie motywu innej firmy z motywem podrzędnym

Jeśli motywem, działający w Twojej witrynie pochodzi od firmy zewnętrznej i chcesz edytować kod, musisz utworzyć motyw potomny.

Dzieje się tak, ponieważ jeśli edytujesz motyw bezpośrednio, a następnie zaktualizujesz go ( co powinieneś), stracisz wszystkie wprowadzone zmiany.

Tworzenie motywu potomnego składa się z czterech kroków:

1. Utwórz nowy folder w wp-content / motywy.
2. W tym folderze utwórz arkusz stylów. W tym arkuszu stylów tel l WordPress, że jest to motyw potomny istniejącego motywu.
3. Dodaj kopie plików, które chcesz edytować, do motywu potomnego i edytuj je tam.
4. Aktywuj motyw potomny w Twoja witryna.

WordPress zawsze użyje pliku z motywu potomnego do wyprowadzenia zawartości, chyba że istnieje plik wyżej w hierarchii w motywie nadrzędnym. Jeśli istnieją dwie wersje tego samego pliku, użyje wersji z motywu potomnego. Oznacza to, że nowy plik w motywie potomnym zastąpi ten z motywu nadrzędnego.

Najlepsze praktyki dotyczące dostosowywania motywów WordPress

Planujesz więc dostosować swój motyw. Zanim przejdziesz dalej i wprowadzisz zmiany, postępuj zgodnie z poniższymi wskazówkami, aby upewnić się, że robisz to bezpiecznie i że nie złamiesz swojej witryny, nie narazisz jej na ataki ani nie stracisz kodu.

Jeśli to możliwe , Dostosuj bez edycji kodu

Jeśli możesz dostosować swoje ustawienia za pomocą narzędzia Customizer lub w innym miejscu na ekranach administratora, jest to bezpieczniejsze niż edytowanie kodu.

Edytuj kod tylko wtedy, gdy masz znasz CSS (dla arkusza stylów) i PHP (dla innych plików motywów) i wiesz, jak to zrobić bezpiecznie.

Użyj lokalnej witryny programistycznej, aby wprowadzić zmiany

Jeśli edytujesz kod w swoim motywie lub tworzysz motyw potomny w celu wprowadzenia zmian, powinieneś wykonać prace rozwojowe nad lokalna instalacja WordPressa z zainstalowanym motywem i treścią skopiowaną z działającej witryny.

W ten sposób masz kopię lustrzaną swojej aktywnej witryny, aby przetestować wprowadzone zmiany. Praca w witrynie lokalnej nie będzie miała wpływu na aktualną witrynę i może być szybsza.

Nawet jeśli korzystasz z modułu dostosowania, pomocne może być użycie lokalnej wersji witryny do testowania, możesz opublikować swoje zmiany i przetestować je bez wpływu na działającą witrynę.

Po przetestowaniu zmian w swoim motywie możesz przesłać go do swojej aktywnej witryny lub, jeszcze lepiej, możesz przetestować go na testową, a następnie uruchom ją.

Użyj kontroli wersji

Kiedy wprowadzasz zmiany w swoim motywie, powinieneś używać kontroli wersji, aby śledzić zmiany.

W najprostszym przypadku oznacza to zmianę numeru wersji motywu i zachowanie kopii obu wersji. Ale jeśli twój chce prawidłowo kontrolować wersję, musisz użyć usługi takiej jak GitHub, aby śledzić swoje zmiany.

W ten sposób, jeśli zmiana powoduje problemy, możesz łatwo przywrócić ją bez konieczności ręcznego zmiany.

Kontrola wersji jest jeszcze bardziej pomocna, jeśli pracujesz w zespole, ponieważ możesz zobaczyć, co robią inni członkowie. Koniecznie przeczytaj nasz przewodnik po Git vs Github.

Użyj strony testowej, aby przetestować swoje zmiany

Jeśli masz dostęp do witryny testowej (takiej jak bezpłatna platforma testowa Kinsta, która zawiera wszystkie planów), przetestowanie tego przed aktywacją nowej wersji motywu (lub nowego motywu podrzędnego) w działającej witrynie jest najbezpieczniejszym sposobem.

Dzieje się tak, ponieważ każda lokalna witryna będzie miała pewne różnice w porównaniu z aktywną witryną: znajduje się na innym serwerze (utworzonym na Twój lokalny komputer), może być na nim uruchomiona inna wersja PHP lub inne narzędzia, które obsługują Twoją witrynę.

Zrób kopię swojej działającej witryny na serwerze testowym, a następnie prześlij i aktywuj nowy motyw. Dokładnie przetestuj swoją witrynę, aby upewnić się, że wszystko działa, a następnie możesz przesłać zmiany do swojej aktywnej witryny.

Zadbaj o responsywność motywu

Wszelkie zmiany, które musisz wprowadzić w motywie, powinny pracować zarówno na telefonie komórkowym, jak i na komputerze.

Ponieważ coraz więcej osób uzyskuje dostęp do Internetu przez telefon komórkowy i indeks Mobile-first od Google, prawdopodobnie ważniejsze jest teraz, aby motyw działał na telefonie komórkowym działa na komputerze. Dlatego wszelkie zmiany, które wprowadzasz w swoim motywie, muszą być przyjazne dla urządzeń mobilnych lub, jeśli to konieczne, najlepiej dostosowane do urządzeń mobilnych.

Będzie to dotyczyło głównie wszelkich zmian, które wprowadzasz w swoim stylu lub układzie: sprawdź, czy nowy układ działa na urządzeniach mobilnych i dodano zapytania o media, aby układ dostosowywał się do różnych rozmiarów ekranu.

Jeśli Twój motyw nie jest responsywny, wpłynie to negatywnie na rankingi w wyszukiwarkach i współczynniki konwersji.

Jeśli nie masz dostępu do wielu różnych urządzeń mobilnych do testowania, możesz skorzystać z narzędzia takiego jak BrowserStack, aby zobaczyć, jak Twoja witryna wygląda na różnych urządzeniach. Możesz także skorzystać z narzędzi programistycznych w przeglądarce i elastycznych widoków w module dostosowania.

Upewnij się, że Twoje dostosowania nie wpływają na dostępność

Wszelkie zmiany w Twoim motywie muszą być również dostępne dla użytkowników niepełnosprawnych lub upośledzonych sensorycznie .

Nie chodzi tylko o to, aby Twoja witryna działała z czytnikami ekranu: inne kwestie, takie jak schematy kolorów i rozmiary czcionek, są ważne dla dużej liczby osób.

Jeśli zmiany Twój motyw ma na celu rozjaśnienie kolorów lub zmniejszenie rozmiaru tekstu. Zastanów się jeszcze raz: może to utrudnić użytkownikom czytanie witryny lub interakcję z nią.

Zanim wprowadzisz jakiekolwiek zmiany na żywo, użyj narzędzia do sprawdzania dostępności, aby przetestować swoją witrynę i upewnij się, że nie wyklucza ona ludzi.

Trzymaj się standardów kodowania WordPress

Jeśli edytujesz kod w swoim motywie lub tworzysz a chi ld, musisz upewnić się, że Twój kod jest zgodny ze standardami kodowania WordPress.

Te standardy istnieją, aby zapewnić spójność i jakość kodu oraz uniknąć bałaganu. Istnieją standardy dla PHP, CSS i JavaScript, więc poświęć trochę czasu na sprawdzenie tych, które są dla Ciebie istotne i upewnij się, że je przestrzegasz.

Jeśli Twój istniejący motyw WordPress jest dobrze zakodowany i napiszesz nowy kodu w sposób, który jest z tym zgodny, jesteś na dobrej drodze do upewnienia się, że Twój kod jest zgodny. Upewnij się, że dodajesz komentarze do wszelkich zmian, które wprowadzasz w motywie, abyś Ty lub inne osoby wiedzieli, co zrobiłeś, gdy wrócisz do pracy nad kodem w przyszłości.Możesz pomyśleć, że tego nie zapomnisz, ale po upływie kilku miesięcy zaskakująco łatwo jest zapomnieć, dlaczego edytowałeś wiersz kodu.

Chcesz dostosować swój motyw #WordPress, aby był wyjątkowy? Opcji jest mnóstwo! Wybierz odpowiedni dla siebie w naszym szczegółowym przewodniku! 👚👔Kliknij, aby Tweet

Podsumowanie

Dostosowywanie motywu WordPress nie jest wcale takie trudne. Czasami jest to prosty przypadek użycia narzędzia Customizer w celu zmiany czcionek lub kolorów (koniecznie przeczytaj nasz szczegółowy przewodnik dotyczący czcionek WordPress). Innym razem musisz utworzyć nowy motyw potomny, aby dodać nowy plik szablonu do motywu.

Dostępne opcje dostosowywania motywu obejmują użycie wtyczki lub Customizer, edycję kodu motywu WordPress bezpośrednio lub tworzenie motywu podrzędnego.

Znajdź odpowiednią opcję dla siebie i bezpiecznie dostosuj swoje ustawienia bez niszczenia witryny.