Jak dostosować motyw WordPress przez Customizer

Opublikowany: 2020-08-24

Dostosowanie motywu WordPress jest niezbędnym krokiem do wykorzystania dowolnego motywu po jego aktywacji. A za pomocą narzędzia Customizer motywu możesz to zrobić łatwiej niż kiedykolwiek. Jednak może to być trochę trudne, gdy przyzwyczaisz się do tego narzędzia. Więc jeśli jesteś zdezorientowany, ten artykuł będzie dla Ciebie bardzo pomocny.

Spis treści ukryj
  1. 1. Otwórz narzędzie konfiguracyjne
  2. 2. Dostosuj motyw przez Customizer
    1. 2.1. Ustawienia strony głównej
    2. 2.2. Tożsamość witryny
    3. 2.3. Kolor, obraz tła i czcionki
    4. 2.4. Menu
    5. 2.5. Widżet
  3. 3. Ostatnie słowa

Po wybraniu motywu WordPress i zainstalowaniu go należy użyć narzędzia Customizer, aby dostosować wygląd witryny zgodnie z prezentacją motywu lub własnym stylem. Zaletą tego narzędzia jest tryb podglądu na żywo, który pozwala bezpośrednio zobaczyć wyniki podczas dostosowywania. Oszczędza to czas i jest znacznie łatwiejsze do manipulowania niż edytowanie w backendzie (Panel administracyjny).

Oto podstawowe kroki, aby dostosować motyw WordPress za pomocą narzędzia Customizer, aby utworzyć witrynę internetową, która jest najbardziej podobna do motywu demonstracyjnego lub do Twoich pragnień.

Otwórz narzędzie dostosowywania

Najpierw przejdź do Customizer na pasku administracyjnym u góry strony lub Panel > Wygląd > Dostosuj, aby otworzyć to narzędzie.

Otwórz narzędzie Customizer.

Interfejs Customizera składa się z dwóch głównych części: lewa kolumna zawiera opcje dostosowywania, a prawy ekran wyświetla podgląd na żywo. Oto najpopularniejszy interfejs programu Customizer.

Interfejs konfiguratora składa się z dwóch głównych części.

Lewa kolumna zawiera:

1: Przycisk Opublikuj , aby zapisać wyniki po dostosowaniu. Jeśli zamkniesz witrynę bez jej kliknięcia, Twoje dostosowanie nie zostanie zapisane. Dlatego po każdej zmianie nie zapomnij wcisnąć tego przycisku.
2: Ten obszar pokazuje motyw, którego używasz. Jak widać na moim przykładzie, używam motywu Memory. (Możesz pobrać ten motyw tutaj).
3: Opcje dostosowywania motywu. Pamiętaj, że opcje motywu różnią się w zależności od różnych motywów.
4: Kliknij Ukryj kontrolki, aby ukryć tę kolumnę. Ponadto, jeśli chcesz zobaczyć, jak wygląda podgląd na żywo na innych urządzeniach, po prostu kliknij odpowiednie ikony urządzeń tutaj.

Po zapoznaniu się z interfejsem Customizer, przyjrzyjmy się każdej podstawowej opcji dostosowywania, aby dostosować wygląd, który jest najbardziej podobny do wersji demonstracyjnej lub do Twojego pomysłu. Pamiętaj, aby uważnie przeczytać dokumentację motywu, ponieważ może on mieć inne wymagania dotyczące dostosowywania.

Dostosuj motyw przez Customizer

Po aktywacji motywu Twoja strona nie wyglądała jeszcze jak demo. Jeśli Twój motyw nie obsługuje importowania wersji demonstracyjnej, musisz ręcznie dostosować motyw. Typowe sekcje niestandardowe obejmują:

Ustawienia strony głównej

Jest to najważniejsza sekcja określająca wyświetlanie Twojej strony głównej.

Dostosuj ustawienia swojej strony głównej.

Strona główna Ustawienia, istnieją dwie opcje pokazując internetowej: najnowsze posty i strony statyczne. W zależności od wymagań każdego motywu możesz wybrać odpowiednią opcję.

