Dlaczego tracę Formatowanie Elementów Wtyczki po aktualizacji Wtyczki WordPress?

Jesteś developerem Wodpress i wiesz już jak dokonywać modyfikacji w plikach wtyczek oraz jak je stylować wedle własnych potrzeb. Udało Ci się przygotować piękną stronę z blogiem. Pojawiła się potrzeba oceniania twoich wpisów przez odwiedzających użytkowników, i tu z pomocą przyszła wtyczka kk ratings, zawierająca dane strukturalne schema.org. Instalujesz wtyczkę i okazuje się że jest brzydko ostylowana, kompletnie nie pasuje do twojego motywu. No to do dzieła! Bierzesz ją na warsztat, sprawdzasz za pomocą przeglądarki w trybie dla developerów – tak, wtyczka posiada własne arkusze stylów.  W tym przypadku plik: css.css. Używając dostępnych narzędzi graficznych przygotowujesz własne gwiazdki, implementujesz za pomocą arkusza stylów, zmieniasz pozycję wyświetlania gwiazdek na stronie, opis pod spodem i już, już… gotowe. Ostatnie opróżnienie cache, łyk kawy, ctrl+F5, renderuje się i gotowe. Jest pięknie, zgodnie z oczekiwaniami. Wieczorem siadasz żeby jeszcze raz nacieszyć się widokiem pięknych gwiazdek i sprawdzić dalsze możliwości. O! Jest aktualizacja wtyczki. Klikasz aktualizuj, odświeżasz stronę a tam co? Gwiazdki wróciły do stanu gorszego niż pierwotny, ponieważ zmienił się arkusz stylów css.css na zaktualizowany. Myślisz… Gdzie jest mój backup…

To jest właśnie częsty błąd developerski polegający na edycji elementów które  należą do folderu wtyczek, które będą aktualizowane i nadpisywane wraz z ich aktualizacją. Ale jak temu zaradzić?

Jak Zachować Formatowanie Wtyczek po ich Aktualizacji WordPress

Zawsze pamiętaj o motywie potomnym. W motywie potomnym, przechowywany własny arkusz stylów style.css, z poleceniem #import  da Ci możliwość dowolnego wpływania na każdy arkusz zawierający się w instalacji WordPressa.  Więcej o tym temacie znajdziesz tu. Posiadając własny arkusz możesz dowolnie wpływać na każdą klasę przypisaną do dowolnego obiektu.

Załóżmy że twoja wtyczka kk ratings zawiera arkusz stylów css.css w którym istnieje klasa .kk-star-ratings zawierająca dane o szerokości i maksymalnej wysokości obiektu. Wpisując tę klasę we własny arkusz stylów, w motywie potomnym, możesz nią manipulować, tak jak to robisz z poziomu wtyczki. Najistotniejsze jest jednak to że arkusz stylów pluginu może mieć priorytet nad twoim arkuszem motywu potomnego i wtedy trzeba wymusić konkretny styl.

Jak to zrobić? Wystarczy na koniec linijki kodu dodać polecenie !important, co wymusi priorytetowe renderowanie stylu właśnie z tą komendą. Przykład:

plik stylów wtyczki css.css

plik stylów w motywie potomnym:

Pomimo priorytetu arkusza wtyczki nad naszym ogólnym arkuszem, wpłynęliśmy na klasę, wymuszając jej bezwzględne przypisanie do obiektu

Oczywiście całą operację można przeprowadzić na różne sposoby, np podmienić arkusz stylów wtyczki za pomocą javascript, podmienić style w obiekcie również za pomocą java lub aktualizować wtyczki ręcznie. Dla niewielkich modyfikacji, taka opcja jest wystarczająca ale trzeba mieć na uwadze że dubluje ona fragment kodu odpowiedzialnego za renderowanie tego samego obiektu. Jeśli uznajesz ten artykuł za przydatny, proszę o ocenę.