Jak korzystać z narzędzia do dostosowywania motywów WordPress jak profesjonalista (najlepszy przewodnik)

Czy wiesz, że WordPress jest wyposażony we wbudowane narzędzie do dostosowywania motywów, które umożliwia łatwe wprowadzanie zmian w projekcie witryny w czasie rzeczywistym.

Chociaż każdy motyw ma pewien poziom wsparcia dla domyślnych opcji dostosowywania, wiele motywów zawiera dodatkowe karty i opcje dostosowywania motywu WordPress, dzięki czemu można łatwo dostosować swój motyw bez znajomości kodowania.

W tym artykule przeprowadzimy Cię przez domyślne panele i pokażemy, jak profesjonalnie korzystać z narzędzia do dostosowywania motywów WordPress.

How to Use WordPress Theme Customizer Ultimate Guide

Jak uzyskać dostęp do modułu dostosowywania motywów WordPress

Dostosowywanie motywów jest domyślną funkcją WordPress i jest częścią każdej witryny WordPress .

Możesz uzyskać do niego dostęp, logując się do swojego obszaru administracyjnego WordPress, a następnie przechodząc do Wygląd » Dostosuj z lewego paska bocznego panelu administracyjnego WordPress. Spowoduje to otwarcie interfejsu Customizer z bieżącym motywem.

How to access WordPress Customizer

Możesz także użyć strony dostosowywania motywu WordPress dla dowolnego z zainstalowanych motywów w Twojej witrynie, nawet jeśli nie są one aktywne.

Pozwala to zobaczyć podgląd na żywo tego motywu i wprowadzić zmiany przed jego aktywacją.

Aby to zrobić, przejdź na stronę Wygląd » Motywy .

Następnie najedź kursorem myszy na dowolny zainstalowany motyw i kliknij przycisk Podgląd na żywo , aby otworzyć stronę dostosowywania motywu WordPress.

WordPress Theme Live Preview Option

Jak korzystać z narzędzia do dostosowywania motywów WordPress

Po otwarciu modułu dostosowywania motywu WordPress zobaczysz wszystkie ustawienia dostosowywania po lewej stronie ekranu, a podgląd na żywo swojej witryny po prawej stronie.

WordPress Theme Customizer

Moduł dostosowywania motywów WordPress zawiera zestaw domyślnych paneli, niezależnie od używanego motywu.

Musisz klikać na poszczególne panele, aby wprowadzić w nich zmiany. Możesz także kliknąć dowolną z niebieskich ikon ołówka po prawej stronie ekranu, aby otworzyć ustawienia dla tego konkretnego elementu.

Uwaga: zaawansowane motywy WordPress dodadzą dodatkowe panele ustawień dla dodatkowych opcji dostosowywania (więcej na ten temat później).

Przyjrzyjmy się domyślnym opcjom dostępnym w dostosowywaniu motywów WordPress.

Panel tożsamości witryny: dodaj tytuł, logo i favicon

Panel Tożsamość witryny w module dostosowywania motywów WordPress umożliwia dodawanie lub zmianę tytułu i sloganu witryny.

Domyślnie WordPress dodaje „Po prostu kolejna witryna WordPress” jako slogan witryny.

Zalecamy zmianę po zainstalowaniu WordPressa w witrynie . Jeśli chcesz, możesz też pozostawić to pole puste.

Site Identity Settings to change Site title, tagline, logo, and favicon

Panel Tożsamość witryny w module dostosowywania motywu WordPress umożliwia również dodanie logo witryny. Po prostu kliknij opcję Wybierz logo , aby załadować logo swojej witryny.

Chcesz dodać favikonę do swojej witryny? Możesz to zrobić, klikając opcję Wybierz ikonę witryny . Aby uzyskać szczegółowe instrukcje, możesz skorzystać z naszego przewodnika , jak utworzyć i dodać favicon do swojej witryny .

Modyfikator motywu WordPress: zmień kolory w swojej witrynie

Elementy sterujące na panelu Kolory będą się w większości różnić w zależności od używanego motywu WordPress.

Na przykład motyw Twenty Seventeen pozwala wybrać kolor tekstu nagłówka i schemat kolorów dla całej witryny.

Change Colors on Your Website

Inne motywy WordPress mogą oferować różne opcje kolorów dla elementów witryny, takich jak: nagłówki, linki, treść, tło witryny itp.

Dodawanie menu nawigacji w dostosowywaniu motywu

Panel Menu umożliwia tworzenie menu nawigacyjnych i kontrolowanie ich położenia w witrynie.

W tej tabeli znajdziesz wszystkie istniejące menu WordPress, które utworzyłeś wcześniej. Możesz kliknąć przycisk „Wyświetl wszystkie lokalizacje”, aby sprawdzić dostępne lokalizacje menu, które obsługuje Twój motyw.

Menus Panel in Theme Customizer

Aby utworzyć nowe menu, należy kliknąć przycisk Utwórz nowe menu .

Następnie będziesz musiał nadać nazwę swojemu menu, aby móc łatwo nim później zarządzać. Możesz także wybrać lokalizację menu, a następnie kliknąć Next , aby kontynuować.

Create a new navigation menu

Aby dodać elementy do tego menu, musisz kliknąć przycisk Dodaj elementy , aby otworzyć nowy panel. Możesz teraz dodawać niestandardowe łącza, strony, posty, kategorie i tagi jako elementy menu.

Add items to navigation menu

Aby zmienić kolejność elementów, możesz kliknąć łącze Zmień kolejność , a następnie użyć ikon strzałek, aby dostosować elementy menu.

Widżety kontrolne w Twojej witrynie w narzędziu do dostosowywania motywu

Panel Widgets umożliwia dodawanie i zarządzanie widgetami w witrynie.

Kliknięcie go pokaże różne lokalizacje, w których możesz dodać widżety. Będzie się to różnić w zależności od używanego motywu.

Na przykład motyw Twenty Seventeen oferuje 3 lokalizacje widgetów, podczas gdy motyw Twenty Nineteen ma tylko jedną lokalizację.

Widgets panel

Po kliknięciu dowolnego z nich zobaczysz widżety, które wcześniej dodałeś do tej lokalizacji.

Aby dodać nowy widget, należy kliknąć przycisk „Dodaj widżet”. Otworzy się nowy panel, w którym zobaczysz listę wszystkich dostępnych widżetów.

Add Widgets to your site

Musisz kliknąć ten, który chcesz dodać. Możesz także wprowadzić zmiany w nowo dodanych widżetach i dostosować ich położenie, przeciągając je w górę lub w dół.

Panel ustawień strony głównej w dostosowywaniu motywu

Domyślnie WordPress wyświetla najnowsze posty na blogu na Twojej stronie głównej.

Jednak w przypadku firmowych witryn użytkownicy wolą używać niestandardowej strony domowej. Pozwala na posiadanie właściwej strony docelowej , na której wyświetlane są Twoje produkty i usługi.

Aby użyć niestandardowej strony głównej, należy zaznaczyć przycisk opcji „Strona statyczna” w panelu Ustawienia strony głównej .

Homepage Settings in theme customizer

Spowoduje to otwarcie dwóch nowych menu rozwijanych, których możesz użyć do wybrania strony dla swojej strony głównej i drugiego do wyświetlania postów na blogu.

Jeśli nie masz stron w swojej witrynie, możesz utworzyć nową, klikając link „+ Dodaj nową stronę” znajdujący się pod menu rozwijanym. Spowoduje to utworzenie pustej strony z wybraną nazwą.

Dodatkowy panel CSS do dodawania niestandardowego CSS

Czy chcesz dodać niestandardowy kod CSS, aby stylizować swoją witrynę? Możesz to zrobić w panelu Dodatkowe CSS .

Średnio zaawansowani i zaawansowani użytkownicy WordPressa często dostosowują swoją witrynę, dodając kod CSS bezpośrednio do pliku style.css ich motywu. Dodaje to dodatkowe kroki, takie jak dostęp FTP do hostingu WordPress , modyfikowanie plików motywów itp.

Łatwiejszym rozwiązaniem dla początkujących jest dodanie własnego kodu CSS do dodatkowego panelu CSS w dostosowywaniu motywu WordPress. Umożliwi to wprowadzanie zmian w witrynie i wyświetlanie ich na żywo po prawej stronie ekranu.

Add Custom CSS code to Additional CSS pane;

Gdy zaczniesz pisać kod CSS, WordPress automatycznie zasugeruje atrybuty na podstawie wpisanych liter. Wyświetli również komunikaty o błędach, jeśli nie napisałeś poprawnej instrukcji CSS.

Uwaga: jeśli chcesz dostosować swoją witrynę internetową bez pisania kodu, czytaj dalej. Udostępnimy dwie przyjazne dla początkujących opcje, które pozwolą Ci łatwo dostosować motyw, a nawet stworzyć niestandardowy motyw WordPress .

Inne opcje dostosowywania motywu

Niektóre darmowe i premium motywy oferują więcej opcji dostosowywania motywów.

W zależności od motywu, którego używasz, możesz zmienić styl czcionki, dodać obraz tła , zmienić układ, zmodyfikować kolory, dodać losowe obrazy nagłówka , i wiele więcej.

Możesz także dodać określone funkcje do swojego dostosowywania motywu za pomocą wtyczek. Na przykład, możesz dodać niestandardowe czcionki w WordPress za pomocą wtyczki Easy Google Fonts .

Wyświetl podgląd swojej witryny w różnych rozdzielczościach ekranu

Dla każdego właściciela witryny ważne jest, aby upewnić się, że jest responsywna dla urządzeń mobilnych i dobrze wygląda na wszystkich rozmiarach ekranu.

Dzięki modułowi dostosowywania motywów WordPress możesz łatwo sprawdzić, jak wygląda Twoja witryna na różnych rozmiarach ekranu.

U dołu panelu dostosowywania motywu znajdują się trzy ikony i łącze „Ukryj elementy sterujące”.

Preview website on different screen resolutions

Te ikony umożliwiają testowanie witryny na różnych rozdzielczościach ekranu, na przykład na komputerach stacjonarnych, tabletach i urządzeniach przenośnych.

Łącze Hide Controls jest przydatne do ukrywania panelu WordPress Customizer, aby można było poprawnie wyświetlać witrynę w trybie pulpitu.

Opublikuj, zapisz lub zaplanuj ustawienia dostosowywania

Po dokonaniu niezbędnych zmian musisz zastosować je w swojej witrynie. W przeciwnym razie cała twoja ciężka praca zostanie utracona.

Dalej i kliknij przycisk Publikuj , aby zastosować zmiany. Po zakończeniu możesz kliknąć przycisk zamykania, znajdujący się w lewym górnym rogu ekranu, aby wyjść z dostosowywania motywu.

Publish WordPress Customizer settings

A jeśli potrzebujesz więcej czasu na ukończenie nowego projektu? W takim przypadku możesz zapisać go jako wersję roboczą, a nawet udostępnić komuś nowy projekt, nie dając jej dostępu do swojego obszaru administracyjnego.

Aby to zrobić, kliknij ikonę koła zębatego tuż obok przycisku Publikuj . Otworzy się panel akcji.

WordPress Customizer Save Draft option

Tutaj znajdziesz trzy opcje: Opublikuj, Zapisz wersję roboczą i Zaplanuj.

Musisz wybrać przycisk opcji Zapisz wersję roboczą na panelu akcji, a następnie kliknąć przycisk Zapisz wersję roboczą , aby zapisać zmiany.

Możesz teraz skopiować łącze podglądu i udostępnić je innym w celu uzyskania opinii.

Z drugiej strony opcja Harmonogram umożliwia publikowanie zmian w określonym dniu i godzinie. Możesz użyć tej opcji, aby zaplanować wprowadzenie zmian motywu w czasie, gdy otrzymujesz najmniejszy ruch.

Schedule Customizer settings on a specific date

Wreszcie, jeśli chcesz zresetować niepublikowane zmiany, możesz kliknąć łącze Odrzuć zmiany na panelu akcji.

Podgląd różnych motywów bez udostępniania na żywo

Są chwile, kiedy chcesz sprawdzić, jak nowy motyw będzie wyglądał w Twojej witrynie. Jednak nie chcesz ich aktywować w aktywnej witrynie internetowej.

