Domyślne rozmiary obrazów WordPress i jak dodać odpowiednie niestandardowe rozmiary

Po przesłaniu obrazu WordPress wykonuje wiele pracy za kulisami, dzięki czemu możesz służyć obrazowi odwiedzającym. Można piggyback na ten proces i dodać niestandardowe rozmiary obrazów, aby zapisać konieczności zmiany rozmiaru obrazów ręcznie.

W tym poście wyjaśnię, jak i dlaczego WordPress tworzy różne rozmiary obrazów. Następnie nauczę cię, jak dodawać własne rozmiary obrazów, modyfikując funkcje.plik php, regeneruj miniatury i dodaj nowe rozmiary obrazów do bloku obrazów Gutenberga i / lub pętli WordPress.

Spieszysz się? Oto wszystko, co musisz wiedzieć o rozmiarach obrazów WordPress:

WordPress Rozmiary Obrazów Wyjaśnione

Za każdym razem, gdy przesyłasz obraz do biblioteki multimediów WordPress, są to dodatkowe opcje rozmiaru obrazu, które WordPress tworzy domyślnie:

  • Thumbnail (150px)
  • Średni (300px)
  • Średni Duży (768px)
  • Duży (1024px)

Jeśli twój motyw określa dodatkowe rozmiary obrazów, WordPress tworzy je również. WordPress zachowuje również oryginalny rozmiar, który przesyłasz i nadaje mu nazwę Pełna jak w pełnym rozmiarze.

Możesz zobaczyć wszystkie te elementy (z wyjątkiem Medium_Large) w bloku obrazów Gutenberga Rozmiar Obrazu rozwijany podczas wstawiania obrazu na stronę lub post.

Dlaczego WordPress tworzy tak wiele obrazów?

Obrazy są jak spodnie: chcesz mieć pewność, że masz odpowiedni rozmiar. Spodnie i obrazy, które są zbyt małe, wyglądają głupio i jest boleśnie oczywiste dla Ciebie i wszystkich innych, że nie pasują do siebie. Dla kontrastu, jeśli są zbyt duże, to super marnotrawstwo. Nie założyłbyś spodni dla mężczyzny na dziecko, prawda? To tyle dodatkowej tkaniny, że nawet nie jest konieczne. To dziecko się zgubi w nogawce;)

Obrazy są takie same. Jeśli obraz jest zbyt mały dla kontenera, będzie wyglądał na rozciągnięty lub pikselowany. Jeśli obraz jest zbyt duży, tracisz przepustowość i czas na pobranie go, aby mógł być wyświetlany na stronie. I po co? Za nic.

Idealnie, przesyłane pełnowymiarowe obrazy powinny być wystarczająco duże, aby zmieścić największy kontener obrazów w witrynie, ale nie większe. Następnie, gdy używasz obrazów w swojej witrynie, powinieneś użyć obrazu o dokładnym rozmiarze, którego potrzebujesz. Ponieważ skalowanie obrazów w celu utworzenia odpowiedniego rozmiaru w programie Photoshop lub innym edytorze obrazów zajmuje cenny czas, WordPress wykonuje to zadanie i robi to za Ciebie. Dzięki, WordPress!

Wszystko, co musisz zrobić, to wybrać odpowiedni rozmiar podczas wstawiania obrazu do witryny, aby uzyskać korzyści z używania obrazu, który jest odpowiedni. Jeśli domyślne rozmiary obrazów WordPress nie są idealnie dopasowane do Twojego motywu, możesz dostosować domyślne ustawienia w Media > Ustawienia przekrój lub Dodaj niestandardowe rozmiary, aby mieć więcej opcji do wyboru.

Screenshot of WordPress Media settings
Domyślne rozmiary obrazu WordPress, z wyjątkiem medium_large, który jest domyślnie ukryty

Zauważ, że dodano medium_large, aby skorzystać z obsługi responsywnego obrazu, dlatego nie jest on zawarty na stronie ustawień. Mówiąc o responsywnych obrazach…

Responsywne Obrazy

Wszystkie te obrazy w różnych rozmiarach służą innemu celowi, więc nie powinieneś ustawiać domyślnych wartości na zero, aby WordPress nie tworzył ich, jak sugerują niektóre samouczki.

WordPress dodał responsywne obrazy do core w wersji 4.4. Zamiast wypełniania atrybutów src obrazu adresem URL dla tylko jednego obrazu, WordPress dodał również srcset (zestaw źródeł), który jest listą adresów URL obrazów o różnych rozmiarach.

Zgadnij, jakich obrazów używa do utworzenia tej listy? Tak, WordPress używa tych samych obrazów w różnych rozmiarach, które tworzy podczas przesyłania obrazu.

Oferuje tę listę przeglądarce, dzięki czemu może wybrać obraz odpowiedni dla urządzenia odwiedzającego. Jeśli odwiedzający korzysta z urządzenia mobilnego, otrzyma mniejszy obraz w zestawie src. Jeśli odwiedzają Twoją witrynę na stacjonarnym urządzeniu Retina, otrzymają przesłany przez Ciebie Pełnowymiarowy plik obrazu ready Retina. Ponownie, dlatego należy przesłać obraz wystarczająco duży, aby wypełnić tę potrzebę.

Po dodaniu Niestandardowego Rozmiaru Obrazu WordPress doda go do zestawu src, o ile ma ten sam współczynnik proporcji. Jeśli niestandardowy rozmiar obrazu przycina obraz do innego kształtu, zostanie on pominięty w zestawie.

“Web-Optymalizacja” Większe Obrazy W WordPress

WordPress 5.3 wprowadził nowy sposób zarządzania dużymi plikami graficznymi poprzez wykrywanie i generowanie ich “maksymalnego rozmiaru zoptymalizowanego pod kątem Internetu”.

Jak to działa?

Po przesłaniu nowego obrazu WordPress wykryje, czy jest to” duży ” obraz na podstawie tego, czy jego wysokość lub szerokość jest powyżej progu big_image.

Domyślną wartością progową jest 2560px (można to zmienić za pomocą nowego filtra big_image_size_threshold).

Jeśli wysokość lub szerokość obrazu znajduje się powyżej tego progu, zostanie on przeskalowany w dół – próg będzie używany jako wartość max-height i max-width.

Pomniejszony obraz zostanie użyty jako największy dostępny rozmiar.

Chcesz wyłączyć skalowanie?

Skalowanie jest kontrolowane przez filtr big_image_size_threshold.

Zwrócenie false z filtra wywołania zwrotnego spowoduje jego wyłączenie (jak poniżej):

add_filter (‘big_image_size_threshold’, ‘_ _ return _ false’ );

Miniatury WordPress i wyróżniony Rozmiar obrazu

Doszliśmy teraz do części naszego samouczka, w której rozwiążemy cały bałagan związany z miniaturami / obrazkami. Zasadniczo problem sprowadza się do tego; ponieważ WordPress utrzymuje wsteczną kompatybilność w miarę rozwoju, nazwy rzeczy się zmieniają, Ale funkcje nadal odnoszą się do rzeczy po swoich starych nazwach.

WordPress Miniaturki Rozmiar obrazu został wprowadzony w wersji 2.9, ale szybko został zmieniony na Polecane Zdjęcia w wersji 3.0, ale niestety, nazwa utknęła. Więc często usłyszysz polecane zdjęcia określane jako miniaturki w samouczkach, a nawet w nazwach funkcji.

Screenshot of Featured Image Metabox
Jeśli nie masz pola meta polecanego obrazu, wklej add_theme_support( ‘post-thumbnails’ ); do funkcji.plik php

Oto kilka przykładów:

  • Jeśli twój motyw nie ma wyróżnionych obrazów i chcesz włączyć tę funkcję, Dodaj add_theme_support( ‘post-thumbnails’ ); do pliku funkcji.
  • Aby wyświetlić Rozmiar obrazu polecanego WordPress w motywie, użyjesz funkcji the_post_thumbnail ().

Miniatury i polecane obrazy mają domyślny rozmiar 150px na 150px. Jeśli użyjesz funkcji the_post_thumbnail () bez argumentu określającego rozmiar, użyje ona domyślnego rozmiaru kwadratu 150px.

Na zrób to mniej mylące dla siebie, abyś mógł faktycznie użyć odpowiedniego rozmiaru, proponuję utworzenie niestandardowego rozmiaru obrazu i nazwanie go polecane-Duże albo coś podobnego. Następnie, gdy chcesz użyć tego obrazu w pętli jesteś, użyjesz the_post_thumbnail (‘featured-large’).

Zanim Zaczniesz Tworzyć Niestandardowe Rozmiary

Gdy zaczniesz tworzyć niestandardowe rozmiary obrazów, unikaj przesadzania i tworzenia obrazów dla każdego możliwego celu. W przeciwnym razie spalisz przestrzeń na swoim hostingu, a jeśli korzystasz z usługi optymalizacji obrazu, która pobiera opłaty za obraz, będziesz o wiele szybciej przechodzić przez swój limit obrazu.

