Dostosowywanie motywów WordPress za pomocą CSS

Motywy są jednym z największych atutów WordPressa. Właściwy motyw może sprawić, że Twoja witryna naprawdę się wyróżni. Jednak zwykle będziesz chciał wprowadzić co najmniej kilka niestandardowych zmian w dowolnym używanym motywie, aby wszystko było jak należy.

W większości przypadków będziesz musiał użyć kaskadowych arkuszy stylów (CSS), aby dostosować styl motywu. W WordPress możesz to zrobić na kilka sposobów. Nawet jeśli nie masz żadnego doświadczenia w radzeniu sobie z kodem, możesz łatwo dodać własne poprawki CSS do motywu WordPress.

W tym przewodniku przyjrzymy się trzem metodom dodawania i edytowania niestandardowego CSS w WordPress. Przeprowadzimy Cię przez cały proces i porozmawiamy o tym, kiedy warto zastosować każdą technikę. Zacznijmy!

Dodaj niestandardowy CSS za pomocą narzędzia Theme Customizer

Poziom doświadczenia: początkujący

WordPress Customizer umożliwia wprowadzanie zmian w projekcie witryny i wyświetlanie ich podglądu w czasie rzeczywistym. Aby uzyskać do niego dostęp, zaloguj się do pulpitu nawigacyjnego WordPress i przejdź do zakładki Wygląd > Dostosuj :

Istnieje wiele ustawień, z którymi możesz się tutaj bawić. Jednak teraz poszukaj zakładki Dodatkowe CSS . Po kliknięciu otworzy się nowa sekcja z polem, w którym możesz dodać niestandardowy CSS:

Jeśli jesteś nowy w CSS, możesz przeczytać więcej o tym, jak używać go z WordPress w oficjalnym Kodeksie. Istnieje również wiele innych doskonałych zasobów dotyczących podstaw CSS i zalecamy sprawdzenie kilku z nich.

CSS może być trochę skomplikowany, ale znając podstawy, można wiele osiągnąć. Wspaniałą rzeczą w korzystaniu z WordPress Customizer jest to, że umożliwia natychmiastowy podgląd wszelkich zmian wprowadzonych za pomocą CSS. Oznacza to, że takie podejście jest idealne do nauki działania CSS.

Uwaga : zmiany wprowadzone za pomocą narzędzia Personalizacja nie zostaną zachowane, jeśli zmienisz motywy. Ponadto aktualizacja bieżącego motywu może wymazać niestandardowy CSS. Dlatego nie zalecamy tego podejścia, jeśli zamierzasz wprowadzić wiele zmian lub pomiędzy opcjami motywu.

Dodaj niestandardowy CSS za pomocą wtyczki

Poziom doświadczenia: od początkującego do średniozaawansowanego

Powyższa metoda działa dobrze, ale możesz rozszerzyć swoje opcje za pomocą wtyczek. W poniższych sekcjach przyjrzymy się trzem wtyczkom, które umożliwiają dostosowanie motywu WordPress.

Uwaga : poziom doświadczenia w edytowaniu WordPress CSS za pomocą wtyczek będzie zależał od używanego narzędzia. Zalecamy przetestowanie ich wszystkich i sprawdzenie, który z nich jest najwygodniejszy.

Zaawansowany edytor CSS

Jeśli lubisz korzystać z WordPress Customizer, ale chciałbyś, aby oferował więcej opcji, ta wtyczka jest warta obejrzenia. Dzięki zaawansowanemu edytorowi CSS będziesz mógł dodawać niestandardowe CSS dla komputerów stacjonarnych, telefonów i tabletów. W ten sposób możesz dostosować wygląd swojej witryny na każdym typie urządzenia.

Po zainstalowaniu wtyczki WordPress przejdź do zakładki Wygląd > Dostosowywanie na pulpicie nawigacyjnym . Powinieneś zobaczyć nową opcję Zaawansowany edytor CSS , zapewniającą dostęp do wielu edytorów dla każdego typu urządzenia:

