Chyba każdy wordpressowiec prędzej czy później (raczej prędzej) musi zmierzyć się z wdrożeniem jakiejś niestandardowej funkcjonalności na budowanej stronie internetowej. Advanced Custom Fields jest w takiej sytuacji niezastąpioną wtyczką i sprzymierzeńcem. Plugin ten pozwala rozbudowywać panel administracyjny strony o dodatkowe pola edytora, które następnie bardzo łatwo można wykorzystać na froncie. Co ciekawe, można w ten sposób zmodyfikować też działanie podstawowych widgetów. Przykład właśnie takiego ulepszenia chciałbym Wam tutaj przedstawić.
Przebogata baza wordpressowych wtyczek zawiera rozwiązania niemal na każdą okazję. Często więc, natrafiając na potrzebę implementacji jakiegoś nowego zachowania, możemy po prostu zainstalować kolejny plugin. Działając w ten sposób łatwo jednak doprowadzić do sytuacji, w której silnik strony obciążony jest kilkunastoma (a nawet kilkudziesięcioma) rozszerzeniami po to tylko, aby z każdego wykorzystać tylko pojedynczą funkcjonalność.
Advanced Custom Fields – Twój uniwersalny narzędziownik
Advanced Custom Fields, zamiast dawać nam gotowe rozwiązania, daje narzędzia do zbudowania ich samemu. Dzięki tej wtyczce możemy tworzyć nowe grupy pól i rozbudowywać edytory WordPressa według własnego uznania i wedle potrzeb. Stosuję ten plugin od lat i cenię go zdecydowanie najbardziej ze wszystkich wordpressowych rozszerzeń.
Dopiero niedawno jednak zorientowałem się, że mogę użyć ACF również do modyfikacji działania widgetów. Wcześniej jakoś nie miałem potrzeby takiej ingerencji. Tymczasem niedawno stanąłem przed koniecznością dodania opcji wyboru koloru tekstu do widgetu tekstowego i – naturalnie – mogłem się rzucić na poszukiwanie odpowiedniego pluginu. Postanowiłem jednak zadziałać samodzielnie.
Dodajemy własne pole do widgetu przy użyciu ACF
Na potrzeby tego wpisu zakładam, że wiesz, czym są własne pola, jak działa ACF oraz potrafisz edytować pliki PHP szablonu WordPressa. Jeśli nie, treść nadal może być dla Ciebie pomocna, choć zapewne jej zrozumienie może być problematyczne.
Co chcemy osiągnąć?
Jak zasygnalizowałem wcześniej, zadanie polega na dodaniu opcji wyboru koloru tekstu do widgetu tekstowego.
Krok 1: Tworzymy własne pole
- Na początku w panelu administracyjnym w menu głównym pluginu ACF klikamy na Dodaj nową, aby utworzyć nową grupę pól. Nazywamy ją Widgety pola tekstowego.
- Następnie, w edycji grupy pól określamy lokalizację tej grupy. Ustalamy, że ma być ona pokazywana jeśli Widżet jest równe Tekst.
- Dodajemy nowe pole. Z pola wyboru Typ pola wybieramy Wybór koloru.
- Jako nazwę pola (nie etykietę) wpisujemy text-widget-custom-text-color. To istotne, gdyż tę właśnie nazwę będziemy za chwilę wykorzystywać w kodzie filtra, który dopiszemy do pliku functions.php.
- Możemy wpisać jeszcze własną etykietę pola oraz instrukcję, ale nie są to już kwestie kluczowe.
- Zapisujemy naszą grupę pól.
Krok 2: Dopisujemy własny filtr do pliku funkcji motywu
Dzięki dotychczasowym działaniom widget tekstowy wzbogacił się o możliwość wyboru koloru:
Jednakże mimo że w panelu administracyjnym wszystko działa już jak należy, wyświetlany na froncie strony tekst nadal zachowuje się standardowo. Aby zmiany odniosły skutek, musimy dopisać kilkanaście linijek kodu do pliku functions.php.
Miałem pewien problem ze znalezieniem odpowiedniego rozwiązania. Problem polegał na tym, że nie znalazłem łatwego sposobu odczytania ID wyświetlanego aktualnie widgetu, które działałoby analogicznie np. do funkcji get_the_ID(), odczytującej ID wyświetlanego w pętli postu. Rozwiązanie, na które trafiłem na forach (niestety, zapodziałem link!), jest swego rodzaju obejściem trudności, jednak rezultat jest taki, jakiego oczekiwałem. Uznaję zatem, że rzecz jest do przyjęcia.
Do rzeczy. Otwieramy do edycji plik functions.php naszego motywu graficznego i dopisujemy do niego następujący kod:
function myfuncprefix_extend_widget_text( $params ) {
// Na początek pobieramy potrzebne informacje o widgecie
$widget_name = $params[0]['widget_name'];
$widget_id = $params[0]['widget_id'];
// Sprawdzamy, czy mamy do czynienia z widgetem tekstowym. Jeśli nie, zwracamy widget niezmieniony
if( $widget_name != 'Tekst' ) {
return $params;
}
// Przystępujemy do modyfikacji kodu zwracanego przez widget. Dla bezpieczeństwa sprawdzamy najpierw, czy w systemie zainstalowano plugin ACF (odpytując o istnienie funkcji get_field())
if(function_exists('get_field')) {
$c = get_field('text-widget-custom-text-color', 'widget_'.$widget_id);
if(isset($c) && !empty($c)) {
// Modyfikujemy zwracany HTML tylko wówczas, gdy pole wyboru koloru tekstu jest ustawione i jest niepuste
$params[0]['before_widget'] .= '<div style="color:'.$c.';">';
$params[0]['after_widget'] = '</div>'.$params[0]['after_widget'];
return $params;
}
else return $params;
}
else return $params;
}
// Na koniec podhaczamy funkcję w odpowiednim „miejscu” WordPressa
add_filter('dynamic_sidebar_params','myfuncprefix_extend_widget_text');Co „robi” powyższy kod? Po prostu „opakowuje” tekst w dodatkowy <div> z przypisanym stylem CSS color: [tu nasz kolor].
Ło Panie, a nie da się prościej?
Nie da się 🙂 Okej, szczerze mówiąc nie wiem, czy się da. Szybka kwerenda w Googlu nie skierowała mnie ku żadnym sensownym rozwiązaniom. Nie mniej, sądzę, że zamiast poświęcać czas na poszukiwania kolejnej wtyczki po to tylko, aby zrobić prostą modyfikację równie prostego widgetu, lepiej skorzystać z możliwości, jakie daje nam ACF i kilka linijek kodu PHP. Tym bardziej, że rezultat jest bardzo przyjazny w obejściu dla użytkownika strony i robi dokładnie to, co miał w założeniu robić.
Reasumując: chcesz dodać jakąś funkcjonalność do standardowego widgetu WordPressa? Pomyśl o Advanced Custom Fields. I nie, deweloperzy ACF nie płacą mi za reklamę 😉