Jak dostosować motyw WordPress za pomocą CSS

Czy wiesz, że możesz eksperymentować ze swoją witryną WordPress i zmieniać jej wygląd za pomocą CSS? Możesz dodać niewielkie zmiany estetyczne, wlać kolory, zmienić układ, a nawet całkowicie zmienić motyw WordPress.

Mając kontrolę nad wyglądem swojej strony internetowej, masz szansę na stworzenie jej w sposób, który Ci odpowiada.

Możesz dodać osobisty akcent do witryny swojej marki, co znacznie różni się od innych osób lub firm korzystających z tego samego motywu WordPress!

W tym poście przyjrzyjmy się bliżej, jak dostosować motyw WordPress za pomocą CSS.

Co to jest CSS?

CSS lub Cascading Style Sheets to język sieciowy używany do prezentowania stron internetowych. Dzięki CSS możesz ustawić układ, kolory, czcionkę, tło i inne elementy, dzięki którym nasze strony internetowe będą prezentować się użytkownikom. Właśnie dlatego nazywamy język CSS frontend po stronie klienta, ponieważ jest on wykonywany po stronie użytkownika. CSS jest używany w połączeniu z HTML i JavaScript, aby strony internetowe były responsywne. Jeśli myślisz, że musisz być zapalonym programistą, aby nauczyć się i wdrożyć CSS, to nieprawda. Możesz łatwo nauczyć się CSS i używać go do zmiany prezentacji swojej witryny, nawet jeśli wcześniej nie miałeś wiedzy o programowaniu.

Co to jest WordPress?

WordPress to najpopularniejszy i najłatwiejszy sposób na uruchomienie strony internetowej lub bloga. Mówiąc technicznie, WordPress to system zarządzania treścią typu open source. Obsługuje wszystkie ważne aspekty strony internetowej, takie jak treść, układ, bezpieczeństwo itp. Możesz stworzyć dowolną stronę internetową za pomocą WordPress. Na przykład witryny biznesowe, witryny eCommerce, portfolio, CV, sieci społecznościowe itp. WordPress jest darmowy i zawiera różne motywy i wtyczki. Można zmienić wygląd i styl swojej witryny WordPress za pomocą CSS.

CSS i WordPress

Aby rozpocząć edycję motywu WordPress, musisz najpierw zrozumieć kilka rzeczy – pliki szablonów, tagi szablonów i arkusz stylów CSS. Pliki szablonów kontrolują Twój motyw WordPress. Możesz zobaczyć różne pliki, takie jak header.php, archive.php. Są to pliki szablonów, które kontrolują Twój motyw WordPress. Znaczniki szablonów służą do kontrolowania tych plików i innych elementów bazy danych. Arkusz stylów CSS lub style.css to plik, którego należy szukać, aby zmienić wygląd witryny. Będziesz edytować kod w style.css, aby dostosować motyw WordPress.

Jak dostosować motyw WordPress za pomocą CSS

Przede wszystkim musisz zrozumieć, że jeśli chcesz dostosować motyw WordPress za pomocą CSS, musisz albo dodać do niego określony kod, albo edytować już napisany kod. Polecam przynajmniej nauczyć się podstaw CSS, HTML, JavaScript i PHP przed rozpoczęciem edycji motywu.

Inną rzeczą, na którą należy zwrócić uwagę, jest to, że jeśli zamierzasz wprowadzić zmiany w arkuszu stylów motywu WordPress, zmiany te zostaną usunięte po aktualizacji motywu. Musisz więc poznać motywy potomne i używać motywu potomnego do wprowadzania zmian przy użyciu plików style.css, functions.php lub innych szablonów motywów. O motywach dziecięcych mówiłem w dalszej części tego artykułu.

Istnieją dwa sposoby edytowania lub dodawania CSS do motywu

1 Korzystanie z pulpitu nawigacyjnego

Pozwala to na edycję motywu WordPress bezpośrednio przy użyciu arkusza stylów CSS na pulpicie nawigacyjnym WordPress. Musisz jednak pamiętać, że wszelkie duże zmiany wprowadzone tutaj mogą być trudne do przywrócenia. Zalecam więc wykonanie kopii zapasowej oryginalnego CSS motywu WordPress, a następnie wprowadzenie zmian. Polecam również utworzenie motywu potomnego dla swojej witryny. Jeśli nie wiesz, co to jest, po prostu przeczytaj następną sekcję i wróć.

