Jak edytować CSS na stronie WordPress
Pliki CSS pozwalają na programistyczne ustalenie tego, jak wygląda i zachowuje się strona. Decydują o wyglądzie fontów, układzie kolumn, kolorach oraz linkach czy komentarzach. Nie trzeba być web developerem, żeby móc samemu zmienić zachowanie i skład CSS-ów. Wystarczy za to przeczytać nasz poradnik ;)
Jak już wspomnieliśmy, dzięki stylom CSS możemy zdefiniować wiele elementów dotyczących wyświetlania i zachowania naszej witryny internetowej. W tym głównie fonty - nie tylko tekstu, ale też nagłówków, linków, stopki czy menu. Dodatkowo, CSS-y definiują kolory na stronie, rozmieszczenie menu, kolumn czy tabeli. Za ich pomocą możemy ustawić widgety, menu z zakładkami, jak również nieskomplikowane animacje i przejścia.
Każdy motyw na Wordpressa ma własne zdefiniowane style CSS. Dostęp do nich możemy uzyskać chociażby z poziomu panelu zarządzania naszą stroną. W zakładce Wygląd > Edytor mamy bezpośredni wgląd do plików CSS, które można też stamtąd edytować. Oczywiście, najlepiej robić to na tzw. child theme.
Jeżeli jednak nie znamy się na edycji CSS, trudno jest wprowadzać jakiekolwiek zmiany. Dlatego też w tym poradniku proponujemy kilka narzędzi, które pozwalają na proste definiowanie CSS-ów z poziomu wtyczek na Wordpressa. W ten sposób nawet bez umiejętności programistycznych będziemy mogli ustawić interesujące nas zmiany.
Metoda pierwsza - SiteOrigin CSS
Zaniczjmy od wtyczki SiteOrigin CSS, która pozwala na bardzo wygodne edytowanie CSS-ów na naszej stronie. Wszystko dzięki połączeniu wizualnego edytora z widokiem kodu. Użytkownik może więc zmieniać kolory, fonty, tło czy układ strony za pomocą prostych narzędzi, a jednocześnie widzieć, jak jego zmiany wpływają na kod CSS-ów.
Po zainstalowaniu, wtyczka dostępna jest poziomu zakładki Wygląd > Custom CSS w lewym pasku menu panelu zarządzania Wordpressem. Po otwarciu zakładki otrzymujemy pusty widok. Należy teraz kliknąć niewielką ikonę oka w górnej części strony. Zostaniemy przeniesieni do wizualnego edytora CSS.
Teraz wystarczy zaznaczyć interesujący nas element na stronie - w edytorze wizualnym. Następnie, z poziomu lewego paska wybieramy element, który chcemy wprowadzić. Możemy zatem np. zaznaczyć nagłówek witryny i zmienić kolor tekstu, podkreślenie, font, wyjustowanie, odstępy między znakami czy dodać cień.
Możemy też zmienić (zakładka "Decoration") kolor tła i położenie tła. W ostatniej zakładce, czyli "Layout", wprowadzamy marginesty na witrynie i odstępy, a także pozycje, szerokość i wysokość strony czy przejrzystość. Opcji jest całkiem sporo. U dołu strony edytora wizualnego SiteOrigin CSS widzimy jakie znaczniki zostają przez nas zmienione po wprowadzeniu zmian w edytorze wizualnym.
Na koniec należy oczywoście zapisać wprowadzone zmiany, tak aby mogły one być wprowadzone na naszej witrynie. Największą zaletą dodatku SiteOrigin CSS obok wizualnego edytora CSS jest wyświetlanie zmian na żywo. Dzięki temu nie musimy nawet odświeżać strony, aby zobaczyć jak wyglądają wprowadzane przez nas zmiany na naszej stronie czy na blogu.
Metoda druga - Visual CSS Style Editor
Alternatywnym rozwiązaniem dla wcześniejszej metody może być darmowa wtyczka Visual CSS Style Editor. Kiedy ją zainstalujemy i aktywujemy w naszym panelu zarządzania Wordpressem, wtyczka będzie dostępna z poziomu zakładki Wygląd > Yellow Pencil.
Visual CSS Style Editor to wizualny edytor CSS działający w zbliżony sposób do SiteOrigin CSS. Jest jednak nieco bardziej wygodny i prostszy w obsłudze. Po otwarciu zakładki Yellow Pencil, od razu jesteśmy przeniesieni do wizualnego edytora strony. Mamy więc załadowany widok naszej witryny, a w lewym pasku menu - narzędzia edycji. Całość przypomina nieco pracę za pomocą edytora grafiki.
Mamy więc takie narzędzia jak edytor, powiększenie, gumka czy widok kolumn. Aby zmienić wygląd i zachowanie jakiegoś elementu, musimy go najpierw zaznaczyć kliknięciem myszki, a następnie przejść do jego edycji. Bardzo ciekawym rozwiązaniem jest prawe menu, pojawiające się w momencie zaznaczenia przez nas jakiegoś elementu na stronie. Pozwala ono na szybką zmianę fontów, kolorów, wielkości i marginesów. Wszystko za pomocą wizualnych znaczników.
Zmiany wprowadzane są natychmiastowo w podglądzie, a jeżeli klikniemy zielony przycisk "Save" od razu wprowadzane są na naszej stronie. Visual CSS Style Editor jest bardzo wygodny, jako że oferowane narzędzia są banalnie proste w obsłudze.
Dodatkowym, wygodnym narzędziem jest możliwość przenoszenia elementów na stronie. Wystarczy w edytorze wizualnym zaznaczyć jakiś element - np. nagłówek strony. Następnie klikamy ikonę czterech strzałek widocznych w lewym rogu zaznaczenia. Potem metodą przenieś i upuść przesuwamy element w dowolne miejsce na naszej stronie.
Warto też dodać, że wszystkie zmiany, jakie wprowadzamy za pomocą wtyczki mogą być cofnięte czy wymazane. Ponadto, Visual CSS Style Editor oferuje szybki dostęp do widoku kodu CSS, jaki jest zmieniany przez nas podczas pracy z wizualnym edytorem naszej witryny czy bloga.
Metoda trzecia - Advanced CSS Editor
Na koniec proponujemy wtyczkę, która posiada dużo zaawansowanych opcji edycji CSS. Po zainstalowaniu wtyczki, dostępna jest ona z poziomu edytora wyglądu naszego motywu. Otwieramy zatem zakładkę Wygląd > Personalizacja, a następnie w lewym pasku menu odszukujemy zakładkę o nazwie wtyczki.
Teraz możemy już przejść edycji naszej witryny. Advanced CSS Editor pozwala na "wstrzykiwanie" kodu CSS do wybranych przez nas pozycji i elementów na stronie. Ciekawym elementem jest możliwość zaznaczania, czy pracujemy na ogólnej, mobilnej czy też responsywnej wersji naszej strony.
Podobnie jak w przypadku wcześniejszych opisywanych tutaj metod, również w przypadku Advanced CSS Editor wszystkie wprowadzane przez nas zmiany są aktualizowane na bieżąco. Natomiast na stronie, po zapisaniu wprowadzonych zmian, musimy już odświeżyć widok, aby zobaczyć co zostało zmienione i poprawione.
Na zakończenie zachęcamy do opisywania wszelkich ewentualnych błędów czy problemów, jakie będziecie mieli podczas zmiany CSS-ów na swojej stronie. Rzecz jasna, przed przystąpieniem do jakichkolwiek zmian koniecznie należy stworzyć kopię zapasową swojej strony.