Czego szukasz?

Jeżeli szukasz odpowiedzi na pytania związane z SEO lub Wordpressem wpisz frazę i czekaj na podpowiedzi lub kliknij enter! Wyniki pokazują także linki do zewnętrznych źródeł.

3055 artykułów w bazie

Jak dodać obszar dla widgetów w WordPress

Motywy dla WordPress zwykle mają kilka wbudowanych obszarów dla widgetów (Widget Area), ale bardzo często ich rozmieszczenie jest ograniczone kolumną boczną i stopką.  W przypadku, gdy trzeba dodać taki obszar na początek strony lub w nagłówek oraz zmienić kolejność obszarów na różnych stronach www, trzeba korzystać z dodatkowych komponentów lub rozwiązywać ten problem ręcznie. Dlatego dziś pokażemy prosty przykład jak prosto zarządzać obszarami dla widgetów w WordPress CMS, dodając potrzebne zmiany w kodzie motywu.

Dodanie nowego obszaru dla widgetów

Proces dodania obszaru dla widgetów na stronę www składa się z dwóch ważnych kroków. Pierwszy z nich – to rejestracja nowego obszaru dla widgetów w pliku functions.php, a drugi – dodanie wywołania stworzonego obszaru widgetów w dowolnym miejscu w pliku motywu.

Miejsce dodania obszaru w plik motywu zależy od tego, gdzie należy go wyświetlać na stronie www. W naszym przykładzie, jest to nagłówek strony internetowej. My użyjemy darmowego motywu Twenty Fifteen, która jest ustawiona domyślne w WordPressie.  W rezultacie, po wprowadzeniu wszystkich zmian powinniśmy uzyskać stronę www z obszarem dla widgetów w nagłówku (rys.1). W wersji końcowej będzie to prosty tekstowy widget oraz wyszukiwarka.

Obszar 4

Rysunek 1. Obszar dla widgetów w nagłówku strony www

Rejestrowanie obszaru dla widgetów

Zarejestrować obszar dla widgetów – to po prostu powiedzieć WordPress CMS o nim. Pod czas rejestracji obszaru w WordPress, ostatni sam dodaje go jako opcję w sekcji panelu administracyjnego Wygląd -> Widgety. Po tym jak obszar będzie zarejestrowany w tej seksji panelu administracyjnego można dodawać do niego potrzebne nam widgety.

Aby zarejestrować obszar dla widgetów, musimy edytować plik functions.php naszego motywu. Najłatwiej dostać się do niego przez klienta FTP lub poprzez edytor plików szablonu wbudowany w WP. Ścieżka do podanego pliku:  …/wp-content/themes/NASZ_MOTYW/functions.php, gdzie NASZ_MOTYWto edytowany przez nas mowyw.  W naszym przypadku ścieżka jest taka: …/wp-content/themes/twentyfifteen/functions.php.

Otwieramy plik functions.php i szukamy linijkę register_sidebar. W przypadku, gdy udało się ją znaleźć, oznacza to, że motyw już ma zarejestrowany obszar dla widgetów.  A w przypadku, gdy NIE udało się znaleźć – należy samemu zarejestrować obszar dla widgetów (o czym będziemy pisać dalej). Nasz motyw Twenty Fifteen już zawiera jeden obszar dla widgetów i definiuje go taki kod:

Dlatego wystarczy tylko skopiować całą tablicę register_sidebar i wprowadzić odpowiedni zmiany w atrybuty, które mają następujące znaczenia:

  • name – nazwa obszaru;
  • id – unikalny identyfikator obszaru, który nigdy nie powinny powtarzać się przy tworzeniu innych obszarów;
  • description – opis obszaru;
  • before_title – HTML kod, którzy będzie umieszczony przed tytułem;
  • after_widget – HTML kod, którzy będzie umieszczony po tytule;
  • before_widget – HTML kod, którzy będzie umieszczony przed widgetem;
  • after_widget – HTML kod, którzy będzie umieszczony po widgetu.

Po wprowadzeniu wszystkich zmian, kod w functions.php powinny wyglądać następująco:

Jak już wspominaliśmy powyżej, w przypadku, gdy NIE udało się znaleźć linii register_sidebar w pliku functions.php, trzeba samemu dodać potrzebny kod. Także trzeba połączyć obszar dla widgetów z funkcją widgets_init. W naszym przypadku ostateczny fragment kod umusiałby wyglądać tak:

Po prowadzeniu potrzebnych zmian w pliku functions.php, możemy przejść do kolejnego kroku.

Dodanie obszaru dla widgetów w wybrane miejsce

Po rejestracji obszaru dla widgetów należy dodać go w potrzebne miejsce na stronie www. W naszym przypadku – to nagłówek, więc będziemy edytować plik header.php.  Jeżeli obszar dla widgetów powinien mieć inną lokację, trzeba edytować pliki sidebar. php,footer.php, index.php itd.

Przejdziemy do pliku header.php, który znajduje się w tym samym katalogu, co plik funktions.php (w większości motywów). Przy jego edycji skorzystamy z dwóch wbudowanych funkcji WordPress: is_active_sidebar i dynamic_sidebar. Pierwsza funkcja sprawdza, czy zawiera obszar dla widgetów jakikolwiek widget, a druga – sprawdza widgety przypisane do tego obszaru widgetów. Obie funkcje przyjmują atrybut „id”, jaki zarejestrujemy jako header-1:

Dodajemy nasz obszar dla widgetów wraz po ostatniej linii kodu <div id=”content” class=”site-content”>. W rezultacie otrzymamy (rys. 2):

Obszar 1

Rysunek 2. Edytowanie pliku header.php

W przypadku, gdy wszystko zrobiono poprawnie, obszar widgetów pojawi się w sekcji Wygląd -> Widgety panelu administracyjnego WordPress (rys.3).

Obszar 2

Rysunek 3. Obszar dla widgetów w sekcji Widgety

No i na sam koniec dodajemy dwa standardowe widgety – Tekst i Wyszukiwanie (rys.4):

Obszar 3

Rysunek 4. Dodanie widgetów do stworzonego obszaru

Aby obszar dla widgetów miał kreatywny wygład i pasował układowi strony www, należy zaktualizować arkusz stylów (.css). Dzięki temu można realizować jakikolwiek projekt, w zależności od waszych potrzeb.

Podsumowanie

Podsumowując, chcę dodać, że WordPress CMS nie ma wbudowanych instrumentów dla tworzenia obszarów dla widgetów, czegoś takiego, co ma, na przykład, Joomla. Natomiast ma on szereg wtyczek dla tworzenia takich obszarów (np. Easy Custom Sidebars), co robie ten proces prostym, pozwalając dodawać potrzebujące widgety na stronach www. W naszym przypadku pokazaliśmy Państwu ręczny sposób edytowania motywu, który pozwała realizować swoje pomysły bez użycia zewnętrznych komponentów.  Nie jest on zbyt trudny, zwłaszcza dla osób posiadających pewnego doświadczenia w HTML i CSS.

Na sam koniec, życzymy Państwu przyjemnego tworzenia własnych obszarów dla widgetów! Możecie podzielić się swoimi pomysłami w komentarzach poniżej.

Udostępnij na: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

5 komentarzy

Zostaw odpowiedź

Email nie będzie publikowany. Wymagane pola są oznaczone *

Możesz używać tych tagów HTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Oferuję szereg usług związanych z WordpressemSPRAWDŹ OFERTĘ
Przeczytaj inne:
Przygotowujemy optymalną stronę “kontakt”

Wordpress ma to do siebie, że jeden problem zazwyczaj możemy rozwiązać za pomocą co najmniej kilkudziesięciu wtyczek. Miimo tego trafiają...

Zamknij