W Easy Digital Downloads (EDD) krótki kod [downloads] jest standardowym sposobem wyświetlania wszystkich Twoich produktów na jednej stronie. Jeśli nie znasz tego krótkiego kodu i jego możliwości, możesz o nim przeczytać tutaj.
Domyślnie Twoje produkty będą wyświetlane w układzie siatki z trzema kolumnami, dziewięcioma produktami i paginacją, jeśli masz więcej niż dziewięć produktów w swoim sklepie. W większości motywów ten wyświetlacz spełnia swoje zadanie bez dodatkowego CSS (stylów projektowych) z samego motywu. Jednakże, może nie wyglądać dokładnie tak, jak chcesz, we wszystkich motywach. Co gorsza, wyświetlanie może zostać zniekształcone na mniejszych ekranach.
Zazwyczaj prowadzi to do pytania: „Czy krótki kod [downloads] jest responsywny?” Innymi słowy, ludzie często zastanawiają się, dlaczego wyświetlanie nie wygląda tak dobrze na małych ekranach. Poniżej wyjaśnię dlaczego i co możesz z tym zrobić.
Dlaczego krótki kod [downloads] nie jest responsywny?
Pierwszą rzeczą, którą należy zauważyć, jest to, że responsywność nie jest zachowaniem uniwersalnym. Responsywność elementu zależy całkowicie od środowiska, w którym jest zawarty.
Na przykład, załóżmy, że jest sekcja Twojej witryny z dwiema kolumnami obok siebie wypełnionymi tekstem, obie zajmujące 50% szerokości głównego obszaru treści. Załóżmy również, że główny obszar treści „trzymający” te podwójne kolumny ma szerokość 1000px. Oznacza to, że każda kolumna ma szerokość 500px. Gdy szerokość ekranu staje się mniejsza na mniejszych urządzeniach, gdzieś w okolicach szerokości obszaru treści 600px, kolumny o szerokości 300px stają się nieco zbyt wąskie. Jest to niepożądane, więc responsywny CSS używa reguł, aby powiedzieć: „przy szerokości ekranu 600px, zmień szerokość tych dwóch kolumn z 50% na 100%, a także umieść lewą nad prawą”. I dzięki temu obie ponownie stają się czytelne.
Tak dokładnie działa responsywny CSS i jest to robione celowo.
Przy takim zrozumieniu staje się jasne, że aby napisać responsywny CSS, który sprawi, że te podwójne kolumny „zareagują” na szerokość ekranu, musimy również znać wymiary elementów otaczających kolumny. W kontekście WordPress oznacza to, że musimy znać projekt i wymiary Twojego motywu.
Oczywiście, nie możemy znać szczegółów wszystkich motywów, których mogą używać nasi klienci. Chociaż Twój motyw może wyświetlać krótki kod [downloads] w elemencie o szerokości zaledwie 500px, motyw następnej osoby może wyświetlać ten sam krótki kod w elemencie o szerokości 900px. Twój responsywny CSS musiałby być znacznie inny niż responsywny CSS innej osoby. A jeśli zmienisz motyw, Twój responsywny CSS musiałby zostać ponownie zmieniony.
Innymi słowy, po prostu nie możemy przewidzieć, kiedy i jak krótki kod [downloads] powinien reagować na wszystkie motywy jednocześnie.
Czy istnieją motywy, które zawierają responsywny CSS dla krótkiego kodu [downloads]?
Tak jest! W większości motywów, które są zbudowane z myślą o EDD, jest to już zrobione. Na przykład motyw Vendd w pełni projektuje dane wyjściowe skrótu [downloads] dla wszystkich rozmiarów ekranu. Możesz zobaczyć to w wersji demonstracyjnej tutaj: https://easydigitaldownloads.com/vendd/ Vendd nie tylko sprawia, że skrót [downloads] jest responsywny, ale także ulepsza jego układ.
Jeśli motyw nie został ulepszony z myślą o EDD, dane wyjściowe skrótu nie będą responsywne. Będą wyświetlane zgodnie ze specyfikacją parametrów skrótu i nic więcej. Jeśli potrzebujesz, aby „odpowiadał” na rozmiar ekranu, musi to zostać napisane specjalnie z perspektywy Twojego motywu.
Należy również pamiętać, że niektóre motywy, które są ulepszone dla EDD, nadal mogą nie sprawić, że skrót [downloads] będzie responsywny. Zamiast tego będą zawierać własny szablon do wyświetlania produktów i sugerują użycie niestandardowego szablonu zamiast skrótu.
Duży wybór motywów gotowych na EDD jest dostępny tutaj: https://easydigitaldownloads.com/themes/
Co mam zrobić, jeśli nie używam motywu gotowego na EDD?
Jeśli chcesz nadal używać swojego motywu, który nie jest ulepszony dla EDD, ale chcesz również, aby dane wyjściowe skrótu [downloads] były responsywne, masz dwie opcje:
1. Jeśli jesteś autorem CSS, możesz po prostu napisać responsywny CSS, aby dane wyjściowe skrótu działały zgodnie z Twoimi życzeniami w Twoim motywie. Nie będziesz musiał martwić się, że EDD wprowadzi zmiany, które zepsują Twój CSS.
2. Zatrudnij projektanta, aby zrobił dla Ciebie responsywne dane wyjściowe. Nie jest to niezwykle trudne zadanie, więc projektant nie musi znać się na samym EDD. Responsywny CSS jest szeroko rozumianym stylem projektowania i praktycznie każdy autor CSS powinien być w stanie zobaczyć dane wyjściowe i uczynić je responsywnymi dla Twojego motywu. Jeśli chcesz skorzystać z usług profesjonalisty, który już zna ekosystem EDD, polecamy naszego zaufanego partnera, Codeable.
