WP-DOC

Pisanie motywu

06.08 Miniatury postów

Ostatnia modyfikacja: 19.01.2021

Aby móc dodawać do wpisów lub stron obrazek wyróżniający, należy opcję tą włączyć w pliku functions.php. Więcej o tym przeczytasz w artykule 02.04 Obrazek wyróżniający – opcja w WordPress. Natomiast do wyświetlenia obrazka należy użyć funkcji the_post_thumbnail().

Jeżeli chcesz ustawić grafikę jako tło, musisz użyć funkcji the_post_thumbnail_url(). Funkcja ta wyświetla adres url obrazka. Funkcja ta została omówiona 02.05 Wyświetlanie wpisów – pętla.

Przykładowe użycie funkcji będzie wyglądało jak na listingu niżej. Jeżeli funkcja zostanie użyta w pętli WordPress, na przykład w wyświetlaniu wpisów kategorii, wówczas funkcja wyświetli obrazek wyróżniający dla każdego wpisu. Natomiast w przypadku pojedynczego wpisu, zostanie wyświetlony obrazek dla danego postu.

Przykład funkcji the the_post_thumbnail()

<div class="img_post" >
    <?php the_post_thumbnail(); ?>
</div>

Rozmiar obrazka

W funkcji the_post_thumbnail(), można podać jaki rozmiar obrazka ma zostać załadowany. Rozmiar ten będzie uzależniony od ustawień w panelu administratora WordPress w dziale Ustawienia - Media.

  • thumbnail – rozmiar w zależności od ustawień panelu administratora;
  • medium – rozmiar w zależności od ustawień panelu administratora;
  • large – rozmiar w zależności od ustawień panelu administratora;
  • full – oryginalny rozmiar zdjęcia przesłanego na serwer.
  • array() – tablica definiująca własny rozmiar.

W przypadku nie podania żadnego parametru, zostanie wyświetlony obraz zgodnie z ustawieniami w pliku functions.php za pomocą set_post_thumbnail_size&nbsp;(). Jeżeli brak tego ustawienia w pliku functions.php zostanie wyświetlony oryginalny rozmiar zdjęcia (taki jaki została przesłany na serwer). Pozostałe rozmiary możesz zdefiniować w panelu administratora w dziale Ustawienia - Media, co widać na rysunku niżej.

Panel administracyjny WordPress - Media
Rozdzielczość poszczególnych miniatur, można zmienić w Ustawienia – Media. Rozmiar będzie odpowiadał konkretnej nazwie, którą można podać jako argument funkcji the_post_thumbnail()

Na listingu niżej przykłady wykorzystania argumentów funkcji.

<div class="img_post" >
    <?php the_post_thumbnail('large'); ?>
</div>

<div class="img_post" >
    <?php the_post_thumbnail(array(100,100)); ?>
</div>

Dodanie nowego rozmiaru miniatur

W pliku functions.php, można zdefiniować własny rozmiar miniatury. Należy posłużyć się zaczepem akcji, w której należy wykorzystać funkcję add_image_size().

function.php – definiowane własnego rozmiaru miniatury.

function new_img_thumb() {
    add_image_size('my_img_size', 250, 250, array('center','top'));
}
add_action('after_setup_theme','new_img_thumb');

Funkcja add_image_size(), przyjmuje następujące argumenty:

  1. nazwa miniatury do wykorzystania w funkcji the_post_thumbnail()
  2. szerokość miniatury
  3. wysokość miniatury
  4. styl przycięcia
    1. false – domyślny lewy górny róg
    2. true – do środka
    3. arry() – tablica z dwoma argumentami
      1. jeden z trzech argumentów left, center, right
      2. jeden z trzech argumentów top, center, bottom

Teraz każdy obraz, oprócz standardowych rozmiarów zdefiniowanych w panelu administratora, będzie posiadał dodatkową miniaturę w rozdzielczości 250×250. Sposób wykorzystania nowego rozmiaru miniatur, przedstawiono na listingu niżej.

Przykład wykorzystania nowego rozmiaru miniatur.

<div class="img_post" >
    <?php the_post_thumbnail('my_img_size'); ?>
</div>

Po zdefiniowaniu nowego rozmiaru miniatury w pliku functions.php, za pomocą wtyczki regeneracji minatur, można utworzyć na serwerze nowe miniatury obrazów obecnych na serwerze. Wtyczki można również użyć, kiedy dokonamy zmiany ustawienia rozdzielczości miniatur w panelu administratora w dziale Ustawienia - Media. Wtyczka ta jest polecana przez zespół WordPress.

