Кiedy stawia się świeży motyw na WordPress, slider prawie nigdy nie trafia w rozmiar Pana/Pani treści. Ma Pan/Pani zrzuty ekranu 16:9, okładki produktów, kwadratowe, a motyw przycina je do swoich proporcji. Połowa kadru idzie w odcięcie i główna witryna strony wygląda, jakby składano ją z zamkniętymi oczami.

Ale to nie jest błąd motywu. To sztywno ustawione parametry, które leżą w trzech miejscach: rejestracja rozmiaru miniatury w functions.php, kontener CSS slidera oraz szablony wyświetlania. Czwarta warstwa to przegenerowanie już wgranych obrazów do nowego rozmiaru. Poprawia Pan/Pani wszystkie cztery i slider staje się równy.

Poniżej analiza krok po kroku na przykładzie motywu Classy od WPExplorer. Logika jest jednak uniwersalna: w każdym klasycznym motywie z Nivo-sliderem lub własnym sliderem na add_image_size poprawia się te same pliki.

💡 Szybki przegląd:

• Zmienia Pan/Pani add_image_size w functions.php, to kadrowanie podczas przesyłania
• Poprawia Pan/Pani width i height kontenera w style.css, żeby układ się nie zapadł
• Aktualizuje Pan/Pani atrybuty width i height w szablonach nivo.php i content.php, żeby img nie był rozciągany przez przeglądarkę
• Przepuszcza Pan/Pani Regenerate Thumbnails przez bibliotekę mediów, stare obrazy są odtwarzane w nowym rozmiarze

Cały proces w praktyce, w tym filmie:

Krok 1. Zmieniamy rozmiar miniatury w functions.php

Kiedy WordPress przesyła obraz, przepuszcza go przez wszystkie zarejestrowane rozmiary. Rejestracja odbywa się za pomocą funkcji add_image_size. Motyw deklaruje slider 980×400, a Pan/Pani potrzebuje 1200×500, należy poprawić to tutaj.

Proszę otworzyć functions.php motywu. Ścieżka: Appearance → Theme File Editor w panelu administracyjnym lub przez FTP w /wp-content/themes/имя-темы/. W Classy linia z add_image_size dla slidera znajduje się mniej więcej w 122. linii:

1
add_image_size( 'nivo-slider', 980, 400, true );

Pierwszy parametr to szerokość, drugi to wysokość, trzeci (true) to twarde kadrowanie (crop). Jeśli ustawi Pan/Pani false, WordPress dopasuje obraz po mniejszym boku bez przycinania. Wygląda to kusząco, ale slider może „pływać" wysokością między kolejnymi obrazami.

Proszę podstawić swoje wartości i zapisać:

1
add_image_size( 'nivo-slider', 1200, 500, true );

Od tego momentu wszystkie nowo przesyłane obrazy są kadrowane do Pana/Pani rozmiaru. Stare, na razie nie, zajmiemy się nimi w kroku 4.

Krok 2. Poprawiamy kontener CSS

Rozmiar miniatury został zmieniony. Ale kontener slidera w układzie nadal żyje ze starymi wartościami z CSS. Obraz ładuje się prawidłowy, a blok go przycina lub zostawia puste przestrzenie na brzegach.

W Classy kontener Nivo-slidera jest opisany w style.css, linie 1132-1140:

1
#slider_nivo {
2
    position: relative;
3
    width: 980px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 400px;
9
    overflow: hidden;
10
}

Zmienia Pan/Pani width i height na swoje wartości:

1
#slider_nivo {
2
    position: relative;
3
    width: 1200px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 500px;
9
    overflow: hidden;
10
}

Ważny niuans: dotyczy to wyłącznie slidera Nivo. Slider treści (Content Slider) w Classy dostosowuje wysokość automatycznie do zawartości, nie trzeba go ruszać. W innych motywach logika jest taka sama: szukacie Państwo selektora konkretnego slidera, który zmieniacie, i nie ingerujecie w sąsiednie.

Krok 3. Aktualizujemy atrybuty w szablonach

add_image_size zwraca URL prawidłowej miniatury. Jednak znacznik HTML slidera zawiera wpisane na sztywno width="980" height="400". Jeśli pozostawicie Państwo stare wartości, przeglądarka rozciągnie lub ściśnie obrazek pod nie. Rezultat: rozmazany lub spłaszczony obraz, mimo że plik źródłowy jest prawidłowy.

W Classy dwa pliki wymagają poprawek.

Nivo Image Slider, plik includes/sliders/nivo.php, linie 32-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Content Slider dla slajdów obrazkowych, plik includes/sliders/content.php, linie 29-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Poprawiacie Państwo oba, zapisujecie. Jeśli motyw używa nie <img>, a tła przez background-image w CSS, szablonów nie ruszajcie, wystarczy krok 2.

Krok 4. Przegenerowujemy stare obrazy

W kroku 1 zmieniliśmy add_image_size. Nowe wgrywane pliki mają prawidłowe kadrowanie. Ale wszystkie obrazki z biblioteki mediów, wgrane przed poprawką, leżą w starym rozmiarze. Slider patrzy na nie i dostaje niewłaściwe proporcje.

Rozwiązanie: wtyczka Regenerate Thumbnails. Przechodzi ona przez całą bibliotekę mediów i ponownie tworzy miniatury według obecnie zarejestrowanych rozmiarów. Instalacja standardowa: Plugins → Add New → wyszukanie „Regenerate Thumbnails" → Install → Activate.

Po aktywacji: Tools → Regenerate Thumbnails → „Regenerate All Thumbnails". Dla dużej biblioteki proces zajmie parę minut, na każdym obrazie wtyczka uruchamia regenerację wszystkich zadeklarowanych rozmiarów.

Wtyczka potrafi też usuwać nieużywane rozmiary miniatur, co zwalnia miejsce na serwerze. Po jednorazowym przebiegu nie jest już potrzebna: wszystkie przyszłe wgrywane pliki pójdą przez nową wartość add_image_size.

Jeśli mają Państwo dostęp do konsoli serwera, WP-CLI jest szybsze:

1
wp media regenerate --yes

Żadnych narzutów na żądania HTTP i nie napotyka limitów czasu przy dużych bibliotekach.

Co zrobić, jeśli slider mimo wszystko się rozjeżdża

Zdarza się: wszystkie cztery kroki wykonane, a slider zachowuje się nieprawidłowo. Proszę przejść przez checklistę:

• Specyficzność CSS: Państwa nowy width/height jest nadpisywany przez bardziej specyficzny selektor w motywie. Proszę otworzyć inspektor przeglądarki i sprawdzić, która reguła faktycznie jest stosowana do elementu.
• Pamięć podręczna: proszę wyczyścić pamięć podręczną przeglądarki (Ctrl+F5). Jeśli zainstalowana jest wtyczka cache'ująca po stronie serwera, taka jak WP Rocket lub LiteSpeed Cache, proszę wyczyścić również ją.
• Motyw potomny: edytują Państwo motyw nadrzędny bezpośrednio, zmiany znikną przy najbliższej aktualizacji. Proszę utworzyć motyw potomny i przenieść poprawki tam.
• Responsywność: szerokość kontenera jest większa niż szerokość strony? Na urządzeniach mobilnych slider wychodzi poza krawędź. Proszę dodać max-width: 100% i height: auto w media query dla wersji mobilnej.

Aktualizacja motywu wszystko popsuła: jak się zabezpieczyć

Główny ból przy poprawkach w motywie nadrzędnym: aktualizacja nadpisuje pliki i Państwa zmiany znikają. Slider po cichu wraca do ustawień fabrycznych.

Prawidłowe podejście, motyw potomny. Proszę wynieść tam trzy rzeczy:

• Nadpisanie add_image_size w functions.php motywu potomnego przez hook after_setup_theme;
• Nadpisanie CSS, potomny style.css ładuje się po nadrzędnym, Państwa reguły wygrywają kaskadowo;
• Szablony slidera, kopiujecie Państwo nivo.php i content.php do motywu potomnego z tą samą strukturą folderów (includes/sliders/). WordPress automatycznie podchwyci wersję z motywu potomnego.

Po tym aktualizacja motywu nadrzędnego nie zagraża Państwa rozmiarom.

⁉️🤔 Często zadawane pytania

Czy koniecznie trzeba edytować wszystkie trzy pliki: functions.php, style.css i szablony?

Tak, w przeciwnym razie rezultat będzie połowiczny. Zmienili Państwo tylko add_image_size bez CSS, kontener przycina nowy obraz. Bez szablonów przeglądarka rozciąga zdjęcie do starych width/height i staje się ono nieostre. Trzy poprawki dają spójny rozmiar na wszystkich warstwach: rejestracja miniatury → kontener → atrybuty HTML.

Czy trzeba ruszać content.php, jeśli używam tylko slidera Nivo?

Nie. content.php odpowiada za slider treści, ten, który pobiera tekst i obraz z wpisów. Jeśli slider treści nie jest używany na stronie, plik można pominąć. Gdy jednak mają Państwo wątpliwości, poprawka zajmuje minutę, lepiej zrobić oba.

Czy wtyczka Regenerate Thumbnails usunie moje oryginały?

Nie. Oryginał, pełnowymiarowy obraz, pozostaje nietknięty. Wtyczka odtwarza tylko miniatury: te rozmiary, które są zarejestrowane przez add_image_size oraz w Ustawienia → Media. Opcja usuwania nieużywanych rozmiarów również nie narusza oryginału, czyści ona „osierocone" miniatury, niezadeklarowane ani w motywie, ani we wtyczkach.

Co zrobić, jeśli w motywie nie ma add_image_size, a slider działa inaczej?

Część nowoczesnych motywów nie używa add_image_size dla slidera. Zamiast tego ładują oryginał obrazu i sterują rozmiarem przez CSS: object-fit: cover lub background-size: cover. W tym przypadku wystarczy krok 2, edytują Państwo tylko kontener CSS. Proszę sprawdzić w inspektorze przeglądarki, jaki URL faktycznie ładuje się w sliderze: jeśli jest to image.jpg bez przyrostka -980x400, kroki 1 i 4 nie są potrzebne.

Czy potrzebna jest kopia zapasowa przed edycją functions.php?

Obowiązkowo. Jeden błąd w functions.php i strona pada, pojawia się biały ekran śmierci. Przed edycją proszę pobrać plik przez FTP lub skopiować zawartość do edytora tekstu. Jeśli strona padła, proszę wgrać oryginalny functions.php z powrotem, strona ożyje natychmiast.

Slider pod siebie: podsumowanie

Algorytm jest uniwersalny dla każdego klasycznego motywu WordPress: rejestracja rozmiaru → kontener CSS → szablony HTML → regeneracja starych obrazów. Cztery kroki i slider działa w Państwa proporcjach, bez przycinania i nieostrości.

Najważniejsze, by nie edytować motywu nadrzędnego bezpośrednio. Proszę przenieść zmiany do motywu potomnego od razu po upewnieniu się, że rozmiary pasują. Wtedy żadna aktualizacja nie przywróci slidera do ustawień fabrycznych.