Jak dostosować CSS swojej witryny WordPress? Dowiedz się w tym artykule.

Bez względu na to, jaki motyw WordPress wybierzesz dla swojej witryny, będą inne strony, które będą z niego korzystać. I nawet pomimo wielu opcji dostosowywania oferowanych przez wielu Motywy WordPress w dzisiejszych czasach możesz uczynić swoją stronę jeszcze bardziej wyjątkową.

Wlać vraiment Aby dotknąć wizualnego aspektu motywu WordPress, musisz wyjść poza standardowe dostosowywanie oferowane przez opcje lub ustawienia motywu WordPress. Dostosowanie CSS twojego bloga WordPress pozwoli ci zmodyfikować plikwygląd twojej witryny aby był naprawdę wyjątkowy.

W tym samouczku przyjrzymy się różnym dostępnym metodom dostosowywania witryny za pomocą CSS, tworzenia i dostosowywania motywów podrzędnych, przy użyciu wbudowanych wtyczek WordPress Customizer i WordPress wtyczki CSS.

Ale zanim zaczniesz, nie spiesz się Jak zainstalować WordPress, Ilu wtyczki należy zainstalować na WordPress.

Następnie wspólnie sprawdź naszą listę.

CSS: Podstawy i sposób korzystania z nich przez WordPress

Po pierwsze: CSS oznacza Cascading Style Sheets, co nie jest jaśniejsze niż akronim. Więc rozwiążmy to.

Arkusz stylów to dokument opisujący style (takie jak czcionka, kolory itp..) do wykorzystania do przedstawienia innego dokumentu. W naszym przypadku mamy do czynienia ze stylem stron internetowych.

CzęśćkaskadowyNazwa jest częścią tego, co czyni ją naprawdę potężną. Strony internetowe można projektować za pomocą wielu arkuszy stylów, takich jak kaskadowy wodospad, z dolnym arkuszem dodającym lub zastępującym style z wyższego poziomu. Jest to ważne, ponieważ sposób dodawania stylów nadpisze oryginalne zmiany.

Choć brzmi to prosto, CSS można wykorzystać do zmiany prawie wszystkiego na stronie internetowej (w tym układ, kolory, czcionki, a nawet animacje).

Dowiedz się, jak zarządzać powiadomieniami, odkrywając Jak zarządzać informację na WordPress

Najbardziej Motywy WordPress użyj kodu CSS dostępnego w pliku o nazwie style.css, Jeśli otworzysz ten plik, zobaczysz pełną listę reguł stylu dla motywu WordPress. Cokolwiek robisz nie modyfikuj tego pliku! Aktualizacje zastąpią twoje zmiany.

Istnieje kilka sposobów dodania pliku niestandardowy kod CSS do motywu WordPress, aby zmiany przetrwały aktualizację motywu WordPress.

Jak dostosować witrynę WordPress za pomocą CSS

Teraz, gdy lepiej rozumiesz, czym jest CSS i jak to zrobić Motywy WordPress z nich skorzystaj, przyjrzymy się opcjom, których możesz użyć do dostosowania swojego bloga WordPress, i omówimy zalety i wady każdej metody.

Pod koniec naszej pracy będziesz mógł określić, która metoda odpowiada Twojemu motywowi WordPress.

Opcja # 1: Dostosuj CSS za pomocą motywu potomnego

Jeśli używasz un motyw dla dzieci aby dostosować kod CSS, aktualizacje motywów, o których rozmawialiśmy wcześniej, nie będą już stanowić problemu. Aktualizacja motywu WordPress wpłynie na motyw „roślina mateczna», Pozostawienie zmian w motywie potomnym bez zmian. Wielu programistów motywów WordPress rozumie użyteczność motywu potomnego.

Odkrywaj Kiedy i jak zainstalować WordPress w podkatalogu

Tworzenie motywu potomnego jest dość proste. Polega na utworzeniu folderu na Twoim hostingu, który zawiera plik style.css która wyświetla motyw nadrzędny jako szablon i importuje plik style.css motywu macierzystego (czy pamiętasz znaczenie „kaskadowych” arkuszy stylów?).

WordPress Codex zawiera więcej informacji na temat tworzenia motywów potomnych.

Po utworzeniu motywu podrzędnego i prawidłowej aktywacji go możesz rozpocząć dostosowywanie motywu WordPress. Najszybszym sposobem będzie edycja pliku style.css, które można uzyskać na dwa sposoby.

Sprawdź ten artykuł, aby odkryć Jak skompresować pliki CSS, HTML i JavaScript

