05 09 10 Użycie miniaturek w Wordpresie

Jak zawsze dodany przez : Sylwek, komentarze: ( 5 )

Miniaturki dla wpisów były przez długi czas brakującą cechą Wordpresa. Znaczące zmiany w tej materii przyniosła dopiero wersja 2.9. Niniejszy wpis ma na celu pokazać jak używać nową funkcjonalność.

W wielu, zwłaszcza starszych motywach dostęp do funkcji umożliwiających dostęp do miniaturek jest domyślnie włączony. Stąd też w pierwszej kolejności należy zarejestować wsparcie dla nich co robi się z pomocą funkcji add_theme_support.

Popatrzymy na przykład użycia:

add_action( 'after_setup_theme','thumbnail_support');
function thumbnail_support(){
  add_theme_support( 'post-thumbnails' );
  set_post_thumbnail_size( 100, 100, true );
  add_image_size( 'single-post-thumb', 300, 2000 );
}

W powyższym przykładzie dodanie miniaturek zostało zrealizowane za pomocą akcji after_setup_theme.
Dodatkowo ustawione zostały domyślne wymiary miniaturki oraz wymiary dla obrazka wyświetlanego razem z pełnym wpisem.
Kod umieścić w pliku functions.php aktywnego motywu.

Dodawanie miniaturki do wpisu

Kolejnym krokiem do wykonana jest dodanie miniaturki do wybranego wpisu, co można zrobić z poziomu panelu administracyjnego i zakładki Wpisy. Otwieramy więc rządany wpis i odnajdujemy okieno Ikona wpisu, które znajduje się na dole prawego panelu bocznego tuż pod sekcją tagów.

Klikamy na Ustaw ikonę wpisu i ściągamy żądany plik graficzny do biblioteki mediów na serwerze.
Po zakończeniu uploadu powinno ukazać nam się okno z własnościami obrazka. Możemy tu zmodyfikować większość wartości dotyczących pliku.
Po zapisaniu zmian, przechodzimy do zakładki “Biblioteka mediów”, wyszukujemy obrazek i klikamy na Pokaż (odnośnik po prawej stronie od miniaturki obrazka). Następnie przewijamy zawartość okna aż do mementu gdy zobaczymy odnośnik Użyj jako ikony wpisu, na który klikamy. Miniaturka dla wpisu właśnie została ustawiona. Czas na wyświetlenie jej we wpisie.

Modyfikacje plików motywu

Aby miniaturka mogła zostać poprawnie wyświetlona należy minimlanie zmodyfikować pętlę odpowiedzialną za wyświetlanie wpisów. Załóżmy dla potrzeb tego artykułu, że ów pętla znajduje się w pliku index.php. Przed funkcją motywu wyświetlającą wypis lub zawartość wpisu wstawiamy kod jak poniżej.

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

Powyższy kod wyświetli uprzednio przygotowaną miniaturkę. Wstawiony obrazek będzie miał szerokość 100px i proporcjonalną do niej wysokość.

Załóżmy teraz, że wpis nie ma ustawionej miniaturki, mimo to chcemy wyświetlić jakąś inny domyślną w tym samym miejscu. Możemy tego dokonać modyfikując pwyższy kod:

if (has_post_thumbnail()) {
  the_post_thumbnail();
}else{
  echo '<img src="'.get_bloginfo("template_url").'/images/default-thumbnail.png" >';
}

Jak wspomnaiłem wyżej, miniaturki zostały ustawione także dla pełnego wpisu. Jeżeli więc pętlę istneje w pliku single.php, należy ją zmodyfikować jak poniżej:

if (has_post_thumbnail("single-post-thumbnail")) {
  the_post_thumbnail();
}else{
  echo '<img src="'.get_bloginfo("template_url").'/images/default-thumbnail.png" >';
}

Powyższy kod, kiedy dodany w pętli pliku single.php wyświetli miniaturkę o szerokości 300px i proporcjonalnej wysokości.

Wady

Miniaturki jakkolwiek przydatne, powoduje dość znaczne spowolnienie ładowania strony co wynika z konieczności wykonania dodatkowych zapytań do bazy danych. Ich ilość może być istotna gdy na stronie wyświetlnamy na przykład 10 wpisów jednocześnie.

Należy wziąć również pod uwagę, że ściąganie dodatkowych obrazków w postaci miniaturek powoduje dodatkowe spowolnienie ładowania się strony w przeglądarce.

Więcej informacji na temat funkcji miniaturek można znaleźć na stronach kodeksu Wordpresa ( the_post_thumbnail, has_post_thumbnail, add_theme_support.

Kategorie: wordpress, wordpress - motywy
Tagi: miniaturki, motyw, wordpress