Здравствуйте, уважаемые читатели help-wp.ru.
В этом уроке я хочу рассказать с помощью какого кода можно вывести миниатюру записи, куда вставить код отвечающий за вывод миниатюры, как задать размер миниатюры и как правильно сделать вывод миниатюр wordpress. Миниатюра wordpress – главная тема этой статьи.
Если вас интересует wordpress картинка рубрики советую перейти по представленной ссылке.
Навигация по странице:На блогах разной тематики авторы используют миниатюры записи. Кто-то использует их в каждой записи, кто-то предпочитает вставлять их выборочно. На своем блоге я стараюсь подобрать миниатюры к каждой записи. На мой взгляд они привлекают внимание читателя и, при правильном подборе картинки, являются подсказкой о содержании статьи. По крайней мере, я стараюсь действовать по такому принципу. Если Вы еще не используете миниатюры, то советую обязательно обзавестись ими и прочитать статью Установить миниатюру для записи WordPress.
Как сделать лайтбокс для wordpress миниатюры можно посмотреть перейдя по ссылке.
Этот вопрос порой задают начинающие блогеры и разработчики WP. Да что там начинающие, еще год назад, когда только начинал этот сайт, я также не понимал смысла от миниатюр. Ну да это красиво, оригинально - не спорю, но резона большого я не видел. Надобность добавлять картинки мне пришла со временем, когда начал больше разбираться в СЕО оптимизации + общаться на эти темы с СЕО специалистами. Своими мыслями, по этому поводу, хочу поделиться с вами. Нажимайте на вкладки ниже что бы прочесть информацию до конца или просто пропустите этот блок, если он вам не интересный (перейти к следующему заголовку вывод миниатюр).
В первую очередь миниатюра записи полезная для оптимизации сайта. На нее можно навесить ключевое слово в категории или разбавить ею сухой текст в посте.
Главные цели и задачи миниатюр:
Для пользователей миниатюра wordpress это как минимум удобно и красиво. Удобно кликать по фото, не нужно искать ссылку что бы прочесть пост полностью.
В результатах поиска по сайту или просто на странице категории становится сразу понятно, на интуитивном уровне, о чем пойдет речь в статье. Как минимум улучшается юзабилити сайта.
При удачно подобранном дизайне и размере миниатюры сайта – он становится более красивым и привлекательным для посетителей.
к менюДля вывода миниатюры wordpress вам нужно:
Я вставил код сразу после вывода заголовка:
<?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;
}
к менюНе получается задать миниатюру WP: она отсутствует в редакторе? - не беда, читайте далее и я расскажу вам как решить эту проблему.
Иногда разработчики темы Вордпресс забывают подключить вывод миниатюр. В итоге, в правой колонке редактора поста, вот здесь:
у вас будет отсутствовать возможность задать миниатюру.Решить эту проблему можно довольно просто, вам достаточно открыть файл functions.php вашей темы и в самое начало, страницы закинуть вот такой код:
<?php add_theme_support('post-thumbnails');
set_post_thumbnail_size(150,150,TRUE); ?>
Сохраняем файл. Теперь можем обратно войти в редактор поста и мы там уже должны увидеть возможность задать миниатюру.
Если этого не случилось, возможно вы допустили ошибку или какой нибудь код, плагин дальше - блокируют вывод миниатюры WP. В любом случае это требует отдельного разбирательства.
Возникли проблемы? - вы всегда можете задать свой вопрос в комментариях или в разделе Вопрос/Ответ.
к менюОписанный выше вариант будет выводить готовый хтмл код миниатюры, повлиять на него мы можем через настройки, однако, бывают случаи, когда нужно получить ссылку на полный размер миниатюры, а также получить ссылку на обрезанную миниатюру 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>
к менюСуществует довольно много способов указать размер миниатюры WP. Все зависит от того, в какой способ мы делаем вывод миниатюры записи.
Способы задать размер миниатюры вордпресс:
По умолчанию используется "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 } ?>
Это только примеры, как будет выглядеть ваш вариант решать только вам. Желаю удачи и пишите как все прошло.
В качестве спасибо можно поделится этим постом со своими друзьями в соц. сетях:
Очень надеюсь, что увидите мой вопрос.
Как сделать, чтобы миниатюра записи отображалась не сразу за заголовком, а после первого абзаца статьи. Этот абзац при написании cnfnmb отделен от остального текста тегом more.
Заранее спасибо!
добрый день.
подскажите, как добавить миниатюру для своего типа записей?
тип записей создаю через functions.php
Здравствуйте, в некоторых темах (например GeneratePress или SKT Magazine) при установке в вп "изображения страницы" (-url-) , это изображение появляется по умолчанию на самой странице (-url-) как его со страницы убрать ? нужно сделать так (-url-) . С уважением
Нашел! Спасибо !
Уважаемый админ. Мне нужно, чтобы в страницу вставлялся текст из "отрывка" в админке (-url-). Как это сделать подскажите пожалуйста ))
Здравствуйте, у меня в wordpress нет кнопки "задать миниатюру". Пробовала способ с изменением functions.php, не помогло. Убирала плагины, то же самое. Если добавляю товар и галерею товара, то выводиться это все в одну вертикальную линию и не в миниатюре.
Да, он там стоит. Не знаю что делать. А если поменять шаблон то что нибудь может измениться?
Добрый день, подскажите пожалуйста, как сделать миниатюру активной-ссылкой при нажатии?
Постараюсь объяснить более подробно
Скриншот:
(-url-)
У нас на главной странице есть блок - направления деятельности компании, который состоит из подразделов, которые вы видите на скриншоте.
Так вот, при нажатии на название раздела - открывается нужная страница, но при нажатии на картинку (миниатюру) - ничего не происходит.
Простыми словами как для картинки в данном случае (которая является миниатюрой записи) прописать ссылку, которая будет вести на необходимую страницу?
Спасибо большое!
Но есть еще вопрос, где прописать этот код? Я так понимаю в БД или в редакторе для определенного типа страниц?
Понял, спасибо большое.Буду пробовать.
Подскажите как бы сделать чтобы картинку брало только если она над текстом, а если в тексте то не выводим миниатюру? Также нужно чтобы выравнивание брало этой же исходной картинки. Если по центру стояла в записи, то и пусть выводится по центру. Как так сделать?
Игорь, большое спасибо за помощь. Данное решение мне помогло!)
Добрый вечер! Мой блог-(-url-), недавно произошло какое то обновление и все миниатюры стали меньше в размере, подскажите, пожалуйста в чём дело?! а в редакторе код управления миниатюрами выглядит так:
ID , array( $myThemes_layout -> width , 999 ) , esc_attr( $post -> post_title ) ); ?>
чего править я не понимаю?!
Большое спасибо, все работает.
Благодаря этому уроку я смогла добавить миниатюры для записей на странице рубрик. Теперь понимаю что не так все и сложно в моем сайте.
Даже в платных темах не всегда разработчики используют проверку существования миниатюры if(has_post_thumbnail()){ , а это важно. Ведь в противном случае будут теги img без ссылки внутри. Валидацию такой сайт точно не пройдет.
Большое спасибо что учите правильно выводить миниатюры записи. Из таких мелочей и складывается СЕО-оптимизация
Большое спасибо, нашла что искала. Был нужен не вывод миниатюры в хтмл, а получение ссылки на миниатюру и вставка ее в свой хтмл код 🙂
Шикарно! Дорабатываю простенький шаблон, где миниатюрой и не пахло, а так хотелось! Все понятно расписано, получилось все с первого раза! Понадобилось только названия постов переместить и вуаля! Спасибо за полезности!))
По поводу сео оптимизации вы немного перегнули палку. Да, в принципе миниатуры это хорошо для сео и для сайта в целом, но особого эффекта от самих миниатюр мало, практически нет. Только комплексный подход. Тем более что сейчас поисковики не хотят даже alt хавать у изображений.
Сейчас миниатюры это больше эстетическая составляющая, нежели для оптимизации.
Спасибо, благодаря вам я понял как генерируется wordpress ссылка на миниатюру поста. Все банально просто: $large_image_url=wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); а я потратил уйму времени чтоб найти это решение. Запишу себе на заметку это решение проблемы, еще раз спасибо
Пишу:
"alignleft post_thumbnail")); ?>
Невыводит вобще ничего. Ни в списке постах ни в отдельном посте.
Достаточно поменять параметры в functions.php. А размеры не меняются потому, что файл нужно вручную откадрировать, либо полностью удалить из папки UPLOAD и заново через админку залить. Он опять автоматически разобьет файлы на размеры,которые указаны в functions.php.
Добрый день. Просьба подсказать, как можно сделать, чтобы на сайте в анонсах статей выводились первые изображения из статей одинакового размера? Спасибо.
Уважаемый Админ. На главной странице моего сайта (-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.
С уважением. Анатолий.
Спасибо! Все ясно и понятно!
Приветствую. Есть ли возможность, что бы миниатюры проставлялись автоматом из первой картинки поста? Просто я пошу через прогу и ооочень много постов. Руками , ну просто не реально это сделать.....