Миниатюры в WordPress

24 июня 2011 года, Размещено в категории: WordPress

Добрый день, сегодня пост про очень красивый вывод записей c миниатюрами в WordPress. Это вывод записей с уменьшенным изображением (миниатюрой). Чаще всего миниатюры в wordpress используется на главной странице, уменьшенные изображения притягивают взгляд к статье и вообще внешний вид сайта с миниатюрами заметно лучше.

Миниатюры в WordPress


Давайте приступим к настройке превьюшек на сайте.

Миниатюры

Изначально, в старых версиях WordPress (до 3), функция вывода миниатюр присутствовала, но была не активирована. Чтобы проверить включена она или нет - Зайдите в админку WordPress и откройте какую-нибудь запись для редактирования, если вы видите вот такой бокс справа – внизу (без изображения):

Превьюшки

Значитё всё нормально и функции Post-Thumbnail включена. Если не видите, то открывайте файл functions.php и вставьте туда вот этот код

add_theme_support('post-thumbnails');

Теперь «окно добавления изображений» будет присутствовать в админке.

Вывод миниатюры

Блок, который изображён на первом скриншоте поста, выводиться с помощью вот этого кода:

<div class="entry">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
  </h2>// Заголовок поста
 
  <a href="<?php the_permalink() ?>"> 
    <div align="center" id="thumbnail"><?php the_post_thumbnail(array(250,187)); ?></div> 
  </a> //Выводиться миниатюра ссылкой на пост
<br/>
	<?php the_excerpt($post,50) ?>// Вывод текста и его размер
<br/>
           <a href="<?php the_permalink() ?>">Читать Далее...</a>
</div>

Вывод миниатюры осуществляется при помощи функции:

<?php the_post_thumbnail(); ?>

Оформление миниатюр в WordPress

Чтобы изменять размеры выводимой картинки, надо добавить размеры в функцию вывода:

// размер 50х50 пикселей
the_post_thumbnail(array(50,50));
// размер 150х100 пикселей
the_post_thumbnail(array(150,100));

Так же мы можем создать выравнивание для миниатюр, дописав нужный класс к функции:

// выравнивание справа
the_post_thumbnail('thumbnail', array('class' => 'alignright'));
// выравнивание слева
the_post_thumbnail('thumbnail', array('class' => 'alignleft'));
// центрирование
the_post_thumbnail('thumbnail', array('class' => 'aligncenter'));
//Таким же способом можно присвоить какой-нибудь класс к миниаютере и потом уже оформлять 
//с помощью него в CSS, например класс – one:
the_post_thumbnail('thumbnail', array('class' => 'one'));

На этом всё, спасибо за внимание. Если возникнут вопросы, то пишите в комментариях, всем с удовольствием отвечу.






