Jak dodać obsługę ikon wpisów (miniaturek) do motywu

7 lutego, 2012 | wrociu | 0 komentarzy
Ikony Wpisów
Udostępnij dalej:

Ikony wpisów pojawiły się jako standardowa funkcjonalność w wersji 2.9 WordPress. Jest to przyjemna funkcjonalność, która umożliwia podpinanie różnych miniaturek do każdego artykułu. Miniaturki możemy wyświetlać zarówno na stronie, gdzie w pętli wyświetlamy wszystkie artykuły, jak również i na stronie wyświetlającej pojedynczy wpis.

Pomimo tego, że od wersji 2.9 Wodpress minęło już trochę czasu to w sieci wciąż jest sporo szablonów, które nie zostały wzbogacone o tę funkcję. Jeżeli jesteś posiadaczem takiego szablonu to nie musisz czekać na aktualizację. Po przeczytaniu tego artykułu sam dodasz obsługę miniaturek w własnym szablonie. Jak to zrobić? Poniżej zaprezentuję to na przykładzie szablonu Simplistic Blue (wersja 1.3.2).

Obsługa w pliku funkcji motywu

W pierwszym kroku należy zadeklarować, że nasz szablon będzie obsługiwać ikony wpisów. W tym celu należy otworzyć plik funkcji motywu – functions.php naszego szablonu. Aby to zrobić należy użyć edytora, który jest częścią kokpitu. Znajdziesz go w nawigatorze, w węźle „Wygląd”. Na samym końcu pliku functions.php dodaj następującą sekcję:

<?php
// Miniaturki - thumbnails
if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
}
?>

W ten oto sposób dodaliśmy obsługę miniaturek :). Teraz do każdego wpisu możesz dodać miniaturkę.

Dodaj Ikonę Wpisu

Wyświetlanie miniaturek

Teraz należy zadbać o ich wyświetlanie. Modyfikujemy plik szablonu strony głównej – index.php dodając w odpowiednim miejscu następujący fragment kodu:

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
}
?>

Powyższy fragment kodu sprawdza czy wpis ma przypisaną ikonę. Jeśli tak, to funckja the_post_thumbnail zajmuje się wyświetleniem miniatury.

Prawie gotowe! Pozostaje sobie odpowiedzieć na pytanie, które to jest to „odpowiednie miejsce”, gdzie należy wkleić powyższy kod. W szablonie Simplistic Blue postanowiłem umieścić miniatury zaraz pod tytułem i informacjami dotyczącymi autora i daty wpisu, czyli tuż przed wywołaniem funkcji the_content. Wzbogacony o wyświetlanie miniaturki fragment pliku index.php wygląda tak (dodany fragment w liniach 3-6):

<div><?php the_time('F jS, Y') ?> by <?php the_author() ?> in <?php the_category(', '); ?></div>
            <?php
            if ( has_post_thumbnail() ) {
                  the_post_thumbnail('thumbnail');
                }
            ?>

            <?php the_content('Read the rest of this entry &raquo;'); ?>

Arkusze stylów

Ostatnim krokiem jest modyfikacja pliku z arkuszem stylów – style.css. Standardowo miniatury wyświetlane są przy użyciu dwóch klas css:

  • attachment-thumbnail
  • wp-post-image

Do plików style.css dodałem następującą sekcję:

.wp-post-image{
        float:left;
        padding: 10px 10px 10px 0px;
}

Gotowe. Efekt poniżej:

Simplistic Blue wraz Ikoną

Jeszcze kilka słów o funkcji the_post_thumbnail

W przykładzie opisanym przeze mnie użyliśmy funkcji the_post_thumbnail w jednym wariancie. Jako parametru użyliśmy wartości „thumbnail”. Wariant ten wyświetla ikonę w rozmiarze 150px na 150px. Funkcja może być wywołana jeszcze z innymi parametrami:

  • the_post_thumbnail('thumbnail');

    – zastosowany przez nas wariant. Ikona będzie wyświetlana w rozmiarze 150x 150 pikseli.

  • the_post_thumbnail('medium');

    – ikona będzie wyświetlana w rozmiarze 300 x 300 pikseli.

  • the_post_thumbnail('large');

    – ikona będzie wyświetlana w rozmiarze 640x 640 pikseli.

  • the_post_thumbnail('full');

    – ikona będzie wyświetlana w oryginalnym rozmiarze załadowanego obrazka.

  • the_post_thumbnail('array(100,100)');

    – inny dowolny rozmiar. W tym przypadku 100 x 100 pikseli.

  • the_post_thumbnail();

    – wariant bez parametru. Domyślnie parametr przy takim wywołaniu ustawiony jest na „thumbnail”.

I jeszcze trochę o stylach

Kilka linijek wyżej napisałem, że nasza miniatura wyświetlana jest wg. reguł klas css:

  • attachment-thumbnail
  • wp-post-image

Dla naszego konkretnego przypadku jest to prawdą. Zastosowaliśmy funkcję the_post_thumbnail z parametrem „thumbnail”. W przypadku innego parametru niezmienna pozostanie klasa wp-post-image natomiast druga reguła wyświetlania zmieni się odpowiednio na:

  • img.attachment-medium
  • img.attachment-large
  • img.attachment-full

 

O miniaturkach napiszę jeszcze kilka słów w ciągu najbliższych kilku dni. Tymczasem u mnie za oknem prawie 20 celcjuszów na minusie. A u Was? 🙂

Źródło:

 


zostaw odpowiedź