Pierwszym jest użycie edytora znajdującego się na pulpicie WordPress, poprzez kliknięcie Wygląd> Edytor. L 'wydawca wyświetla listę plików po prawej stronie dostępnych w motywie (Wyświetlane są tylko popularne pliki). Twój plik style.css będzie na samym dole listy i po kliknięciu opcji Arkusz stylów votre fichier style.css będzie ładować.

Możesz dodać zmiany do tej lokalizacji i zapisać zmianę.

Inny sposób na dostęp do pliku style.css (ten, który polecamy) jest przeglądanie plików na twoim serwerze przez klient FTP lub menedżer plików. Utworzony podrzędny folder motywów będzie znajdował się w „ wp-content> motywy« , Będziesz mógł użyć edytora tekstu do edycji pliku style.css.

Opcja nr 2: Dostosuj CSS z Customizer

Począwszy od WordPress 4.7, użytkownicy mogą dodawać niestandardowe CSS bezpośrednio z obszaru administracyjnego WordPress. To bardzo proste i możesz zobaczyć swoje zmiany w podglądzie w czasie rzeczywistym.

Najpierw musisz udać się na stronę Motywy »Dostosuj.

Spowoduje to uruchomienie interfejsu dostosowywania motywu WordPress.

Zobaczysz podgląd swojej witryny w czasie rzeczywistym po prawej stronie z kilkoma opcjami w lewym okienku. Kliknij kartę Dodatkowy CSS w lewym okienku.

Karta przesunie się, pokazując prosty obszar, w którym możesz dodać niestandardowy CSS. Jak tylko dodasz prawidłową regułę CSS, będziesz mógł zobaczyć ją zastosowaną w okienku podglądu w czasie rzeczywistym swojej witryny.

Możesz kontynuować dodawanie niestandardowego kodu CSS, dopóki nie będziesz zadowolony z jego wyglądu w Twojej witrynie. Nie zapomnij kliknąć „ Zapisz i opublikuj U góry, kiedy skończysz.

Uwaga: Każdy niestandardowy CSS, który dodasz za pomocą Customizer, jest dostępny tylko z tym konkretnym motywem WordPress. Jeśli chcesz go używać z innymi motywami, musisz skopiować i wkleić do nowego motywu przy użyciu tej samej metody.

Opcja # 3: Dostosuj CSS za pomocą wtyczki

Zaletą korzystania z wtyczki do dostosowywania CSS jest to, że możesz ją zachować nawet po zmianie motywu WordPress. Ma to swoje wady, ponieważ style nie mogą się dobrze wyświetlać we wszystkich motywach WordPress.

Oto kilka wtyczek:

1. Niestandardowy CSS w Jetpack (bezpłatny)

Wtyczka WordPress Jetpack  jest zainstalowany na ponad milionie witryn WordPress i prawdopodobnie również na Twojej. Zawiera funkcje dostępne w WordPress.com dla hostowanych witryn internetowych, a także oferuje moduł do dostosowywania CSS.

Gdy moduł zostanie aktywowany na pulpicie nawigacyjnym Jetpack, dostępny będzie niestandardowy edytor CSS, umożliwiający dostosowanie motywu WordPress bez tworzenia motywu potomnego. Dostęp do edytora uzyskujesz podążając tą ścieżką " Wygląd> Edytuj CSS« .

2. Prosty niestandardowy CSS (bezpłatny)

Jeśli chcesz samodzielną opcję, Proste niestandardowe CSS to dobry wybór. Ta darmowa wtyczka, używana na więcej niż stronach 200.000 z oceną gwiazdek 4,9, z pewnością pomoże ci spersonalizować bloga CSS WordPress.

Ta wtyczka nie wymaga żadnej konfiguracji, wystarczy ją zainstalować i aktywować. Aby zmodyfikować kod CSS, przejdź do „ Wygląd> Niestandardowy CSS«  w panelu WordPress. Zastosuj zmiany CSS w polu tekstowym, a po zakończeniu zapisz ustawienia.

3. CSS Hero (od 14 USD rocznie)

Ostatnią opcją wtyczki WordPress, którą dziś oglądamy, jest wtyczka premium WordPress o nazwie CSS Hero. Z 14 $ rocznie w przypadku jednej witryny wtyczka ta pozwala dostosować motyw WordPress za pomocą intuicyjnego interfejsu.

Zaprojektowany do pracy z dziesiątki kompatybilnych motywów WordPress , CSS Hero zapewnia całkowitą kontrolę nad wszystkimi elementami motywu WordPress. W przypadku motywów, których nie ma na liście, możesz użyć Tryb rakiety aby włączyć dostosowanie CSS Hero.

CSS Hero eliminuje potrzebę zrozumienia składni CSS, upraszczając interakcję z kodem za pośrednictwem interfejsu, a dotyczy to animacji i przejść. Możesz także wyświetlić podgląd zmian w czasie rzeczywistym i powrócić do poprzedniej wersji.

Dowiedzieć się Jak przenosić komentarze z jednego artykułu do drugiego w WordPress

Jeśli chcesz całkowicie zmienić CSS swojego bloga WordPress, ale nie chcesz uczyć się CSS, CSS Hero to świetna opcja do dostosowania swojej witryny, zwłaszcza jeśli używasz jednego z ich motywów WordPress.

Chociaż wiesz, że treść jest ważna, chcesz jednak, aby Twoja witryna wyróżniała się z tłumu, nawet jeśli używasz popularnego motywu WordPress. Dzięki CSS możesz dostosować projekt swojej strony internetowej tak, aby była całkowicie wyjątkowa.

Idź dalej, odkrywając Jak pozwolić użytkownikom na edycję niektórych stron

Istnieje więc kilka sposobów dostosowania CSS motywu WordPress:

1. motyw podrzędny.
2. Customizer.
3. wtyczka CSS.

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Reklamy reklamowe

WP PRO Advertising System to wtyczka do zarządzania reklamami WordPress, która oferuje strategiczne lokalizacje 18, aby pomóc Ci wyświetlać reklamy w Twojej witrynie. Posiada również szczegółową sekcję statystyk, w której zobaczysz skuteczność każdej reklamy.

Ta funkcja jest kluczowa, ponieważ pomoże Ci ulepszyć kampanię i zmaksymalizować zyski. Ta wtyczka WordPress Adsense zawiera również unikalną funkcję zwaną reklamami w tle. Umożliwia wyświetlanie reklam jako tła treści.

Plus, ponieważ jest kompatybilny z wtyczkami takimi jak WPBakery et Suwak Revolutionmożesz wyświetlać reklamy w postaci suwaków lub umieszczać je w dowolnym miejscu na swojej stronie.

Pobierz | Demo | hosting

2. WP Media File Manager

WP Media File Manager to wtyczka WordPress, która ułatwia organizowanie biblioteki multimediów w formie hierarchii za pomocą funkcji przeciągnij i upuść. To jeden z WordPress wtyczki najpotężniejszy menedżer plików w CodeCanyon. Nie będziesz nawet musiał ręcznie tworzyć folderów.

Ta wtyczka WordPress umożliwia przesyłanie tysięcy plików z menedżera plików na komputerze do witryny internetowej, automatycznie kopiując hierarchię folderu źródłowego. Jeśli chcesz mieć ten sam plik w różnych folderach, wiedz, że masz teraz prawdziwą bibliotekę multimediów, która zapewnia tę funkcję.

Pożegnaj się z problemami z pobieraniem określonych typów plików, teraz wystarczy zainstalować tę wtyczkę WordPress i pozwolić jej pomóc w zarządzaniu plikami.

Pobierz | Demo | hosting

3. Menu Bohaterów

Hero Menu to mega-menu wtyczka WordPress. I chociaż nie robi wiele heroicznego, ma wszystkie niezbędne funkcje za jedyne 19 USD. Trochę jak Mega Main Menu, jest to wtyczka, która zawiera również produkty prezentowane w CodeCanyon i ma w tej chwili prawie 4500 sprzedaży na koncie.

W sekcji funkcji szybko zorientujesz się, że utworzenie pliku megamenu, Proces ten zajmuje tylko kilka kroków. Ale dodatkowo zauważysz, że wtyczka jest kompatybilna z WooCommerce , oferuje responsywny projekt i interfejs typu „przeciągnij i upuść” do tworzenia menu.

Konstruktor menu usprawnia korzystanie z wtyczki i znacznie upraszcza pracę kupującego. Integracja z interfejsem użytkownika to również świetna robota, a interfejs użytkownika doskonale zachowuje się z innymi wtyczkami.

Pobierz | Demo | hosting

Polecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.

• Jak zabezpieczyć hasłem formularz w WordPressie
• Jak tworzyć piękne przejścia stron w WordPress
• Jak korzystać z interfejsu API REST WordPress
• Jak powiązać swoją witrynę WordPress z Telegramem
• Jak wyczyścić WordPress w kilku krokach

Wnioski

Nie! To wszystko w tym samouczku. Mamy nadzieję, że ten samouczek pokazał, jak dostosować CSS witryny WordPress. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych. 

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires.

...