Jeśli twój plan pozwala zoptymalizować 100 obrazów, ale każde przesłanie generuje dodatkowe 9 rozmiarów, które również wymagają optymalizacji, osiągniesz swój limit po przesłaniu 10 obrazów. Pamiętaj o tym, dodając niestandardowe rozmiary i wybierając plany optymalizacji obrazu.

Smush Pro nie ma limitów optymalizacji obrazu i jest wyposażony w CDN, dzięki czemu można zachować miejsce na serwerze. Będziesz mógł dodać więcej niestandardowych rozmiarów obrazów niż normalnie. Pomyśl o tym jako o odpowiedniku zakładania flowy MC Hammer pants zamiast małych skinny jeans na te dzieci, ponieważ tkanina jest tania:) Wypróbuj Smush Pro za darmo.

Jak dodać niestandardowe rozmiary obrazów

Oto kod, który będziemy dodawać do naszego Pliku funkcji, aby dodać rozmiary obrazów:

add_image_size (‘the-name-for-custom-image-size’, 600, 400, true );

Ta funkcja przyjmuje 4 parametry w tej kolejności:

  1. Nazwa, którą podajesz swój niestandardowy rozmiar obrazu
  2. Szerokość obrazu w pikselach
  3. Wysokość obrazu w pikselach
  4. Jeśli obraz zostanie przycięty, aby pasował do szerokości i wysokości określonej powyżej

Przycinanie

Parametr kadrowania jest logiczny, więc użyjesz prawda lub false. Jeśli go całkowicie pominiesz, domyślnie będzie to false.

Jeśli ustawisz parametr kadrowania na prawda, a następnie WordPress przycina obraz, aby pasował do wymiarów określonych podczas tworzenia niestandardowego obrazu.

Na przykład, jeśli Twój niestandardowy rozmiar obrazu to kwadrat 600 pikseli na 600 pikseli i ustawisz kadrowanie na prawda, następnie jeśli wgrasz prostokątny obraz o wymiarach 600px na 800px, 200px zostanie odcięte, aby obraz był kwadratowy.

add_image_size (‘custom-image-square’, 600, 600, true );

Ustawianie parametru kadrowania na prawda jest pomocny w przypadku rozmiarów obrazów, które muszą być dokładne, takich jak polecane obrazy lub obrazy z archiwum postów, które muszą idealnie pasować do określonego wymiaru.

W przypadku obrazów, które mogą mieć więcej miejsca na poruszanie się, takich jak rozmiar obrazu postu WordPress i obrazy na stronach, które mają tendencję do zmiennych wysokości i szerokości, możesz ustawić kadrowanie na false. Spowoduje to zmianę rozmiaru obrazów, ale nie zmieni kształtu obrazu ani nie odetnie pikseli.

Zapoznaj się z naszym przewodnikiem SEO obrazu, jeśli próbujesz przyciągnąć ruch do swoich witryn za pomocą obrazów.

Regeneracja Miniaturek

Jednym z najważniejszych kroków, gdy albo:

  1. modyfikowanie domyślnych rozmiarów obrazów WordPress
  2. dodawanie niestandardowych rozmiarów obrazów lub
  3. przejście na nowy motyw, który ma różne niestandardowe rozmiary

regeneruje miniatury.

W tym kontekście miniatury odnoszą się do wszystkich dodatkowych obrazów, które tworzy WordPress, w tym niestandardowych rozmiarów obrazów zawartych w Twoim motywie i tych, które tworzysz za pomocą pliku funkcji.

Kiedy zmienisz sposób, w jaki WordPress tworzy dodatkowe obrazy, wpłynie to tylko na przesyłane obrazy. Nie aktualizuje obrazów, które są już w bibliotece multimediów.

Aby zmienić już przesłane obrazy, musisz użyć popularnej wtyczki Regenerate Thumbnails.

Po zainstalowaniu znajdziesz go w Narzędzia sekcji.

Screenshot regenerate thumbnails settings
Wystarczy nacisnąć przycisk, aby utworzyć nowe rozmiary obrazów

Po przywróceniu miniatur w nowych rozmiarach będziesz mieć możliwość usunięcia starych nieużywanych rozmiarów obrazów, aby zwolnić miejsce na serwerze.

Jak dodać niestandardowe rozmiary obrazów do listy rozwijanej w bloku obrazów Gutenberga

