Jak wyświetlać obrazy w pełnym rozmiarze w WordPress (4 proste sposoby)

Czy kiedykolwiek przesłałeś(aś) oszałamiające zdjęcie w wysokiej rozdzielczości na swoją stronę WordPress, tylko po to, by odkryć, że wygląda ono rozczarowująco małe lub rozmazane? To frustrujące doświadczenie, zwłaszcza gdy musisz zaprezentować szczegółową pracę, taką jak fotografia, sztuka lub obrazy produktów.

Od wersji 5.3 WordPress automatycznie zmniejsza duże obrazy, aby przyspieszyć działanie strony, co jest świetną funkcją. Może to jednak stanowić przeszkodę, gdy jakość obrazu jest kluczowa dla Twojego portfolio lub sklepu internetowego.

W WPBeginner napotkaliśmy dokładnie ten sam problem w naszych własnych projektach. Dowiedzieliśmy się, że nie musisz wybierać między pięknymi obrazami a szybką stroną internetową.

W tym przewodniku przeprowadzimy Cię przez cztery proste sposoby wyświetlania obrazów w pełnym rozmiarze w WordPress bez spowalniania witryny.

Kiedy należy wyświetlać obrazy w pełnym rozmiarze w WordPressie?

Jednym z przykładów sytuacji, w której możesz potrzebować wyświetlić obrazy w pełnym rozmiarze w WordPress, jest prowadzenie portfolio fotograficznego lub sklepu z grafiką. Jeśli sprzedajesz swoje prace jako pobrane pliki cyfrowe, możesz chcieć wyświetlić duże obrazy, aby pokazać potencjalnym klientom ich prawdziwą jakość.

Nawet jeśli prowadzisz sklep WooCommerce z fizycznymi produktami e-commerce, nadal możesz potrzebować wyświetlać niektóre obrazy w pełnym rozmiarze. Możesz użyć obrazu miniatury produktu, który użytkownicy mogą następnie kliknąć, aby zobaczyć oryginalny rozmiar obrazu i powiększyć szczegóły przedmiotu.

Niemniej jednak, duże obrazy mogą powodować wiele problemów. Mogą spowolnić Twoją stronę internetową, co z kolei może negatywnie wpłynąć na jej optymalizację pod kątem wyszukiwarek (SEO).

Z tego powodu WordPress automatycznie zmienia rozmiar dużych obrazów podczas ich przesyłania. Jeśli obraz jest większy niż 2560 pikseli wysokości i/lub szerokości, WordPress proporcjonalnie zmniejszy go do mniejszego rozmiaru, zachowując oryginalne wymiary obrazu.

Większość hostingu WordPress ogranicza również rozmiar pliku, który można przesłać do biblioteki mediów. Może to stanowić przeszkodę, jeśli masz dużo dużych obrazów do wyświetlenia.

Jeśli chcesz zmienić limit rozmiaru, możesz zapoznać się z naszym przewodnikiem na temat jak zwiększyć maksymalny rozmiar przesyłanych plików w WordPress.

Teraz zobaczmy, jak możesz wyświetlać obrazy w pełnym rozmiarze na swojej stronie internetowej WordPress. Mamy 4 metody, aby to zrobić. Niektóre mogą działać lepiej dla pojedynczych obrazów, podczas gdy inne są lepsze dla wielu. Po prostu użyj poniższych linków, aby przejść bezpośrednio do preferowanej metody:

• Metoda 1: Użyj adresu URL obrazu w pełnym rozmiarze (najlepsza dla pojedynczych obrazów)
• Metoda 2: Wyłączenie skalowania obrazu w WordPress (zalecane dla wielu plików)
• Metoda 3: Wyłącz skalowanie obrazów za pomocą wtyczki (dla całkowicie początkujących)
• Metoda 4: Otwieranie obrazów WordPressa na pełną szerokość w oknie podręcznym (najlepsze dla galerii)
• Często zadawane pytania dotyczące obrazów w pełnym rozmiarze
• Bonus: Zoptymalizuj swoje obrazy pod kątem lepszej szybkości i SEO

Metoda 1: Użyj adresu URL obrazu w pełnym rozmiarze (najlepsza dla pojedynczych obrazów)

Jeśli chcesz wyświetlić tylko jeden lub dwa duże obrazy na swojej stronie internetowej, możesz je po prostu dodać, korzystając z oryginalnych adresów URL obrazów.

Po przesłaniu obrazu, który przekracza maksymalne wymiary, WordPress przeskaluje ten obraz, tworząc mniejszą wersję. Jednak oryginalny, większy obraz pozostaje nienaruszony.

Najpierw przejdź do Media » Biblioteka z panelu WordPress. Upewnij się, że zmienisz widok na „Widok listy”.

Następnie najedź kursorem myszy na duży obraz. Poszukaj tego, którego nazwa pliku kończy się na „-scaled”.

Gdy pojawi się przycisk „Kopiuj adres URL”, kliknij go.

Po wykonaniu tej czynności możesz wkleić adres URL obrazu do paska adresu przeglądarki i usunąć „-scaled….” z końca adresu URL obrazu. Uważaj, aby nie usunąć formatu obrazu (.png, .jpg, .gif itp.).

Zatem, jeśli adres URL przeskalowanego obrazu to http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg, to oryginalny adres URL obrazu to http://example-website.local/wp-content/uploads/2024/03/example-image.jpg.

Po odwiedzeniu tego adresu URL zobaczysz obraz w jego oryginalnych wymiarach.

Teraz możesz dodać obraz w dowolnym miejscu na swojej stronie. Ponieważ dodajemy obraz za pomocą linku, będziesz musiał go osadzić, zamiast wybierać z biblioteki mediów.

Aby to zrobić, otwórz edytor bloków Gutenberg dla wpisu lub strony, na której chcesz użyć obrazu. Następnie kliknij ikonę „+ Dodaj blok”, aby dodać nowy blok. Tutaj możesz wybrać blok Obraz.

Po wykonaniu tej czynności kliknij „Wstaw z adresu URL”.

Następnie możesz po prostu wkleić adres URL pełnowymiarowego lub dużego obrazu do pola i nacisnąć klawisz „Enter” na klawiaturze.

Kiedy będziesz gotowy do publikacji, po prostu kliknij „Opublikuj” lub „Zaktualizuj”. Możesz teraz odwiedzić tę stronę lub wpis, aby zobaczyć obraz w pełnym rozmiarze w akcji.

Aby dodać więcej obrazów w pełnym rozmiarze, po prostu powtórz ten sam proces opisany powyżej.

Metoda 2: Wyłączenie skalowania obrazu w WordPress (zalecane dla wielu plików)

Jeśli planujesz wyświetlać wiele dużych obrazów, wyłączenie funkcji automatycznego skalowania jest najlepszym rozwiązaniem. Chociaż możesz to zrobić, edytując plik functions.php swojego motywu, ta metoda może być ryzykowna i może zepsuć Twoją witrynę, jeśli popełnisz błąd.

Dlatego zamiast tego zalecamy użycie darmowej wtyczki WPCode. Jak wyjaśniamy w naszej pełnej recenzji WPCode, jest to najbezpieczniejszy sposób dodawania fragmentów kodu, a nie zostaną one usunięte po zaktualizowaniu motywu.

Najpierw musisz zainstalować i aktywować wtyczkę. Do tej metody wystarczy darmowa wersja WPCode.

Po aktywacji przejdź do Code Snippets » Add Snippet. Tutaj wybierz ‘Add Your Custom Code (New Snippet)’ i kliknij ‘Use snippet.’

Teraz wpisz tytuł dla niestandardowego fragmentu kodu. Jest to tylko do Twojej wiadomości. Następnie otwórz menu rozwijane „Typ kodu” i wybierz „Fragment PHP”.

W edytorze kodu dodaj następujący fragment kodu:

add_filter( 'big_image_size_threshold', '__return_false' );

Następnie przewiń w dół do sekcji „Wstawianie”. Upewnij się, że lokalizacja jest ustawiona na „Uruchom wszędzie”, aby kod działał na całej Twojej stronie internetowej.

Kiedy będziesz gotowy, przewiń do góry ekranu i kliknij przełącznik „Nieaktywny”, aby zmienić go na „Aktywny”. Na koniec kliknij „Zapisz fragment”, aby kod zaczął działać.

Od teraz WordPress będzie używał oryginalnych wymiarów dla każdego dużego obrazu, który prześlesz, dając Ci dostęp do wersji w pełnym rozmiarze.

Metoda 3: Wyłącz skalowanie obrazów za pomocą wtyczki (dla całkowicie początkujących)

Jeśli metoda z kodem wydaje Ci się zbyt skomplikowana, możesz wyłączyć skalowanie obrazów za pomocą wtyczki Perfect Images. Ta darmowa wtyczka pozwala na tworzenie dodatkowych rozmiarów obrazów w WordPress, aktualizację metadanych mediów i wiele więcej.

Najpierw musisz zainstalować i aktywować wtyczkę Perfect Images. Aby uzyskać więcej informacji na temat instalowania wtyczki, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Meow Apps » Perfect Images i zaznacz pole Wyłącz obok opcji „Próg obrazu”.

WordPress nie będzie już dodawał atrybutu ‘-scaled’ do żadnego obrazu, więc możesz przesyłać duże pliki multimedialne, a WordPress domyślnie wyświetli je w pełnym rozmiarze.

Metoda 4: Otwieranie obrazów WordPressa na pełną szerokość w oknie podręcznym (najlepsze dla galerii)

Ostateczną opcją jest dodanie pełnowymiarowego okna podręcznego (lightbox) z obrazem do Twojej witryny. Jest to idealne rozwiązanie, jeśli tworzysz galerię obrazów, slider lub portfolio zdjęć.

Ta metoda pozwala wyświetlać mniejsze obrazy miniatur, gdy strona jest ładowana po raz pierwszy. Odwiedzający mogą następnie kliknąć dowolną miniaturę, aby zobaczyć pełnowymiarowy obraz w wyskakującym okienku.

Pamiętaj tylko, że musisz wcześniej wyłączyć skalowanie obrazów jedną z powyższych metod. W przeciwnym razie Twoje okno lightbox będzie wyświetlać tylko przeskalowaną wersję Twoich obrazów.

Po wyłączeniu skalowania czas utworzyć galerię. Zalecamy użycie Envira Gallery. Jak wyjaśniamy w naszej pełnej recenzji Envira Gallery, jest to najlepszy plugin do galerii obrazów dla WordPressa ze względu na jego moc i łatwość użycia.

Po zainstalowaniu i aktywacji Envira możesz postępować zgodnie z naszym samouczkiem krok po kroku na temat jak dodać galerię z efektem lightbox w WordPress.

Inną świetną opcją jest NextGEN Gallery. Odkryliśmy, że ta wtyczka jest doskonała dla profesjonalnych fotografów lub artystów, którzy potrzebują zaawansowanych funkcji do profesjonalnego wyświetlania i sprzedaży swojej pracy.

Często zadawane pytania dotyczące obrazów w pełnym rozmiarze

W WPBeginner często otrzymujemy pytania dotyczące zarządzania obrazami w WordPress. Oto niektóre z najczęstszych pytań dotyczących wyświetlania ich w pełnym rozmiarze.

Czy wyświetlanie obrazów w pełnym rozmiarze spowolni moją stronę?

Tak, duże pliki obrazów mogą wydłużyć czas ładowania strony, co może negatywnie wpłynąć na doświadczenie użytkownika i SEO. Dlatego bardzo ważne jest, aby zoptymalizować obrazy dla sieci przed ich przesłaniem, nawet jeśli wyświetlasz je w pełnym rozmiarze.

Jaki jest najprostszy sposób na wyświetlenie pojedynczego obrazu w pełnym rozmiarze?

Najprostsza metoda polega na użyciu bezpośredniego adresu URL oryginalnego obrazu. Kiedy WordPress tworzy przeskalowaną wersję, zachowuje oryginalny plik, który następnie można osadzić za pomocą bloku Obraz.

Czy lepiej użyć wtyczki, czy kodu, aby wyłączyć skalowanie obrazów?

Dla większości użytkowników, zwłaszcza początkujących, użycie wtyczki takiej jak WPCode jest najbezpieczniejszą opcją. Dodawanie kodu bezpośrednio do plików motywu może zepsuć Twoją witrynę, jeśli nie zostanie wykonane poprawnie, podczas gdy wtyczka obsługuje to w bezpiecznym środowisku.

Czy mogę wyświetlić miniaturę, która po kliknięciu otwiera obraz w pełnym rozmiarze?

Absolutnie. Użycie wtyczki galerii lightbox, takiej jak Envira Gallery, jest najlepszym sposobem na zrobienie tego. Odwiedzający widzą mniejsze, szybko ładujące się miniatury i mogą kliknąć, aby zobaczyć wersję w wysokiej rozdzielczości w wyskakującym okienku.

Bonus: Zoptymalizuj swoje obrazy pod kątem lepszej szybkości i SEO

Wyświetlanie obrazów w pełnym rozmiarze może być świetne do prezentowania swojej pracy, ale duże grafiki mogą spowolnić czas ładowania Twojej strony i negatywnie wpłynąć na Twoje SEO.

Z tego powodu zdecydowanie zalecamy optymalizację obrazów pod kątem wydajności. Wtyczka taka jak EWWW Image Optimizer może pomóc, kompresując pliki, aby były mniejsze i szybciej się ładowały.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak wyświetlać obrazy w pełnym rozmiarze w WordPress. Aby uzyskać więcej wskazówek dotyczących zarządzania plikami multimediów i ulepszania witryny, możesz zapoznać się z naszymi innymi przewodnikami:

• Jak łatwo zoptymalizować pliki obrazów dla sieci bez utraty jakości
• Przewodnik dla początkujących po SEO obrazów – optymalizacja obrazów dla wyszukiwarek
• Jak łatwo leniwie ładować obrazy w WordPressie
• Sposoby zapobiegania kradzieży obrazów w WordPress
• Jak dodać tekst na obrazie w WordPressie
• Świetne wtyczki WordPress do zarządzania obrazami (zaktualizowane)

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.