Wszystko, co musisz zrobić, to dodać niestandardowy CSS, który chcesz, przetestować, aby upewnić się, że działa poprawnie, i zapisać zmiany w swoim motywie.

Plusy:

• Masz pełną kontrolę nad tym, jak Twoja witryna wygląda na wszystkich urządzeniach.
• Nadal możesz edytować swój motyw za pomocą narzędzia Customizer.

Cons:

• Dodanie niestandardowego CSS dla wielu typów urządzeń może być bardzo pracochłonne.

Średnia ocena: 4,5/5

Uwaga: ta wtyczka zawiera również opcję minimalizacji CSS, co może pomóc skrócić czas ładowania witryny.

Modułowy niestandardowy CSS

Modułowy niestandardowy CSS umożliwia dodanie CSS do motywu za pomocą narzędzia WordPress Customizer. Jednak dodaje również kilka bardzo pożądanych funkcji do domyślnego edytora CSS. Mówiąc dokładniej, ta wtyczka umożliwia tworzenie niestandardowych CSS dla poszczególnych motywów i wprowadzanie globalnych zmian, które utrzymują się w każdym skonfigurowanym motywie:

Aby uzyskać dostęp do tych pól, musisz wrócić do sekcji Wygląd > Dostosowanie > Dodatkowe CSS . Gdy już tam będziesz, możesz zacząć wprowadzać zmiany.

Plusy:

• Możesz dodać niestandardowy CSS tylko dla określonych motywów i wprowadzić zmiany, które będą obowiązywać nawet po zmianie motywu.

Cons:

• „Globalny” CSS może nie działać dobrze z każdym motywem, więc musisz zachować ostrożność podczas przełączania się na nowy.

Średnia ocena: 5/5

SiteOrigin CSS

SiteOrigin CSS to odejście od wtyczek, o których mówiliśmy do tej pory. Zamiast dodawać nowe funkcje do Customizer, oferuje samodzielny edytor CSS WordPress. Możesz uzyskać dostęp do tego nowego edytora, przechodząc do karty Wygląd > Niestandardowy CSS po zainstalowaniu wtyczki:

Na pierwszy rzut oka ten edytor CSS nie wygląda zbyt dobrze. Jeśli jednak klikniesz ikonę oka, uruchomisz edytor wizualny. Tutaj możesz kliknąć dowolny element motywu i łatwo go edytować za pomocą CSS:

Wtyczka CSS SiteOrigin może być początkowo nieco przytłaczająca. Jednak może to również zaoszczędzić dużo czasu, ponieważ nie będziesz musiał szukać odpowiednich selektorów. Wszystko, co musisz zrobić, to kliknąć element, który chcesz zmodyfikować, a następnie dodać dowolny kod CSS.

Plusy:

• Możesz edytować dowolny element na swojej stronie internetowej, klikając go.
• Ta wtyczka umożliwia zmianę niektórych prostych aspektów motywu bez konieczności używania CSS, takich jak jego czcionki.

Cons:

• Śledzenie wszystkich niestandardowych CSS dodanych do motywu może być trudne, jeśli dostosujesz wiele elementów.

Średnia ocena: 4.9/5

Edytuj CSS za pomocą arkusza stylów motywu potomnego

Poziom doświadczenia: Zaawansowany

Motyw potomny to kopia istniejącego motywu (znanego jako „rodzic”). Motywy potomne umożliwiają bezpieczne wprowadzanie zmian w witrynie WordPress. To dlatego, że nadal możesz aktualizować motyw nadrzędny, nie tracąc żadnych niestandardowych poprawek CSS. Ponadto, jeśli dodasz kod CSS, który negatywnie wpływa na Twoją witrynę, możesz po prostu wyłączyć motyw potomny.

Każdy niestandardowy CSS dodany do motywu potomnego zastąpi style jego rodzica. Jednak aby to zadziałało, musisz przede wszystkim wiedzieć, jak utworzyć motyw potomny. Gdy Twoje „dziecko” będzie gotowe, możesz uzyskać dostęp do jego plików za pomocą klienta FTP, takiego jak FileZilla.

Po nawiązaniu połączenia z witryną za pośrednictwem protokołu FTP należy zlokalizować folder główny, który często nosi nazwę public_html lub www , lub którego nazwa pochodzi od witryny:

Następnie przejdź do katalogu wp-content/themes . Znajdziesz tam indywidualne foldery dla wszystkich motywów, w tym skonfigurowanego przez Ciebie dziecka. Otwórz folder motywu potomnego i poszukaj pliku style.css w:

Kliknij prawym przyciskiem myszy plik motywu i wybierz opcję Wyświetl/edytuj . Spowoduje to otwarcie pliku przy użyciu domyślnego edytora tekstu, co umożliwi wprowadzenie w nim zmian. Oznacza to, że możesz dodać niestandardowy CSS do swojego motywu, tyle że teraz używasz edytora pełnotekstowego zamiast narzędzia WordPress Customizer.

Po zakończeniu zapisz zmiany w pliku i zamknij edytor. Następnie możesz odwiedzić swoją witrynę internetową, aby sprawdzić, czy wprowadzone zmiany zadziałały zgodnie z oczekiwaniami. Jeśli nie, możesz wrócić do swojego pliku style.css i dalej poprawiać jego CSS.

Uwaga: To jest ogólne omówienie, a konfigurowanie i używanie motywu potomnego to znacznie więcej. Sugerujemy ostrożne postępowanie, jeśli jesteś nowy w tym procesie.

Niestandardowy CSS za pomocą narzędzia do dostosowywania motywu a wtyczki CSS a arkusz stylów motywu potomnego

Jak widać, masz wiele opcji, jeśli chodzi o dodawanie niestandardowego CSS do WordPress. Jednak wybór odpowiedniego podejścia może być wyzwaniem. Podzielmy wybory, zgodnie z twoim poziomem doświadczenia z platformą i ogólnie z CSS:

• Jesteś nowy w WordPress i nie jesteś przyzwyczajony do korzystania z CSS. W tym scenariuszu najlepiej jest pozostać przy WordPress Customizer. Dzięki niemu będziesz mógł natychmiast wyświetlić podgląd zmian i przyzwyczaić się do korzystania z CSS.
• Masz pewne doświadczenie z WordPress i CSS. Na tym etapie potrzebujesz więcej opcji niż zapewnia domyślny moduł dostosowywania. Dlatego zalecamy używanie wtyczek, które poprawiają jego funkcjonalność do edycji niestandardowego CSS w WordPress.
• Jesteś weteranem WordPressa, który swobodnie korzysta z CSS. Jeśli nie boisz się CSS i fragmentów kodu, prawdopodobnie będziesz chciał skonfigurować motyw potomny i ręcznie edytować jego arkusz stylów.

Pamiętaj, że są to tylko wytyczne i możesz swobodnie stosować takie podejście, które jest dla Ciebie najwygodniejsze.

Wzbogać cyfrowe wrażenia dzięki świetnemu projektowi i najwyższej klasy hostingowi

Projekt Twojej witryny odgrywa znaczącą rolę w tym, co myślą o niej odwiedzający. Dzięki WordPress masz dostęp do tysięcy motywów i możesz edytować dowolny z nich za pomocą niestandardowego CSS.

Jednak prowadzenie odnoszącej sukcesy strony internetowej to nie tylko wygląd. Będziesz także potrzebować hostingu WordPress, który zapewnia doskonałą wydajność, bezpieczeństwo i wsparcie. Dzięki WP Engine uzyskasz dostęp do wszystkich tych funkcji w każdym z naszych planów!