Tworzenie FAQ

Ta strona opisuje pisanie FAQ i dokładnie to, jak zachowują się na karcie produktu.

Dodawanie FAQ do produktu

1. Otwórz produkt w edytorze.
2. W panelu Dane produktu otwórz zakładkę FAQs.
3. Kliknij Add question, żeby dodać wiersz. Pytanie wpisz w górnym polu, odpowiedź w polu tekstowym pod nim.
4. Powtórz dla każdego pytania. Przycisk × w wierszu go usuwa.
5. Zaktualizuj produkt.

Pytania pojawiają się w sklepie w kolejności, w jakiej je wpiszesz; nie ma przeciągania, kolejność zmieniasz, edytując wiersze. Wiersz zapisuje się tylko wtedy, gdy ma wypełnione i pytanie, i odpowiedź. Puste wiersze (albo z jednym polem) są przy zapisie pomijane, więc niedokończony wiersz po prostu się nie zapisze. Jeśli wszystkie wiersze są puste, metadane FAQ zostają całkowicie usunięte z produktu.

Repeater działa bez JavaScriptu: istniejące wiersze renderują się po stronie serwera i można je edytować, a “Add question” klonuje ukryty wiersz wzorcowy, gdy JavaScript jest dostępny.

HTML w odpowiedziach

Pytania to zwykły tekst. Odpowiedzi przyjmują podstawowy HTML, filtrowany przez wp_kses_post, czyli ten sam bezpieczny zestaw, na który WordPress pozwala w treści wpisów: linki, listy, <strong>/<em>, cytaty i podobne. Skrypty i inny niebezpieczny kod są usuwane dwa razy: przy zapisie i ponownie przy wyświetlaniu odpowiedzi. W sklepie odpowiedź przechodzi też przez wpautop, więc zwykłe podziały wierszy stają się akapitami.

Co się renderuje i gdzie

Gdy ładuje się strona produktu, Respondo odczytuje pozycje FAQ produktu i:

• rejestruje zakładkę informacji o produkcie FAQs (priorytet 25, między Opisem a Opiniami, albo z Twoją nazwą zakładki),
• renderuje w niej akordeon,
• ładuje CSS i JS FAQ, ale tylko na stronach pojedynczego produktu i tylko wtedy, gdy produkt ma co najmniej jedno użyteczne FAQ.

Produkt bez FAQ nie dostaje zakładki i niczego nie ładuje. Renderuje się każdy zapisany wiersz, w Twojej kolejności: nie ma limitu liczby pozycji, a powtórzone pytania nie są scalane, więc akordeon pokazuje dokładnie to, co widać w zakładce FAQs.

Działanie akordeonu

Każde FAQ to <h3> z przyciskiem <button>, który steruje panelem-regionem:

• Kliknięcie przycisku (albo Spacja/Enter, gdy ma fokus, co jest natywnym zachowaniem <button>) przełącza panel. aria-expanded jest aktualizowane na bieżąco, a zamknięty panel ma atrybut hidden.
• Każdy panel to role="region" opisany przez swój przycisk przez aria-labelledby, więc użytkownik czytnika ekranu może do niego przejść i usłyszeć, do którego pytania należy.
• Przycisk z fokusem ma widoczny obrys focus-visible.
• Panele otwierają się i zamykają z animacją wysokości; przy prefers-reduced-motion zmieniają się od razu.

Każde pytanie przełącza się niezależnie, otwarcie jednego nie zamyka pozostałych. Tab przechodzi między przyciskami pytań w kolejności dokumentu; nie ma nawigacji strzałkami w grupie (to niezależne przyciski rozwijania, a nie grupa opcji).

Bez JavaScriptu znaczniki pozostają poprawne: treść odpowiedzi jest dostępna, a strona nie jest zepsuta, panele są po prostu zwinięte.

Sprawdzenie

1. Otwórz produkt z FAQ i kliknij zakładkę FAQs, powinien pojawić się akordeon.
2. Przejdź klawiszem Tab do pytania i naciśnij Enter; pytanie powinno się rozwinąć, a aria-expanded przycisku powinno mieć wartość true.
3. Otwórz produkt bez FAQ i sprawdź, czy nie ma zakładki FAQs ani dodatkowego żądania CSS/JS.

Rozszerzanie (dla programistów)

Nie ma shortcode ani pliku szablonu do skopiowania do motywu: znaczniki renderuje sama wtyczka. Wygląd akordeonu zmienisz, nadpisując zmienne CSS --answers-* w motywie (Konfiguracja) albo stylując klasy .answers-faq*.

W kodzie darmowa wtyczka wywołuje te hooki (Respondo Pro buduje na nich głosowanie i kategorie):

• answers/faq_items (filtr), lista obiektów FaqItem do wyrenderowania dla produktu, z ID produktu jako drugim argumentem. Tu dodasz, usuniesz albo przestawisz pozycje.
• answers/faq_after_answer (akcja), po wyrenderowaniu każdej odpowiedzi, z ID produktu, indeksem od zera i obiektem FaqItem.
• answers/faq_repeater_after_answer (akcja), po polu odpowiedzi w każdym wierszu repeatera w panelu, z indeksem wiersza, danymi wiersza, bazą nazwy pola i informacją, czy to ukryty wiersz wzorcowy.
• answers/faq_repeater_sanitize_row (filtr), oczyszczona para question/answer przed zapisem, z surowym przesłanym wierszem jako drugim argumentem. Zwróć coś, co nie jest tablicą, żeby pominąć wiersz.
• answers/booted (akcja), wywoływana raz z instancją wtyczki po starcie Respondo.