Przejdź do głównej treści

Jak dodać niestandardowy CSS do bloga WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

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

Istnieje więcej niż jeden sposób dodawania niestandardowego kodu CSS do bloga WordPress.

Dzisiaj wyjaśnię mocne i słabe strony dwóch różnych metod, które ci proponuję, abyś mógł wybrać tę, która najbardziej ci odpowiada.

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.

Jak znaleźć elementy, które chcesz dostosować

Po wyizolowaniu części motyw WordPress, który chcesz zmienić (na przykład tytuł artykułu), będziesz musiał określ właściwości CSS zastosowane do niego, aby można było wprowadzić odpowiednie zmiany. Na szczęście proces ten nie jest skomplikowany.

CSS używa selektorów, aby określić, które elementy zostaną poddane różnym konkretnym zmianom. Zwykle odbywa się to poprzez określenie „ klasa "Elementu (lub element DOM). Jednak CSS może również służyć do definiowania układu całego elementu (na przykład tag „ ") lub przy użyciu identyfikatora tagu.

Na szczęście popularne przeglądarki pozwalają nam zobaczyć różne selektory i deklaracje, które są stosowane do elementów strony za pomocą kilku kliknięć. Na przykład w Google Chrome wystarczy zaznaczyć określoną część dokumentu, a następnie kliknąć prawym przyciskiem, jak w poniższym przykładzie.

blogpascher inspekcja

Klikając " Sprawdź element W wyświetlonym menu rozwijanym zobaczysz kod HTML strony w nowym oknie z zaznaczonym przedmiotem sprawdzonym w oknie po prawej stronie (lub poniżej). Możesz zobaczyć przykład poniżej.

blogpascher-logo

Teksty tych elementów (lub atrybutów) Podświetlone na czerwono pokazują różne konkretne style mające zastosowanie do elementu, który został wyróżniony przez sprawdzenie kodu.

Czytaj także: Jak dodać menu rozwijanego z CSS w Visual Editor

Na przykład element „ rozmiar czcionki Informuje, że czcionka wyświetlana w wyróżnionym elemencie ma rozmiar 13 pikseli. Deskryptory są otoczone nawiasami klamrowymi i poprzedzone selektorami. Nazwa odpowiedniego pliku arkusza stylów jest wyświetlana po prawej stronie selektorów.

Gdy będziesz mieć na uwadze te informacje, zmiana stylu stanie się łatwa. Na przykład, jeśli chcesz zmienić czcionkę z 13px na 14px, po prostu poszukaj pliku arkusza stylów, selektora odpowiadającego wybranemu elementowi. Zasadniczo jest w tej formie: (« # plugin-infos .block-content”). Następnie możesz zmodyfikować różne wartości atrybutów.

Możesz zrobić to samo w przeglądarce Firefox, po prostu zaznacz konkretną część strony, kliknij element prawym przyciskiem myszy, a następnie wybierz „ Sprawdź element W wyświetlonym menu.

Jak WordPress i CSS współpracują razem

Faktem jest, że motywy WordPress są tworzone inaczej. Pamiętaj więc, że Twój motyw WordPress może nie być w 100% zgodny z tym, co przeczytałeś w kolejnych sekcjach.

To powiedziawszy, jest bardziej niż prawdopodobne, że CSS używany na blogu WordPress znajduje się w pliku o nazwie „ style.css „ Jest to powszechna nazwa arkusza stylów dla dowolnego rodzaju witryn, nie tylko WordPress.

Zobacz także: Jak zmienić rozmiar obrazów Gravatar na WordPressie

Czas przejść przez różne procesy edycji.

Metoda # 1: Edycja pliku stylu motywu WordPress

Istnieją dwa sposoby uzyskania dostępu do pliku style.css motywu.

Ł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]

Pierwszym z nich jest zrobienie tego z pulpitu WordPress. W menu po lewej stronie wybierz menu „ apparence „A potem” wydawca ".

menu-editor-in-Picture krawędzi

Po wejściu na stronę edytora zobaczysz listę plików na pionowym pasku po prawej stronie strony. Przewiń listę plików. Zobaczysz plik o nazwie „ Styl arkusza stylów.css Na dole strony.

Jeśli klikniesz nazwę tego pliku, zostanie on załadowany i wyświetlony w edytorze pośrodku. Możesz użyć tego ekranu do edycji pliku.

menu-wordpress-redaktor kodu

Innym sposobem na znalezienie arkusza stylów jest przejrzenie systemu operacyjnego dostawcy hostingu i zlokalizowanie pliku w folderze motywu WordPress (za pomocą klienta FTP). Dokładna lokalizacja będzie się różnić w zależności od dostawcy usług hostingowych. W poniższym przykładzie nazwa witryny internetowej (w naszym przypadku thecare) jest folderem w folderze public_html.

Ponieważ WordPress jest zainstalowany, możesz zobaczyć folder wp-content w „thecare”. Podfolder wp-content to kolejny folder o nazwie „ wp-themes„, W którym są zainstalowane wszystkie motywy WordPress.

Z tej witryny korzysta motyw „ Newsletter », Plik stylu« style.css Znajduje się w folderze „ rodzic biuletyn ".

Newsletter Folder nadrzędny-800x401

Metoda nr 2: użycie wtyczki do modyfikacji CSS

Być może najwygodniejszym sposobem edycji CSS swojego bloga WordPress jest użycie wtyczki.

Jedna z głównych zalet używania wtyczki jest podobna do motywów potomnych. tak aktualizujesz motyw WordPressTwoje zmiany nie zostaną nadpisane, ponieważ będą przechowywane oddzielnie, a nie wśród plików motywu. Inną zaletą jest oczywiście to, że nie musisz tworzyć motywu potomnego.

Oto niektóre wtyczki premium, których można również użyć do modyfikacji kodu CSS motywu WordPress:

1. Żółty ołówek: Edytor stylów Visual CSS

Yellow Pencil to wizualny edytor stylów, którego możesz użyć z dowolnym motywem, aby spersonalizować swoją witrynę w ciągu kilku minut (czcionki, kolory, animacje i więcej…).Wtyczka edytora stylów HTML YellowPencil Visual CSS

Ta specjalna wtyczka WordPress stworzy style CSS tło podczas zabawy kolorami, jakby to była gra. Został zaprojektowany zarówno dla początkujących, jak i doświadczonych użytkowników.

Odkryj także nasze Wtyczki 5 WordPress wyświetlać powiadomienia

Nie jest wymagana znajomość kodowania. Jednak wtyczka WordPress ma dobry edytor CSS dla tych, którzy lubią kodować. Możesz kodować na żywo za pomocą tego edytora i dostosowywać swój CSS.

Pobierz | Demo | hosting

2. Niestandardowe JS i CSS dla Gutenberga

Wysokiej jakości wtyczka WordPress Custom JS i CSS dla Gutenberg pozwoli Ci dodać nieograniczoną liczbę niestandardowych stylów do edytora WYSIWYG dla Twoich postów i stron WordPress. Jest w pełni kompatybilny z wersją WordPress Gutenberga.

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]

Niestandardowe JS i CSS dla wtyczki Gutenberg WordPress

Możesz po prostu stworzyć nowy styl za pomocą łatwego w użyciu edytora CSS. Ta wtyczka WordPress rozszerza funkcje pola niestandardowe witryny i umożliwia modyfikowanie niestandardowych pól za pomocą dynamicznego i wydajnego modułu personalizacji. i funkcjonalność podgląd w czasie rzeczywistym wtyczki WordPress czyni ją bardzo wygodną i przyjazną dla użytkownika.

Pobierz | Demo | hosting

3. CSS SiteOrigin

To zdecydowanie wtyczka WordPress, która oferuje najwięcej opcji na tej liście. Najbardziej niesamowitą rzeczą w tym ostatnim jest to, że jest bezpłatny. Ta wtyczka WordPress jest jedyną, której nie można znaleźć w module dostosowywania.

SiteOrigin CSS - wtyczka WordPress

Po zainstalowaniu i aktywowaniu wtyczki musisz przejść do następującej lokalizacji " Wygląd> Niestandardowy CSS Aby uzyskać dostęp do edycji CSS wtyczki. Na tej stronie możesz zobaczyć edytor tekstu, który nie oferuje podglądu na żywo. 

Przeczytaj także nasz artykuł na temat Wtyczki 10 WordPress zwiększające sprzedaż Twojej witryny

Aby uzyskać dostęp do tego ostatniego, musisz kliknąć jeden z dwóch przycisków, które pojawiają się po lewej stronie, tuż nad edytorem. Przycisk z ikoną oka wywoła wizualny edytor kodu CSS, który docenią entuzjaści. Ikona ze strzałkami rozszerzeń wyświetli edytor tekstu, co oznacza opanowanie kodów CSS.

Pobierz | Demo | hosting

4. Prosty niestandardowy CSS

Proste niestandardowe CSS jest jedną z najpopularniejszych wtyczek.

Simple Custom CSS - wtyczka WordPress WordPress.org

Odkryj także nasze Jak przyspieszyć swój blog: zarządzanie plikami CSS i JS.

Został zainstalowany ponad 100 000 razy i otrzymał pięć gwiazdek.

Pobierz | Demo | hosting

5. WP Dodaj niestandardowy CSS

WP Dodaj niestandardowy CSS to wtyczka, która pozwala zmień układ bloga WordPress całe lub tylko pojedyncze artykuły. Jest to świetna opcja, jeśli szukasz elastyczności w dostosowywaniu przedmiotów.

wp-add-custom

Wtyczka została pobrana ponad 10.000 4,3 razy i obecnie ma XNUMX gwiazdki.

Pobierz | Demo | hosting

6. Theme Junkie Niestandardowe CSS

Jeśli szukasz rozwiązania, które oferuje podgląd zmian na żywo, możesz rozważyć użycie Motyw Junkie Custom CSS

theme-ćpun-css

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]

To rozwiązanie dodaje niestandardowego menedżera CSS do pulpitu nawigacyjnego, w którym można dodawać własne style. Oferuje również alternatywę dla za pomocą motywu podrzędnego.

Pobierz | Demo | hosting

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

Wnioski

Tutaj! To wszystko w tym samouczku, mam nadzieję, że uda ci się dodać niestandardowy kod CSS do swojego bloga WordPress w 2 metodach, jeśli masz jakieś commentaires lub sugestie, nie wahaj się powiedzieć nam w części przeznaczonej dla nich.

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 lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Jeśli podoba Ci się ten artykuł, nnie wahaj się udostępnij w swoich ulubionych sieciach społecznościowych

...  

Ten artykuł zawiera 1 komentarz

  1. Bardzo dziękuję za wszystkie różne artykuły w Twojej witrynie! Jest to zawsze bardzo wyraźne i zrozumiałe dla początkującego takiego jak ja… Myślę, że będę wracał bardzo często !!

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