Jak zmienić wybrane rozmiary obrazów w WordPress

Polecane obrazy są używane w WordPress na wiele różnych sposobów, w zależności od używanego motywu. Większość motywów używa polecanych obrazów jako miniatury jednego z obrazów w poście lub na stronie, która jest zwykle wyświetlana na stronie głównej i stronach archiwum.

Ta funkcja została wprowadzona w WordPress 2.9 i była pierwotnie znana jako „miniaturki postów”. Większość motywów WordPress (w tym nasze własne) wykorzystuje teraz polecane obrazy do wielu innych celów, takich jak galerie obrazów, suwaki funkcji i obrazy nagłówków stron. Na przykład w naszym motywie Full Frame wyróżniony obraz staje się obrazem tła posta.

Polecane obrazy są oczywiście bardzo ważne dla twórców i każdego, kto tworzy witrynę WordPress, która zawiera wiele obrazów. Aby skorzystać z polecanych obrazów w dowolnym motywie prasy milimetrowej, wystarczy wybrać polecany obraz z linku po prawej stronie ekranu w edytorze postów.

Jeśli domyślny rozmiar polecanego obrazu, który jest ustawiony w motywie, działa do Twoich celów, świetnie. Jeśli nie, można zmienić rozmiar za pomocą niewielkiej edycji kodu.

Dlaczego chcesz zmienić rozmiar polecanego obrazu? Oprócz powiększania lub zmniejszania galerii miniatur, możesz chcieć zmienić proporcje wymiarów. Załóżmy na przykład, że jesteś fotografem krajobrazu, a Twoje portfolio składa się z rozległych panoram. W takim przypadku, jeśli domyślny polecany obraz motywu jest kwadratowy, większość obrazu zostanie wykadrowana. Możesz to naprawić, dostosowując wymiary ręcznie do czegoś bardziej odpowiedniego.

Zmiana rozmiaru wyróżnionego obrazu w functions.php

Aby zmienić domyślne rozmiary polecanych obrazów, musisz zmienić kod w pliku functions.php . Dostęp do tego pliku można uzyskać za pośrednictwem FTP lub można go edytować bezpośrednio w panelu WordPress w obszarze Wygląd > Edytor. Zawsze polecam pierwsze podejście, a nie drugie.

Zanim wprowadzisz jakiekolwiek zmiany w tym pliku, zawsze warto upewnić się, że masz kopię zapasową oryginalnej wersji na wypadek, gdyby coś poszło nie tak. Jeśli nie masz jeszcze oryginalnych plików motywów na swoim komputerze, pobierz przynajmniej plik functions.php i zapisz go w folderze kopii zapasowej.

Istnieją dwa różne sposoby zmiany rozmiaru wyróżnionego obrazu. Aby zmienić jego rozmiar proporcjonalnie (tj. aby uniknąć rozciągania lub kompresji obrazu) użyj następującego kodu:

 set_post_thumbnail_size( 50, 50 ); // 50 pikseli szerokości na 50 pikseli wysokości, tryb zmiany rozmiaru

możesz także zmienić rozmiar obrazu, przycinając go za pomocą tego kodu:

 set_post_thumbnail_size( 50, 50, prawda ); // 50 pikseli szerokości i 50 pikseli wysokości, tryb przycinania

To ustawia domyślny rozmiar polecanych obrazów.

Dodawanie dodatkowych rozmiarów obrazu

Możliwe jest również dodanie dowolnej liczby dodatkowych rozmiarów obrazu, dodając dodatkowy wiersz kodu dla każdego rozmiaru obrazu:

 add_image_size( 'kategoria-kciuk', 300, 9999 ); // 300 pikseli szerokości (i nieograniczona wysokość)

Możesz następnie użyć tego nowego rozmiaru w swoim szablonie motywu za pomocą następującego kodu:

 <?php the_post_thumbnail( 'kategoria-kciuk' ); ?>

Ta funkcja jest przydatna, jeśli chcesz wyświetlać polecane obrazy na wiele różnych sposobów. Na przykład możesz chcieć ustawić rozmiar miniatur dla galerii obrazów i większy rozmiar dla nagłówka posta.

Pamiętaj, że przesyłane obrazy muszą być co najmniej tak duże, jak wymiary ustawione dla polecanych obrazów. Jeśli prześlesz mniejsze obrazy, zostaną one powiększone i będą wyglądały na rozpikselowane i rozmyte.

Przebudowywanie polecanych obrazów

Zmiana rozmiaru polecanego obrazu wpłynie tylko na przesyłanie od momentu zmiany kodu. Wszystkie przesłane wcześniej pliki zostaną zapisane w oryginalnych wymiarach, więc konieczne będzie ich ponowne wygenerowanie.

