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

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

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 widgety, np. z reklamami czy z formularzem zapisu na listę adresową nad każdym wpisem. Najłatwiejszym sposobem 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 szablonów posiada od razu takie miejsca, często na początku oraz na końcu wpisu (tak jest m.in. szablony Elegant Themes). Jeśli jednak Twój szablon nie posiada takich funkcji, bardzo łatwo je dodasz dzięki temu tutorialowi. A więc zaczynajmy 🙂

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ś szablonu WordPress-a, plik ten znajduje się w katalogu wp-content -> Twój-szablon na serwerze. Otwieramy ten plik w notatniku, czy jakimś innym edytorze tekstowym (tylko nie w Wordzie). 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śnień odnośnie poszczególnych argumentów:

  • name – odpowiada za nazwę wyświetlaną w kokpicie WordPress-a w sekcji Wygląd -> Widgety
  • id – to identyfikator pola widgetów
  • 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 opiszesz w pliku stylów. 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. W Chrome też jest taka funkcja, natomiast w Firefoxie trzeba doinstalować sobie dodatek Firebug.

Gdzie dodamy nowe pole na widgety WordPress?

Ponieważ potrzebujemy najpierw wiedzieć w którym miejscu w szablonie dodamy pole na widgety przy pomocy wspomnianej wyżej funkcji musimy odszukać gdzie zaczynają się posty. Jak to zrobić? Wystarczy w dowolnym miejscu na stronie, następnie klikamy prawym przyciskiem myszy i wybieramy Zbadaj element. Dalej klikamy w początek wpisu.

pole na widgety wordpress - badanie wpisu przy pomocy narzędzia deweloperskiego w operze

Badanie elementu HTML w Operze

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

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

Ponieważ za wyświetlanie wpisów odpowiada w WordPress-ie 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.

pole na widgety wordpress w pliku single.php

W tym miejscu wstawiasz kod pola na widget w pliku single.php

Jak widzisz powyższa linia znajduje się w tym pliku, dlatego powyżej niej 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 WordPress-a: 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 polu ReklamaGora.

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

wstawiony kod - pole na widgety wordpress

Plik single.php po dodaniu kodu pola na widgety

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.

Pole na widgety WordPress w kokpicie administratora

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

Reklama w nowym polu widgetów

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.

25 Komentarze
  1. Świetny wpis. A może w kolejnym wpisie z tego typu opis wykorzystania Twenty Twelve i ustawienie Front Page 😀 Nie znalazłem jeszcze po polsku tutka o tym motywie 😀 Pozdrawiam

    • Dzięki Kuba za feedback 🙂 pomyślę nad tym, bo faktycznie dużo można zrobić z domyślnym szablonem, a tutków po polsku praktycznie w sieci za dużo się nie znajdzie.

  2. W takim razie oczekuję z niecierpliwością na kolejny wpis 😀

  3. Bardzo ciekawy artykuł, czegoś takiego szukałam a tu jest wszystko świetnie wyjaśnione krok po kroku co robić 🙂

  4. Dzięki za poradnik, kilkakrotnie miałem problem z dodaniem reklam AdSense a wystarczyło wstawić dodatkowe pole i problem z głowy, dzięki jeszcze raz, liczę na większą ilość tego typu TuT’ków.
    Kamil ostatnio opublikował…Rail NationMy Profile

  5. Piotrze,
    nie umiem sobie poradzić z ustawieniem tego pola. Czy zechciałbyś mi pomóc? Wybacz, że Cię angażuję – dopiero zaczynam. Blog, który prowadzę jest wierną kopią http://superzarobek.wordpress.com Chciałbym go zmienić zupełnie.
    Będę Ci dozgonnie wdzięczny za pomoc.

  6. Witam.
    Dzięki za fajną poradę. Zauważyłem, że w opisie „RekalamaGora” piszesz bez polskich znaków.
    Czy to w tym przypadku ma znaczenie?

  7. Jak dodać widget na tej głównej stronie, który pokaże mi najnowsze posty w poszczególnych kategoriach w dwóch kolumnach?

    • Magda jak dobrze zrozumiałem chcesz mieć na stronie głównej artykułe podzielone na dwie klumny? Żeby to zrobić musisz edytować swój plik index.php w swoim szablonie i tam zmienić pętlę odpowiadającą za wyświetlanie Twoich wpisów. Ponieważ nie wiem jak dokładnie wygląda Twój plik ciężko coś więcej doradzić. Niektóre szablony, jak np. U-Design, ma możliwość dowolnego tworzenia strony główej i posiada wygodne shortcode (krótkie kody, które wywołują kod PHP w momencie generowania strony), przy pomocy których możesz stworzyć taką stronę główną jak jest widoczna na moim blogu.

  8. Super temat do opisania! Nowe pola w widgetach przydają się jak mało co w WP.

  9. Absolutnie genialny poradnik! Chciałem sobie dodać widgety Social Media na swoim WP, ale skórka, którą wybrałem i która mi pasuje mi na to nie pozwalała, tzn. widget się instalował, ale nie wyświetlał na stronie, a dzięki temu poradnikowi poradziłem sobie z tym problemem 🙂

    Jeszcze raz dzięki.

  10. O świetny, świetny poradnik. Przyznam szczerze, że przez spory czas zaniedbywałem Social Media, a tu proszę – bardzo się opłaca zeń korzystać. 🙂

  11. Dzięki za pomoc! Przydała mi się dana rada w przypadku dodawania pola widgetu do stopki na jednej z mojej stron postawionych na wordpresie. Chciałem uzupełnić footera jednak nie mogłem tego zrobić ponieważ były tylko 3 pola widgetu, a potrzebowalem 4. Dobrze i prosto napisane, jeszcze raz dzięki za pomoc 🙂

  12. Cześć Piotrze,

    A mnie nie działa,
    Po wywołaniu tego nowego sidebara w pliku header.php, zrwaca mi fatal error, że „sidebar_exist()” nie istnieje.
    A jak „sidebar_exist” wyrzuce to nic a nic się nie dzieje.
    Poniżej wklejam co napisałem.
    Może cośpomożesz:

    functions.php

    // Location: Header Sidebar
    register_sidebar(array(
    ‚name’ => esc_html__(‚Header second column’, ‚udesign’),
    ‚id’ => ‚container’,
    ‚description’ => esc_html__(‚Sidebar na górze strony’, ‚udesign’),
    ‚before_widget’ => ”,
    ‚after_widget’ => ”,
    ‚before_title’ => ”,
    ‚after_title’ => ”,
    ));

    header.php

    Pozdrawiam,

    Piotrek

  13. // Location: Header Sidebar
    register_sidebar(array(
    ‚name’ => esc_html__(‚Header second column’, ‚udesign’),
    ‚id’ => ‚container’,
    ‚description’ => esc_html__(‚Sidebar na górze strony’, ‚udesign’),
    ‚before_widget’ => ”,
    ‚after_widget’ => ”,
    ‚before_title’ => ”,
    ‚after_title’ => ”,
    ));
    Piotrek ostatnio opublikował…1proc_logo_bisMy Profile

  14. to pole komentarza trochę przekłamuje to co wklaiłem
    Piotrek ostatnio opublikował…1proc_logo_bisMy Profile

  15. Bardzo ciekawa porada- wprawdzie większość stron opieram na szablonach premium ale w razie potrzeby będę miał gotowe rozwiązanie..dzięki

  16. Pięknie wytłumaczone i objaśnione. Bardzo mi pomogło dodać dodatkowy boczny sidebar do motywu potomnego Twenty Twelve. Jasnp i czytelnie, oby więcej takich porad. Dzięki!

  17. Dziękuję za wskazówki. W podobny sposób postaram się wygospodarować przestrzeń na baner reklamowy na jednym z prowadzonych przeze mnie blogów.

  18. Dzięki za porady! Tworze właśnie bloga dla sklepu, przyda się

  19. Świetny artykuł. Bardzo mi pomógł i z pewnością będę stałym bywalcem na stronie. Pozdrawiam 🙂

  20. nie lubię babrać w kodach php, wolę do tego użyć wtyczki (które są dostępne za darmo)

    • Paweł stosowanie wtyczek na wszystko nie zawsze jest dobrym rozwiązaniem. Oczywiście warto sprawdzić, czy jest wtyczka, która oferuje dane funkcjonalności. Natomiast jeśli chodzi o dodawanie kolejnych widgetów to osobiście uniwersalnej wtyczki nie znalazłem, no chyba że dany szablon oferował możliwość umieszczania pól widgetów w różnych miejscach.

  21. Hej, mam problem z dodaniem opisu „o blogu/ o sobie”. Od razu przyznam, że dopiero raczkuję w temacie wordpressa i nie do końca jeszcze ogarniam jego tajniki 🙂 Założyłam bloga i mam stronę główną i po prawej stronie panel boczny, gdzie dodałam nowy widget/sidebar z własnego menu „o blogu” i chciałabym dodać tam wpis i zdjęcie o blogu i o sobie. Pytanie, jak to zrobić? Oprócz tego sidebaru mam również „kategorie”, archiwum” i tagi. I te sidebary udało mi się ogarnąć, natomiast nie mam pojęcia jak dodać cokolwiek do „o blogu”. Finalnie zalezy mi na tym, aby po wejściu na stronę była strona główna a po prawej w panelu bocznym było „o blogu”, pod napisem zdjęcie i żeby po kliknięciu na zdjęcie wyświetlał się opis o blogu i o mnie. Tylko jak to zrobić? Jest szansa na pomoc?

    • Monika najłatwiej to będzie wykorzystać widget tekstowy i dodać tam odpowiednią treść. Można w nim użyć treści w HTML, także z odpowiednim znacznikiem dodasz też zdjęcie. Domyślam się, że HTML to dla Ciebie czarna magia, także wejdź sobie w DODAJ NOWĄ STRONĘ, napisz w edytorze wizualnym WP treść i dodaj zdjęcie, a później przełącz się na tryb tekstowy edytora, skopiuj wszystko i wklej do widgeta 🙂

Dodaj komentarz


CommentLuv badge
Share This
Przeczytaj poprzedni wpis:
źródło: http://www.flickr.com/photos/alanant/6664570495/
Komentarze Disqus na WordPress

Komentarze Disqus na Wordpress W dzisiejszym artykule pokażę jak w kilku prostych krokach uruchomić komentarze Disqus na Wordpress. Ponieważ system...

Zamknij