CSS (Cascading Style Sheets) to język z zestawem reguł, które definiują wygląd elementów na Twojej stronie internetowej.
Te reguły kontrolują elementy projektu Twojej witryny, takie jak rozmiar i kolor czcionki, kolor tła Twojej witryny oraz odstępy między różnymi sekcjami.
Pomyśl o CSS jako o instrukcjach stylizacji dla Twojej witryny. Podczas gdy Twój motyw WordPress używa elementów HTML do strukturyzowania treści Twojej witryny (takich jak nagłówki, akapity, obrazy i przyciski), CSS mówi przeglądarce, jak wizualnie prezentować te elementy.
Dlaczego warto edytować CSS w WordPress?
Chociaż motywy WordPress oferują różnorodne opcje projektowania, czasami możesz chcieć wprowadzić konkretne zmiany w wyglądzie swojej witryny, wykraczające poza wbudowane ustawienia motywu. Właśnie tutaj edycja CSS jest przydatna dla użytkowników WordPress.
Na przykład, możesz chcieć zmienić kolor tła określonej sekcji na swojej stronie internetowej lub lekko dostosować rozmiar czcionki dla lepszej czytelności.
Możesz również spersonalizować wygląd swojej strony internetowej i odróżnić ją od innych stron korzystających z tego samego motywu. Może to obejmować zmianę koloru zaznaczenia tekstu, dodanie efektu paralaksy lub stylizację formularza komentarzy WordPress.
Czasami motyw może nie wyświetlać elementów dokładnie tak, jak chcesz w swoim projekcie strony internetowej. Za pomocą kilku linii CSS możesz naprawić drobne problemy, takie jak wyśrodkowanie tekstu, który wydaje się być poza środkiem, lub dostosowanie wypełnienia lub marginesu wokół obrazu.
Czy muszę znać CSS, aby korzystać z WordPress?
Nie, niekoniecznie musisz znać CSS, aby zbudować stronę WordPress. Większość motywów WordPress zawiera różnorodne wbudowane opcje projektowania, które pozwalają dostosować wygląd Twojej witryny bez dotykania kodu.
Edycja CSS jest zazwyczaj uważana za funkcję zaawansowaną. Chociaż początkujący mogą z pewnością korzystać z WordPress bez niej, znajomość CSS otwiera więcej możliwości precyzyjnego dostrajania projektu Twojej witryny.
Aby ułatwić edycję CSS, możesz użyć wtyczki WordPress, takiej jak CSS Hero. Wtyczka CSS zapewnia wizualne podejście do wprowadzania zmian w CSS i jest kompatybilna z wieloma popularnymi motywami WordPress.
Niemniej jednak, zrozumienie, jak działa CSS, da Ci większą kontrolę i elastyczność w dostosowywaniu Twojej strony WordPress.
Podstawy CSS w WordPress (z przykładami)
CSS używa specyficznej składni do definiowania wyglądu elementów na Twojej stronie internetowej. Chociaż na początku może wydawać się to skomplikowane, podstawowa struktura jest dość prosta.
Pierwszą rzeczą, o której powinieneś wiedzieć, są selektory CSS. Mówią one CSS, które elementy na Twojej stronie mają być stylizowane. Są jak etykiety wskazujące na konkretne części Twojej strony.
Na przykład tag body odnosi się do całego obszaru zawartości Twojej witryny. Zatem selektor body będzie kierował całą stronę.
Drugie to właściwości. Określają one konkretne aspekty wizualne, które chcesz zmienić. Właściwości są jak instrukcje dotyczące tego, jak wybrany element ma wyglądać. Typowe przykłady to color, font-size, background-color i margin.
Następnie są wartości. Określają one, do czego ma zostać ustawiona właściwość. Na przykład wartością dla color może być red, blue lub konkretny kod koloru.
Następnie mamy klasę CSS, która jest rodzajem atrybutu, który można przypisać do elementów HTML. Możesz przypisać klasę do elementu w kodzie HTML, a następnie użyć jej w swoim CSS, aby zastosować te same style do wszystkich elementów z tą klasą.
Załóżmy, że chcesz zmienić kolor tła całej swojej witryny na czarny. Oto kod CSS dla tego celu:
body {
background-color: black;
}
W tym przykładzie:
bodyto selektor, który kieruje cały obszar zawartości strony internetowej.background-colorto właściwość, definiująca, który aspekt chcemy zmienić.blackto wartość określająca nowy kolor tła.
Teraz załóżmy, że chcesz wyróżnić określony tekst na swojej stronie internetowej. Możesz utworzyć klasę CSS o nazwie .highlight, która sprawi, że tekst będzie pogrubiony i zmieni jego kolor na żółty. Oto jak zdefiniowałbyś tę klasę w swoim CSS:
.highlight {
font-weight: bold;
color: yellow;
}
A oto jak można je zastosować do elementów w swoim HTML:
<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>
W tym przykładzie:
.highlightto selektor klasy. Wybiera wszystkie elementy z klasą „highlight”.font-weight: bold;icolor: yellow;to właściwości. Określają one, jakie aspekty wybranych elementów chcemy zmienić.boldiyellowto wartości. Określają one nowe wartości dla właściwości.
Jak dodać niestandardowy kod CSS do WordPress?
Sposób dodania niestandardowego CSS zależy od tego, jakiego rodzaju motywu WordPress używasz.
Jeśli używasz klasycznego motywu, możesz przejść do narzędzia do dostosowywania motywów WordPress i wybrać „Dodatkowy CSS”, aby dodać tam swój kod.
Jeśli używasz motywu blokowego WordPress, narzędzie dostosowywania motywu będzie brakować w Twoim panelu WordPress. Dzieje się tak, ponieważ Twoim domyślnym edytorem jest teraz edytor pełnej witryny.
Biorąc to pod uwagę, nadal możesz uzyskać dostęp do narzędzia dostosowywania WordPress, dodając /wp-admin/customize.php na końcu nazwy domeny w następujący sposób:
https://example.com/wp-admin/customize.php
Kiedy dodajesz niestandardowy kod CSS za pomocą narzędzia do dostosowywania WordPress, zmiany są zapisywane w bazie danych WordPress, a nie w fizycznym pliku style.css (arkuszu stylów Twojego motywu).
Takie podejście pozwala na wprowadzanie zmian bez bezpośredniej edycji plików motywu, co jest znacznie bezpieczniejszą metodą.
Niemniej jednak, w ten sposób nie można wprowadzać złożonych zmian w CSS. Alternatywą jest użycie wtyczki do fragmentów kodu, takiej jak WPCode, ponieważ może ona bezpiecznie wstawiać niestandardowy CSS do Twojego motywu WordPress.
Możesz również utworzyć motyw potomny i dodać tam swój niestandardowy kod CSS. W ten sposób Twoje poprawki CSS pozostaną nawet po aktualizacji motywu nadrzędnego.
Więcej informacji znajdziesz w naszym przewodniku krok po kroku na temat jak dodać niestandardowy CSS do swojej witryny WordPress.
Na koniec możesz również użyć wtyczki edytora CSS, takiej jak CSS Hero. Ta wtyczka pozwala edytować CSS bez znajomości kodowania. Sprawdź naszą recenzję CSS Hero, aby uzyskać więcej informacji.
Dlaczego mój CSS nie wyświetla się na mojej stronie WordPress?
Twój CSS może nie wyświetlać się na Twojej stronie WordPress z powodu błędów składni. Drobny błąd w kodzie CSS może uniemożliwić jego zastosowanie. Może to być brakujący nawias, literówka w nazwie właściwości lub nieprawidłowa wartość.
Dodatkowo, jeśli niedawno dodałeś lub zmieniłeś swój CSS, być może będziesz musiał wyczyścić pamięć podręczną, aby zobaczyć zmiany. Wyczyść pamięć podręczną przeglądarki, a jeśli używasz wtyczki do buforowania na swojej stronie WordPress, powinieneś również wyczyścić ją.
Czasami inne motywy lub wtyczki mogą zakłócać działanie Twojego CSS. Spróbuj wyłączać inne wtyczki pojedynczo, aby sprawdzić, czy problem się rozwiąże. Jeśli tak, ostatnia dezaktywowana wtyczka prawdopodobnie powoduje konflikt.
Jeśli używasz motywu potomnego, a Twój CSS się nie wyświetla, upewnij się, że motyw potomny jest poprawnie skonfigurowany i że plik CSS jest poprawnie dołączony w pliku functions.php motywu potomnego.
Jeśli potrzebujesz pomocy, możesz zapoznać się z naszym poradnikiem dla początkujących dotyczącym rozwiązywania problemów z błędami WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się więcej o CSS w WordPressie. Możesz również zapoznać się z naszą listą Dodatkowe lektury poniżej, aby znaleźć powiązane artykuły z przydatnymi wskazówkami, sztuczkami i pomysłami dotyczącymi WordPressa.
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.