27 комментариев

  • 6 лет назад Ответить

    Спасибо, очень хороший урок. Как раз искал как сделать вывод вот таких превьюшек на главной странице

    • 6 лет назад Ответить

      Пожалуйста, подписывайтесь на RSS, я в скором времени более подробно буду описывать вёрстку шаблона для WP.

  • 6 лет назад Ответить

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

    • 6 лет назад Ответить

      Вот так:
      <a href=»<?php the_permalink() ? rel=»nofollow»>»>
      <?php the_post_thumbnail(array(250,187)); ?>
      </a>
      Подкорректируйте ковычки только, а то WP почему-то режит.

  • 6 лет назад Ответить

    Извините, а у меня функция the_excerpt($post,20) не реагирует на количество слов, выводит весь стандартный набор до самого тега . И если для превью в категориях это подходит , то для сайдбара — нет. Не подскажете как быть.

    • 6 лет назад Ответить

      Опишите эту функцию в файле function.php, вашей темы:

      <?php
      // Вывод the_excerpt, с кол-ом символов
      function the_excerpt2($post, $count = 30) {
      if(empty($post)) {
      the_excerpt();
      return false;
      }
      $content = trim(strip_tags($post->post_content));
      $content = explode(' ', $content);
      $content = array_slice($content, 0, $count);
      $content = implode(' ', $content);
      echo $content; return true;
      return true;
      } ?>

      Если не будет работать, то дайте другое название функции, например the_excerpt2 и в шаблоне тогда надо будет использовать новое название.

  • 5 лет назад Ответить

    Сайт находится в разработке.Как сделать, чтобы на главную не выводились новостные материалы.На ней я хочу разместить только
    одну постоянную запись.

    • 5 лет назад Ответить

      Посмотрите в админке — Параментры — Чтение.

  • 5 лет назад Ответить

    Возникла трудность. После добавления
    if ( function_exists( ‘add_theme_support’ ) ) add_theme_support( ‘post-thumbnails’ ); в functions.php
    не добавляется меню для вставки превью на странице создания записи. Пробовал с этой же темой на локалхосте, все ок, а на самом сайте не хочет. Пытался на WordPress 3.3.1. и 3.3

    • 5 лет назад Ответить

      Для последних версий WP не надо добовлять этот код. Превьюшки должны работатб сразу.

      • 5 лет назад Ответить

        Проблема в том, что на локалхосте эта функция присутствует, а когда переношу шаблон на сервер — пропадает.

        • 5 лет назад Ответить

          Напишите в саппорт хостинга, может у них что-то отключено.

  • 5 лет назад Ответить

    Можете подсказать по данной теме, а то ни как не могу сообразить чёта, мне нужно в sitebar вывести одну последнюю миниатюру с размером 114х157 с поста сайта и чтобы при клике по ней, открывалась данная статья. Вот собственно это не получается пока сделать. Подскажите пожалуйста, что именно нужно прописать в файле function и в месте вывода данной миниатюры??
    За ранее очень благодарен!

  • 5 лет назад Ответить

    хай.занимательно, но возникла трабла!!
    Можно ли реализовать вот таким образом:
    -за каждой категорией прикреплена картинка;
    -когда выводится материал с определённой категории,то в миниатюре автоматом ставится прикреплённая картинка.
    Знаю что бред, но можно такое сделать? Я видел на ДЛЕ похожее..спс))

    • 5 лет назад Ответить

      Без специального программинга нельзя. Надо программиста вам искать.

  • 5 лет назад Ответить

    Может вы и мне подскажите в моей проблемы. Видела на многих сайтах, что вместо цитаты миниатюры и названия, выводится миниатюра и название. Мне тоже нужно выводить лишь картинку и название в две колонки на страницах рубрик. Мне это очень нужно так как сейчас работаю над созданием своего уникального кулинарного сайта. Прошу, просто молю Вас о помощи! Помоги утопающиму новичку в этом деле. Заранее спасибо!

    • 5 лет назад Ответить

      Уберите < ?php the_excerpt() ?>, он отвечает за вывод описания.

  • 5 лет назад Ответить

    Подскажите, а какой код отвечает за вывод картинок (а не миниатюр) на главной?

    • 5 лет назад Ответить

      Это сама функция вывода картинок the_content, если в посте есть картинка, то она будет выводится и на главной.

  • 5 лет назад Ответить

    Здравствуйте! Я хочу заранее попросить прощения за свою, скорее всего, глупую просьбу :). Решение моей проблемы, уверен, очень простое, но для меня все такое сложное! Я вот, что хочу сделать. Хочу в сайдбаре вывести 1 рубрику (блоги), хочется, чтобы была фотография, заголовок, и немного описания. И чтобы новый написанный пост заменял старый… Блогеров будет несколько, и снова хотелось бы, чтобы в конце краткого описания была ссылка (читать далее) , а немного ниже все блоги этого блогера. Мог бы мне кто-нибудь помочь с кодом ? Буду очень благодарен!
    Спасибо.

  • 5 лет назад Ответить

    Владислав Тебе нужно, что бы выводился примерно, как на этом в сайте rendzhi.com?

  • Спасибо. Как говорится все гениальное просто. А есть какой-нибудь вариант чтоб подхватывалась первая картинка в записях?

  • 4 года назад Ответить

    Подскажите, как вывести посты из одной рубрики, например новости? Спасибо заранее.

  • 4 года назад Ответить

    Помогли очень с выводом размера миниатюр the_post_thumbnail(array(150,100));

  • 4 года назад Ответить

    Наконец то я нашел то, что искал.
    С успехом применил данную функцию. А то какие то плагины, сложные настройки, а тут все так предельно просто..
    Огромное спасибо автору сайта!

  • 3 года назад Ответить

    Добрый день! Не подскажите, как сделать, чтобы вместо миниатюр на главной странице появлялись картинки из поста. В моей теме simple catch если я не вывожу миниатюры, то картинки не появляются на главной странице, остается одно потолно текста.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы:

Метки: