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 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Bez względu na to, który motyw WordPress wybierzesz dla swojej witryny, będą dostępne inne strony internetowe. I nawet dzięki wielu opcjom dostosowywania oferowanym przez 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 Twojego bloga WordPress pozwoli Ci zmienić 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

Przede wszystkim: CSS oznacza Cascading Style Sheetsco nie jest bardziej jasne niż akronim. Rozbijmy to.

Arkusz stylów to dokument opisujący style (takie jak czcionka, kolory itp..) do wykorzystania przy prezentacji 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ć z użyciem wielu arkuszy stylów, takich jak kaskadowy wodospad, z dolnym arkuszem poprzez dodawanie lub zastępowanie stylów najwyższego poziomu. Jest to ważne, ponieważ sposób dodawania stylów spowoduje zastąpienie oryginalnych zmian.

Selektor CSS

Choć może się to wydawać proste, CSS może być używany do zmiany prawie dowolnego aspektu strony 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 używa dostępnego kodu CSS w pliku o nazwie style.css, Jeśli otworzysz ten plik, zobaczysz pełną listę reguł stylu dla motywu WordPress. Cokolwiek robisz nie edytuj tego pliku! Aktualizacje zastąpią twoje zmiany.

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

Jak dostosować stronę WordPress za pomocą CSS

Teraz, gdy lepiej rozumiesz, co to jest CSS i jak wykorzystują je motywy WordPress, spójrzmy na opcje, których możesz użyć, aby dostosować bloga WordPress, a my omówimy zalety i wady każda metoda.

jak dostosować stronę internetową wordpress css 1

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

Opcja # 1: Dostosuj CSS za pomocą motywu potomnego

Jeśli używasz un motyw dla dzieci w celu dostosowania kodu CSS aktualizacje motywów, o których mówiliśmy wcześniej, nie będą już stanowić problemu. Aktualizacja motywu WordPress wpłynie na motyw „roślina matecznaPozostawiając nienaruszone zmiany w temacie dziecka. Wielu programistów motywów WordPress rozumie przydatność motywu potomnego.

Odkrywaj Kiedy i jak zainstalować WordPress w podkatalogu

Tworzenie motywu podrzędnego jest dość proste. Polega ona na utworzeniu folderu na twoim serwerze internetowym, który zawiera plik style.css która wyświetla motyw nadrzędny jako szablon i importuje plik style.css tematu nadrzędnego (pamiętasz znaczenie „stylów kaskadowych”?).

WordPress Codex ma 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 włączeniu go poprawnie 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 zawartego w desce rozdzielczej WordPress, klikając 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 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 uzyskania dostępu 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 folder motywu podrzędnego będzie w folderze „ wp-content> tematy« , Będziesz mógł użyć edytora tekstu do edycji pliku style.css.

Opcja # 2: Dostosuj CSS z Customizer

Od czasu WordPress 3.4, programiści motywów WordPress mogli skorzystać z Dostosowanie WordPress stworzyć dla nich opcje. Customizer pozwala dostosować ustawienia motywu i wyświetlić ich podgląd bez wpływu na wygląd strony internetowej podczas zapisywania ustawień.

jak dostosować stronę internetową wordpress css 2

Wiele motywów WordPress wykorzystuje Customizer, aby uprościć zarządzanie ustawieniami.

Dzisiaj interesuje nas możliwość dodania niestandardowego kodu CSS i na szczęście wiele motywów WordPress może to zrobić za pomocą opcji dostępnej w narzędziu dostosowywania lub w desce rozdzielczej WordPress.

Możesz sprawdzić dokumentację motywu WordPress, aby sprawdzić, czy ta opcja jest dostępna.

Motyw WordPress Suma na przykład proponuje obszar edycji kodu CSS z pulpitu nawigacyjnego.

CodeCSS Total WordPress

Jednak niektóre motywy WordPress oferują tę opcję bezpośrednio z interfejsu Customizer.

Opcja # 3: Dostosuj CSS za pomocą wtyczki

Zaletą korzystania z wtyczki do dostosowywania CSS jest to, że zachowujesz wtyczkę, nawet jeśli zmienisz motyw WordPress. Ma to swoje kompromisy, ponieważ style nie mogą wyświetlać się dobrze we wszystkich motywach WordPress.

