Jak dodać pole na widgety WordPress – poradnik krok po kroku

Prowadząc bloga nadchodzą takie momenty, w których chcemy umieścić w pewnych miejscach dodatkowe elementy, np. reklamy w postaci banerów czy formularz zapisu na listę mailingową nad każdym wpisem.

Najłatwiejszym sposobem, aby to zrobię będzie dodanie nowego pola na widgety, w którym następnie umieścisz to, co jest Ci w danej chwili potrzebne. Wiele płatnych motywów do WordPressa posiada od razu takie miejsca, z reguły na początku oraz na końcu wpisu (tak jest m.in. w DIVI, które od lat używam i szczerze polecam). Jeśli jednak Twój motyw nie posiada takich funkcjonalności, wystarczy trochę kodu, chęci i czasu, aby dodać odpowiednie miejsca do Twojej templatki. W tym artykule pokażę Ci krok po kroku jak dodać pole na widgety. A więc zaczynajmy 🙂

Nim przystąpimy do działania, potrzebujemy kilka rzeczy wyjaśnić:

1. Wszelkie wprowadzane zmiany robisz na własną odpowiedzialność, dlatego zawsze przed edytowaniem jakichkolwiek plików wykonaj najlepiej kopię całego katalogu z motywem na swój dysk komputera. Dzięki temu w przypadku jakiegoś błędu szybko przywrócisz wcześniejszą wersję.
2. Zmiany najlepiej wykonać na testowej wersji serwisu. Jeśli jeszcze nie wiesz jak wykonać kopię swojej strony np. do testów różnych rzeczy, to w tym wpisie dokładnie tłumaczę jak wykonać kopię serwisu za pomocą Duplicatora.

Jeśli nadal czujesz się na siłach, aby trochę „pomajsterkować” w kodzie, to zapraszam do dalszej części.

Jak uaktywnić dodatkowe pole na widgety WordPress? – edycja pliku functions.php

Pierwszą rzeczą, jaką należy zrobić, to dopisanie nowego pola widgetów do pliku functions.php. Jeśli jeszcze nigdy nie edytowałeś/aś motywu WordPressa, plik ten znajduje się w katalogu wp-content -> Twój-motyw na serwerze. Z serwerem łączymy się za pomocą klienta FTP, np. FileZilla. Otwieramy ten plik w edytorze HTML/PHP (osobiście używam Visual Studio Code, dawniej korzystałem z Sublime Text lub Notepad++). Jeżeli jeszcze nie masz takiego edytora, to przed przystąpieniem do edycji należy go zainstalować na komputerze.

Następnie deklarujemy nowe pole wigdetów wg wzoru:

register_sidebar( array(
'name' => esc_html__( 'Tytuł Twojego obszaru widgetów' ),
'id' => 'id-obszaru',
'description' => esc_html__( 'Opis obszaru.', 'nazwa szablonu' ),
'before_widget' => 'znaczniki HTML poprzedzające widget',
'after_widget' => 'znaczniki HTML za widgetem (zamknięcie tych otwartych w before)',
'before_title' => 'znaczniki HTML przed tytułem widgetu',
'after_title' => 'zamknięcie znaczników HTML za tytułem widgetu',
));

Kilka słów wyjaśnienia odnośnie poszczególnych argumentów:

• name – odpowiada za nazwę wyświetlaną w kokpicie WordPressa w sekcji Wygląd -> Widgety
• id – to identyfikator pola widgetów (musi być unikalny!)
• description – to opis pola widgetów widoczny po stronie administratora bloga
• before_widget – w tym miejscu możesz wstawić dowolne znaczniki, które zostaną wstawione przed każdym widgetem
• after_widget – w tym miejscu możesz wstawić dowolne znaczniki, które zostaną wstawione po każdym widgetcie  (znaczniki zamykające)
• before_title – w tym miejscu wstawiasz znaczniki użyte przed tytułem widgetu
• after_title – w tym miejscu wstawiasz znaczniki użyte po tytule widgetu

A tak to wygląda w jednym z moich szablonów:

// sidebar-reklamowy
register_sidebar(array(
'name' => esc_html__('ReklamaGora', 'udesign'),
'id' => 'page-reklamy-up',
'description' => esc_html__('Sidebar na stronach powyzej tekstu', 'udesign'),
'before_widget' => '<div class='reklama'>',
'after_widget' => '</div>',
'before_title' => '<h3 class='before_cont_title'>',
'after_title' => '</h3>',
));

Jak widzisz możesz od razu do znaczników HTML dopisać odpowiednie klasy, które ostylujesz w pliku CSS w motywie. Tym oto sposobem zdefiniowane zostało nowe pole widgetów. Teraz pozostaje jeszcze dodać widget w odpowiednie miejsce na stronie. Ja zawsze chcąc sprawdzić gdzie mam coś umieścić używam takiej magicznej funkcji w Operze jak Zbadaj element. Aktualnie posiada to każda przeglądarka.

Gdzie dodamy nowe pole na widgety WordPress?

Ponieważ potrzebujemy najpierw wiedzieć w którym miejscu w motywie dodamy pole na widgety, przy pomocy wspomnianej wyżej funkcji musimy odszukać gdzie zaczynają się posty (wpisy na blogu). Jak to zrobić? Wystarczy otworzyć np. wpis na blogu, następnie klikamy prawym przyciskiem myszy na element w obrębie którego chcemy umieścić nowe pole i wybieramy Zbadaj element. Dalej klikamy w początek wpisu.

 Jak widzisz w moim przypadku wpis znajduje się w znaczniku:

<div class='main-content-padding'>

Ponieważ za wyświetlanie wpisów odpowiada w WordPressie plik single.php, na 99% ten fragment kodu się w nim znajduje. Jeżeli po otwarciu okazałoby się, że go tam nie ma, szukaj w pliku header.php lub content.php. Innym sposobem może być pobranie całego motywu na dysk i przeszukanie katalogu w poszukiwaniu tekstu.

Jak widzisz powyższa linia znajduje się w tym pliku, dlatego powyżej tej linii wstawiamy następujący kod:

<?php if( sidebar_exist('ReklamaGora') ) { ?>
<div id='reklama-main';>
<?php get_sidebar('ReklamaGora'); ?>
</div>
<?php } ?>

W kodzie użyte zostały dwie funkcje WordPressa: sidebar_exist oraz  get_sidebar. Pierwsza sprawdza, czy pole na widgety o nazwie ReklamaGora istnieje. Jeżeli tak, to wtedy wykonywany jest kod znajdujący się między nawiasami klamrowymi. Natomiast druga funkcja odpowiedzialna jest za wyświetlanie w pętli wszystkich widgetów znajdujących się w elemencie ReklamaGora.

Po edycji pliku wygląda to następująco:

Plik zapisujemy i aktualizujemy na serwerze. Teraz jeśli chcemy dodać jakiś widget, np. reklamę, przechodzimy do menu Wygląd -> Widgety i odnajdujemy nasze pole, tzn. ReklamaGora.

Jak widzisz w tym polu mam wstawiony widget tekstowy, w którym wstawiłem kod html reklamy (np. baner reklamowy). Poniżej możesz zobaczyć jak to wygląda w praktyce.

Na dzisiaj to wszystko. Mam nadzieję, że wpis okaże się dla Ciebie pomocny. Jeśli zobaczysz jakieś niedociągnięcia lub masz uwagi zostaw poniżej komentarz.