Przejdź do głównej zawartości

Pierwsze kroki

Większość sklepów ma bogatszą galerię w kilka minut. Reel działa z sensownymi wartościami domyślnymi, zainstaluj, otwórz menu Reel, włącz funkcje, których chcesz używać.

  • WordPress 6.5 lub nowszy
  • Aktywne WooCommerce
  • PHP 8.1 lub nowszy
  1. Zainstaluj WooCommerce i upewnij się, że jest aktywne.
  2. Zainstaluj Reel z katalogu wtyczek (gdy będzie dostępny na WordPress.org) lub wgraj folder reel do /wp-content/plugins/.
  3. Aktywuj wtyczkę.

Otwórz menu Reel i włącz funkcje, których chcesz używać:

  • Hover zoom, powiększanie obrazów galerii po najechaniu; ustaw siłę zoomu kontrolką na żywo i opcjonalnie pomiń ją na urządzeniach dotykowych.
  • Lightbox, otwieranie dowolnego obrazu galerii na pełnym ekranie; ustaw etykietę otwarcia i opcjonalny podpis z tekstu alternatywnego.
  • Wyróżnione wideo, wideo per produkt, wybór pozycji i autoplay oraz domyślny nagłówek i wstęp.

Aby pokazać wideo, ustaw adres w polu meta produktu _reel_video_url. Pliki self-hosted (MP4, M4V, WebM, OGV) odtwarzają się natywnym playerem WordPress; dowolny adres oEmbed (YouTube, Vimeo itd.) jest osadzany automatycznie. Wideo siedzi w ramce o stałych proporcjach 16:9, która rezerwuje miejsce przed załadowaniem. Opcjonalne _reel_video_title nadpisuje domyślny nagłówek dla danego produktu.

  1. Otwórz pojedynczy produkt z galerią.
  2. Najedź na obraz galerii, powinien powiększyć się w ramce.
  3. Kliknij (lub naciśnij Enter/Spację) obraz, lightbox powinien otworzyć się na pełnym ekranie, uwięzić fokus na kontrolce zamknięcia i zamknąć się Escape lub kliknięciem tła.
  4. Jeśli ustawiłeś wideo, sprawdź, czy pojawia się w ramce 16:9 w wybranej pozycji.

Reel dostarcza jeden mały plik vanilla JavaScript, ładowany w stopce z deferem, tylko na karcie pojedynczego produktu. Lightbox to nakładka fixed startująca jako ukryta, transform zoomu jest przycięty do ramki galerii, a ramka wideo rezerwuje miejsce, więc nie ma Cumulative Layout Shift. Lightbox jest w pełni obsługiwany z klawiatury, ma pułapkę fokusa na kontrolce zamknięcia, przywraca fokus po zamknięciu i zamyka się Escape lub kliknięciem tła, a stylowanie respektuje prefers-reduced-motion.

Darmowa edycja pokrywa hover zoom, dostępny lightbox i wyróżnione wideo. Reel PRO dodaje wideo zewnętrzne, galerie wariantów, spin 360 stopni, reguły autoplay wideo i media lazy z CDN, nie podstawowe ulepszenie galerii.