Co to jest: CSS

CSS (Cascading Style Sheets) to język z zestawem reguł, które definiują wygląd elementów na twojej witrynie internetowej.

Reguły te kontrolują elementy projektu twojej witryny internetowej, takie jak wielkość i kolor pisma, kolor tła witryny i ilość miejsca między różnymi sekcjami.

Potraktuj CSS jako instrukcje stylizacji dla twojej witryny internetowej. Podczas gdy twój motyw WordPress używa elementów HTML do strukturyzowania treści witryny (takich jak nagłówki, akapity, obrazki i przyciski), CSS mówi przeglądarce, jak wizualnie przedstawić te elementy.

Dlaczego warto edytować CSS w WordPress?

Podczas gdy motywy WordPress oferują wiele opcji projektowania, czasami możesz chcieć wprowadzić określone zmiany w wyglądzie twojej witryny internetowej, wykraczające poza wbudowane ustawienia motywu. To właśnie tutaj edycja CSS jest przydatna dla użytkowników WordPressa.

Na przykład, możesz chcieć zmienić kolor tła określonej sekcji na twojej witrynie internetowej lub nieznacznie modyfikować wielkość liter dla lepszej czytelności.

Możesz również spersonalizować wygląd twojej witryny internetowej i odróżnić ją od innych witryn korzystających z tego samego motywu. Może to brać udział w zmianie koloru zaznaczenia tekstu, dodaniu efektu paralaksy lub stylizacji formularza komentarza WordPress.

Czasami motyw może nie wyświetlać elementów dokładnie tak, jak chcesz w twoim projekcie strony internetowej. Za pomocą kilku linijek CSS można poprawić drobne problemy, takie jak wyśrodkowanie tekstu, który pojawia się poza środkiem lub dopełnienie lub margines wokół obrazka.

Czy muszę znać CSS, aby korzystać z WordPressa?

Nie, nie musisz koniecznie znać CSS, aby zbudować witrynę internetową WordPress. Większość motywów WordPress zawiera wiele wbudowanych opcji projektowych, które pozwalają dostosować wygląd i styl twojej witryny bez dotykania jakiegokolwiek kodu.

Edycja CSS jest zwykle uważana za funkcję zaawansowaną. Podczas gdy początkujący z pewnością mogą korzystać z WordPressa bez niej, znajomość CSS otwiera więcej możliwości dopracowania wyglądu twojej witryny internetowej.

Aby ułatwić edycję CSS, można użyć wtyczki WordPress, takiej jak CSS Hero. Wtyczka CSS zapewnia wizualne podejście do wprowadzania zmian CSS i jest zgodna [może być też „kompatybilna”] z wieloma popularnymi motywami WordPress.

To powiedziawszy, zrozumienie jak działa CSS da ci większą kontrolę i elastyczność w dostosowaniu twojej witryny internetowej WordPress.

Podstawy CSS w WordPress (z przykładami)

CSS wykorzystuje specyficzną składnię do definiowania wyglądu elementów na twojej witrynie internetowej. Choć na początku może się to wydawać 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 witrynie internetowej mają być stylizowane. Są jak etykiety wskazujące na określone części twojej witryny internetowej.

Na przykład, tag body odnosi się do całego obszaru treści twojej witryny internetowej. Selektor body kierowałby więc na całą stronę.

Drugi to właściwości. Definiują one konkretne aspekty wizualne, które chcesz zmienić. Właściwości są jak instrukcje dotyczące wyglądu wybranego elementu. Typowe przykłady to kolor, wielkość litery, kolor tła i margines.

Następne są wartości. Określają one, do czego powinna być ustawiona właściwość. Na przykład wartością dla koloru może być czerwony, niebieski lub określony kod koloru.

Następnie jest klasa 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 twoim CSS, aby zastosować te same style do wszystkich elementów z tą klasą.

Załóżmy, że chcesz zmienić kolor tła całej twojej witryny internetowej na czarny. Oto kod CSS do tego celu:

body {
  background-color: black;
}

W tym przykładzie:

• body to selektor, którego celem jest cały obszar treści witryny internetowej.
• Kolor tła to właściwość określająca aspekt, który chcemy zmienić.
• black to wartość określająca nowy kolor tła.

Załóżmy teraz, że chcesz wyróżnić określony tekst na twojej witrynie internetowej. Możesz utworzyć klasę CSS o nazwie .highlight, która pogrubi tekst i zmieni jego kolor na żółty. Oto jak zdefiniowałbyś tę klasę w twoim CSS:

.highlight {
 font-weight: bold;
 color: yellow;
}

A oto jak zastosowałbyś go do elementów w twoim HTML:

<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>

W tym przykładzie:

• .highlight jest selektorem klasy. Wybiera on wszystkie elementy z klasą „highlight”.
• krój pisma: pogrubiony; i kolor: żółty; są właściwościami. Określają one, jakie aspekty wybranych elementów chcemy zmienić.
• pogrubiony i żółty to wartości. Określają one nowe wartości właściwości.

Jak dodać własny kod CSS do WordPressa?

Sposób dodawania własnego CSS zależy od rodzaju używanego motywu WordPress.

Jeśli korzystasz z klasycznego motywu, możesz przejść do konfiguratora WordPress i wybrać „Dodatkowy CSS”, aby dodać tam swój kod.

Jeśli korzystasz z blokowego motywu WordPress, w Twoim kokpicie WordPress będzie brakować konfiguratora motywu. Dzieje się tak, ponieważ twój domyślny edytor jest teraz edytorem całej witryny.

Biorąc to pod uwagę, nadal możesz uzyskać dostęp do konfiguratora WordPress, dodając /wp-admin/customize.php na końcu nazwy twojej domeny w następujący sposób:

https://example.com/wp-admin/customize.php.

Po dodaniu własnego CSS za pomocą konfiguratora WordPress, zmiany są przechowywane 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ą.

To powiedziawszy, nie można w ten sposób wprowadzać złożonych zmian CSS. Alternatywą jest więc użycie wtyczki fragmentu kodu, takiej jak WPCode, która może bezpiecznie wstawić własny CSS do twojego motywu WordPress.

Możesz także utworzyć motyw potomny i dodać do niego własny kod CSS. W ten sposób twoje modyfikacje CSS będą dostępne nawet po aktualizacji motywu nadrzędnego.

Aby uzyskać więcej informacji, możesz przeczytać nasz przewodnik krok po kroku, jak dodać własny CSS do twojej witryny WordPress.

Wreszcie, można również użyć wtyczki edytora CSS, takiej jak CSS Hero. Wtyczka ta pozwala edytować CSS bez znajomości kodowania. Więcej informacji znajdziesz w naszej recenzji CSS Hero.

Dlaczego mój CSS nie wyświetla się na witrynie WordPress?

Twój CSS może nie wyświetlać się na Twojej witrynie WordPress z powodu błędów składni. Mały błąd w twoim 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ść.

Ponadto, jeśli niedawno dodałeś lub zmieniłeś swój CSS, może być konieczne wyczyszczenie pamięci podręcznej, aby zobaczyć zmiany. Wyczyść pamięć podręczną swojej przeglądarki, a jeśli używasz wtyczki buforującej na swojej witrynie WordPress, powinieneś ją również wyczyścić.

Czasami inne motywy lub wtyczki mogą zakłócać twój CSS. Spróbuj wyłączać po kolei inne wtyczki, aby sprawdzić, czy problem ustąpi. Jeśli tak, to ostatnia wyłączana wtyczka jest prawdopodobnie przyczyną konfliktu.

Jeśli korzystasz z motywu potomnego, a twój CSS nie jest wyświetlany, upewnij się, że motyw potomny jest poprawnie skonfigurowany, a plik CSS jest poprawnie zapisany w pliku functions.php motywu potomnego.

Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem dla początkujących na temat rozwiązywania błędów WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się więcej o CSS w WordPress. Możesz również zapoznać się z naszą listą dodatkowych lektur poniżej, aby znaleźć powiązane artykuły na temat przydatnych wskazówek, sztuczek i pomysłów WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.