Może natknąłeś się na fakt, że w roli programisty motywu standardem jest budowanie motywu z myślą o wydajności sieci. Oznacza to, aby upewnić się, że obrazy wyprowadzane w twoim motywie nie są w „pełnym” rozmiarze, jeśli mogą mieć więcej niż 100 kilobajtów.

Również, korzystanie z funkcjonalności WordPressa dla atrybutu obrazu HTML srcset jest kolejnym powodem, aby używać funkcji wp_get_attachment_image() w wyprowadzaniu obrazów.

Innym zastosowaniem będzie wyprowadzanie postów na blogu z wyróżnionymi obrazami. Jako twórca motywu chcesz się upewnić, że albo określisz: (a) jeden z domyślnych rozmiarów miniatur postów, lub (b) utworzyć własny niestandardowy rozmiar miniatur postów.

Istnieją przypadki, w których możesz nie musieć używać niestandardowego rozmiaru miniatur postów. Jednak możesz zamiast tego użyć domyślnego rozmiaru miniaturki postu, który będzie doskonale spełniał twoje wymagania.

Domyślne rozmiary miniaturek dostępne do użycia są następujące:

  • thumbnail (używa rozmiaru 150px × 150px)
  • medium (używa rozmiaru 300px × 300px)
  • medium_large (używa rozmiaru 768px × 0px)
  • . large (używa rozmiaru 1024px × 1024px)

W tych przypadkach możesz łatwo określić, czy masz podobny rozmiar do użycia dla któregoś z tych domyślnych rozmiarów miniatur. Wszystko co będziesz musiał zrobić to użyć jednego z powyższych ciągów znaków w parametrze $size funkcji the_post_thumbnail().

Zauważysz, że te domyślne rozmiary miniaturek postów są prawie wszystkie kwadratowo przycięte. Jest to prawdopodobnie spowodowane maksymalną przestrzenią, z której obraz może być wyprowadzony – kwadratem. Aby maksymalnie wykorzystać przestrzeń, podjęto decyzję, aby te domyślne rozmiary miniaturek postów były kwadratowymi obrazami.

Kiedy używać niestandardowego rozmiaru miniaturek postów

Jednakże, są przypadki, kiedy musisz wyprowadzić obraz, który nie jest kwadratem. Weźmy na przykład, że musisz dodać wyróżniony obraz nad pojedynczym artykułem na swoim blogu za pomocą funkcji the_post_thumbnail().

Możesz użyć następującego kodu, który wyświetli wyróżniony obraz Twojego artykułu o rozmiarze 1024px × 768px:

add_image_size( 'single-feature', 1024, 768, true );

I szybko zidentyfikować, co to oznacza w terminologii laika:

  • add_image_size() – utwórz niestandardowy rozmiar miniatury postu
  • 'single-feature’ – parametr $name, po prostu nazwa niestandardowego rozmiaru miniatury postu
  • 1024 – parametr $width, szerokość niestandardowego rozmiaru miniatury postu
  • 768 – parametr $height, wysokość niestandardowego rozmiaru miniatury postu
  • true – parametr $crop, oznacza, czy (a) mocno przyciąć, czy (b) skalować obraz do niestandardowego rozmiaru miniatury postu. Więcej informacji w WP Dev docs

Jako dodatkowe informacje: w przykładzie wybrano szerokość i wysokość (1024 × 768), ponieważ są to powszechne rozmiary używane dla wyróżnionych obrazów. Nie musi to jednak oznaczać, że nie możesz użyć innych rozmiarów. Upewnij się, że widzisz, co najlepiej pasuje do Twojego projektu motywu i użyj tego.

Jak zaktualizować niestandardowe miniatury postów

Jak będziesz testować nowe rozmiary obrazów dla swoich obrazów WordPress zauważysz, że możesz mieć problemy z aktualizacją szerokości i wysokości bez zmiany $name rozmiaru miniatur niestandardowych postów.

Przyjmijmy na przykład, że masz stary rozmiar:

add_image_size( 'single-feature', 1024, 768, true );

Ale teraz musisz zaktualizować rozmiar tej „pojedynczej cechy” miniatury do następującego:

add_image_size( 'single-feature', 1366, 768, true );

Widzisz, że zmiana dotyczyła szerokości od 1024 do 1366. Ale jak odświeżysz szablon, w którym ten rozmiar ma być wyświetlany, nadal będzie on pokazywał swój obrazek z szerokością 1024. Jak można to naprawić?

Aby temu zaradzić, będziesz musiał zregenerować miniaturkę.

Więc, aby zacząć, upewnij się, że zaktualizowałeś szerokość i wysokość swojej miniaturki, a następnie zainstaluj wtyczkę Regenerate Thumbnails. Postępuj zgodnie z instrukcjami wtyczki, a następnie zregenerujesz rozmiary miniatur pomyślnie.

Regenerowanie wszystkich twoich obrazów może zająć trochę czasu, zwłaszcza jeśli twoja witryna ma dużo obrazów w Bibliotece Mediów.

Gdzie umieścić funkcję add_image_size

Funkcja add_image_size() nie będzie działać, jeśli nie umieścisz jej prawidłowo w ramach haka akcji WordPress after_setup_theme. Oznacza to, że następujący przykładowy kod:

add_image_size( 'archive-featured', 792, 446, true );

Musi znajdować się w obrębie następującego haka akcji w pliku functions.php twojego motywu pod:

function ms_setup() {add_image_size( 'archive-featured', 792, 446, true );}add_action( 'after_setup_theme', 'ms_setup' );

Dodawanie add_image_size w Underscores Theme

Bardzo popularny motyw startowy o nazwie Underscores Theme lub _s theme ma dobre miejsce do dodawania swoich funkcji add_image_size().

Możesz dodać funkcję add_image_size() custom post thumbnail size pod linią add_theme_support( 'post-thumbnails' ); w pliku functions.php motywu Underscores.

Powodem, dla którego możesz dodać funkcję add_image_size() tutaj, jest to, że jest ona już w haku akcji after_setup_theme wspomnianym wcześniej.

Add Image Size Function Snippet for WordPress Themes

Jeśli chcesz, możesz skopiować poniższy snippet dla add_image_size w motywie Underscores dla przyszłego odniesienia:

/* * Custom post thumbnail sizes for use across the theme. * * @link https://developer.wordpress.org/reference/functions/add_image_size/ */add_image_size( $name, $width, $height, $crop );

Uwaga: Upewnij się, że zdefiniowałeś parametry użyte w snippecie, aby upewnić się, że nie otrzymasz żadnych błędów ostrzeżeń PHP w swoim motywie. Powyższy snippet jest używany jako szablon, który możesz skopiować i wkleić do swoich funkcji motywu.

Zakończenie

Dziękuję za przeczytanie tego artykułu! Proszę daj mi znać o swoich przemyśleniach i ustawieniach dotyczących niestandardowych rozmiarów miniaturek postów.

Jeśli podobał ci się ten artykuł, możesz chcieć poznać błędy tematyczne w konfigurowaniu niestandardowych typów postów. Dla jednego, nie rejestruj niestandardowych typów postów w swoim motywie!

admin

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

lg