Jak używać WordPress Theme Customizer jak Pro (Ultimate Guide)

Czy wiesz, że WordPress ma wbudowany motyw dostosowujący, który pozwala łatwo wprowadzać zmiany w projekcie witryny w czasie rzeczywistym.

Podczas gdy każdy motyw ma pewien poziom wsparcia dla domyślnych opcji dostosowywania, wiele motywów zawiera dodatkowe zakładki i opcje do dostosowywania motywów WordPress, dzięki czemu można łatwo dostosować swój motyw bez wiedzy o kodowaniu.

W tym artykule przeprowadzimy Cię przez domyślne panele i pokażemy, jak używać WordPress theme customizer jak profesjonalista.

Jak uzyskać dostęp do dostosowywania motywu WordPress

Theme customizer to domyślna funkcja WordPress i jest częścią każdej witryny WordPress.

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

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

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

Aby to zrobić, musisz udać się do Wygląd » Tematy strona.

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

Jak korzystać z dostosowywania motywu WordPress

Po otwarciu dostosowywania motywów WordPress zobaczysz wszystkie ustawienia dostosowywania po lewej stronie ekranu, a Podgląd na żywo witryny po prawej stronie.

WordPress theme customizer zawiera zestaw domyślnych paneli niezależnie od używanego motywu.

Musisz kliknąć 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).

Rzućmy okiem na domyślne opcje dostępne w dostosowywaniu motywów WordPress.

Panel tożsamości witryny: Dodaj tytuł, Logo i ikonę ulubionych

Na Tożsamość Strony panel w WordPress theme customizer pozwala dodać lub zmienić tytuł i slogan witryny.

Domyślnie WordPress dodaje” Just Another WordPress Site ” jako slogan witryny.

Zaleca się, aby go zmienić po zainstalowaniu WordPress na swojej stronie. Możesz również zachować go jako pusty, jeśli chcesz.

Panel tożsamości witryny w edytorze motywów WordPress umożliwia również dodanie logo witryny. Wystarczy kliknąć na Wybierz logo możliwość przesłania logo swojej strony internetowej.

Chcesz dodać ikonę favicon do swojej witryny? Możesz to zrobić klikając na Wybierz ikonę witryny opcja. Aby uzyskać szczegółowe instrukcje, możesz skorzystać z naszego przewodnika na temat tworzenia i dodawania favicon do swojej witryny.

WordPress Theme Customizer: Zmień kolory w swojej witrynie

Sterowanie na Kolory panel będzie się głównie różnić w zależności od używanego motywu WordPress.

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

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

Dodawanie menu nawigacji w dostosowaniu motywu

Na Menu panel umożliwia tworzenie menu nawigacyjnych i kontrolowanie ich lokalizacji na twojej stronie.

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

Aby utworzyć nowe menu, należy kliknąć na Utwórz Nowe Menu guzik.

Następnie musisz nadać nazwę swojemu menu, abyś mógł łatwo nim później zarządzać. Możesz również wybrać lokalizację menu, a następnie kliknąć na Następny kontynuować.

Aby dodać elementy do tego menu, należy kliknąć na Dodaj Przedmioty przycisk, aby otworzyć nowy panel. Możesz teraz dodawać niestandardowe linki, strony, posty, kategorie i tagi jako elementy menu.

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

Kontroluj widżety na swojej stronie w Theme Customizer

Na Widgety panel umożliwia dodawanie i zarządzanie widżetami w witrynie.

Kliknięcie na niego pokaże Ci różne lokalizacje, w których możesz dodać widżety. Zależy to od używanego motywu.

Na przykład motyw Twenty Seventeen oferuje lokalizacje widżetów 3, podczas gdy motyw Twenty Seventeen zawiera tylko jedną lokalizację.

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

Aby dodać nowy widget, musisz kliknąć przycisk “Dodaj Widget”. Spowoduje to otwarcie nowego panelu, w którym zobaczysz listę wszystkich dostępnych widżetów.

Musisz kliknąć na ten, który chcesz dodać. Możesz również 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 Theme Customizer

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

Jednak w przypadku witryn biznesowych użytkownicy wolą używać niestandardowej strony głównej. Pozwala na posiadanie odpowiedniej strony docelowej, która wyświetla Twoje produkty i usługi.

Aby użyć niestandardowej strony głównej, musisz wybrać przycisk radiowy “strona statyczna” na Ustawienia Strony Głównej panel.

Spowoduje to otwarcie dwóch nowych rozwijanych menu, których możesz użyć do wyboru strony głównej i innej 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 rozwijanym menu. Spowoduje to utworzenie pustej strony z wybraną nazwą.

Dodatkowy panel CSS do dodawania własnego CSS

Czy chcesz dodać niestandardowy kod CSS do stylu swojej strony? Możesz to zrobić w Dodatkowe CSS panel.

Średniozaawansowani i zaawansowani użytkownicy WordPress często dostosowują swoją witrynę, dodając kod CSS bezpośrednio do stylu.plik 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 niestandardowego kodu CSS do dodatkowego panelu CSS w edytorze motywów WordPress. Pozwoli to na wprowadzanie zmian w witrynie i wyświetlanie ich na żywo po prawej stronie ekranu.

Kiedy zaczniesz pisać kod CSS, WordPress automatycznie zasugeruje Ci atrybuty na podstawie liter, które wpisujesz. Wyświetli również komunikaty o błędach, jeśli nie napisałeś odpowiedniej instrukcji CSS.

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

Inne Opcje Dostosowywania Motywów

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

W zależności od używanego motywu 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 dostosowywania motywu za pomocą wtyczek. Na przykład możesz dodawać niestandardowe czcionki w WordPress za pomocą wtyczki Easy Google Fonts.

Podgląd witryny w różnych rozdzielczościach ekranu

Ważne jest, aby każdy właściciel witryny upewnił się, że jej witryna jest responsywna i wygląda dobrze na wszystkich rozmiarach ekranu.

Dzięki WordPress theme customizer możesz łatwo sprawdzić, jak twoja strona wygląda na różnych rozmiarach ekranu.

Na dole panelu dostosowywania motywu znajdują się trzy ikony i link “Ukryj elementy sterujące”.

Te ikony pozwalają przetestować witrynę w różnych rozdzielczościach ekranu, takich jak komputer, tablet i urządzenia mobilne.

Na Ukryj Kontrolki link jest przydatny do ukrywania panelu dostosowywania WordPress, dzięki czemu można poprawnie wyświetlać witrynę w trybie pulpitu.

Publikuj, zapisuj lub planuj ustawienia dostosowywania

Po wprowadzeniu niezbędnych zmian należy je zastosować w swojej witrynie. W przeciwnym razie cała twoja ciężka praca zostanie stracona.

Śmiało i kliknij na Publikuj przycisk, aby zastosować zmiany. Po zakończeniu możesz kliknąć przycisk Zamknij, obecny w lewym górnym rogu ekranu, aby wyjść z dostosowywania motywu.

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

Aby to zrobić, musisz kliknąć ikonę koła zębatego tuż obok Publikuj guzik. Spowoduje to otwarcie panelu Akcja.

Tutaj znajdziesz Trzy opcje: Opublikuj, Zapisz wersję roboczą i zaplanuj.

Musisz wybrać Zapisz Projekt przycisk radiowy na panelu działania, a następnie kliknij na Zapisz Projekt przycisk do przechowywania zmian.

Możesz teraz skopiować link do podglądu i udostępnić go innym, aby uzyskać opinię.

Z drugiej strony, Harmonogram opcja umożliwia publikowanie zmian w określonej dacie i godzinie. Możesz użyć tej opcji do zaplanowania zmian motywu, aby przejść na żywo w momencie, gdy otrzymasz najmniejszy ruch.

Na koniec, jeśli chcesz zresetować niepublikowane zmiany, możesz kliknąć na Odrzuć zmiany link w Panelu Akcja.

Podgląd Różnych Motywów Bez Przechodzenia Na Żywo

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

W takim przypadku możesz otworzyć Dostosowywacz WordPress, aby przetestować nowe motywy bez przechodzenia na żywo.

W panelu dostosowywania znajdziesz nazwę aktywnego motywu i Zmiana guzik.

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

Aby sprawdzić konkretny temat, musisz kliknąć na Podgląd Na Żywo guzik.

Możesz również wyświetlić podgląd motywów z repozytorium motywów WordPress. Aby to zrobić, musisz wybrać “WordPress.org motywy” pole wyboru na lewym panelu.

To pokaże tematy z WordPress.org katalog. Możesz kliknąć przycisk “Zainstaluj i Podgląd”, aby sprawdzić motyw, który Ci się podoba.

Możesz również filtrować motywy, klikając na Filter Themes przycisk obecny w prawym górnym rogu ekranu.

Uwaga: zalecamy korzystanie z witryny testowej WordPress, aby przetestować nowe motywy, zamiast używać narzędzia dostosowującego w witrynie NA ŻYWO.

Importuj lub Eksportuj ustawienia dostosowywania motywu

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

Jest to bardzo pomocne, gdy wprowadzasz zmiany do motywu na serwerze lokalnym lub w witrynie przechowawczej. Zamiast ręcznie kopiować ustawienia na aktywną witrynę, możesz po prostu wyeksportować ustawienia dostosowywania motywu, aby zaoszczędzić czas.

Aby uzyskać szczegółowe instrukcje, możesz postępować zgodnie z naszym przewodnikiem, jak importować i eksportować ustawienia dostosowywania motywów w WordPress.

WordPress Theme Customizer Alternatywy

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

Co jeśli podoba Ci się motyw, ale chciałbyś, aby miał dodatkowe opcje dostosowywania?

W takim przypadku najlepszym rozwiązaniem jest użycie jednej z dwóch wtyczek dostosowywania, która działa wraz z dostosowywaniem motywu WordPress.

CSS Hero

CSS Hero to wtyczka WordPress, która pozwala dostosować witrynę bez pisania 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 ci to zrobić w ciągu kilku minut.

Możesz także edytować i podglądać zmiany w interfejsie, aby upewnić się, że twój projekt wygląda idealnie na każdym urządzeniu.

Beaver Builder

Beaver Builder to jedna z najlepszych wtyczek do tworzenia stron WordPress na rynku. Pozwala tworzyć wspaniałe strony dla 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 użycie skrótów i widżetów. Oferuje również różne typy modułów, które można wykorzystać do łatwego stylizowania witryny. Zobacz nasz przewodnik, jak tworzyć niestandardowe układy w WordPress, aby uzyskać szczegółowe instrukcje.

Możesz również użyć Beaver Builder, aby utworzyć całkowicie niestandardowy motyw WordPress bez pisania kodu.

Mamy nadzieję, że ten przewodnik pomógł Ci nauczyć się korzystać z dostosowywania motywów WordPress jak profesjonalista. Możesz również zobaczyć nasz przewodnik po najlepszych wtyczkach i narzędziach WordPress dla Twojej witryny.

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.