Style CSS — czyli jak szybko i łatwo zmienić wygląd WordPressa?

Sklep czy też strona internetowy muszą się wyróżniać, aby zachęcały użytkowników do przebywania w ich obrębie. Twój biznes online nie będzie przynosić oczekiwanych zysków, jeśli witryna będzie pospiesznie zaprojektowana. Poznaj skuteczne, szybkie i satysfakcjonujące sposoby na edycję CSS w WordPressie, która pozwoli ci samodzielnie odmienić swoją witrynę.

| Stylowanie CSS, kod CSS — co to jest?

CSS, a tak właściwie cascading style sheets sprawiają, że strona jest miła dla oka i chętniej do niej wracamy. W końcu wiąże się bezpośrednio z wyglądem witryny. Aby stworzyć ogólny szkielet strony lub sklepu wykorzystuje się język HTML, dzięki któremu można stworzyć m.in. takie elementy jak menu, nagłówki, panele boczne czy nawet treści artykułu. Jednak, jeśli na stronie użyto by jedynie HTML-u, to witryna nie zachęcałaby do przebywania na niej i wszelki content byłby nieprzejrzysty. Dlatego właśnie tak istotne jest to, aby wdrożyć CSS, który w wielkim skrócie ma po prostu “pokolorować” i “poustawiać” odpowiednio poszczególne elementy, które wcześniej zostały stworzone za pomocą HTML-u.

| Język CSS jak wprowadzić do WordPress i zmienić wygląd strony?

Jedną z możliwości, dzięki której każdy może dokonać edycji pliku CSS, jest dodanie własnego kodu do wybranego przez siebie motywu. Istnieje wiele sposobów, aby tego dokonać. Najbardziej oczywistą wydaje się po prostu zamieszczenie w pliku style.css nowych fragmentów kodu, dzięki którym można dokonać dowolnych modyfikacji. Jednak musisz zdawać sobie sprawę z tego, że kiedy autor motywu zrobi jego aktualizację, to stracisz wszelkie zmiany, które zostały tam zawarte. Dlatego raczej odradza się tego typu rozwiązanie. Jednak, jeśli chcesz po prostu zobaczyć, jak prezentują się twoje style strony, to możesz wejść do zakładki “Wygląd”, a następnie “Edytor” i odnaleźć plik style.css.

Kolejnym sposobem może być stworzenie motywu potomnego tzw. child theme. Wtedy można wykorzystać dotychczasowe ustawienia i po prostu dołożyć swoje modyfikacje, które nie będą narażone na usunięcie przy wykonaniu jakichś zmian przez autora motywu. To rozwiązanie nie wymaga wiele wiedzy technicznej, jednak i tak należy poświęcić odrobinę czasu, aby nauczyć się, czym charakteryzuje się motyw potomny i edycja CSS w WordPress.
Inną opcją może być wykorzystanie bardzo przydatnych wtyczek, z których przecież słynie WordPress oraz WooCommerce, kiedy w grę wchodzi sklep online. Wtedy też cały proces będzie znacznie łatwiejszy, szybszy i co najważniejsze nie będzie groził dokonaniem nieodwracalnych zmian dla witryny.

| 5 wtyczek do stylowania CSS w WordPressie

1. Easy Custom JS&CSS

Dzięki tej wtyczce możesz umieścić napisany przez siebie kod CSS lub też JavaScript. Dużą zaletą w tym przypadku jest możliwość dodania modyfikacji do każdej sekcji czy podstrony osobno. Nie trzeba obawiać się tutaj tego, że po aktualizacji zmiany zostaną usunięte. Ciekawą opcją jest także możliwość wyznaczenia, że wpisany kod ma dotyczyć jedynie konkretnego motywu.

2. JetPack

Aby wymienić wszystkie korzyści, z jakimi wiąże się JetPack, trzeba by było napisać odrębny artykuł, gdyż to bardzo rozbudowane narzędzie. Jedną z ciekawych opcji, którymi się wyróżnia jest właśnie możliwość dodania własnego kodu CSS. Cały proces jest tutaj całkowicie intuicyjny i przede wszystkim nie wymaga dostępu do serwera FTP. Wystarczy po prostu zainstalować wtyczkę i rozpocząć wpisywanie dowolnego kodu CSS.

3. JP Custom CSS

Jeśli jednak przeanalizujesz, czym dokładnie wyróżnia się JetPack i uznasz, że większość tych możliwości nie jest ci potrzebna w tym momencie, to możesz wybrać inne rozwiązanie. W takiej sytuacji postaw na wtyczkę JP Custom CSS, która wyodrębnia po prostu funkcję związaną ze stylowaniem CSS.
Zaletą tego pluginu jest przede wszystkim to, że kod, który dodasz znajduje się w osobnym miejscu niż kod motywu, dlatego nie musisz obawiać się, że twoje eksperymenty będą miały jakieś negatywne konsekwencje. W razie potrzeby wystarczy, że po prostu usuniesz dodany przez siebie kod i problem zostanie zażegnany. Najważniejsze jest też to, żeby w trakcie modyfikacji używać trybu pracy Add-On, gdyż odpowiedzialny jest on właśnie za odrębne dołączanie kodu do witryny. Warto zaznaczyć też, że osoby, które dopiero uczą się stylowania CSS w WordPressie, mogą skorzystać z opcji “Podgląd” jeszcze przed zapisaniem, aby móc sprawdzić, jak będzie wyglądać witryna po wykonanych przez ciebie zmianach.