W takim przypadku możesz otworzyć WordPress Customizer, aby przetestować nowe motywy bez uruchamiania.

W panelu Customizer znajdziesz nazwę aktywnego motywu i przycisk Zmień .

Change WordPress Theme from Customizer

Jeśli klikniesz ten przycisk, WordPress wyświetli wszystkie zainstalowane motywy po prawej stronie strony.

Aby sprawdzić konkretny motyw, musisz kliknąć przycisk Podgląd na żywo .

Preview Installed themes on Theme Customizer

Możesz także wyświetlać podgląd motywów z repozytorium motywów WordPress. Aby to zrobić, musisz zaznaczyć pole wyboru „Motywy WordPress.org” w lewym panelu.

Spowoduje to wyświetlenie motywów z katalogu WordPress.org. Możesz kliknąć przycisk „Zainstaluj i wyświetl podgląd”, aby sprawdzić motyw, który Ci się podoba.

WordPress themes directory

Możesz także filtrować motywy, klikając przycisk Filtruj motywy znajdujący się w prawym górnym rogu ekranu.

Uwaga: zalecamy używanie witryny testowej WordPress do testowania nowych motywów zamiast korzystania z modułu dostosowywania w aktywnej witrynie.

Importuj lub eksportuj ustawienia dostosowania motywu

Czy wiesz, że możesz importować i eksportować ustawienia dostosowania motywu?

Jest to niezwykle pomocne, gdy dokonujesz zmian w swoim motywie na serwerze lokalnym lub witrynie testowej . Zamiast ręcznie kopiować ustawienia do działającej witryny internetowej, możesz po prostu wyeksportować ustawienia dostosowania motywu, aby zaoszczędzić czas.

Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem jak importować i eksportować ustawienia dostosowania motywu w WordPress .

Alternatywy dostosowywania motywów WordPress

Chociaż WordPress Customizer umożliwia wprowadzanie zmian w witrynie, liczba elementów sterujących będzie się różnić w zależności od używanego motywu.

A jeśli podoba Ci się Twój motyw, ale chciałbyś, aby miał dodatkowe opcje dostosowywania?

W takim przypadku najlepszym rozwiązaniem jest użycie jednej z dwóch wtyczek dostosowujących, które działają razem z modułem dostosowywania motywu WordPress.

Bohater CSS

CSS Hero plugin

CSS Hero to wtyczka WordPress, która umożliwia dostosowanie witryny bez pisania ani jednej linii kodu. Masz swobodę stylizacji każdego elementu witryny bez żadnych kłopotów.

Czy chcesz dostosować stronę logowania swojej witryny WordPress ? CSS Hero pozwala to zrobić w ciągu kilku minut.

Możesz także edytować i przeglądać zmiany w interfejsie użytkownika, aby upewnić się, że projekt wygląda idealnie na każdym urządzeniu.

Beaver Builder

Beaver Builder plugin

Beaver Builder to jedna z najlepszych wtyczek do tworzenia stron WordPress na rynku. Pozwala tworzyć wspaniałe strony dla Twojej witryny za pomocą interfejsu przeciągnij i upuść.

Najlepsze jest to, że Beaver Builder działa z prawie każdym motywem WordPress. Pozwala to na użycie go z bieżącym motywem.

Beaver Builder obsługuje skróty i widżety. Oferuje również różne typy modułów, których możesz użyć do łatwego zaprojektowania swojej witryny. Zobacz nasz przewodnik po tym, jak tworzyć niestandardowe układy w WordPress , aby uzyskać szczegółowe instrukcje.

Możesz także użyć Beaver Builder do stworzenia całkowicie niestandardowego motywu WordPress bez pisania kodu.

Mamy nadzieję, że ten przewodnik pomógł Ci nauczyć się korzystać z narzędzia WordPress Theme Customizer jak profesjonalista. Możesz także chcieć zapoznać się z naszym przewodnikiem po najlepszych wtyczkach i narzędziach WordPress dla Twojej witryny internetowej .

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube , aby uzyskać więcej samouczków wideo WordPress. Możesz również śledzić nas na Twitterze i Facebooku .