Как пользоваться функцией создания миниатюр?

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

В WordPress 2.9 появилось несколько новых фич.
Одна из них - функция создания миниатюр.
Например, так:
Как пользоваться функцией создания миниатюр?
Чтобы включить поддержку этой функции в вашей теме, нужно добавить пару строк в файл functions.php (если такого файла нет, создайте его).

<?php if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' ); ?>

После этого в админке - на странице создания поста появится блок "Установить миниатюру", а в аплоадере картинок - " Добавить медиафайлы с вашего компьютера".
В файлах темы в нужном вам месте, например, перед функцией

<?php the_content('Читать дальше &raquo;'); ?>

добавьте

<?php the_post_thumbnail(); ?>

Оформить вывод изображений можно так:

<div class="thumbnail">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>

А в файл style.css добавить:

.thumbnail {
float: left;
margin: 0 10px 10px 0;
padding: 1px;
background: #e8e1d8;
border: 1px solid #DAD6CA;
}

Функция the_post_thumbnail имеет следующие аргументы:

// миниатюра
the_post_thumbnail('thumbnail');
// средний размер
the_post_thumbnail('medium');
// большой размер
the_post_thumbnail('large');
// исходный размер
the_post_thumbnail();

Мы можем, также, назначить любому изображению наш собственный размер:

// размер миниатюры 50х50
the_post_thumbnail(array(50,50), array('class' => 'alignleft'));
// размер миниатюры 150х100
the_post_thumbnail(array(150,100), array('class' => 'alignleft'));

Теперь перейдите на страницу добавления новой записи.
Обратите внимание - на ней появился блок «Миниатюра записи». Сюда мы можем вставить нашу миниатюру.
Откройте медиазагрузчик и загрузите выбранное изображение.
Одновременно с загрузкой его можно отредактировать: выбрать размер, поменять название, указать альтернативный текст, текст для title, URL ссылки, а также назначить изображению место на странице: слева, по центру или справа.
Для того, чтобы изображение можно было выровнять так, как нам нужно, мы можем присвоить ему класс.

// выравнивание слева
the_post_thumbnail('thumbnail', array('class' => 'alignleft'));
// выравнивание справа
the_post_thumbnail('thumbnail', array('class' => 'alignright'));
// выравнивание по центру
the_post_thumbnail('thumbnail', array('class' => 'aligncenter'));
// выравнивание справа и свой класс 'my_class'
the_post_thumbnail('thumbnail', array('class' => 'alignright my_class'));

Например, так:

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

Здесь мы указали, что наше изображение должно выводится в виде миниатюры (150px × 150px) с выравниванием по левому краю.
Чтобы воспользоваться новыми классами CSS для выравнивания изображений и обтекания их текстом пропишите в файл style.css:

img.alignright {float:right; margin: 0 0 10px 10px }
img.alignleft {float:left; margin:0 10px 10px 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 10px 10px }
a img.alignleft {float:left; margin:0 10px 10px 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

После этого всем изображениям, для которых вы выберете выравнивание слева, будет присвоен класс alignleft, а изображение будет встроено в ваш блог, например, так:

<img src="//example.com/images/leaf.jpg" alt="Мое фото" title="Фото автора"
class="alignleft size-medium wp-image-3109" height="175" width="300" />
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

(2 голоса, в среднем: 3 из 5)

Комментарии

  1. Хороший мануал 🙂

  2. Уже обновился на более раннюю версию...2.9.2 уже есть)) ну все равно большое спасибо за руководство)

    • dimas19, а вы думаете, что в WordPress 2.9.2 миниатюры выводятся по другому? Вовсе нет.
      Вывод изображений в WordPress 2.9.2 и даже в WordPress 3.0 происходит точно так же, как и в WordPress 2.9.

  3. добрый день
    может быть вы мне подскажите ...ни как не могу найти в сети
    ...как сделать, чтобы в сайтбаре в случайном порядке выводились миниатюры статей при клике на которые можно было бы перейти на статью с данной миниатюрой.

    • Для вывода картинок использовать query_posts.
      И в параметрах этой функции поставить orderby=rand - т.е. случайный вывод.

      • а так, чтобы картинка бралась из миниатюры можно сделать?

  4. Добрый день, все прописал как Вы написали в своем посте, но в место картинки ничего не показывает, хотя поле под картинку сделалось. Шаблон channel . WordPress установлен самый новый.
    И еще вопрос, везде на постах пишется, что при установке привью, сами настройки миниатюры настраиваются в новом окне рисунка...у меня такого нет...а при включении функции
    появился в заметках виджет "Миниатюра записи". Так и должно быть?

    • Андрей, я не знакома с темой channel, поэтому не знаю, почему в этой теме данная функция не работает.
      То же самое в отношении Миниатюр записи:
      эта функция в WordPress часто глючит, и я не знаю, как она должна работать в идеале, потому что у меня она работает через раз - поэтому я ее и не пользуюсь.

  5. Подскажите, как сделать миниатюры в виде ссылок на пост.

    • Прочитайте внимательно пост.
      Там об этом написано.

  6. Дело в том, что миниатюры в шаблоне index.php моей темы выводятся немного иначе:
    "alignleft post_thumbnail")); } ?>

  7. Всё, сделал index.php получился такой:
    ****<a href=""> "alignleft post_thumbnail")); } ?>****.
    Спасибо.

  8. А что делать если в самом посте показывается и миниатюра и большое изображение? как убрать можно?

    • Убрать из файла single.php вывод миниатюр.

      • Спасибо разобрался, только функция в post.php была

      • Вывод миниатюр и больших изображений в одной записи победил.
        Но вот, проблема на главной выводится и миниатюра и большая фото. Как убрать большую картинку?
        Еще почему-то в миниатюре именно на главной странице не хочет отображаться заголовок и alt, хотя в большой картинке они отображаются.
        На остальных страницах все нормально.
        Пожалуйста, как для "чайников" - в каком именно файле и что нужно убрать.
        Спасибо.

        • на главной выводится и миниатюра и большая фото. Как убрать большую картинку?

          В выводе постов на Главной (файл index.php) заменить the_content(); на the_excerpt();

          Еще почему-то в миниатюре именно на главной странице не хочет отображаться заголовок и alt, хотя в большой картинке они отображаются.

          Большая картинка выводится из текста статьи, а миниатюра выводится функцией.
          И, если функция не предусматривает атрибутов alt и title, то вы их никак не сможете добавить.

  9. Здравствуйте. Скажите, как вывести анонсы рубрик с миниатюрами на главной странице, как на вот таком сайте: zhenskiyblog.ru.
    Знаю, что надо править single.php, только вот скажите, что именно нужно сделать. Спасибо

    • Прочитайте внимательно этот пост - там как раз об этом.

      • Спасибо за оперативность. Возможно, я ничего не понял 🙂 буду разбираться. Ещё раз спасибо

  10. Чёткий пост, давно искал инфу по управлению миниатюрами

  11. Спасибо большое)! выручили) потихоньку так смотришь и верстать научишься под вордпресс)))

  12. Скажите, пожалуйста, почему при выводе миниатюры со ссылкой на саму статью не выводится задаваемый мною тайтл? Вот код
    <a href = " " title =" "> "alignleft post _thumbnail")); } ?>
    Вставил пробелы специально. В чём моя ошибка?

  13. ААААААААА спасибо , все супер работает!!!!!!!

  14. Делаю вывод определенной рубрики в сайдбаре и столкнулся с тем, что не могу уменьшить размер выводимой миниатюры.
    Миниатюры используются в основной ленте постов с размером 250х250, а как добавить отдельные для сайдбара, с размером 100х100?

    • Все зависит от того, что, где и КАК делаете.
      Не зная особенностей, не могу ничего посоветовать.

  15. Спасибо, полезная статья!

  16. Спасибо за статью, я уже научилась выводить записи с миниатюрами на главную страницу сайта.
    Но! У меня имеются и записи с ссылками на видео в ютубе, или другого сайта, мне бы оч. хотелось вывести на место миниатюрки в такой записи маленькое окошко с видео, а не картинкой. Пока видео показывается на странице с полной записью, а на месте миниатюры - пустое место. Я знаю, что существуют плагины для создания миниатюры с видео, они выводят в поле миниатюры кадр из видео, а мне хочется само видео, но маленькое) Если кто знает, помогите. Буду благодарна.

  17. Здравствуйте. У меня в анонсе записи сейчас стоит миниатюра, когда открываю запись - она же открывается, только чуть-чуть большего размера. Когда я в запись добавляю большую картинку помимо миниатюры, то окрыв запись - там 2 картинки: и миниатюра и большая - все вместе. Скажите, пожалуйста, а как сделать, чтобы в анонсе картинка была как миниатюра, а открыв запись - эта же миниатюрная картинка увеличивалась до полного размера или до указанного размера. спасибо

    • Когда создаешь запись там есть медиафайл! Кликаешь и ставишь галочку выводить только минеатюру!)

  18. Добрый день!
    Людмила, у меня вордпресс поддерживает вывод миниатюры. И тема penscratch.1.0.3 поддерживает вывод миниатюры.
    Миниатюра появляется на главной странице в анонсе статьи, но видимо темой предусмотрено, что картинки должны быть на всю ширину и не обтекаться текстом.
    Я попробовала найти в файле стилей css класс thumbnail чтобы скорректировать - уменьшить размер картинки и сделать обтекание, но не нашелся этот класс в моем стиле.
    Посоветуйте что сделать, если миниатюра выводится темой, но не так как хочется - трудно подобрать такие большие горизонтальные картинки.

    • Чтобы изменить размер картинок, нужно, в первую очередь проверить файл functions.php.
      Код, который нужно найти выглядит так:
      set_post_thumbnail_size(135, 100, true);
      В нем указан размер миниатюр. Измените его нужный вам.
      Также, нужно зайти в админке на страницу Параметры - Медиафайлы и указать там нужный размер миниатюр.

  19. Здравствуйте!
    У меня есть тема "Oversized". Файл functions.php,позволяет менять размер миниатюр.
    Но при этом качество миниатюр не хорошее (240 x 180 px).
    С увеличение размера, качество не меняется. Есть ли возможность увеличить качество миниатюры?

    • Есть, но нужно смотреть по месту.

Ответ на комментарий

Войти, чтобы написать отзыв.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 204
Отзывов 5336