Szukałem ostatnio funkcjonalnej wtyczki pozwalającej na przewijanie bannerów. Znalazłem rozwiązanie, które bardzo mi się spodobało. I choć sama wtyczka raczej należy do tych najprostszych, to zdobyła moje zaufanie, wdrożyłem ją do kilku projektów i z powodzeniem będę korzystał w kolejnych. Powyżej możesz zobaczyć cztery (z ośmiu) sposoby przewijania logotypów.

W tym kursie pokażę Ci jak zainstalować i skonfigurować wtyczkę o której wspomniałem, a także w jaki sposób uruchomić na stronie więcej niż jeden element z przewijanymi logotypami. Domyślnie wtyczka pozwala na umieszczenie jednego elementu przewijającego pliki .jpg, ale znalazłem sposób aby umieścić ich więcej.

Instalacja wtyczki

Wtyczka o której wspominam to WP-Cycle. Aby z niej skorzystać musisz wejść do sekcji Wtyczki -> Dodaj nową i następnie wpisać WP-Cycle w wyszukiwarkę, zainstalować wtyczkę o tej samej nazwie i ją uruchomić.

Do szczegółowych ustawień wtyczki możesz przejść poprzez sekcję Wtyczki -> Zainstalowane wtyczki i klikając na Ustawienia przy nazwie wtyczki. Jest też prostszy sposób. Wystarczy, że rozwiniesz sekcję Media i oprócz Biblioteka i Dodaj nowe powinna pojawić się trzecia opcja czyli WP-Cycle.

Dodawanie zdjęć do rotatora i konfiguracja

Po przejściu do ustawień zobaczysz najprawdopodobniej podobny ekran:

Zacznijmy może od dodawania nowych zdjęć. Zanim przystąpisz to wgrywania ich na serwer upewnij się, że zdjęcia są odpowiednich rozmiarów. Moja boczna kolumna ma 300 pikseli na szerokość, dlatego przygotowałem logotypy wielkości 300x200px. Do edycji rozmiaru lub przycięcia zdjęć możesz użyć dowolnego edytora graficznego (Photoshop, Gimp, Paint) lub edytora on-line (PhotoCat, Online Photo Editor, Fotor itp.).

Teraz możesz już skorzystać z opcji Upload New Image:

Po dodaniu zdjęć pozostało już tylko ustawienie efektu w jaki mają zmieniać się zdjęcia (preferuję fade i scrollLeft ale czuj się swobodnie i eksperymentuj sprawdzając różne opcje pod Transition Effect – tu nie da się niczego zepsuć), czasu w sekundach przeznaczonego na zmianę (ustawiłem Transition Delay na 2 sekundy, ale dostosuj opcję pod siebie) oraz rozmiar zdjęć (u mnie było 300x200px i tyle było domyślnie ustawione więc nie musiałem nic zmieniać). W opcji Rotator DIV ID nie musisz nic zmieniać.

Umieszczenie rotatora w bocznej kolumnie

Do wywołania zmieniających się w bocznej kolumnie zdjęć używa się shortcode’u [wp_cycle]. Problem w tym, że shortcode domyślnie nie będzie działał wpisany do widgetu tekstowego. Dlatego przed umieszczeniem rotatora musimy jeszcze wprowadzić jedną drobną modyfikację.

Otwórz sekcję Wygląd -> Edytor i wejdź do edycji pliku functions.php. Teraz pomiędzy znacznikami <?php i ?> wklej poniższy fragment kodu:

 add_filter('widget_text', 'do_shortcode'); 

To wszystko. Możesz teraz przejść do sekcji Wygląd -> Widgety i umieścić widget tekstowy o dowolnym tytule z treścią [wp_cycle]. Ważne jest aby nie pisać [wp-cycle], bo chociaż nazwa wtyczki jest z myślnikiem, to shortcode zawiera znak podkreślenia. To wystarczy aby rotator pojawił się w bocznej kolumnie Twojej strony.

Warto zauważyć, że rotator po najechaniu kursorem myszy zatrzymuje się, dzięki czemu użytkownicy nie będą mieli problemu z przejściem na stronę, która się za nim kryje.

Drugi rotator

Wtyczka obsługuje tylko jeden rotator, ale jeśli potrzebujesz drugi, który będzie działał podobnie jak pierwszy to wykonaj poniższe kroki:

1. Zaloguj się przez klienta FTP na swoją stronę. Tu znajdziesz podpowiedź jak to zrobić.
2. Wejdź do katalogu /wp-content/plugins/
3. Skopiuj z serwera na dysk katalog /wp-cycle z Twoją wtyczką do rotatora
4. Zmień nazwę katalogu np. na /wp-cycle2
5. Przenieś katalog z zawartością do /wp-content/plugins na serwerze
6. Rozpocznij edycję pliku /wp-content/plugins/wp-cycle2/wp-cycle.php

Ja korzystam z edycji z programu Notepad++ który ma wbudowane narzędzie zamieniania dowolnego tekstu na inny. Właśnie z tej opcji skorzystałem zmieniając wszystkie „wp_cycle” na „wp_cycle2” oraz „wp-cycle” na „wp-cycle2”.

Jesteśmy już na finiszu. Pozostało teraz tylko włączyć nową wtyczkę o nazwie wp-cycle2, przejść do Media -> wp-cycle2 i umieścić zdjęcia do drugiego rotatora oraz we właściwy sposób go skonfigurować.

Zwróć uwagę na Rotator DIV ID – tym razem zawartość tego pola nie może być taka sama jak pola w pierwszym rotatorze. Ja dodałem na końcu cyfrę 2. Kiedy to już zrobisz umieść w sekcji Wygląd -> Widgety kolejny widget tekstowy wywołujący drugi rotator. Tym razem wpisz shortcode [wp_cycle2]. Po przejściu na stronę zobaczysz dwa działające rotatory. Dobra robota!