Sprawdzanie czy miniatura istnieje

Za pomocą funkcji has_post_thumbnail(), można sprawdzić, czy do wpisu lub strony został przypisany obrazek wyróżniający. Funkcja ta zwraca true lub false. Poniższy listing sprawdza czy do wpisu został przypisany obrazek wyróżniający.

Przykład czy do wpisu lub strony został dodany obrazek wyróżniający.

if(has_post_thumbnail()) {
    the_post_thumbnail();
}

Klasy CSS

Do znacznika img wyświetlającego zdjęcie WordPress dodaje klasy CSS, które można wykorzystać do stylizacji zdjęcia. Każde zdjęcie otrzymuje klasę wp-post-image oraz klasę w zależności od rozmiaru zdjęcia, jakie zostaje wyświetlone. Poniższy przykład obrazuje nadanie klas przez WordPress.

Przykładowe klasy nadane przez WordPress dla img.

// Sposób wyświetlania obrazka
the_post_thumbnail();
the_post_thumbnail('large');
the_post_thumbnail( array(250,250));
the_post_thumbnail('my-img-size');

// Klasy nadane przez WordPress
<img class="attachment-post-thumbnail wp-post-image" ...>
<img class="attachment-large wp-post-image" ...>
<img class="attachment-250x250 wp-post-image" ...>
<img class="attachment-250x250 wp-post-image" ...>
<img class="attachment-my-img-size wp-post-image" ...>

W przypadku rozmiarów miniatur zdefiniowanych w Ustawienia - Media, zostaną nadane klasy przedstawione niżej;

  • attachment-thumbnail
  • attachment-medium
  • attachment-large
  • attachment-full

Opis miniatury

Do wyświetlenia podpisu miniatury służy funkcja the_post_thumbnail_caption(). Funkcja jako argument może przyjąć ID postu, dla którego ma wyświetlić opis. Kiedy funkcja użyta jest w pętli lub na pojedynczej stronie, single.php lub page.php, zostanie wyświetlony opis dla danego postu. Poniżej przykład zastosowania funkcji.

Przykład użycia funkcji the_post_thumbnail_caption().

<p><?php the_post_thumbnail_caption(); ?></p>

Opis obrazka nadajemy w panelu administratora WordPress. W dziale Media - Biblioteka, po kliknięciu w obrazek, należy uzupełnić pole oznaczone Etykieta. Ten opis zostanie wyświetlony na stronie za pomocą funkcji the_post_thumbnail_caption().

Adres url obrazka

Jeżeli chcemy wyświetlić obrazek jako tło elementu, należy użyć funkcji the_post_thumbnail_url(). Jego przykładowe użycie będzie wyglądało jak na listingu niżej.

Obrazek wyróżniający jako tło elementu

<div class="bg_img" style="background: url('<?php the_post_thumbnail_url('medium') ?>') center center no-repeat; background-size: cover;"></div>'

Obraz dowolnego wpisu

Jeżeli chcemy wyświetlić obraz dowolnego wpisu lub jego adres url należy posłużyć się funkcjami przedstawionymi niżej:

  • get_the_post_thumbnail() – zwraca obrazek wyróżniający postu
  • get_the_post_thumbnail_url() – zwraca adres url obrazka wyróżniającego postu

Każda z wyżej wymienionych funkcji przyjmuje dwa parametry:

  • ID wpisu, którego obrazek ma zostać wyświetlony
  • rozmiar obrazka – jak opisano wyżej

Poniżej przykładowe wykorzystanie funkcji – 10 to ID postu.

echo = '<div class="img_post" >'.get_the_post_thumbnail(10,'large').'</div>';

echo = '<div class="gb_img" style="background: url(\''.get_the_post_thumbnail_url(10,'medium').'\') center center no-repeat; background-size: cover;"></div>';

Zamiast wartości liczbowej, jako argument ID postu, może występować zmienna.

KOMENTARZE

Jeżeli masz pytanie lub sugestie dotyczącą artykułu to napisz komentarz. Wartościowe komentarze zostaną umieszczone jako opinie warte uwagi.

Napisz komentarz

Wszystkie pola są obowiązkowe. E-mail nie będzie udostępniony, ani wykorzystywany do rozsyłania wiadomości reklamowych.

Jeszcze nikt nie napisał komentarza.