Jak dostosować motyw WordPress za pomocą CSS
jeśli chcesz dowiedzieć się, jak dostosować motyw WordPress za pomocą CSS, jedną z pierwszych rzeczy, które musisz wiedzieć, jest edytowanie plików w samym motywie.
proces edycji plików motywów jest skutecznie taki sam, niezależnie od tego, czy chcesz dostosować CSS czy HTML, a w poprzednich samouczkach z tej serii omówiliśmy już ten proces w celu modyfikacji HTML.
aby uniknąć bieżnikowania tego samego podłoża, zapoznaj się z „Jak edytować HTML w motywie WordPress” i „jak zainstalować WordPress lokalnie za pomocą XAMPP”, aby dowiedzieć się więcej:
- edytowanie plików za pomocą edytora motywów
- pobieranie i przesyłanie plików przez FTP lub zdalne połączenie
- dlaczego warto rozważyć wprowadzenie zmian w motywie podrzędnym
- Edycja offline za pośrednictwem XAMPP
dzięki metodom edycji plików motywów już omówionym, w tym samouczku skupimy się na tym, jak edytować css w WordPress, poznając te tematy:
- jak dodać niestandardowy CSS za pomocą dostosowywania motywu
- jak zidentyfikować arkusz stylów, którego używa motywu
- jak określić, który CSS należy zmienić i gdzie, aby dostosować określoną część motywu
Uwaga: w tym artykule zakłada się, że masz podstawową wiedzę na temat CSS, ale niekoniecznie o tym, jak aby edytować CSS w WordPress.
Premium WordPress Themes and Plugins
zanim zaczniemy, nie zapomnij, że możesz eksplorować tysiące motywów WordPress na ThemeForest i wtyczkach WordPress na CodeCanyon. Kup te wysokiej jakości motywy i wtyczki WordPress i popraw wrażenia z witryny dla Ciebie i Twoich odwiedzających.
jak edytować CSS w WordPress Theme Customizer
WordPress ma dedykowany obszar, w którym możesz dodać własny niestandardowy kod CSS. Ten kod zostanie załadowany we właściwym czasie, aby upewnić się, że nadpisuje domyślny styl motywu, a użycie tego podejścia nie powoduje żadnych bezpośrednich zmian w plikach motywu.
w menu po lewej stronie panelu administracyjnego WordPress przejdź do Wygląd > Dostosuj:
to przeniesie Cię do obszaru dostosowywania motywu, gdzie możesz kliknąć na pozycję menu dodatkowy CSS:
pojawi się duże pole, do którego możesz dodać dowolny niestandardowy CSS:
Zapisz zmiany, klikając niebieski przycisk Publikuj w górnej części lewego paska bocznego po zakończeniu dodawania niestandardowego kodu.
Jak zidentyfikować arkusz stylów motywu
jeśli nie chcesz używać dodatkowego obszaru CSS w module dostosowywania motywu, a zamiast tego chcesz bezpośrednio edytować CSS motywu, musisz znaleźć sposób, aby dowiedzieć się, których plików motyw faktycznie używa do stylizacji.
w większości przypadków motywy będą korzystać ze standardowej struktury dla WordPress i mają plik o nazwie „style.css ” w katalogu głównym motywu. W rzeczywistości jest to niezbędny plik motywu, więc zawsze znajdziesz go w dowolnym motywie.
jednak po otwarciu go do edycji może się okazać, że jest pusty w kodzie, a deweloper ładuje stylizacje z innego miejsca, w którym znajduje się motyw. Lub może się nawet okazać, że ładują się w wielu plikach arkusza stylów.
istnieją dwa sposoby sprawdzania, które arkusze stylów są używane przez motyw.
Kontrola kodu głównego
pierwszą metodą jest Sprawdzenie kodu <head> tematu. Możesz to zrobić, klikając prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierając Wyświetl źródło strony, a następnie lokalizując tagi <head>...</head>.
pomiędzy tymi znacznikami poszukaj elementów <link>, które również mają rel='stylesheet'. Następnie sprawdź, które z nich pochodzą z katalogu motywu. Adresy URL arkuszy stylów powiedzą ci, gdzie w strukturze motywu je znaleźć.
zauważ, że jeśli używasz wtyczki, która łączy i minimalizuje wszystkie arkusze stylów witryny w jeden plik, ta technika nie zadziała, ponieważ zobaczysz tylko adres URL tego pojedynczego pliku. Zamiast tego użyj techniki drugiej, sprawdzając plik funkcji.
sprawdzanie Pliku funkcji
za każdym razem, gdy motyw używa arkusza stylów, musi powiedzieć WordPressowi, którego pliku chce użyć, za pomocą funkcji o nazwie wp_enqueue_style(). W ten sposób możemy zobaczyć dokładnie, które arkusze stylów ładuje motyw, znajdując jego użycie tej funkcji.
Każdy motyw ma plik o nazwie „functions.php ” znajduje się w katalogu głównym. Użycie funkcji wp_enqueue_style() jest zazwyczaj w tym pliku, więc otwórz go i zacznij szukać nazwy funkcji.
kiedy znajdujesz instancje funkcji wp_enqueue_style(), poszukaj między nawiasami drugiego parametru, tj. bitu tekstu po pierwszym przecinku. Ten tekst pokazuje lokalizację arkusza stylów. Na przykład:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
w powyższym kodzie drugim parametrem jest:
get_template_directory_uri() . '/css/mainstyle.css')
to mówi nam, że arkusz stylów znajduje się w podkatalogu motywu o nazwie „css”, a jego nazwa pliku to „mainstyle.css”.
Jak określić, który CSS zmienić
gdy już wiesz, jak dodać lub edytować CSS motywu, następną rzeczą do nauczenia się jest dowiedzieć się, który Kod faktycznie musisz zmienić.
najlepszym sposobem na to jest użycie narzędzi programistycznych w przeglądarce, najlepiej Chrome lub Firefox ze względu na jakość ich narzędzi.
powiedzmy, że na przykład chcesz zmienić rozmiar czcionki tytułów postów. Kliknij prawym przyciskiem myszy jeden z tytułów postów i wybierz opcję Inspect:
spowoduje to otwarcie panelu Narzędzia programistyczne. W zakładce Style poszukaj właściwości font-size.
jeśli go nie widzisz, przeglądarka może wyświetlać element nadrzędny lub podrzędny, więc na karcie Elementy spróbuj kliknąć pobliskie elementy, aż znajdziesz element, który dokładnie podświetli kształt tekstu tytułu postu i ma właściwość font-size :
teraz na karcie Style spróbuj zmienić wartość właściwości font-size. Jeśli widzisz tekst Zmień rozmiar w oknie przeglądarki, wiesz, że znalazłeś prawidłowy CSS.
aby dowiedzieć się, gdzie w arkuszu stylów znajduje się ten CSS, spójrz w prawym górnym rogu miejsca, w którym właśnie edytowałeś wartość font-size. Powinieneś zobaczyć nazwę pliku, dwukropek, a następnie liczbę.
nazwa pliku mówi, w którym arkuszu stylów znajduje się kod, a liczba po dwukropku mówi, w której linii znajdziesz ten kod. Na przykład powyższy obrazek pokazuje kod z ” style.css ” plik on line 4054. Jeśli edytujesz bezpośrednio arkusz stylów motywu, możesz go otworzyć, przejść do numeru linii i zmienić CSS.
jeśli pracujesz w dodatkowym polu CSS dostosowywania motywu lub w ramach motywu podrzędnego, będziesz musiał również kierować ten sam selektor, co oryginalny CSS, dzięki czemu możesz go zastąpić własną stylizacją.
w narzędziach programistycznych przeglądarki poszukaj selektora, który znajduje się nad właściwością font-size, którą właśnie zmieniłeś. Jest na lewo od pliku arkusza stylów i specyfikacji numeru linii, na którą właśnie spojrzeliśmy.
skopiuj cały Selektor i wklej go do kodu niestandardowego, a następnie użyj go, aby poprawnie kierować zmodyfikowaną wartość font-size.
zawsze sprawdzaj opcje motywu zapiekanego
zanim zaczniesz się zastanawiać nad dostosowaniem CSS, zawsze sprawdzaj w module dostosowywania motywu opcje, które programista mógł już wypalić w motywie.
motywy często mają dość wszechstronne opcje dostosowywania, które nie wymagają niestandardowego kodu. Tak więc, przed edytowaniem dowolnego CSS, możesz zaoszczędzić sobie dużo czasu, sprawdzając, czy istnieje już sposób na wprowadzenie potrzebnych zmian.
jak dostosować motyw WordPress krok po kroku
teraz, gdy rozmawialiśmy o tym, jak dostosować CSS i HTML motywu WordPress, możesz czuć się trochę niepewny, od czego zacząć. Więc sprowadzmy wszystko do podstawowej listy kroków, które należy wykonać:
- Sprawdź dostosowywanie motywu, aby sprawdzić, czy dostępna jest już opcja, która może ułatwić zmianę, którą chcesz wprowadzić
- jeśli nie, i musisz dodać prosty Niestandardowy CSS, użyj dodatkowego pola CSS w dostosowywaniu motywu
- jeśli chcesz dokonać bardziej rozbudowanych dostosowań do HTML lub CSS, rozważ ich utworzenie w ramach motywu podrzędnego
- , aby wprowadzić małe zmiany bezpośrednio do motyw, użyj WordPress wbudowany edytor motywów
- aby uzyskać więcej szczegółowych zmian bezpośrednio do motywu, użyj FTP, zdalnego połączenia lub pracuj całkowicie offline w przypadku XAMPP
- po wybraniu metody edycji określ arkusz stylów motywu, sprawdzając kod
<head>witryny lub przeglądając funkcje motywu.php ” w celu korzystania z funkcjiwp_enqueue_style() - Znajdź określone linie CSS, które chcesz zmodyfikować, i powiązane z nimi selektory, korzystając z funkcji Inspect narzędzi programistycznych Chrome lub Firefox
kiedy zagłębisz się we wszystkie powyższe i zapoznasz się, zaczniesz widzieć, jak konfigurowalny jest WordPress.
zanim się zorientujesz, będziesz tworzyć własne, całkowicie oryginalne motywy dziecięce i tworzyć własne projekty.
i tak się składa, że nauka „Jak zrobić motyw dziecka w WordPress” to kolejny samouczek z tej serii. Zostańcie z nami!