Jeśli masz tylko kilka obrazów do zmiany rozmiaru, możesz przesłać je ponownie ręcznie. Jeśli masz więcej niż garść, najlepiej użyć wtyczki, takiej jak Regeneruj miniatury, aby wykonać całą ciężką pracę za Ciebie. Dostęp do tej wtyczki można uzyskać z menu Narzędzia i zmieni ona rozmiar jednego lub więcej obrazów w wybranej galerii multimediów.

Przygotuj swoje edycje na przyszłość za pomocą motywu potomnego

Problem z wprowadzaniem zmian bezpośrednio w pliku functions.php polega na tym, że zostaną one utracone, jeśli zostanie opublikowana nowa wersja motywu i trzeba ją zaktualizować. Możesz zanotować dodany kod i wstawić go do nowego pliku functions.php , ale może to stać się nużące, szczególnie jeśli wprowadzasz wiele zmian lub często pojawiają się nowe wersje motywu.

Używanie motywu potomnego rozwiązuje ten problem, ponieważ po aktualizacji motywu nadrzędnego motyw potomny pozostaje nienaruszony. Jeśli wprowadzasz jakiekolwiek zmiany w kodzie motywu, w pliku functions.php lub w arkuszach stylów lub innych plikach, zawsze najlepiej jest użyć motywu potomnego.

Mamy już pełny przewodnik po tworzeniu motywu potomnego na blogu, ale oto, co musisz wiedzieć do naszych celów.

Aby utworzyć motyw potomny, połącz się ze swoją witryną przez FTP i utwórz nowy folder w /wp-content/themes/ dla nowego motywu potomnego. Powszechną praktyką jest nazywanie folderu tak samo jak motyw, który chcesz edytować, z dołączonym „-child”. Na przykład: „awesome-child”, jeśli tworzysz motyw potomny z motywu Fantastyczny.

Musisz utworzyć arkusz stylów w folderze motywu podrzędnego, nawet jeśli nie zamierzasz edytować CSS. Utwórz nowy plik o nazwie style.css i wklej następujący kod:

 /*
Nazwa motywu: Niesamowite dziecko
Motyw URI: http://example.com/awesome-child/
Opis: Niesamowity motyw dziecięcy
Autor: Prasa do papieru milimetrowego
URI autora: http://example.com
Szablon: niesamowity
Wersja: 1.0.0
Tagi: jasny, ciemny, responsywny układ, gotowy na ułatwienia dostępu
Domena tekstowa: niesamowite-dziecko
*/

@import url("../awesome/style.css");

/* =Tutaj zaczyna się dostosowywanie motywu
-------------------------------------------------- ------------ */

Zmień odpowiednio nazwę motywu i inne szczegóły.

Aby dodać funkcję zmiany wyróżnionego obrazu do motywu potomnego, musisz utworzyć nowy plik functions.php , więc zrób to w katalogu motywu potomnego. Ten plik zostanie załadowany oprócz pliku functions.php motywu nadrzędnego.

Szablon dla functions.php wygląda tak:

 <?php //Otwieranie tagu PHP

// Funkcje

?> // Zamykanie tagu PHP

Następnie możesz dodać kod zmiany rozmiaru obrazu między tagami PHP, dzięki czemu otrzymasz coś takiego:

 <?php // Otwieranie tagu PHP

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-miniaturki' );
set_post_thumbnail_size( 150, 150, prawda ); // domyślne wymiary miniatury posta (przycięte)

// dodatkowe rozmiary obrazków
// usuń następną linię, jeśli nie potrzebujesz dodatkowych rozmiarów obrazu
add_image_size( 'kategoria-kciuk', 300, 9999 ); //300 pikseli szerokości (i nieograniczona wysokość)
}

?> // Zamykanie tagu PHP

Po zakończeniu tworzenia kodu motywu podrzędnego musisz go aktywować. Możesz to zrobić za pomocą pulpitu nawigacyjnego witryny, w obszarze Panele administracyjne > Wygląd > Motywy . Znajdź swój motyw podrzędny na liście i kliknij Aktywuj.

Podziwiaj nowe polecane obrazy o zmienionym rozmiarze

Zmiana rozmiaru polecanych obrazów i dodawanie nowych rozmiarów obrazów jest dość prostym zadaniem, ale wymaga pewnej edycji kodu. Z tego powodu niektórzy użytkownicy wolą używać wtyczki do obsługi zmiany rozmiaru obrazu, ale dodanie dodatkowych wtyczek zawsze stanowi zagrożenie dla bezpieczeństwa. Zagłębienie się w maskę i wprowadzenie kilku prostych zmian w kodzie, takich jak ten, może naprawdę pomóc w budowaniu zaufania do korzystania z WordPressa i ułatwi dostosowywanie motywów i uczynienie ich własnymi.