Przejdź do głównej treści

Jak dostosować CSS witryny WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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

Bez względu na to, który motyw WordPress wybierzesz dla swojej witryny, będą inne witryny, które będą z niego korzystać. Nawet pomimo wielu opcji dostosowywania, które oferuje obecnie wiele motywów WordPress, możesz uczynić swoją witrynę jeszcze bardziej wyjątkową.

Wlać vraiment Aby dotknąć wizualnego aspektu motywu WordPress, musisz wyjść poza standardowe dostosowanie oferowane przez opcje lub ustawienia motywu WordPress. Dostosowanie CSS bloga WordPress pozwoli Ci zmodyfikować wygląd Twojej witryny, aby była naprawdę wyjątkowa.

W tym samouczku omówiono różne metody dostosowywania witryny za pomocą CSS, tworzenia i dostosowywania motywów potomnych, korzystania z wtyczek dostosowywania WordPress i wtyczek CSS WordPress.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy

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.

Jak dostosować CSS witryny WordPress

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

Większość motywów WordPress wykorzystuje kod CSS dostępny 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 już lepiej rozumiesz, czym jest CSS i jak wykorzystują je motywy WordPress, przyjrzymy się opcjom, których możesz użyć do dostosowania swojego bloga WordPress, i omówimy zalety i wady każda metoda.

jak dostosować stronę internetową wordpress css 1

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.

jak dostosować Wordpress strony css 1 1

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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ę.

Arkusz stylów WordPress

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.

jak dostosować stronę internetową wordpress css 2

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

Dostęp do dostosowywania WordPress w celu dostosowania motywu

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.

wprowadź dodatkowy kod css i opublikuj

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. jetpack-form-plugin

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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.single-custom-css

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.Wtyczka CSS Hero WordPress

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, wszechstronna opcja dostosowywania witryny, szczególnie jeśli używasz jednego z jej 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 wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego 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.Adning Reklama WordPress plugin

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ść. Jest to jedna z najpotężniejszych wtyczek do zarządzania plikami WordPress w CodeCanyon. Nie musisz nawet ręcznie tworzyć folderów.

WP Media File Manager WordPress Media Library Folders Categories Upload Plugin

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.Hero Menu Responsywna wtyczka WordPress Mega Menu

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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ą.

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.

... 

Ten artykuł zawiera 1 komentarz

  1. Witam,

    Chciałbym przedstawić Wam wtyczkę Anym Live Editor, która umożliwia pełną edycję CSS lub SCSS i Javascript z dowolnej strony WordPress i oferuje renderowanie na żywo wprowadzonych zmian! Ponadto wtyczka jest wyposażona w różnorodne narzędzia umożliwiające interakcję ze stroną, którą chcesz zmodyfikować i działa jak każde zwykłe IDE (Sublime text style), ale tym razem dedykowane Twojej witrynie WordPress.

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
4 akcji
udział2
ćwierkanie
Enregistrer2