W przypadku witryny do czytania, takiej jak blogi, wybierz Twoje najnowsze posty .

Wyświetlam stronę główną z Twoimi najnowszymi postami.

W przypadku stron firmowych należy wybrać Strona statyczna , a następnie wybrać stronę dla strony głównej w sekcji Strona główna oraz stronę archiwum w sekcji Strona Posty . Wystarczy kliknąć ikonę menu rozwijanego w każdej sekcji, aby wybrać jeden z dostępnych postów i stron, lub kliknąć Dodaj nową stronę, aby utworzyć nową dla tych dwóch elementów.

Jeśli jednak wybrana strona główna nie została dostosowana i skonfigurowana, może brakować jej specjalnych funkcji, takich jak suwak, wezwanie do działania, obraz bohatera itp. i będziesz potrzebować więcej dostosowań. Lepiej przeczytaj wytyczne motywu dotyczące tych ustawień.

Przeczytaj wytyczne dotyczące motywu, aby dowiedzieć się, jak dostosować inne ustawienia.

Tożsamość witryny

Ta sekcja pomaga zmienić informacje o witrynie, takie jak zmiana logo, tytułu, sloganu.

Tożsamość witryny pomaga zmienić informacje o witrynie.

Wybierz logo, napisz tytuł i slogan dla swojej witryny. Poza tym może mieć opcje dostosowywania logo, tytułu lub ukrywania/pokazywania tych elementów.

Opcje dostosowania logo, tytułu lub ukrycia/pokazania tych elementów.

Kolor, obraz tła i czcionki

Większość motywów po aktywacji automatycznie ustawi kolory, tła i czcionki podobne do wersji demonstracyjnej. Jeśli jednak powyższe elementy nie są jeszcze gotowe, musisz je skonfigurować.

Możesz dostosować kolor, obraz tła i czcionki

Kolor

Większość motywów obsługuje sekcję Kolor. Jednak podczas gdy niektóre motywy pozwalają na zmianę koloru wielu elementów, niektóre ograniczają się do kilku.

Najpierw kliknij element, którego kolor chcesz zmienić (1) (np. kolor główny, kolor nagłówka lub kolor tekstu). Możesz wybrać kolor bezpośrednio na palecie (2) lub wpisać kod koloru tutaj (3).

Dostosuj kolor swojego motywu.

Czcionka

Sekcja Czcionka lub Typografia umożliwia zmianę stylów czcionek, czcionek rodzinnych, rozmiaru tekstu itp. w zależności od każdego motywu.

Wybór czcionki rodzinnej zależy również od wymagań motywu. Najłatwiejszym sposobem jest wybranie dostępnej czcionki z menu rozwijanego, jak na poniższym obrazku. Takie motywy zwykle obsługują tylko niektóre podstawowe czcionki.

Sekcja Czcionka lub Typografia umożliwia zmianę stylów czcionek, czcionek rodzinnych, rozmiaru tekstu itp.

Jeśli Twoje motywy obsługują czcionki Google, może być konieczne pobranie kodu, nazwy lub linku czcionki z fonts.google.com, a następnie wklejenie go w polach podobnych do tego.

Pobierz kod, nazwę lub link czcionki z fonts.google.com i wklej w polach.

Zaletą drugiego sposobu jest to, że masz wiele możliwości wyboru czcionek z Google Fonts.

Zdjęcie w tle

Większość motywów pozwala wybrać zdjęcie, aby ustawić obraz tła . W sekcji Obraz tła kliknij Wybierz obraz i wybierz zdjęcie z biblioteki lub prześlij je.

Wybierz obraz tła z biblioteki lub prześlij go.

Następnie możesz edytować styl, lokalizację i rozmiar obrazu, aby idealnie pasował do Twojej witryny.

Edytuj styl, lokalizację i rozmiar obrazu.

Aby zmienić obraz tła, kliknij przycisk Zmień obraz . Jeśli chcesz usunąć zdjęcie w tle, naciśnij przycisk Usuń .