Wystarczy dodać poniższy kod do pliku funkcji, jeśli chcesz, aby Twoje niestandardowe rozmiary obrazów pojawiały się w rozwijanej liście w bloku obrazów Gutenberga. Jeśli utworzyłeś Niestandardowy Rozmiar obrazu, który będzie używany za kulisami dla Twojego motywu, możesz pominąć ten krok.

Screenshot Gutenberg Image Block Sizes Dropdown
Oto Niestandardowy Rozmiar obrazu, który dodaję za pomocą poniższego kodu

Będziemy podłączać się do filtra image_size_names_choose.

W tablicy dodam nazwę niestandardowego rozmiaru, który podałem w funkcji add_image_size oraz nazwę, którą chcę wyświetlić w rozwijanym menu w nawiasach.

Jak nauczyłem się podczas robienia tego samouczka, będziesz musiał zregenerować miniatury, zanim obraz pojawi się w rozwijanej liście.

WordPress Dodaj Rozmiar Obrazu Pełny Fragment Kodu

Następnie połączymy wszystko, czego się nauczyliśmy, w jeden blok kodu z rzeczywistym przykładem.

Załóżmy, że chcesz dodać niestandardowe rozmiary obrazów do swojego bloga.

Oto rozmiary obrazów, które chcesz dodać:

  • Obraz o rozdzielczości 1600px na 400px
  • Rozmiar 800px, który rozciąga się na szerokość sekcji zawartości bloga

Ponieważ nasz motyw nie obsługuje obecnie polecanych obrazów, zaczniemy od tego.

Zobaczysz wtedy moje niestandardowe rozmiary. Zauważ, że nie przyciąłem obrazów, które będą rozciągać się na szerokość zawartości bloga. Będę ciężko przycinać moje polecane obrazy, ponieważ chcę, aby były w odpowiedniej linii.

Jedynym obrazem, który chcę dodać do listy rozwijanej Gutenberg, jest obraz na blogu, ponieważ będę używał rozmiaru obrazu WordPress w moim motywie.

Po dodaniu tego kodu do moich funkcji.plik php, następnym krokiem jest regeneracja miniaturek.

Aby użyć mojego niestandardowego wyróżnionego obrazu dla moich postów w pętli, dodam następujące do singla.php lub index.php

Widzisz jak dodałem ‘featured-large’ w funkcji the_post_thumbnail ()? To wyświetli mój polecany obraz pod tytułami moich postów na blogu, nad moją treścią.

Najlepsze Praktyki

Oto kilka wskazówek, aby nie wpaść w kłopoty z tworzeniem niestandardowych obrazów w WordPress.

  1. Zawsze prześlij największy plik, jaki możesz. Jeśli rozmiar obrazu jest zbyt mały, WordPress nie będzie w stanie utworzyć wszystkich rozmiarów potrzebnych do prawidłowego wyświetlania obrazów na różnych urządzeniach.
  2. Jeśli chcesz zmienić rozmiar domyślnego rozmiaru medium_large, użyj funkcji update_option (). Możesz użyć tej samej funkcji, aby zaktualizować dowolny inny domyślny rozmiar obrazu WordPress.
  3. Jeśli”poza pętlą WordPress możesz użyć funkcji get_the_post_thumbnail (), aby użyć jednego z niestandardowych obrazów.
  4. Więcej informacji na temat miękkiego kadrowania i twardego kadrowania podczas tworzenia niestandardowych rozmiarów obrazów na wypadek problemów.

Wrapping Up

Gdy zrozumiesz, jak działają niestandardowe rozmiary obrazów w WordPress, możesz je zmodyfikować, aby dopasować je do swoich potrzeb i zaoszczędzić dużo czasu. Uzyskanie odpowiednich rozmiarów obrazu pomaga również poprawić wydajność witryny i rankingi w wyszukiwarkach, dlatego ważne jest, aby uzyskać właściwą pozycję.

Jeśli naprawdę chcesz przenieść optymalizację obrazu na inny poziom, sprawdź Smush. Dodaliśmy niesamowity CDN do Smush Pro, który ma automatyczną zmianę rozmiaru obrazu, co pomoże Ci uniknąć modyfikacji pliku funkcji, aby dodać niestandardowe rozmiary obrazu.

Istnieją również inne wspaniałe funkcje optymalizacji obrazu, które są wbudowane, takie jak leniwe ładowanie i konwertowanie obrazów do formatów następnej generacji. Wypróbuj Smush Pro za darmo i zobacz, jak funkcje optymalizacji obrazu mogą poprawić Twoją witrynę.

Tagi: