Jak dodać i podlinkować baner graficzny w szablonie RWD? Instrukcja dla WordPressa

Przygotuj grafikę, adres docelowy, tekst alternatywny i dostęp do właściwego miejsca edycji. Adres URL powinien prowadzić do strony powiązanej z komunikatem banera, a tekst alternatywny opisywać cel obrazu, jeśli nie wynika on z sąsiedniej treści.

Najpierw ustal, skąd pochodzi obecny baner. Otwórz stronę w panelu WordPressa i sprawdź edytor strony, szablon buildera, widżety oraz ustawienia motywu. Jeśli obraz nie występuje w treści strony, sprawdź szablon i części szablonu, zanim zaczniesz edytować kod.

Tabela pokazuje, jak rozpoznać miejsce, w którym należy zmienić baner. Dopasuj edycję do źródła komponentu, bo zmiana w niewłaściwym miejscu nie wpłynie na widoczny element.

Wybór właściwego miejsca edycji ogranicza ryzyko zmiany komponentu, który nie steruje widocznym banerem.

Wybierz format na podstawie rodzaju grafiki, a wymiary dopasuj do największego miejsca, w którym baner będzie wyświetlany. RWD oznacza responsywne dopasowanie układu do szerokości ekranu, ale samo skalowanie nie zmienia kadru ani nie gwarantuje czytelności.

Tabela porównuje formaty przydatne przy przygotowaniu grafiki do strony. Wybór zależy od tego, czy publikujesz fotografię, prostą ilustrację czy obraz z przezroczystością.

WordPress tworzy mniejsze rozmiary przesłanego obrazu i może umieścić je w srcset oraz sizes, aby przeglądarka dobrała plik do ekranu. Mechanizm dotyczy standardowego znacznika obrazu; ręcznie napisany kod albo builder mogą generować własne atrybuty.

Osobna grafika mobilna ma sens, gdy po zmniejszeniu szerokości główny obiekt znika z kadru albo tekst wtopiony w obraz staje się nieczytelny. W builderze poszukaj ustawienia obrazu dla urządzeń lub wdroż wariant przez element picture w szablonie. Nie rozciągaj wąskiej wersji mobilnej na szeroki ekran, bo jakość i proporcje mogą ucierpieć.

W edytorze blokowym dodaj blok Obraz, wybierz plik z biblioteki mediów lub prześlij nowy, a następnie ustaw wyrównanie i tekst alternatywny. Blok dodasz przyciskiem wstawiania bloków albo wpisując `/image` w edytorze.

Zaznacz obraz i wybierz ikonę linku na pasku narzędzi. Wklej pełny adres URL albo wyszukaj stronę, wpis lub inną treść w witrynie. WordPress oferuje także link do pliku obrazu, strony załącznika i powiększenia obrazu, dlatego przed publikacją sprawdź, czy wskazujesz stronę kampanii, a nie sam plik.

Ustaw szerokość bloku zgodnie z układem sekcji i sprawdź podgląd. Nazwy opcji wyrównania i rozmiaru mogą zależeć od motywu. W builderze szukaj elementu Image, Banner lub Call to Action i sprawdź osobne pola grafiki, tekstu alternatywnego oraz adresu. Jeśli strona wymaga rozbudowy szablonu, projektowanie i wdrażanie stron na WordPressie obejmuje również prace nad układem komponentów.

Podlinkuj obraz przez przycisk linku w pasku narzędzi i ustaw adres strony, do której ma prowadzić baner. Możesz wskazać produkt, kategorię, landing page kampanii albo zewnętrzną witrynę.

Tabela ułatwia dobranie adresu do celu banera i sprawdzenie go po publikacji. Przed zapisem otwórz adres docelowy i potwierdź, że zawiera właściwą ofertę.

Każdy wariant wymaga sprawdzenia docelowej strony, a nie tylko samego kliknięcia.

Link do strony wewnętrznej zwykle pozostaw w tej samej karcie. Nową kartę ustaw wtedy, gdy odbiorca powinien zachować otwartą bieżącą stronę, na przykład przy przejściu do zewnętrznego materiału. Dla linków sponsorowanych zastosuj atrybuty rel wymagane przez używaną platformę lub politykę witryny.

Na opublikowanej stronie kliknij cały baner i sprawdź końcowy adres w pasku przeglądarki. Jeśli reaguje tylko fragment grafiki, sprawdź, czy link został przypisany do obrazu, czy tylko do tekstu albo przycisku nałożonego w builderze.

Baner dodawaj w szablonie dopiero po ustaleniu, czy witryna używa motywu blokowego, klasycznego motywu PHP czy buildera. W motywie blokowym otwórz Wygląd > Edytor i sprawdź szablon oraz części szablonu. Klasyczny motyw może generować układ z plików PHP, natomiast builder może przechowywać go we własnym panelu.

Zapisana zmiana szablonu blokowego może być przechowywana w bazie danych i zastępować wersję z pliku motywu. Po edycji przez Edytor witryny sprawdź, gdzie zapisała się zmiana i jak będzie zachowywać się po zmianie motywu. W klasycznym motywie nie edytuj pliku motywu nadrzędnego bez kopii zapasowej; poprawkę umieść w motywie potomnym albo własnej wtyczce.

Semantyczny odsyłacz z obrazem może wyglądać tak:

<a href="https://example.com/kategoria/" aria-label="Zobacz ofertę w kategorii">
  <img src="/wp-content/uploads/baner.webp" alt="">
</a>

Pusty alt jest właściwy, gdy obraz jest dekoracyjny, a cel odsyłacza został opisany tekstem dostępnym dla czytnika ekranu. Jeśli grafika przekazuje własną informację, opisz ją w alt i nie powtarzaj identycznego komunikatu w aria-label. Po zmianie sprawdź kod strony i działanie linku. Zasady wyboru systemu publikacji opisujemy w poradniku jak wybrać CMS.

Sprawdź widoczność, kadr, link i czas ładowania banera na komputerze, tablecie oraz telefonie. Podgląd responsywny pomaga wykryć problemy układu, ale nie zawsze odtwarza zachowanie rzeczywistej przeglądarki na urządzeniu.

Tabela określa, co sprawdzić w każdym widoku przed uznaniem banera za gotowy. Kontrola obejmuje wygląd grafiki, adres, dostępność i obszar klikalny.

Podgląd urządzeń w edytorze nie zastępuje sprawdzenia strony na telefonie.

W podglądzie edytora wybierz widoki urządzeń, a następnie sprawdź stronę w przeglądarce na telefonie. Wykonaj próbę dotykiem, sprawdź, czy baner nie zasłania menu i czy odbiorca może przejść dalej bez przypadkowego kliknięcia. Jeśli po wymianie pliku nadal widzisz poprzednią wersję, wyczyść cache wtyczki, serwera i przeglądarki oraz sprawdź ponownie stronę w oknie prywatnym.

Nieprawidłowy adres URL, brak linku na obrazie i nieodświeżony cache to częste przyczyny problemów z banerem. Diagnozę rozpocznij na opublikowanej stronie, bo podgląd edytora może korzystać z innych stylów i danych.

Tabela łączy widoczny objaw z prawdopodobną przyczyną i pierwszym krokiem naprawy. Po zmianie sprawdź ponownie ten sam widok i adres docelowy.

Diagnoza powinna wskazać konkretną warstwę, która generuje problem.

Zbyt duży plik zwiększa ilość danych pobieranych przez przeglądarkę, dlatego przygotuj grafikę w rozmiarze dopasowanym do miejsca i skompresuj ją przed przesłaniem. Tekst umieszczony wyłącznie w obrazie może być trudny do odczytania na telefonie i niedostępny dla części użytkowników. Umieść ważny komunikat także jako tekst strony.

Zleć zmianę specjaliście, gdy baner jest generowany przez kod motywu, znika po aktualizacji albo wymaga różnych układów dla kilku szerokości ekranu. Wsparcie przydaje się także wtedy, gdy kilka banerów korzysta z tego samego szablonu i trzeba uniknąć ręcznego wprowadzania sprzecznych zmian.

Przygotuj adres strony, pliki graficzne, docelowy URL, oczekiwane zachowanie na telefonie oraz informację o używanym builderze. Jeśli nie chcesz samodzielnie zmieniać szablonu, strony internetowe na WordPressie można powierzyć zespołowi, który dopasuje baner do struktury witryny. Gdy potrzebujesz bieżących aktualizacji i kontroli, opieka nad WordPressem obejmuje stałe wsparcie techniczne.

Perspektywa KC Mobile: Z naszych wdrożeń wynika, że problem z banerem często nie leży w samym pliku, lecz w źródle komponentu albo regułach kadrowania. Dlatego przed poprawką sprawdzamy, czy obraz pochodzi z treści, buildera czy szablonu, a po publikacji kontrolujemy link na urządzeniu.

• Tailwind breakpoints: jak dopasować breakpointy do układu strony
• Szablony Elementora: jak wybrać, zaimportować i dopasować szablon
• Motywy WordPress do Elementora: jak wybrać zgodny motyw
• Modernizacja strony WordPress: jak zaplanować zmiany i uniknąć kosztownych błędów