Po wybraniu opcji Powtórz obraz tła , obraz tła będzie powtarzany od początku do końca strony. Jeśli wybierzesz opcję Przewiń ze stroną , zostanie ona przeniesiona wraz ze stroną podczas przewijania, jak poniżej.

Jeśli wybierzesz opcję Przewiń ze stroną, zostanie ona przeniesiona wraz ze stroną.

Menu

Sekcja Menu zawiera listę wszystkich menu i ich aktualne lokalizacje. Tradycyjnie w nagłówku znajduje się menu podstawowe. W szczególności niektóre motywy pozwalają wyświetlić więcej niż jedną lokalizację, na przykład w stopce, pasku górnym, menu slajdu itp. Aby dowiedzieć się, ile masz lokalizacji menu, spójrz na tekst poniżej lokalizacji menu .

Liczba lokalizacji menu jest wyświetlana w sekcji Lokalizacja menu.

Na przykład motyw pamięci ma tylko jedną lokalizację w menu. Możesz to zobaczyć, klikając kartę Wyświetl lokalizację . Następnie kliknij lokalizację menu i wybierz dostępne menu, które chcesz tam wyświetlić. Aby edytować menu, kliknij Edytuj menu , a następnie kliknij Utwórz nowe menu, aby utworzyć kolejne.

Możesz zobaczyć menu, klikając kartę Wyświetl lokalizację

A co ze szczegółami tworzenia i edycji menu? Możesz zapoznać się z naszym poprzednim artykułem tutaj.

Widżet

Widżety to bloki treści lub funkcji dodane do niektórych obszarów obsługujących widżety, takie jak pasek boczny lub stopka. Istnieje 15 domyślnych widżetów WordPress, które umożliwiają wstawianie filmów, zdjęć, galerii, najnowszych postów, stron i nie tylko. Zwłaszcza niektóre motywy oferują nawet własne specjalne widżety, więc powinieneś dokładnie znaleźć potrzebne widżety, a następnie odpowiednio je wybrać.

W sekcji Widget zobaczysz obszary, które obsługują widżety na bieżącej stronie. Liczba i położenie tych obszarów również różnią się tematycznie.

Zobaczysz obszary, które obsługują widżety na bieżącej stronie.

Aby dodać widżet, kliknij lokalizację, w której chcesz umieścić widżet, np. stopkę, i kliknij przycisk Dodaj widżet . Możesz wybrać jeden z listy lub skorzystać z paska wyszukiwania, aby znaleźć żądany widżet.

Możesz wybrać widżet z listy lub skorzystać z paska wyszukiwania, aby go znaleźć.

Po wybraniu widżetu niektóre, takie jak obraz, galeria, wideo, audio i strony, mogą wymagać dodatkowej konfiguracji, aby wyświetlić je tak, jak chcesz. Robiąc to, powinieneś uważnie przeczytać prośbę widżetu i postępować zgodnie z nią. Nie martw się, te kroki są dość proste.

Aby usunąć widżet, przejdź do żądanego i kliknij Usuń .

Usuń widżet.

Przycisk Zmień kolejność pomoże Ci przenieść widżety do innego obszaru motywu. W szczególności kliknij (1), wybierz nowy obszar widżetów (2) i kliknij przycisk Przenieś (3). Ponadto przycisk strzałki w górę iw dół (4) pomoże przenosić widżety w obszarze. Po zakończeniu naciśnij Gotowe (5).

Przenieś widżety do innego obszaru motywu.

To wszystko, skończyliśmy z widżetami.

Ostatnie słowa

Dostosowanie powyższych sekcji za pomocą narzędzia Customizer to ogólne i podstawowe kroki w celu dostosowania witryny tak, aby wyglądała jak demonstracja lub Twoja wyobraźnia. Poza tym istnieje wiele innych różnych sekcji dla każdego motywu. Jeśli masz jakiekolwiek trudności z dostosowaniem, powinieneś przeczytać dokumentację lub natychmiast skontaktować się z autorem motywu.

Mam nadzieję, że ten artykuł pomógł Ci stworzyć własny, fascynujący wygląd Twojej witryny.