4. CSS SiteOrigin

To zaawansowany plugin i co najważniejsze w pełni darmowy. Aby móc zacząć stylować trzeba wejść do zakładki “Wygląd”, a następnie “Niestandardowy CSS” i rozpocząć edycję. Możliwość obserwowanie tego, co aktualnie zmienia się na stronie to duży jej atut. Do tego wszystkiego nie ma konieczności, aby dokładnie znać własności, gdyż wystarczy po prostu uzupełniać konkretne pola. To duże uproszczenie. Wystarczy znaleźć, co oznacza dane pole, choć wiele nazw już same w sobie sugerują, czego dotyczy zmiana.

5. Custom JS&CSS for Gutenberg — Niestandardowy JS i CSS

Ostatnią propozycją jest niestandardowy JS i CSS, będący również znakomitym narzędziem pozwalającym na dokonywanie nieograniczonej liczby zmian na stronie za pomocą kodu CSS. Każdy użytkownik WordPress może zyskać plugin pozwalający na stosunkowo łatwą edycję. Dzięki temu szybko edytujesz dowolne pole czy też sekcję na stronie. Do tego uzyskasz możliwość skorzystania z podglądu w stanie rzeczywistym, dzięki czemu dokonywanie zmian staje się jeszcze przyjemniejsze i bezproblemowe. Ważne jest również to, że interfejs jest na tyle intuicyjny, że każdy, nawet początkujący, jest w stanie szybko go opanować.

| ABC edycji CSS przy WordPressie i nie tylko

Skoro wiesz już, czym jest CSS i gdzie można go dodać, aby zmodyfikować poszczególne elementy na stronie, to czas poznać kilka podstawowych zasad związanych z tworzeniem tego magicznego kodu.
Reguły CSS
selektor {
cecha: wartość;
}
W tym przypadku selektorem będzie wybrany przez ciebie znacznik, np. dotyczący nagłówka – h2, listy — ul czy też akapitu — p. W skrócie będzie on określać, który aktualnie element chcesz zmodyfikować.
Selektor może być identyfikatorem (id) lub też klasą (class).
Podstawowe różnice między nimi:
– identyfikator może być użyty tylko raz, a klasa wiele razy,
– aby wywołać klasę, należy użyć przed nią kropkę.

Wskazówka!

Jeśli nie wiesz, jak nazywa się część, którą chcesz dopasować do swojego gustu i nowego stylu, to możesz nacisnąć prawym przyciskiem myszy w dowolne miejsce na stronie głównej (nie w kokpicie WordPress), a następnie wybrać opcję “Zbadaj”. Wtedy ukaże ci się kod HTML, a poniżej style CSS. Kiedy naciśniesz pole znajdujące się w lewym górnym rogu, oznaczający zbadanie konkretnego elementu po najechaniu na niego, będziesz mógł zobaczyć jak nazywa się część, którą chcesz zmodyfikować. Skopiuj wtedy też selektor, aby można było dokonać zmianę koloru, wielkości czy przesunąć element na stronie.

Jeśli chcesz sprawdzić, jak będzie wyglądać modyfikacja, którą planujesz bez jakichkolwiek konsekwencji, możesz nacisnąć “+”, oznaczający “New Style Rule” i wpisać swój kod. Jeśli wszystko zostanie wykonane poprawnie, to zmiana będzie natychmiast widoczna. I co najważniejsze, gdy odświeżysz witrynę, pozbędziesz się wszystkich przeróbek. Dlatego, jeśli przypadła ci on do gustu, to koniecznie skopiuj element, a następnie wklej do arkusza style.css lub skorzystaj z wtyczek, o których była mowa we wcześniejszej części tego artykułu.

Z kolei “cecha” jest własnością czy też właściwością stylu, którą chcesz wykorzystać do wykonania modyfikacji, np. zmiany rozmiaru fontu. Jednak, aby edycja mogła się dokonać potrzebna jest jeszcze wartość, czyli opis cechy, będący wskazówką, mówiącą, jak ma prezentować się zmiana, np. określająca wielkość fontu lub jego kolor.

Przykład!

Abyś zrozumiał jeszcze lepiej na czym polega edycja CSS w WordPressie i nie tylko, zwróć uwagę na poniższy przykład, który może posłużyć ci za wzór przy samodzielnym stylowaniu.

Omów z nami swój pomysł

Napisz do nas