Oto kilka wtyczek:

1. Niestandardowy CSS w pakiecie Jetpack (bezpłatny)

Wtyczka WordPress Jetpack jest zainstalowany na ponad milionie witryn WordPress i prawdopodobnie również na Twoim. Zapewnia funkcje dostępne na 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]

Po włączeniu modułu w pulpicie nawigacyjnym Jetpack dostępny będzie niestandardowy edytor CSS, umożliwiający dostosowanie motywu WordPress bez tworzenia motywu potomnego. Aby uzyskać dostęp do edytora, postępuj zgodnie z 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« na pulpicie nawigacyjnym WordPress. Zastosuj zmiany CSS w polu tekstowym, a po zakończeniu zapisz ustawienia.

3. CSS Hero (od 14 $ rocznie)

Ostatnią opcją wtyczki WordPress, na którą patrzymy dzisiaj, 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, aby Twoja witryna wyróżniała się na tle innych, nawet jeśli korzystasz z popularnego motywu WordPress. Dzięki CSS możesz dostosować wygląd swojej strony internetowej, 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 posiada również unikalną funkcję zwaną reklamami w tle. Pozwala wyświetlać reklamy jako tło dla treści.

Plus, ponieważ jest kompatybilny z wtyczkami takimi jak WPBakery et Suwak Revolutionmożesz wyświetlać swoje reklamy jako suwaki lub umieszczać je w dowolnym miejscu w swojej witrynie.

Pobierz | Demo | hosting

2. WP Media File Manager

WP Media File Manager to wtyczka WordPress, która pozwala w łatwy sposób uporządkować bibliotekę multimediów w formie hierarchii, korzystając z funkcji przeciągnij i upuść. Jest to jedna z najpotężniejszych wtyczek WordPress menedżera plików CodeCanyon. Nie będziesz nawet musiał ręcznie tworzyć folderów.

WP Media File Manager WordPress Media Library Folders Categories Upload Plugin

Ta wtyczka WordPress pozwala przesyłać tysiące plików z menedżera plików komputera na stronę internetową, automatycznie kopiując hierarchię folderu źródłowego. Jeśli chcesz mieć ten sam plik w różnych folderach, pamiętaj, że masz teraz prawdziwą bibliotekę multimediów, która zapewnia tę funkcjonalność.

Pożegnalne problemy z pobieraniem określonych typów plików, teraz wystarczy zainstalować tę wtyczkę WordPress i pozwolić jej towarzyszyć w zarządzaniu plikami.

Pobierz | Demo |hosting

3. Menu Bohaterów

Hero Menu to wtyczka WordPress z mega menu. I chociaż nie robi wiele heroicznych, oferuje wszystkie funkcje potrzebne tylko za 19 $. Trochę jak Mega Menu główne, jest to wtyczka, która sprawia, że ​​produkty oferowane w CodeCanyon i ma teraz sprzedaż prawie 4500.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 łatwo jest utworzyć megamenu, Proces ten zajmuje tylko kilka kroków. Ale dodatkowo zauważysz, że wtyczka jest kompatybilna z WooCommerce, proponuje responsywny projekt i interfejs „przeciągnij i upuść”, aby utworzyć menu.

Kreator menu usprawnia korzystanie z wtyczki i znacznie upraszcza pracę kupującego. Integracja interfejsu użytkownika to również świetna robota, która doskonale zachowuje się w przypadku innych wtyczek.

Pobierz | Demo | hosting

Polecane zasoby

Odkryj inne zalecane zasoby, które będą Ci towarzyszyć w tworzeniu witryny i zarządzaniu nią.

Wnioski

Nie! To tyle 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 poinformować Cię o wtyczce Anym Live Editor, która pozwala na pełną edycję CSS lub SCSS i JavaScript z dowolnej strony WordPress i która oferuje renderowanie na żywo wprowadzonych modyfikacji! Dodatkowo wtyczka jest wyposażona w szereg narzędzi pozwalających na interakcję ze stroną, którą chcemy zmodyfikować, i działa jak każdy zwykły IDE (wysublimowany styl tekstu), ale tym razem poświęcony twojej stronie WordPress.

Zostaw komentarz

Twój adres e-mail nie zostanie 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