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.
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.
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 twoje 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.
Pierwszym z nich jest zrobienie tego z pulpitu WordPress. W menu po lewej stronie wybierz menu „ apparence „A potem” wydawca ".
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.
Innym sposobem na znalezienie arkusza stylów jest przejrzenie systemu operacyjnego dostawcy usług hostingowych i zlokalizowanie pliku w 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 (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”, czyli tam, gdzie wszystkie Motywy WordPress są zainstalowane.
Z tej witryny korzysta motyw „ Newsletter », Plik stylu« style.css Znajduje się w folderze „ rodzic biuletyn ".
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 kilka wtyczek premium, których możesz także użyć do modyfikacji kodu CSS swojego 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…).
Ce WordPress Plugin premium stworzy style CSS przez 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że WordPress Plugin ma dobry edytor CSS dla tych, którzy lubią kodować. Za pomocą tego edytora możesz kodować na żywo i dostosowywać swój CSS.
2. Niestandardowe JS i CSS dla Gutenberga
Le WordPress Plugin premium Niestandardowe 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.
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.
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.
Po zainstalowaniu i aktywacji 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.
4. Prosty niestandardowy CSS
Proste niestandardowe CSS jest jedną z najpopularniejszych wtyczek.
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.
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.
Wtyczka została pobrana ponad 10.000 4,3 razy i obecnie ma XNUMX gwiazdki.
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.
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.
Inne zalecane zasoby
Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.
- Wtyczki 10 WordPress udostępnianie w sieciach społecznościowych
- Jak wyświetlić niestandardowe pola poza pętlą na WordPressie
- Wtyczki 5 WordPress do zarabiania na swoim blogu dzięki reklamom
- Jak chronić bloga zgarniaczy treści
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.
...
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 !!