Chcesz zmienić kolory lub czcionki swojej witryny WordPress, ale obawiasz się, że coś zepsujesz? Wielu początkujących zakłada, że wymaga to edycji plików motywu, gdzie nawet mały błąd może spowodować poważne problemy.
We wczesnych dniach WordPressa jedynym sposobem na dodanie niestandardowego CSS było bezpośrednie edytowanie tych plików. Pamiętamy, jak stresujące to było i jak jeden źle umieszczony znak mógł zrujnować całą witrynę.
Na szczęście to już przeszłość. WordPress oferuje teraz bezpieczne, przyjazne dla początkujących sposoby dodawania niestandardowego CSS za pomocą Dostosowywania motywu, Edytora pełnej witryny (FSE) lub wtyczki takiej jak WPCode.
W tym przewodniku krok po kroku przeprowadzimy Cię przez trzy proste metody dodawania niestandardowego CSS do Twojej witryny WordPress. 🙌
Dlaczego dodawać niestandardowy CSS w WordPress?
Dodajesz niestandardowy kod CSS w WordPress, aby uzyskać większą kontrolę nad wyglądem swojej witryny, niż pozwalają na to ustawienia motywu. Na przykład możesz dostosować rozmiary czcionek, zmienić kolory przycisków lub dodać dodatkowe odstępy do konkretnych sekcji.
CSS (Cascading Style Sheets) to język, który stylizuje Twoją witrynę, zajmując się takimi rzeczami jak kolory, czcionki, odstępy i układy. Pisząc własny CSS, możesz dopracować wygląd swojej witryny bez zmiany motywów ani instalowania dodatkowych wtyczek.
Ta elastyczność oznacza, że możesz personalizować poszczególne posty, stylizować kategorie produktów w swoim sklepie, a nawet optymalizować wygląd swojej witryny na urządzeniach mobilnych w porównaniu do komputerów stacjonarnych.
W tym przewodniku pokażemy różne sposoby dodawania niestandardowego CSS do Twojej witryny WordPress.
Możesz kliknąć poniższy link, aby przejść do dowolnej sekcji, która Cię interesuje:
- Metoda 1: Dodawanie niestandardowego CSS za pomocą narzędzia do dostosowywania motywu (klasyczne motywy)
- Metoda 2: Dodawanie niestandardowego CSS za pomocą wtyczki WPCode (wszystkie motywy)
- Metoda 3: Dodawanie dodatkowego CSS za pomocą edytora pełnej witryny (motywy blokowe)
- Dodatkowa wskazówka: Używanie wtyczki niestandardowego CSS a dodawanie CSS w personalizatorze motywu
- FAQ: Dodawanie niestandardowego CSS do Twojej strony WordPress
- Więcej wskazówek i sztuczek dotyczących CSS dla Twojej witryny WordPress
Gotowi? Zacznijmy.
Metoda 1: Dodawanie niestandardowego CSS za pomocą narzędzia do dostosowywania motywu (klasyczne motywy)
Od wersji WordPress 4.7 użytkownicy mogą dodawać niestandardowy CSS bezpośrednio z obszaru administracyjnego WordPress. Jest to bardzo łatwe i zmiany można zobaczyć natychmiast dzięki podglądowi na żywo.
Uwaga: Ta metoda jest przeznaczona tylko dla klasycznych motywów. Jeśli używasz motywu blokowego, będziesz musiał wybrać jedną z innych metod.
Najpierw musisz przejść do strony Wygląd » Dostosuj ze swojego panelu administracyjnego WordPress.
Spowoduje to uruchomienie interfejsu dostosowywania motywu WordPress.
Na tej stronie możesz zobaczyć podgląd swojej witryny na żywo z wieloma opcjami dostosowywania w lewym panelu. W zależności od Twojego motywu WordPress, układ tego menu może się nieznacznie różnić. W naszym przykładzie używamy motywu Sydney.
Po prostu znajdź zakładkę „Dodatkowy CSS”, aby rozpocząć edycję.
Zakładka przesunie się, aby pokazać proste pole, w którym możesz dodać własny kod CSS.
Jak tylko dodasz prawidłową regułę CSS, będziesz mógł zobaczyć, jak jest ona stosowana na panelu podglądu na żywo Twojej witryny.
Możesz kontynuować dodawanie niestandardowego kodu CSS, dopóki nie będziesz zadowolony z tego, jak zmiany wyglądają na Twojej stronie.
Nie zapomnij kliknąć przycisku „Opublikuj” na górze, gdy skończysz.
ℹ️ Uwaga: Dowolny niestandardowy CSS dodany za pomocą narzędzia do dostosowywania motywu jest dostępny tylko w tym konkretnym motywie. Jeśli chcesz używać go z innymi motywami, musisz skopiować i wkleić go do nowego motywu, używając tej samej metody.
Metoda 2: Dodawanie niestandardowego CSS za pomocą wtyczki WPCode (wszystkie motywy)
Pierwsza metoda pozwala zapisać niestandardowy CSS tylko dla aktualnie aktywnego motywu. Jeśli zmienisz motyw, być może będziesz musiał skopiować i wkleić swój niestandardowy CSS do nowego motywu.
Jeśli chcesz, aby Twój niestandardowy CSS był stosowany niezależnie od używanego motywu WordPress, ta metoda jest dla Ciebie.
WPCode to najlepsza wtyczka do niestandardowych fragmentów kodu na rynku, z ponad 2 milionami użytkowników. Oprócz ułatwienia dodawania niestandardowego kodu w WordPress, zawiera funkcje takie jak wbudowana biblioteka fragmentów kodu, logika warunkowa, piksele konwersji i inne.
Używamy WPCode do dodawania i zarządzania fragmentami kodu w niektórych markach partnerskich. Aby szczegółowo zapoznać się z jego funkcjami i korzyściami, zapoznaj się z naszą pełną recenzją WPCode.
Teraz pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki WPCode. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.
ℹ️ Uwaga: Ten samouczek działa z darmową wersją wtyczki WPCode, dzięki czemu możesz zacząć od razu. Jeśli zdecydujesz się na uaktualnienie do WPCode Pro, odblokujesz przydatne funkcje, takie jak zaplanowane fragmenty, pełna historia rewizji i dostęp do kompletnej biblioteki gotowych do użycia fragmentów zatwierdzonych przez programistów.
Po aktywacji przejdź do Fragmenty kodu » + Dodaj nowy z obszaru administracyjnego WordPress.
Następnie możesz najechać kursorem na opcję „Dodaj swój niestandardowy kod (nowy fragment)” w bibliotece fragmentów kodu i kliknąć „Użyj fragmentu”.
Na następnym ekranie wybierzesz typ kodu dla swojego niestandardowego fragmentu CSS.
Kliknij „Fragment CSS” jako typ kodu.
Następnie, na górze strony, możesz dodać tytuł dla swojego niestandardowego fragmentu kodu CSS. Może to być cokolwiek, co pomoże Ci zidentyfikować kod.
Po wprowadzeniu tytułu możesz wpisać lub wkleić niestandardowy kod CSS w polu „Podgląd kodu”.
Przewińmy teraz w dół do sekcji „Wstawianie” i wybierz metodę „Automatyczne wstawianie”, jeśli chcesz wykonać kod w całej swojej witrynie WordPress.
Jeśli chcesz wykonać kod tylko na określonych stronach lub wpisach, możesz wybrać metodę „Krótki kod”.
Teraz chcesz wrócić na górę strony.
Następnie po prostu przełącz przełącznik na „Aktywny”, a następnie kliknij przycisk „Zapisz fragment”.
To wszystko! Możesz odwiedzić swoją stronę WordPress, aby zobaczyć niestandardowy CSS w akcji.
Metoda 3: Dodawanie dodatkowego CSS za pomocą edytora pełnej witryny (motywy blokowe)
Jeśli używasz nowoczesnego motywu blokowego, najlepszym miejscem do dodania niestandardowego CSS jest bezpośrednio w Edytorze Pełnej Witryny. Ta metoda zachowuje Twój CSS z ustawieniami stylu motywu i pozwala zobaczyć podgląd na żywo.
Najpierw musisz przejść do Wygląd » Edytor z panelu administracyjnego WordPress.
Otworzy to Edytor Pełnej Strony.
W menu po lewej stronie kliknij zakładkę „Style”.
Powinieneś teraz zobaczyć panel „Style” dla swojej witryny, a także podgląd strony.
Stąd kliknijmy podgląd, aby otworzyć edytor bloków.
W edytorze treści kliknij ikonę „Style”. Wygląda jak koło podzielone na czarno-białą połowę.
Następnie przejdź dalej i wybierz „Dodatkowy CSS”.
W rozwijanym menu CSS znajdziesz pole „Dodatkowy CSS”.
Tutaj możesz wprowadzić swój CSS, a zmiany zobaczysz natychmiast w podglądzie na żywo.
Gdy będziesz zadowolony ze wszystkiego, nie zapomnij kliknąć „Zapisz” w prawym górnym rogu, aby opublikować zmiany.
Dodatkowa wskazówka: Używanie wtyczki niestandardowego CSS a dodawanie CSS w personalizatorze motywu
Wszystkie opisane powyżej metody są zalecane dla początkujących. Zaawansowani użytkownicy mogą również dodawać niestandardowy CSS bezpośrednio do swoich motywów.
Jednak dodawanie niestandardowych fragmentów CSS do motywu nadrzędnego nie jest zalecane. Twoje zmiany CSS zostaną utracone, jeśli przypadkowo zaktualizujesz motyw bez zapisania niestandardowych zmian.
Najlepszym podejściem jest użycie motywu potomnego zamiast tego. Jednak wielu początkujących unika tworzenia motywu potomnego, ponieważ proces ten wydaje im się zniechęcający. Ponadto początkującym często brakuje zrozumienia, w jaki sposób będą używać motywu potomnego poza prostym dodawaniem niestandardowego CSS.
Używanie wtyczki niestandardowego CSS pozwala przechowywać niestandardowy CSS niezależnie od motywu. W ten sposób możesz łatwo zmieniać motywy, a Twój niestandardowy CSS pozostanie.
Innym świetnym sposobem na dodanie niestandardowego CSS do Twojej witryny WordPress jest użycie wtyczki CSS Hero. Ta wspaniała wtyczka pozwala edytować prawie każdy styl CSS w Twojej witrynie WordPress bez pisania ani jednej linii kodu.
Możesz również dodać niestandardowy CSS za pomocą wtyczki SeedProd, najlepszego kreatora stron WordPress metodą przeciągnij i upuść.
Z SeedProd możesz tworzyć niestandardowe motywy WordPress i strony docelowe dla swojej witryny WordPress. Możesz łatwo edytować globalne ustawienia CSS; nie jest wymagany żaden kod.
Niektórzy z naszych marek partnerskich zaprojektowali całe swoje witryny za pomocą SeedProd. Koniecznie przeczytaj naszą szczegółową recenzję SeedProd, aby dowiedzieć się, dlaczego jest to najlepszy wybór do tworzenia oszałamiających witryn.
FAQ: Dodawanie niestandardowego CSS do Twojej strony WordPress
Chcesz, aby Twoja witryna WordPress była naprawdę Twoja dzięki niestandardowym stylom? Oto kilka częstych pytań dotyczących bezpiecznego dodawania niestandardowego CSS i sposobów robienia tego bez psucia witryny:
Czy dodawanie niestandardowego kodu CSS jest ryzykowne dla mojej witryny?
Nie, jeśli zrobisz to we właściwy sposób. Narzędzia takie jak WordPress Theme Customizer, WPCode, lub SeedProd pozwalają na podgląd zmian przed ich opublikowaniem. Pomaga to uniknąć błędów i zapewnić bezpieczeństwo Twojej strony.
Czy moje zmiany CSS znikną, jeśli zmienię motyw?
Jeśli dodałeś CSS za pomocą Dostosowywania motywu, Twoje zmiany są powiązane z tym konkretnym motywem. W tym przypadku tak, Twój dodatkowy CSS zniknie, jeśli zmienisz swój motyw WordPress.
Aby utrzymać spójność CSS we wszystkich motywach, możesz użyć wtyczki do fragmentów kodu, takiej jak WPCode. Przechowuje ona Twój kod oddzielnie, dzięki czemu pozostaje aktywny nawet po zmianie motywu.
Czy mogę cofnąć zmiany, jeśli coś pójdzie nie tak?
Tak, zwłaszcza jeśli używasz wtyczki do fragmentów kodu, takiej jak WPCode. Możesz łatwo wyłączyć lub usunąć dowolny dodany fragment. Zawsze warto najpierw podglądnąć zmiany lub przetestować je na stronie stagingowej, jeśli nie masz pewności.
Co jeśli chcę jeszcze większej kontroli nad moim CSS?
W przypadku bardziej zaawansowanych edycji możesz utworzyć motyw potomny. Daje to pełną kontrolę i zapewnia bezpieczeństwo zmian podczas aktualizacji motywu. Wymaga to jednak podstawowej wiedzy o tym, jak działają motywy WordPress.
Czy potrzebuję umiejętności kodowania, aby dodać niestandardowy CSS?
Nie musisz być programistą, ale będziesz musiał znać trochę CSS, przynajmniej na tyle, aby skopiować i wkleić odpowiedni kod lub postępować zgodnie z samouczkiem.
Dobra wiadomość jest taka, że istnieje mnóstwo zasobów przyjaznych dla początkujących (takich jak WPBeginner!), które pomogą Ci krok po kroku nauczyć się prostych modyfikacji CSS. Dzięki odpowiednim narzędziom dodawanie CSS może nadal wydawać się wykonalne – bardziej jak przestawianie mebli niż przebudowa domu.
Więcej wskazówek i sztuczek dotyczących CSS dla Twojej witryny WordPress
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać niestandardowy CSS do Twojej witryny WordPress. Jeśli uznałeś to za pomocne, możesz również zapoznać się z naszymi poradnikami na temat:
- Jak zminimalizować pliki CSS / JavaScript w WordPress
- Jak łatwo zoptymalizować dostarczanie CSS w WordPress
- Jak zastosować CSS dla określonych ról użytkowników w WordPress
- Jak dodać pierwszy i ostatni CSS do elementów menu WordPress
- Jak usunąć nieużywany CSS w WordPress (właściwy sposób)
- Jak naprawić uszkodzony CSS w panelu administracyjnym WordPress
- Domyślny arkusz podpowiedzi CSS generowany przez WordPress dla początkujących
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Mrteesurez
Na podstawie metody, której użyłeś podczas dodawania niestandardowego CSS w witrynie blokowej, zauważyłem, że witryna nadal używa pewnych elementów klasycznego dostosowywania za pośrednictwem udostępnionego linku?
Chciałbym zapytać, czy można po prostu zainstalować wtyczkę klasycznych widżetów w motywie blokowym, aby mieć łatwy dostęp do dostosowywania w celu dodawania CSS i innych rzeczy bez używania żadnego niestandardowego linku?
Wsparcie WPBeginner
To w dużej mierze zależy od Twojego konkretnego motywu. Jeśli Twój motyw nie ma tej opcji w dostosowywaniu, zalecamy skorzystanie z jednej z alternatyw z tego artykułu.
Admin
Mrteesurez
Cóż, większość motywów ma taką opcję w narzędziu dostosowywania, nie wiem o motywach blokowych. Dzięki.
Ale poleciłbym użycie zamiast tego kreatora stron, aby uzyskać pełną funkcjonalność dostosowywania. Kiedy już nauczę się używać kreatora stron, rzadko używam niestandardowego CSS na stronach.
Dennis Muthomi
Chciałbym tylko wyjaśnić – kiedy wspominasz (w METODZIE 1), że CSS dodany przez Dostosowywanie jest dostępny tylko dla danego motywu, czy oznacza to, że kod niestandardowego CSS jest faktycznie dodawany do plików bieżącego motywu?
Nie jestem zbyt biegły technicznie, więc chcę się upewnić, że dobrze rozumiem, zanim zacznę działać.
Komentarze WPBeginner
Zamiast dodawać je do plików motywu, Personalizator zapisuje kod CSS w bazie danych i kojarzy go z motywem.
Mrteesurez
Nie wiem o tym, dziękuję. Oznacza to, że dodany niestandardowy CSS nie pozostaje w plikach motywu, ale w bazie danych, więc dlaczego musimy kopiować i wklejać niestandardowy kod CSS podczas zmiany motywu, skoro faktycznie znajduje się on w bazie danych?
Wsparcie WPBeginner
Podczas dodawania kodu CSS jest on powiązany z samym motywem po zapisaniu. Po załadowaniu nowego motywu załaduje on wszelki kod CSS powiązany z tym motywem.
Jiří Vaněk
Dziękuję, mrteesurez, za pytanie, ponieważ byłem równie zdezorientowany jak Ty, i dzięki WPBeginner za wyjaśnienie, które pomogło mi zrozumieć, jak dodany CSS działa z motywem. Myślałem również, że kody CSS są przechowywane tylko w motywie, ale teraz wreszcie rozumiem, jak to działa w tle.
Qasim Saeed
Witam, co jeśli chcę dodać niestandardowy CSS na konkretnej stronie bez żadnej wtyczki? Myślę, że dodajemy to przez funkcję? Czy możesz mi powiedzieć, jak dodać CSS przez functions.php i jaki jest najlepszy i najbezpieczniejszy sposób dodania CSS dla konkretnej strony
Wsparcie WPBeginner
Nie musisz używać funkcji do dodawania CSS do konkretnych stron, możesz wybrać konkretną stronę w selektorze CSS, aby wpływała tylko na jedną stronę w Twojej witrynie.
Admin
Jiří Vaněk
Czy lepiej wstawić własny CSS w WordPress za pomocą szablonu czy za pomocą WPCode?
Wsparcie WPBeginner
Obie opcje są prawidłowe, zależy to od osobistych preferencji i od tego, czy motyw ma taką opcję w edytorze.
Admin
Jiří Vaněk
Dzięki za wyjaśnienie, nie byłem pewien, czy na przykład fragment kodu używający WPCode byłby szybszy dla odpowiedzi strony niż zintegrowanie go z samym szablonem. Więc jeśli to nie ma znaczenia, prawdopodobnie będę trzymać się najlepszych praktyk i zachowam go zintegrowanego w szablonie.
Bavi
Dodawanie CSS nie jest już dostępne dla planu darmowego, czy są jakieś alternatywy??
Wsparcie WPBeginner
Nasze poradniki są dla witryn WordPress.org, obecnie nie mamy szczegółów dla WordPress.com. Zalecamy zapoznanie się z naszym poniższym przewodnikiem porównującym oba rozwiązania i jeśli chcesz przenieść swoją witrynę z WordPress.com do samodzielnie hostowanej witryny WordPress.org.
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Ben
Nigdy nie wiedziałem o „sztuczce” example.com/wp-admin/customize.php. Dzięki! Działało jak marzenie!
Wsparcie WPBeginner
Glad we could share this trick with you!
Admin
Dani
Cześć,
Chcę dodać niestandardowy CSS, ale jak mogę go usunąć, jeśli coś pójdzie nie tak?
Bogdan
Hej, ten artykuł jest bardzo dobry. Jedno pytanie: Czy nie muszę widzieć strony HTML, aby dodać niestandardowy CSS? Jak dodać niestandardowy CSS, jeśli nie znam selektorów i tego wszystkiego?
Wsparcie WPBeginner
Mamy przewodnik po używaniu elementu Inspektuj, który możesz przejrzeć poniżej, aby dowiedzieć się, jak znaleźć selektory:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
cymon
Jestem nowym blogerem. Czy jest sposób na dodanie kodu CSS specyficznego dla danej strony?
Wsparcie WPBeginner
Musiałbyś dodać identyfikator strony jako część CSS, ale tak, możesz.
Admin
Jitin Mishra
Świetny artykuł dodający niestandardowy CSS na stronie WordPress. Czekamy na więcej takich informacyjnych postów.
Wsparcie WPBeginner
Glad you found our guide helpful
Admin
Mohsin
Chcę zmienić moje menu WordPress na mega menu za pomocą kodu. Czy mogę przekonwertować menu mojej strony na mega menu za pomocą HTML, CSS i JS? Nie chcę używać wtyczki do tej pracy. Jeśli dodajemy nową funkcjonalność do strony WordPress za pomocą niestandardowego kodu, jakie są najlepsze praktyki, aby ta niestandardowa praca nie została utracona podczas aktualizacji motywu lub WordPress. Dzięki!
Wsparcie WPBeginner
Chciałbyś utworzyć motyw potomny, aby zachować swoje zmiany, ale możesz potrzebować trochę kodowania w PHP. Poniżej znajduje się przewodnik po tworzeniu motywu potomnego, który możesz przejrzeć:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Admin
vijay v
czy możemy dodać zewnętrzny plik CSS (przenosząc niestandardowy CSS), aby zwiększyć prędkość strony (po dodaniu niestandardowego CSS prędkość ładowania spadła), jeśli tak, jak to zrobić?
z góry dziękuję
Wsparcie WPBeginner
Jeśli dobrze rozumiemy, czego szukasz, powinieneś zapoznać się z naszym artykułem poniżej:
https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/
Admin
billy king
Czy „nieortodoksyjny” CSS jest dozwolony w motywie potomnym lub niestandardowym CSS?
Wsparcie WPBeginner
Tak długo, jak CSS celuje w to, co znajduje się na Twojej stronie, możesz używać dowolnego CSS.
Admin
Latonya Moore
To świetnie, ale czy jest sposób, aby dodać CSS tylko do jednej strony? Na przykład, chcę tylko pokazać lub ukryć przez najedź lub najechaniu myszką na jednym tekście.
Wsparcie WPBeginner
Musiałbyś albo dodać klasę CSS do konkretnego obiektu, albo dodać identyfikator strony do swojego CSS, aby ograniczyć go do tej konkretnej strony. Aby dowiedzieć się, jak znaleźć te informacje, zapoznaj się z naszym poniższym artykułem na temat korzystania z narzędzia inspekcji elementów:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
shiva
Wprowadziłem pewne zmiany na mojej stronie internetowej, edytując niektóre kody CSS w edytorze motywu. Co się stanie, jeśli zaktualizuję WordPressa do następnej wersji. Czy pojawi się błąd, czy wróci do podstawowego motywu, czy mój kod będzie widoczny nawet po aktualizacji WordPressa, tak jak przed aktualizacją.
Wsparcie WPBeginner
Jeśli dodałeś swój CSS w obszarze Wygląd>Dostosuj>Dodatkowy CSS, Twoje zmiany CSS pozostaną po aktualizacji Twojej witryny.
Admin
Jo
Nie ukończyłem jeszcze budowy mojej strony internetowej, ale zaktualizowałem ją z wersji darmowej, aby móc używać CSS do wprowadzania zmian. Moja strona nie jest jeszcze aktywna. Po aktualizacji do wersji premium przycisk aktualizacji zmienił się na publikuj. Czy to oznacza, że po kliknięciu publikuj, aby zapisać wszelkie zmiany, moja strona stanie się aktywna?
Poza tym nie pamiętam, którego motywu użyłem, jak mogę dowiedzieć się, którego motywu używam?
Dziękuję
Wsparcie WPBeginner
Wygląda na to, że jesteś na WordPress.com. Jeśli opublikujesz wpis, będzie on widoczny dla tych, którzy mogą zobaczyć Twoją witrynę. W przypadku WordPress.com dla prywatnej witryny masz ograniczenia: https://en.support.wordpress.com/settings/privacy-settings
Powinieneś widzieć aktywny motyw w sekcji Wygląd > Motywy
Admin
Bruce William Taylor
„Zakładka przesunie się, pokazując proste pole, w którym możesz dodać swój niestandardowy CSS. Jak tylko dodasz prawidłową regułę CSS, będziesz mógł zobaczyć, jak jest ona stosowana na panelu podglądu na żywo Twojej witryny.”
Już wiem GDZIE dodać CSS. Skąd mam wiedzieć, jaki CSS dodać? Skąd mam wiedzieć, jakie są „prawidłowe reguły CSS”?
Wsparcie WPBeginner
Hej Bruce,
Do tego będziesz musiał nauczyć się podstaw CSS. Istnieje kilka stron internetowych, które oferują samouczki CSS krok po kroku dla początkujących. Polecamy w3schools, ponieważ pozwala ćwiczyć CSS za pomocą okna "wypróbuj sam".
Admin
Ali
Gdzie jest przechowywany kod CSS do dostosowania, ponieważ zgubiłem go podczas przenoszenia do nowego hostingu?
mahaveer
chcę dodać zewnętrzny plik CSS i obrazy w CSS...
Muhammad Adil
Jaka była metoda Bonusowa?
Czy to jakiś Plugin, którego nie zrozumiałem. Czy możesz mnie zapytać?
Dzięki
Aditya Khuteta
Cześć! Chcę zmienić rozmiar tekstu ceny na mojej stronie internetowej, ponieważ tekst ceny jest tam za mały. Proszę, przeprowadź mnie przez ten proces.
Dziękuję
Frank Lurz
2 pytania:
1. Żeby było jasne, „pluginy” zastępują pisanie CSS, co jest trudnym zadaniem dla tych z nas, którzy nic nie wiedzą o CSS – czy tak?
2. Wtyczki wymienione do pobrania na stronie wtyczek WP są dostępne do instalacji tylko dla subskrybentów, którzy zapłacili za plan „Buisness”, czy to prawda?
Wsparcie WPBeginner
Cześć Frank,
1. Nie, wtyczki nie zastępują pisania własnego kodu CSS. Możesz pisać własny kod CSS bez instalowania wtyczek. Więcej informacji znajdziesz w naszym przewodniku czym są wtyczki WordPress i jak działają.
2. JEŚLI korzystasz z WordPress.com, będziesz potrzebować uaktualnienia do planu biznesowego. Zapoznaj się z naszym przewodnikiem na temat różnic między samodzielnie hostowanym WordPress.org a darmowym blogiem WordPress.com.
Admin
Annie Mitchell
Cześć,
Jestem nowicjuszem, jeśli chodzi o tworzenie i projektowanie stron internetowych i nie mam pojęcia o CSS. Używam motywu Sydney na mojej stronie – i jakoś udało mi się sprawić, że czcionka mojego akapitu jest biała. Googlowałem i zauważyłem, że pewien pan miał ten sam problem. Naprawił go, pobierając wtyczkę i używając niestandardowego CSS, jednak ja próbowałem i nic nie wyszło.
CSS, który doradził użyć, to –
.entry-page p, .entry-post p { color: black !important; margin: 0 !important; padding: 0 !important; }
ale nie jestem pewien, dlaczego u mnie to nie działa. Będę bardzo wdzięczny za wszelką pomoc.
Dzięki,
Annie
Wsparcie WPBeginner
Cześć Annie,
Najpierw zalecamy wyłączenie wszystkich wtyczek WordPress poprzez ich dezaktywację. Następnie odwiedź swoją stronę internetową, aby sprawdzić, czy rozwiązało to Twój problem. Jeśli tak, oznacza to, że problem powodowało ustawienie w jednej z Twoich wtyczek. Jeśli nie rozwiąże to problemu, spróbuj przełączyć się na domyślny motyw, taki jak Twenty Seventeen. Jeśli to rozwiąże Twój problem, oznacza to, że gdzieś w Twoim motywie zmieniłeś ustawienia czcionki.
Jeśli nic nie działa, możesz spróbować tego niestandardowego CSS:
p { color:#000; }1-click Use in WordPress
Admin
Jose
Jedna z wtyczek (Simple Custom CSS) nie była aktualizowana od 2 lat, co w świecie wtyczek WordPress to bardzo długo. Stanowi to ryzyko bezpieczeństwa, więc osobiście szukałbym alternatywy.
Rebecca
Cześć
Przepraszam, nic nie wiem o CSS i próbuję rozwiązać problem z brakiem możliwości wyszukiwania wtyczek, ale to inna historia! Publikuję tutaj teraz, ponieważ otrzymuję ten komunikat, gdy przechodzę do wyglądu / edytuj CSS / dodatkowy CSS
” Jest 1 błąd, który musi zostać naprawiony, zanim będzie można zapisać.
Zaktualizować mimo to, mimo że może to zepsuć Twoją witrynę?”
Czy to jest coś, czym powinienem się martwić?
tekst w polu poniżej brzmi...
i tutaj jest czerwona kropka
Mam nadzieję, że ktoś pomoże.
Dziękuję
Wsparcie WPBeginner
Cześć Rebecca,
Możesz skopiować kod CSS i wkleić go do pliku tekstowego, a następnie zapisać jako kopię zapasową. Teraz usuń wszystko z pola Dodatkowy CSS i zacznij dodawać własny kod CSS, jedną regułę na raz, aż ponownie pojawi się błąd. Pomoże Ci to zlokalizować błąd i go naprawić.
Admin
James
To już nie działa dla darmowych kont. Opcja CSS już nie istnieje i potrzebujesz konta biznesowego, aby zainstalować odpowiednią wtyczkę.
Wsparcie WPBeginner
Cześć James,
Prawdopodobnie korzystasz z WordPress.com. Zapoznaj się z naszym przewodnikiem na temat różnic między samodzielnie hostowanym WordPress.org a darmowym blogiem WordPress.com.
Admin
scott
Przed wersją WP 4.9 mogłem kopiować i wklejać mój niestandardowy CSS (z narzędzia dostosowywania WP) i wklejać go do Notatnika Windows (i zachowywał formatowanie. Robiłem to często, aby zapisać go jako kopię zapasową, gdy dodawałem nowy niestandardowy CSS — na wypadek, gdybym popełnił błąd.
Teraz po wklejeniu do Notatnika, cały CSS jest połączony bez formatowania wiersz po wierszu w Notatniku.
Masz jakiś pomysł, dlaczego tak się dzieje lub jak mogę to naprawić? Mam już ustawiony tryb „zawijania wierszy” w Notatniku.
Dzięki.
Wsparcie WPBeginner
Cześć Scott,
Możesz spróbować zapisać kod w innych edytorach tekstu, takich jak Notepad++. Jeśli problem nadal występuje, wypróbuj wskazówki dotyczące rozwiązywania problemów z WordPress.
Admin
Joe MacMillan
Ta strona jest naprawdę dobra. Moja strona nie miała żadnych kolorów linków, więc użyłem tego kodu /* nieodwiedzony link niebieski */
a:link { Kolor: #196380; }
/* odnośnik odwiedzony zielony */
a:visited { color: #248f24; }
/* najedź myszką na link pomarańczowy */
a:hover { color: #ff3300; }
/* wybrany link czerwony*/
a:active {
color: #cc0000;
}
ale zmieniło kolory dla wszystkiego, co jest linkiem, na przykład menu na jakiś kolor.
Chcę tylko kolory do linkowania.
Będę wdzięczny za wszelką pomoc. Dziękuję
Wsparcie WPBeginner
Cześć Joe,
W swoim CSS nie zdefiniowałeś, które obszary powinny mieć linki w tych kolorach, co powoduje, że stosują się one do całego ciała. Aby dowiedzieć się, które obszary musisz docelowo wybrać, będziesz musiał użyć Narzędzia Inspektora, aby dowiedzieć się, jakiej klasy CSS używa Twój motyw dla bloku treści.
Załóżmy, że blok treści w Twoim motywie ma klasę CSS site-content, użyjesz jej w swoim CSS w następujący sposób:
.site-content a:link { color: #196380; } .site-content a:visited { color: #248f24; } .site-content a:active { color: #cc0000; } .site-content a:hover { color: #ff3300; }1-click Use in WordPress
Hope this helps
Admin
Rob
Uwielbiam Waszą stronę!
Dziękuję za wszystkie pomocne artykuły.
Mam pytanie dotyczące mojego planu premium WordPress.
Chcę dodać następujący skrypt do mojej witryny.
var refTagger = { settings: { bibleVersion: “NKJV” }
Czy mogę dodać to do niestandardowego CSS?
Nie mam możliwości dostępu do nagłówka ani stopki w tym planie
Dzięki,
Rob
Wsparcie WPBeginner
Cześć Rob,
Nie, nie możesz. Zapoznaj się z naszym przewodnikiem na temat różnicy między samodzielnie hostowanym WordPress.org a darmowym blogiem WordPress.com.
Admin
sammy
to naprawdę świetny artykuł, będę musiał zacząć uczyć się, jak tworzyć własny CSS dla mojej strony
Thomas
Witam,
ta funkcja nie jest aktywna dla administratora witryny w sieci multisite WordPress.
Czy uważasz, że jej aktywacja dla administratora witryny (na przykład za pomocą tego wtyczki:) stworzyłaby problem z bezpieczeństwem?
Dziękuję!
Wsparcie WPBeginner
Cześć Thomas,
Tak, możesz użyć wtyczki do dodania niestandardowego CSS.
Admin
Thomas
Cześć,
tak wiem (używałem już bardzo dobrego wtyczki Simple Custom CSS), ale wolałbym użyć natywnej funkcji, ponieważ jest ona zaimplementowana w WordPressie.
Jednak ta funkcja jest dostępna tylko dla administratora sieci, a nie dla administratora witryny w instalacji multisite.
Prawa można łatwo zmienić, aby umożliwić administratorowi witryny dodawanie własnego niestandardowego CSS w dostosowywaczu (za pomocą natywnej funkcji WP) (patrz ta wtyczka: http://www.wordpress.org/plugins/multisite-custom-css/), i zastanawiam się, czy stworzyłoby to problem z bezpieczeństwem (zakładając, że nie mogę ufać administratorowi witryny)?
Wsparcie WPBeginner
Cześć Thomas,
Sorry, we totally misunderstood your question
Zgadzamy się, że będzie to problem, dlatego funkcja jest wyłączona. Jeśli ją włączysz, użytkownicy będą mogli dodawać nieprzefiltrowany CSS. Powinieneś ją pozostawić wyłączoną.
Brice
Nie znam się za bardzo na kodzie, więc zastanawiam się, czy jeśli dokonam zmian i kliknę „zapisz i opublikuj”, jest sposób, aby odzyskać oryginalny kod, jeśli nie spodobają mi się zmiany, czy muszę skopiować i zapisać oryginalny kod na wypadek, gdybym chciał go przywrócić?
Ruth Billheimer
This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed
Jos Schuurmans
Cześć,
Kiedyś można było edytować style.css z poziomu panelu administracyjnego WordPress, w menu Wygląd.
W sieci multisite odbywało się to za pośrednictwem podmenu motywów sieci. Czy ta funkcja została wycofana?
Na zdrowie,
Jos
Judy
Świetny post, dzięki!
Czy ktoś może mi pomóc z tym? Dokonałem niewielkiej personalizacji mojego logo za pomocą CSS Hero. Następnie skopiowałem te dokładnie 9 linii kodu do mojego wtyczki Simple Custom CSS, po dezaktywacji CSS Hero. Myślałem, że uda mi się odtworzyć tę samą personalizację logo CSS Hero za pomocą Simple Custom CSS, ale zamiast tego to nie działa.
Odświeżyłem stronę i wyczyściłem pamięć podręczną, ale personalizacja nadal nie działa. Dlaczego?
Dzięki,
Judy
Robin
To wszystko, co znajduje się w moim arkuszu stylów CSS. /* Witamy w niestandardowym CSS
Aby dowiedzieć się, jak to działa, zobacz
*/
Czy mam usunąć jego kod i dodać mój nowy kod czcionki? Pomocy????
Wsparcie WPBeginner
Tak. Są to tylko komentarze, które pomogą nowym użytkownikom zacząć.
Admin
Paul H.
WYBITNA WTYCZKA!!!
Spędziłem dużo czasu, próbując sprawić, by wbudowany edytor WP „stylizował” moją niestandardową stronę, bez powodzenia...
Szukałem wtyczki, żeby sprawdzić, czy taka istnieje i znalazłem waszą… w ciągu kilku minut zainstalowałem waszą wtyczkę i ją aktywowałem, następnie wprowadziłem mój CSS, kliknąłem aktualizuj, a potem odświeżyłem moją niestandardową stronę… jest idealnie!
A+++
Ian
Cześć wszystkim,
Zainstalowałem wtyczkę Simple custom CSS i ją aktywowałem. Mam tabelę utworzoną na jednej z moich stron internetowych, wokół której chciałem mieć obramowanie.
W rezultacie dodałem następujący kod do mojej prostej wtyczki niestandardowego CSS
table { border: 2px solid black; }
i zaktualizowałem niestandardowy CSS, ale nic się nie stało – nadal nie widzę żadnej ramki na tabeli mojej strony internetowej.
Jakieś sugestie?
Pozdrawiam
Ian
Molly Setzer
Cześć Ian,
Prawdopodobnie nie używasz poprawnego selektora CSS. Użyj najbardziej zdefiniowanego selektora, aby uchwycić element. Na przykład, jeśli Twoja tabela ma klasę „info”, wywołanie jej za pomocą bardziej specyficznego table.info pomoże Ci dotrzeć do elementu. Sprawdź, czy ma więcej selektorów w kodzie HTML.
ramneet
Dzięki za udostępnienie. To po prostu wspaniały sposób na naukę WordPressa, podoba mi się.
Estee Peter
Jak dodać niestandardowy CSS za pomocą mojej istniejącej, specyficznej wtyczki do witryny
oto poniższy kod
.mobileonly { display: none; }
@media screen and (max-width: 480px) { .mobileonly { display: inline; } }
.hidemobileonly { display: inline; }
@media screen and (max-width: 480px) {
.hidemobileonly {
display: none;
}
}
Gary Zielke
Czy wtyczka Custom CSS działa na poszczególnych stronach.
Czyli czy mogę dodać styl do jednej strony, a nie do całego motywu?
Dzięki
Wsparcie WPBeginner
Nie, nie działa na poszczególnych stronach.
Admin
Tori Tran
dziękuję ^^
Russell Bruce
Czy nie byłoby przydatne wyjaśnienie, co robi CSS i dlaczego jest przydatny
Joey
Dzięki, szkoda, że nie dowiedziałem się tego wcześniej, ponieważ wprowadziłem wszystkie moje zmiany CSS w pliku style.css, ponieważ wprowadzam zmiany lokalnie, ale czy mówisz, że jeśli z jakiegoś powodu Genesis zdecyduje się zaktualizować konkretny motyw potomny, którego użyłem, stracę te zmiany? Nie wiem, czy kiedykolwiek widziałem, jak aktualizują swoje motywy potomne, chociaż używam Genesis dopiero od kilku miesięcy, więc przypuszczam, że jest całkowicie możliwe, że będą aktualizować niektóre z nich tu i ówdzie. Myślę, że na przyszłość będę wprowadzał moje zmiany wtyczce, zwłaszcza jeśli strona jest na żywo.
suzie
Użyj motywu, który Ci się podoba, i utwórz „motyw potomny”
Motyw potomny jest wtedy unikalny dla Twojej strony internetowej.
Wprowadzaj wszelkie zmiany tylko w swoim motywie potomnym.
Projektant motywu może zaktualizować swój motyw, ale Twoje zmiany pozostaną. (W zależności od aktualizacji projektanta może być konieczne drobne dostosowanie zmian, ale jest to mało prawdopodobne).
Rodney
Świetny artykuł.
Chciałem tylko dodać tutaj. Jest tu wiele opcji, zwłaszcza na stronach działających w WordPress, tworzenie niestandardowego CSS jest proste. Większość motywów WordPress zazwyczaj obsługuje dodawanie niestandardowego CSS bez konieczności tworzenia lub dodawania dodatkowych wtyczek.
Zgadzam się, a najlepszym rozwiązaniem jest użycie motywu potomnego.
dzięki