• Wyrażam zgodę na przetwarzanie danych osobowych w celach marketingowych. Administratorem danych osobowych jest PRO Solution Sp. z o.o., 40-148 Katowice, Bytkowska 107/54, NIP: 9542736446.

Oto schemat postępowania:

1. Wejdź na swoją stronę i spójrz, co warto w niej zmienić. Jeśli zauważysz, że wielkość fonta jest zbyt mała, co skutkuje tym, że artykuł na blogu i teksty ofertowe są nieczytelne, to koniecznie to popraw. Gdy twój motyw nie daje możliwości zmiany rozmiaru fonta lub po prostu nie możesz znaleźć tej funkcji, wtedy możesz wykorzystać swoją wiedzę związaną z CSS.

2. Zdecyduj, że font będzie miał, np. rozmiar 14, zamiast 12, co miało miejsce wcześniej.

3. Kliknij prawym przyciskiem myszy na stronie głównej i wybierz “Zbadaj”. Jak wcześniej było wspomniane, naciśnij element znajdujący się w lewym górnym rogu i najeźdź kursorem na miejsce, które chcesz zmienić.

4. Skopiuj selektor.

5. Wybierz jedną ze wtyczek, o których była mowa powyżej, pobierz ją i zainstaluj. Następnie włącz ją i w przeznaczonym do tego polu wklej wcześniej skopiowany selektor. Koniecznie pamiętając o tym, aby napisać przed nim kropkę (.selektor), jeśli to klasa.

6. Następnie wpisz poniższy fragment kodu (pomijając słowo selektor):
.selektor{
font-size: 14px;
}
Zamiast px, możesz użyć też procentów, np. jeśli font miał wcześniej rozmiar 8px, a ty chcesz zmienić na 12px, to możesz wpisać 150% itd.

7. Jeśli zamierzasz dodać także inne własności, np. nowy kolor fonta, to wystarczy, że do kodu dopiszesz:
.selektor{
font-size: 14px;
font-color: red;
}
Wtedy też font zmieni się w tym elemencie na czerwono. Jeśli poszukujesz bardziej zindywidualizowanego koloru, to możesz skorzystać z kolorów RGB. Wystarczy, że wpiszesz do wyszukiwarki “kolory rgb generator” lub inną pokrewną frazę kluczową, aby znaleźć wiele różnych kodów HEX, określających kolory. Zawsze taki kod będzie składać się z 6 znaków (liter oraz cyfr), a przed nimi znajdzie się znak #.
Np. kolor biały określa kod HEX – #ffffff.

8. Po wprowadzeniu własnego kodu zapisz zmiany lub jeśli wtyczka daje taką możliwość naciśnij “Podgląd”, aby sprawdzić, czy efekt spełnia twoje oczekiwania, następnie dokonaj zapisu.

9. Poczuj satysfakcję związaną z samodzielną edycją CSS i z posiadania odświeżonej wizualnie witryny.
Najbardziej przydatne własności CSS
Istnieje wiele różnych własności, które możesz wykorzystać na swojej stronie, dlatego nie ma sensu ich wszystkich tu wypisywać. Jeśli chcesz je poznać możesz wejść tutaj: Dokumentacja CSS – kaskadowe arkusze stylów CSS

Oto lista kilku podstawowych właściwości, które mogą ci się przydać:

– font-weight — grubość fonta, po wpisaniu np. “bold”, będzie pogrubiona,
– color — zmiana koloru jakiegoś elementu,
– background-color — kolor tła,
– letter-spacing — odstęp pomiędzy literami,
– vertical-align — wyrównanie tekstu w pionie,
– list-style — styl wypunktowania przy listach, np. można dopisać “circle”, aby punktory miały kształt okręgów,
– text-decoration — ozdoba tekstu, np. po wpisaniu “underline” pojawi się podkreślenie, a po line-through — przekreślenie,
– margin-top — można dodać lub usunąć margines górny, jeśli chcesz zrobić to samo z dolnym, prawym lub lewym marginesem, musisz użyć właściwości — bottom, right lub left.

Edycja CSS w WordPress nie jest trudna. Wystarczy poznać ogólne zasady i poczytać o możliwych wartościach oraz zmianach z nimi związanych, aby szybko je opanować. Jak zawsze najważniejszy jest trening i metoda prób i błędów. Koniecznie pamiętaj o tym, aby nie uczyć się kosztem swojej własnej witryny i w tym celu lepiej stwórz sobie stronę do ćwiczeń lub skorzystaj z wymienionych wyżej wtyczek, które odseparują dodany kod CSS od pozostałej części kodu. W ten sposób zmniejszysz ryzyko “zepsucia” czegoś na stronie. Pamiętaj, że dzisiejsi użytkownicy sugerują się głównie wyglądem wizualnym witryny oraz tym, aby działała sprawnie. Zatem, jeśli chcesz odnieść sukces w sieci, to koniecznie bierz się za stylowanie CSS, stwórz całkowicie wyjątkową i wyrażającą twój biznes lub twój gust stronę internetową.