Миниатюра поста в WordPress: как вывести миниатюру, как задать размер миниатюры

как вывести миниатюру, как задать размер миниатюры

Здравствуйте, уважаемые читатели help-wp.ru.

В этом уроке я хочу рассказать с помощью какого кода можно вывести миниатюру записи, куда вставить код отвечающий за вывод миниатюры, как задать размер миниатюры и как правильно сделать вывод миниатюр wordpress. Миниатюра wordpress – главная тема этой статьи.

Если вас интересует wordpress картинка рубрики советую перейти по представленной ссылке.

Навигация по странице:

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

Как сделать лайтбокс для wordpress миниатюры можно посмотреть перейдя по ссылке.

 

Зачем нужна миниатюра wordpress

Этот вопрос порой задают начинающие блогеры и разработчики WP. Да что там начинающие, еще год назад, когда только начинал этот сайт, я также не понимал смысла от миниатюр. Ну да это красиво, оригинально - не спорю, но резона большого я не видел. Надобность добавлять картинки мне пришла со временем, когда начал больше разбираться в СЕО оптимизации + общаться на эти темы с СЕО специалистами. Своими мыслями, по этому поводу, хочу поделиться с вами. Нажимайте на вкладки ниже что бы прочесть информацию до конца или просто пропустите этот блок, если он вам не интересный (перейти к следующему заголовку вывод миниатюр).

WordPress миниатюра записи нужна:

  • В первую очередь миниатюра записи полезная для оптимизации сайта. На нее можно навесить ключевое слово в категории или разбавить ею сухой текст в посте.

    Главные цели и задачи миниатюр:

    1. Улучшение поведенческих факторов - достигается путем добавления просмотра миниатюры в большом окне.
    2. Сделать текст страницы более привлекательным для ботов.
    3. Продвинуть сайт через фотки, результаты поиска по которым сильно отличаются от основных по тексту в поисковой выдаче.

  • Для пользователей миниатюра wordpress это как минимум удобно и красиво. Удобно кликать по фото, не нужно искать ссылку что бы прочесть пост полностью.

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

    При удачно подобранном дизайне и размере миниатюры сайта – он становится более красивым и привлекательным для посетителей.

 

 

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

к менюДля вывода миниатюры wordpress вам нужно:

  1. Войти в админку блога.
  2. Зайти в редактор поста и выбрать картинку миниатюры WP.
  3. Сохранить запись с изменениями.
  4. В левом меню выбрать Внешний вид ->Редактор.
    вывод миниатюр wordpress
  5. В файлах index.php, page.php, search.php, archive.php выбрать место куда будет вставлен код вывода миниатюры.

Я вставил код сразу после вывода заголовка:

<?php if ( has_post_thumbnail()) {the_post_thumbnail(array(170, 170),array("class"=>"alignleft post_thumbnail"));} ?>

Где 170, 170 — размер миниатюры. После вставки кода не забывайте обновлять файлы.

Остается поэкспериментировать с оформлением. Откройте файл style.css и создайте класс .alignleft, например, используя такое оформление:

.alignleft {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
border: 1px solid #77808A;
border-radius: 3px 3px 3px 3px;
margin: 5px 10px 5px 5px;
padding: 2px;
}

 

Миниатюра wordpress отсутствует в редакторе

к менюНе получается задать миниатюру WP: она отсутствует в редакторе? - не беда, читайте далее и я расскажу вам как решить эту проблему.

Иногда разработчики темы Вордпресс забывают подключить вывод миниатюр. В итоге, в правой колонке редактора поста, вот здесь:

миниатюра wordpress
у вас будет отсутствовать возможность задать миниатюру.

Решить эту проблему можно довольно просто, вам достаточно открыть файл functions.php вашей темы и в самое начало, страницы закинуть вот такой код:

<?php add_theme_support('post-thumbnails');
set_post_thumbnail_size(150,150,TRUE); ?>

Сохраняем файл. Теперь можем обратно войти в редактор поста и мы там уже должны увидеть возможность задать миниатюру.

Если этого не случилось, возможно вы допустили ошибку или какой нибудь код, плагин дальше - блокируют вывод миниатюры WP. В любом случае это требует отдельного разбирательства.

Возникли проблемы? - вы всегда можете задать свой вопрос в комментариях или в разделе Вопрос/Ответ.

 

Ссылка на миниатюру поста в wordpress

к менюОписанный выше вариант будет выводить готовый хтмл код миниатюры, повлиять на него мы можем через настройки, однако, бывают случаи, когда нужно получить ссылку на полный размер миниатюры, а также получить ссылку на обрезанную миниатюру WordPress. Об этом дальше и поговорим.

Как получить ссылку на картинку заданного размера

Для этой задачи существует волшебная функция wp_get_attachment_image_src (будет открыта в новой вкладке).

Я это делаю вот так:

<?php $large_image_url=wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail'); ?>

Теперь переменная $large_image_url будет хранить такие данные:

$large_image_url[0]=>"ссылка на изображение"

$large_image_url[1]=>"ширина картинки"

$large_image_url[2]=>"высота картинки"

Предположим что нам нужно получить ссылку на полный размер миниатюры для последующей ее обработки. Для это, нам нужно изменить параметр 'thumbnail' на 'full', вот так приблизительно это будет выглядеть:

<?php $large_image_url=wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');?>

В результате, получим все ту же ссылку на нулевом месте массива: $large_image_url[0].

В таком случае ссылка на миниатюру будет генерироваться приблизительно вот так:

<?php
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full);
$image_url_min = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail);
?>
<a href="<?php echo $large_image_url[0]; ?>"><img src="<?php echo $image_url_min[0]; ?>"/></a>

 

Размер миниатюры wordpress

к менюСуществует довольно много способов указать размер миниатюры WP. Все зависит от того, в какой способ мы делаем вывод миниатюры записи.

Способы задать размер миниатюры вордпресс:

  • Если для вывода используется функция the_post_thumbnail($size, $attr), то мы можем указать размер миниатюры первым параметром. Мы можем это сделать используя обычный массив с двумя числами array(150,150) или же используя штатную строку:

    • thumbnail
    • medium
    • large
    • full

    По умолчанию используется "post-thumbnail" - который был задан через set_post_thumbnail_size (в начале я уже оговаривался о этой функции.)

    В итоге функция вывода может выглядеть вот так:

    <?php if ( has_post_thumbnail()) {the_post_thumbnail("thumbnail",array("class"=>"alignleft"));} ?>

    Обратите внимание: более подробно о том, как задать новые размеры изображений wordpress описанно по этой ссылке.

  • Второй способ указать размер миниатюры wordpress еще более интересный.

    Нам достаточно открыть файл functions.php найти строку set_post_thumbnail_size и изменить для нее размер.

    Учтите: размер изменится только для новых изображений. Чтобы изменить размеры уже загруженных миниатюр надо воспользоваться плагином Regenerate Thumbnails.

    Если такой строки нет, ее можно самостоятельно забросить в самый конец файла

    set_post_thumbnail_size(150,150,TRUE);

    Вывести такой размер миниатюры можно даже так:

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

  • В случае вывода изображения через функцию wp_get_attachment_image_src вы можете воспользоваться, как и в первой функции стандартным набором зарезервированных размеров: "thumbnail", "medium", "large" и "full".

    Обратите внимание на размер "medium" - он генерируется 300х300 с учетом пропорций. То есть, может быть случай когда одна сторона равна 300 а вторая автоматическая.

    Также можно задать свой размер через массив чисел, как и в первом случае.

    Выводить миниатюру в таком случае будем вот так:

    <?php if ( has_post_thumbnail()) {
    $image_url_min = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail); ?>
    <img src="<?php echo $image_url_min[0]; ?>"/>
    <?php }?>

Более подробно о том, как изменить размер миниатюры wordpress можно прочесть по этой ссылке.

Как проверить есть миниатюра или нет

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

Сделать проверку на то есть миниатюра WP или нет очень просто, нужно обернуть код вывода миниатюры в вот такой PHP код:

<?php if(has_post_thumbnail()){ ?>
...ваш код вывода...
<?php } ?>

 

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

В качестве спасибо можно поделится этим постом со своими друзьями в соц. сетях:

Комментарии к записи «Миниатюра поста в WordPress: как вывести миниатюру, как задать размер миниатюры»:
  1. Сергей:
    30.08.2018 в 09:07

    Очень надеюсь, что увидите мой вопрос.
    Как сделать, чтобы миниатюра записи отображалась не сразу за заголовком, а после первого абзаца статьи. Этот абзац при написании cnfnmb отделен от остального текста тегом more.
    Заранее спасибо!

    ответить
    • admin:
      30.08.2018 в 09:51

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

      $str='Ваш код миниатюры';
      $text=str_replace("<!--more-->","<!--more-->".$str,get_the_content(""));
      echo apply_filters("the_content",$text);

      Суть такова, мы находим тег море и заменяем его на миниатюру, должно работать

  2. Damir:
    22.03.2018 в 08:31

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

    ответить
    • admin:
      22.03.2018 в 10:35

      Добрый день.
      Эта строчка добавляет миниатюры ко всем типам add_theme_support('post-thumbnails');
      Попробуйте забросить ее в начало functions.php

  3. Валерий:
    08.11.2017 в 01:53

    Здравствуйте, в некоторых темах (например GeneratePress или SKT Magazine) при установке в вп "изображения страницы" (-url-) , это изображение появляется по умолчанию на самой странице (-url-) как его со страницы убрать ? нужно сделать так (-url-) . С уважением

    ответить
    • admin:
      08.11.2017 в 11:03

      Добрый день.
      Чтоб убрать нужно залезть в код темы, (если это пост то single.php если страница то page.php) и искать там подключение миниатюры. 99% что вы их там не найдете, но увидите какой файл content-***.php отвечает за отображение этой страницы, может быть content-singe.php но не факт, и там уже смотреть подключение вывода миниатюры. Ориентируйтесь по коду the_post_thumbnail или wp_get_attachment_image_src и просто аккуратно закомментировать (но так делать не хорошо, нельзя будет обновляться, лучше создать дочернею тему на основе этой и туда закинуть правленный файл)
      Или просто скрыть через стили поставив свойство display:none;

    • Валерий:
      08.11.2017 в 19:57

      Нашел! Спасибо !

    • Валерий:
      08.11.2017 в 20:05

      Уважаемый админ. Мне нужно, чтобы в страницу вставлялся текст из "отрывка" в админке (-url-). Как это сделать подскажите пожалуйста ))

    • admin:
      09.11.2017 в 10:49

      Воспользуйтесь функцией the_excerpt() или get_the_excerpt(). Они выводят эти отрывки, хотя я бы лучше использовал произвольные поля на АЦФ

  4. Анастасия:
    31.08.2017 в 08:41

    Здравствуйте, у меня в wordpress нет кнопки "задать миниатюру". Пробовала способ с изменением functions.php, не помогло. Убирала плагины, то же самое. Если добавляю товар и галерею товара, то выводиться это все в одну вертикальную линию и не в миниатюре.

    ответить
    • admin:
      31.08.2017 в 09:54

      Добрый день. Вы этот код добавляли в functions.php:
      add_theme_support('post-thumbnails');
      set_post_thumbnail_size(150,150,TRUE);

      , пробовали его в самый верх после <?php ??
      Должно работать. Единственный момент ссылка в правом баре может называться не "задать миниатюру", а на английском языке.

    • Анастасия:
      31.08.2017 в 11:39

      Да, он там стоит. Не знаю что делать. А если поменять шаблон то что нибудь может измениться?

    • admin:
      31.08.2017 в 11:52

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

  5. Дмитрий:
    30.10.2016 в 19:36

    Добрый день, подскажите пожалуйста, как сделать миниатюру активной-ссылкой при нажатии?

    ответить
    • admin:
      31.10.2016 в 11:09

      Добрый.
      Немного не понял ваш вопрос. Вообще в цсс за нажатый элемент отвечает псевдоэлемент :active , но что нужно вам я не совсем понял 🙁

    • Дмитрий:
      31.10.2016 в 11:37

      Постараюсь объяснить более подробно

      Скриншот:
      (-url-)

      У нас на главной странице есть блок - направления деятельности компании, который состоит из подразделов, которые вы видите на скриншоте.

      Так вот, при нажатии на название раздела - открывается нужная страница, но при нажатии на картинку (миниатюру) - ничего не происходит.
      Простыми словами как для картинки в данном случае (которая является миниатюрой записи) прописать ссылку, которая будет вести на необходимую страницу?

    • admin:
      31.10.2016 в 11:45

      до вывода миниатюры:
      <a href="<?php the_permalink();?>">
      миниатюра
      и после
      </a>

    • Дмитрий:
      31.10.2016 в 13:17

      Спасибо большое!

      Но есть еще вопрос, где прописать этот код? Я так понимаю в БД или в редакторе для определенного типа страниц?

    • admin:
      31.10.2016 в 13:24

      в шаблоне, который отвечает за вывод этих миниатюр. Нужно искать это место

    • Дмитрий:
      31.10.2016 в 16:11

      Понял, спасибо большое.Буду пробовать.

  6. Босс:
    17.10.2016 в 20:58

    Подскажите как бы сделать чтобы картинку брало только если она над текстом, а если в тексте то не выводим миниатюру? Также нужно чтобы выравнивание брало этой же исходной картинки. Если по центру стояла в записи, то и пусть выводится по центру. Как так сделать?

    ответить
    • admin:
      18.10.2016 в 09:44

      Добрый день.
      Вы пробовали выводить текст с помощью the_content(''); на странице рубрик? - или где вам нужно такое сделать. Если использовать эту функцию вместо the_excerpt() и самостоятельно управлять длинной текста краткого описания more, то у вас должно получится то что вы пишите.

      Хотя конечно, лучше это делать через миниатюры в отдельное место загрузка фото.

    • Босс:
      18.10.2016 в 15:18

      Игорь, большое спасибо за помощь. Данное решение мне помогло!)

    • admin:
      18.10.2016 в 15:25

      Пожалуйста 🙂

  7. Антон:
    15.09.2016 в 01:14

    Добрый вечер! Мой блог-(-url-), недавно произошло какое то обновление и все миниатюры стали меньше в размере, подскажите, пожалуйста в чём дело?! а в редакторе код управления миниатюрами выглядит так:
    ID , array( $myThemes_layout -> width , 999 ) , esc_attr( $post -> post_title ) ); ?>
    чего править я не понимаю?!

    ответить
    • admin:
      15.09.2016 в 10:15

      Добрый день.
      Все миниатюры стали 90*68 пх.
      Нужно проверять настройки темы, возможно вы сбросили их. А возможно вы обновили тему, а правки вам сделали прям в нее, вместо того чтоб создать дочерную тему. Если есть полноценная копия темы можно попробовать залить ее по новой, если нет можно поискать копии на сервере

  8. Ирина:
    24.05.2016 в 12:57

    Большое спасибо, все работает.
    Благодаря этому уроку я смогла добавить миниатюры для записей на странице рубрик. Теперь понимаю что не так все и сложно в моем сайте.

    ответить
  9. Наталья:
    06.04.2016 в 11:24

    Даже в платных темах не всегда разработчики используют проверку существования миниатюры if(has_post_thumbnail()){ , а это важно. Ведь в противном случае будут теги img без ссылки внутри. Валидацию такой сайт точно не пройдет.
    Большое спасибо что учите правильно выводить миниатюры записи. Из таких мелочей и складывается СЕО-оптимизация

    ответить
  10. Настя:
    10.03.2016 в 17:10

    Большое спасибо, нашла что искала. Был нужен не вывод миниатюры в хтмл, а получение ссылки на миниатюру и вставка ее в свой хтмл код 🙂

    ответить
  11. Анжелика:
    16.02.2016 в 18:46

    Шикарно! Дорабатываю простенький шаблон, где миниатюрой и не пахло, а так хотелось! Все понятно расписано, получилось все с первого раза! Понадобилось только названия постов переместить и вуаля! Спасибо за полезности!))

    ответить
  12. сео:
    20.11.2015 в 14:18

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

    Сейчас миниатюры это больше эстетическая составляющая, нежели для оптимизации.

    ответить
  13. Ринат:
    17.06.2015 в 12:57

    Спасибо, благодаря вам я понял как генерируется wordpress ссылка на миниатюру поста. Все банально просто: $large_image_url=wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); а я потратил уйму времени чтоб найти это решение. Запишу себе на заметку это решение проблемы, еще раз спасибо

    ответить
  14. Павел:
    04.12.2014 в 13:01

    Пишу:

    "alignleft post_thumbnail")); ?>

    Невыводит вобще ничего. Ни в списке постах ни в отдельном посте.

    ответить
  15. Pickaxe:
    01.10.2014 в 17:24

    Достаточно поменять параметры в functions.php. А размеры не меняются потому, что файл нужно вручную откадрировать, либо полностью удалить из папки UPLOAD и заново через админку залить. Он опять автоматически разобьет файлы на размеры,которые указаны в functions.php.

    ответить
  16. Leonard:
    01.04.2014 в 11:39

    Добрый день. Просьба подсказать, как можно сделать, чтобы на сайте в анонсах статей выводились первые изображения из статей одинакового размера? Спасибо.

    ответить
  17. Анатолий:
    13.08.2013 в 14:15

    Уважаемый Админ. На главной странице моего сайта (-no-url-) анонсы статьи в WP последней версии 3.6 выводятся с миниатюрой размерами 290 х290 пикселей. Как изменить ширину миниатюры до размера, скажем, 580 х 290 с целью заполнения разреженного пространства, занятого текстом справа. Сайдбар оставляем без изменений. Пробовал изменять в functions.php

    function sight_setup() {
    update_option('thumbnail_size_w', 290);
    update_option('thumbnail_size_h', 290);
    add_image_size( 'mini-thumbnail', 50, 50, true );
    add_image_size( 'slide', 640, 290, true );
    register_nav_menu('Navigation', __('Navigation'));
    register_nav_menu('Top menu', __('Top menu'));

    размер 290 на 580 (в админке Параметры---Медиафайлы размеры также изменились 290 на 580, но на выходе по-прежнему выходит миниатюра 290 х290. Помоги, пожалуйста. В данной версии WP 3.6 есть функция вывода миниатюры, размеры которой я задаю заранее в Фотошопе. А что если в файлах index.php, page.php, search.php, archive.php вставить рекомендованный Вами код и попробовать там задать новые параметры 580 х 290. Не войдет ли он в противоречие с файлом functions.php.
    С уважением. Анатолий.

    ответить
  18. Регина:
    02.02.2013 в 11:38

    Спасибо! Все ясно и понятно!

    ответить
Сделать заказ
Онлайн помощь по WordPress
На сайте используются файлы Сookies. Отключить Сookies можно в настройках браузера!