Miniaturki zdjęć w WordPress bez używania Custom Fields

utworzone przez | Lut 5, 2011 | Blog, WordPress | 3 Komentarze

Szukałem, szukałem i znalazłem. Tak! Znam odpowiedź na to pytanie jakim to cudem (a właściwie jakim kodem) można sprawić by miniaturki zdjęć bez używania Custom Fields wyświetlały się przy wpisie. Tak więc do dzieła.

1.Tworzymy plik TimThumb.php

W naszym folderze z plikami tematu tworzymy nowy plik o nazwie timthumb.php następnie wklejamy odpowiedni kod

2.Modyfikujemy plik function.php

Zostajemy dalej w folderze z plikami naszej skórki i przechodzimy do pliku function.php (jeśli w naszym temacie nie ma takiego pliku musimy go stworzyć) .

[php]
<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, ‚<img’);
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, ‚<img’, $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, ‚>’);
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;

$cleanF = strpos($image[$num],’src="’)+5;
$cleanB = strpos($image[$num],’"’,$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);

}
if(stristr($image[$num],'<img’)) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>
[/php]

3.Dodajemy naszą miniaturkę do miejsca gdzie ma się wyświetlać.

Zasadniczo poniższy kod powinniśmy dodać wszędzie tam gdzie wyświetlają się nasze wpisy zbiorczo czyli będą to pliki index.php, archives.php, category.php itp. Umieszczamy go w naszej pętli odpowiadającej za wyświetlanie postów (the_loop)

[php]
<div>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php bloginfo(‚template_directory’); ?>/timthumb.php?src=<?php getImage(‚1’); ?>&w=150&h=150&zc=1">
</a>
</div>
[/php]

Powyższy kod wygeneruje miniaturkę o wymiarach 150×150

4.Dodajemy style CSS.

W pliku style.css doklejamy fragment odpowiadający za style naszej miniatury.

[css].thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e2e2e2; width:150px; height:150px; margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}[/css]

To by było na tyle. Życzę powodzenia w implementacji kodu:)

Źródło: problogdesign

PS. O miniaturkach przeczytasz również:

Vivee.info: Miniaturki w WordPress 2.9

WPNinja: Miniatury w locie czyli phpThumb() w akcji

3 komentarze

  1. Agata Gołaszewska

    Witaj!
    Jestem całkowitym laikiem w tych sprawach i nie do końca rozumiem jak zastosować to o czym mowa w poście.
    Zrobiłam tak:

    ad. 1. utworzyłam timthumb.php i wkleiłam w niego zwartość odnośnika „odpowiedni kod”.

    ad. 2. w moim theme jest plik functions.php (nie function.php) ale pewnie chodzi o ten plik;
    i teraz problem: w jaki sposób modyfikować ten plik?
    – usunąć dotychczasową zawartość i wkleić tę podaną przez Ciebie, czy też
    – wkleić ten tekst gdzieś w tym już dotychczasowym – tylko gdzie dokładnie

    ad. 3.
    w moim index.php znalazłam treść (poniżej); czy to w tym miejscu należy wkleić podany kod? gdzie dokładnie?

    w archive.php znalazłam treść (poniżej); gdzie dokładnie wkleić kod?

    w category.php znalazłam treść (poniżej); gdzie wpisać ten kod?

    <?php
    $category_description = category_description();
    if ( ! empty( $category_description ) )
    echo '’ . $category_description . ”;

    /* Run the loop for the category page to output the posts.
    * If you want to overload this in a child theme then include a file
    * called loop-category.php and that will be used instead.
    */
    get_template_part( ‚loop’, ‚category’ );
    ?>

    ad. 4. rozumiem, że ten kod wklejam na końcu treści przed znakiem „}”

    Proszę o pomoc w tym temacie. Jak na razie sama wprowadziłam wszystkie zmiany w mojej stronie ale z tym to jakoś nie mogę sobie poradzić.

    Odpowiedz
  2. Marcin Makowski

    Działa. Mam jednak pytanie: czy istnieje możliwość umieszczenia poza pętlom (‚loop’) chodzi o o generowanie miniaturek w sidebar.

    Odpowiedz
  3. Marcin Makowski

    Dzięki za info. Zastosowałem rozwiązanie, które dostałem w mailu jednak nie działało. Postanowiłem wykorzystać gotowe funkcje Wp:

    ‚alignleft th’)); ?>

    i działa.

    Odpowiedz

Wyślij komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.