Utwórz motyw potomny, a następnie w tym motywie potomnym przejdź do Wygląd, a następnie Edytor motywów. Gdy używasz motywu potomnego, pojawi się wyskakujące okienko, ale nie ma się czym martwić. Po prostu kliknij „Rozumiem", aby przejść do arkusza stylów. Jeśli chcesz wprowadzać zmiany w plikach szablonów, takich jak header.php, functions.php itp., musisz najpierw nauczyć się PHP, a następnie spróbować swoich umiejętności kodowania. W przeciwnym razie po prostu trzymaj się edycji arkusza stylów.

Co to jest motyw potomny w WordPress?

Motyw potomny to replika oryginalnego motywu (znanego również jako motyw nadrzędny). Motyw podrzędny obejmuje funkcjonalność i styl motywu nadrzędnego. Zaleca się używanie motywu potomnego, jeśli chcesz zachować nienaruszony oryginalny kod podczas wprowadzania zmian w projekcie witryny. Możesz więc tworzyć nowe, lepsze projekty na motywie potomnym i zachować funkcjonalność motywu nadrzędnego. Kilka zalet używania motywu potomnego to:

• Nie musisz się martwić, że zmienisz oryginalny kod, ponieważ motyw nadrzędny jest bezpieczny i nieedytowany.
• Możesz użyć kodowania, aby rozszerzyć funkcjonalność motywu nadrzędnego, poeksperymentować z nim i stworzyć coś nowego.
• Nie musisz tworzyć motywu od podstaw. Jeśli przypadkiem zapomnisz o określonej funkcjonalności lub funkcji, kod motywu nadrzędnego jest dla Ciebie.

Jednak musisz być bardzo ostrożny podczas korzystania z motywów potomnych. Jednym z powodów jest to, że wymagałoby to umiejętności kodowania i doświadczenia. Jeśli dopiero zaczynasz z CSS, HTML, JavaScript i PHP, daj sobie trochę czasu, aby najpierw stać się ekspertem. W przeciwnym razie krzywa uczenia się może być dość wysoka.

Kolejną rzeczą, o którą należy zadbać podczas korzystania z motywu potomnego, jest to, że najpierw należy sprawdzić aktualizacje. Jeśli Twój motyw nadrzędny zostanie zaktualizowany o funkcję, której nie chcesz, nie możesz aktualizować motywu WordPress, ponieważ odzwierciedlałoby to motyw Twojego dziecka. Czasami, jeśli któraś z funkcji zostanie usunięta z motywu głównego i zaktualizujesz go, może to mieć wpływ na motyw potomny. W ten sposób zwiększasz swoją pracę z kodowaniem.

2 Korzystanie z serwera FTP

Może się zdarzyć, że nie będziesz mieć bezpośredniego dostępu do pulpitu nawigacyjnego swojego motywu. Czasami użycie wtyczek wyłącza tę funkcję. Musisz więc użyć protokołu FTP lub protokołu przesyłania plików, aby uzyskać zdalny dostęp do plików swojej witryny. Zacznij od pobrania dowolnej aplikacji klienta FTP. Skontaktuj się ze swoim hostem i poproś o dane uwierzytelniające FTP.

Po wprowadzeniu poświadczeń uzyskasz dostęp do pliku style.css. Teraz wprowadź zmiany w pliku, zapisz zmiany i prześlij je z powrotem na serwer. Może to być dość gorączkowa metoda dodawania CSS do Twojej witryny, więc używaj jej tylko wtedy, gdy nie masz dostępu do pulpitu nawigacyjnego.

Łatwe sposoby dodawania CSS do witryny WordPress

Istnieją dwie proste metody, za pomocą których możesz dodać CSS do swojej witryny WordPress. Obejmują one korzystanie z narzędzia do dostosowywania WordPress lub wtyczki. O wiele łatwiej będzie dodać kod CSS za pomocą tych metod. Dodanie CSS za pomocą dostosowywania WordPress lub wtyczki również nie spowodowałoby zniknięcia kodu po aktualizacji motywu. Nadal jednak zalecałbym przechowywanie kopii zapasowej oryginalnego kodu witryny na wypadek niezamierzonych zdarzeń. Sprawdźmy teraz dwa proste sposoby dodania CSS do witryny WordPress.

1 Edycja za pomocą WordPress Customizer

Po prostu zaloguj się do zaplecza WordPress. Kliknij Wygląd, a następnie kliknij Dostosuj. Otworzy się ekran dostosowywania. Ten ekran pokazuje podgląd Twojej witryny w tym momencie, a po lewej stronie ekranu pojawi się kilka opcji umożliwiających dostosowanie elementów, takich jak kolory, menu lub inne widżety.

Po lewej stronie ekranu zobaczysz opcję o nazwie Dodatkowy CSS. Tutaj musisz posypać swoją magią. Gdy klikniesz Dodatkowy CSS, otworzy się nowa strona z kodem Twojej witryny. Teraz możesz wprowadzać zmiany w kodzie i jeśli napisałeś go poprawnie (bez błędów!) zobaczysz odzwierciedlenie zmian w podglądzie.

Napisany tutaj kod CSS nie zmieni się ani nie zniknie po aktualizacji motywu! Ale jeśli przejdziesz do nowego motywu, zapisany tutaj kod zostanie usunięty. Dlatego zaleca się wykonanie kopii zapasowej CSS przed zmianą motywu.

2 Użyj wtyczki

W tej sekcji omówię cztery różne wtyczki, których możesz użyć do edycji CSS dla swojego motywu WordPress – Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS i CSS Hero. Jeśli nie wiesz, wtyczki WordPress to małe fragmenty oprogramowania, które można dołączyć do WordPress w celu rozszerzenia jego funkcjonalności. Niektóre wtyczki są dostępne bezpłatnie, a za niektóre trzeba zapłacić trochę pieniędzy, aby dodać je do swojej witryny WordPress. Wtyczki mogą pomóc Ci edytować lub dodawać CSS do Twojej witryny WordPress za pomocą zaledwie kilku kliknięć!

Korzystanie z wtyczki zaawansowanego edytora CSS

Pierwsza wtyczka, którą polecam, to Advanced CSS Editor. Ta wtyczka pozwala dodać CSS do wyglądu Twojej witryny na komputerze stacjonarnym, tablecie i telefonie komórkowym. W ten sposób możesz dostosować swoją witrynę do każdego urządzenia. Aby rozpocząć edycję, zainstaluj wtyczkę. Przejdź do pulpitu nawigacyjnego WordPress, kliknij Wygląd, a następnie Dostosuj. Zobaczysz nową opcję o nazwie Zaawansowany edytor CSS. Dodaj do niego niestandardowy CSS, który chcesz, i zapisz zmiany.

Ogromną zaletą korzystania z tej wtyczki jest to, że możesz kontrolować wygląd swojej witryny na różnych urządzeniach. Co więcej, nadal możesz użyć techniki, o której mówiłem w punkcie 1, aby edytować motyw WordPress. Jednak dla niektórych osób, które nie są przyzwyczajone do kodowania, wprowadzanie zmian dla każdego typu urządzenia może być bardzo pracochłonne. Najpierw musieliby nauczyć się pisać CSS dla każdego typu urządzenia.

Korzystanie z modułowej niestandardowej wtyczki CSS

Drugą wtyczką, którą polecam, jest Modular Custom CSS. Ta wtyczka pomaga wprowadzać zmiany w witrynie WordPress pod względem motywu. Na przykład, jeśli obecnie używasz jednego motywu i wprowadzasz w nim zmiany za pomocą Modular Custom CSS. Następnie decydujesz się wybrać inny motyw dla swojej witryny. Tak więc zmiany wprowadzone w pierwszym motywie nie zostałyby usunięte. Pozostaną one nienaruszone w tej wtyczce. Możesz także dodać globalny CSS za pomocą tej wtyczki. Ten CSS pozostanie taki sam pomimo zmian motywu.

Aby użyć tej wtyczki, najpierw pobierz wtyczkę i dodaj ją do swojej witryny WordPress. Następnie kliknij Wygląd -> Dostosowywanie -> Dodatkowy CSS. Jedyną wadą, jaką mogłem znaleźć w tej metodzie, jest to, że dodanie globalnego CSS może nie zawsze być najlepszym pomysłem. Czasami globalny CSS może nie działać z motywem i może to być bałagan.

Korzystanie z wtyczki SiteOrigin CSS

Trzecia wtyczka, którą polecam, to SiteOrigin CSS. Ta wtyczka zapewnia kontrolę wizualną, która pozwala edytować wygląd i działanie witryny w czasie rzeczywistym. Ta wtyczka jest odpowiednia zarówno dla początkujących, jak i zaawansowanych użytkowników CSS. Podgląd w czasie rzeczywistym i kontrolki wizualne pomagają początkującym, podczas gdy zaawansowani użytkownicy mogą szybko kodować, korzystając z funkcji automatycznego uzupełniania kodu tej wtyczki.

Ta wtyczka otwiera samodzielny edytor CSS dla WordPress. Aby uzyskać dostęp do tej wtyczki, najpierw pobierz wtyczkę i dodaj ją do swojej witryny WordPress. Następnie kliknij Wygląd -> Niestandardowy CSS. Wspaniałą cechą tej wtyczki jest to, że możesz edytować dowolny element na swojej stronie internetowej, po prostu klikając go. Możesz zmienić kilka prostych elementów motywu bez użycia CSS. Jednak jedną wadą takiej funkcjonalności może być to, że jeśli wprowadzisz zmiany w wielu różnych elementach motywu, śledzenie ich może być trudne.

Korzystanie z wtyczki CSS Hero

To jest coś interesującego. Moja trzecia rekomendacja dotycząca wtyczek obejmuje wtyczkę, która pomaga edytować CSS w witrynie WordPress za pomocą przeciągania i upuszczania. Jest znany jako CSS Hero. Aby edytować CSS za pomocą tej wtyczki, wystarczy najechać myszką na element, który chcesz zmienić i kliknąć go. Następnie możesz dostosować go tak, jak chcesz. Oto kilka niesamowitych funkcji tej wtyczki:

• Ta wtyczka zawiera łatwą edycję stylów czcionek i topografii. Wtyczka obsługuje czcionki Google Fonts i TypeKit.
• Możesz także użyć próbnika kolorów i poeksperymentować z aktywnym kolorem i zmianą tła. Możesz łatwo znaleźć ostatnio używane kolory.
• Możesz po prostu przeciągnąć suwak i zobaczyć, jak wyglądają marginesy.
• Wtyczka obsługuje również elementy witryny, takie jak gradient, cienie ramek, cienie tekstu i inne nowoczesne właściwości CSS.
• Za pomocą tej wtyczki możesz zapisywać migawki swoich zmian. Nie musisz więc sprawiać, by wszystko żyło. Po prostu pracuj dalej i opublikuj ostateczną wersję.
• Ta wtyczka nie wpływa na pliki motywu. Więc nie musisz się martwić, że aktualizacje zrujnują twoje zmiany.

Porównanie różnych sposobów dostosowywania motywu WordPress za pomocą CSS

Tak więc dzisiaj dowiedzieliśmy się o 4 różnych sposobach dostosowywania witryny WordPress za pomocą CSS. Możesz edytować lub dodawać CSS do swojego motywu WordPress za pomocą pulpitu nawigacyjnego lub możesz użyć aplikacji FTP. Możesz użyć WordPress Customizer, aby dodać lub edytować CSS lub wreszcie możesz użyć niektórych wtyczek, aby dostosować swój motyw WordPress za pomocą CSS.

• Jeśli dopiero zaczynasz korzystać z WordPressa i CSS, polecam użyć narzędzia WordPress Customizer do edytowania lub dodawania CSS. W ten sposób możesz sprawdzić zmiany w podglądzie i nie musisz się martwić o usunięcie zmian po aktualizacji motywu.
• Jeśli masz jakieś doświadczenie z CSS i WordPressem i pracowałeś wcześniej z wtyczkami, polecam wybrać jedną z czterech wtyczek, które Ci dzisiaj udostępniłem. Wtyczki zapewniają lepsze opcje i możliwości ulepszenia witryny.
• Jeśli jesteś weteranem CSS. Tworzyłeś strony internetowe i wiesz, jak CSS działa dokładnie. W takim razie polecam skorzystanie z Dashboardu lub FTP, aby wprowadzić zmiany bezpośrednio w arkuszu stylów WordPress.

Ważne jest, jak wygląda Twoja witryna

Projekt, układ, kolory, czcionki lub motyw witryny są dość ważne. Pomaga przekazać uczucie, jakie chcesz, aby użytkownik miał na temat Twojej firmy. Może stworzyć unikalny wizerunek marki i zdefiniować Twoją tożsamość.

Projekt i układ witryny również odgrywają ważną rolę w zwiększaniu komfortu użytkowania. Jeśli Twój projekt nie jest tak dobry, umieściłeś reklamy w niewłaściwych miejscach, kolory Twojej witryny są dość rozpraszające, wszystko to może wpłynąć na wrażenia użytkownika.

Świetny projekt i układ mogą pomóc Ci kontrolować sposób dostarczania wiadomości do użytkowników. Możesz przyciągnąć ich uwagę we właściwym czasie i poprowadzić ich na ścieżkę, która spełni Twoje cele. Tak więc zmiana, dodanie lub edycja CSS witryny WordPress jest kwestią odpowiedzialności. Odpowiedzialność za ulepszanie witryny dla użytkowników.

Mam nadzieję, że te porady i wskazówki dotyczące dostosowywania motywu WordPress za pomocą CSS pomogą Ci nadać spersonalizowany charakter Twojej witrynie. Jeśli używasz któregokolwiek z nich lub korzystałeś z nich w przeszłości, podziel się swoimi doświadczeniami w sekcji komentarzy i rozpowszechniaj informacje!