Как вывести миниатюру записи wordpress

Работа с миниатюрами записи в WordPress

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

Миниатюра записи – это прикрепленная превью картинка, к анонсу записи в WordPress. В полной записи, этой картинки может и не быть или у неё будут другие размеры. Миниатюра и обычное изображение записи (контент статьи) – это не одно и тоже.

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

Как убрать миниатюру из записи

Если в админке WordPress вы откроете какую-нибудь запись, то в правом сайдбаре, увидите бокс – Изображение записи. Бокс содержит саму миниатюру, кнопку заменить изображение и ссылку Удалить изображение записи. Нажимаете на ссылку и миниатюра удалится только из записи, но не из медиа-библиотеки.

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

Как вывести миниатюру записи

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

function twentynineteen_setup() <
add_theme_support(‘post-thumbnails’);
>
add_action( ‘after_setup_theme’, twentynineteen _setup’ );

Пока что мы видим миниатюру записи только в админке. Для вывода её на сайте, нужно внутри цикла в файлах темы добавить функцию the_post_thumbnail(). Эта функция выводит html код изображения миниатюры и вставляет его вместо статичного тега img.

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

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

Как запретить создавать дубли изображений

По умолчанию WordPress генерирует как минимум четыре изображения с разными размерами, в момент попадания оригинальной картинки в папку uploads. Количество таких копий может быть от 4 до 10 штук в зависимости от темы. Большое количество графики сжирает место на вашем хостинге, между прочим не бесплатное. В то время, как от силы используется лишь половина картинок.

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

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

WordPress втихаря генерирует ещё один размер medium_large. Отключить его можно двумя способами:

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

Как изменить размер миниатюры

WordPress предусмотрел возможность изменять размер миниатюр.

В настройках медиафайлов, просто меняете размеры на нужные вам. В админке указаны три стандартных размера: 150×150, 300×300 (medium) и 1024×1024 (large). WordPress создаст миниатюру с новыми указанными размерам по самой широкой стороне, сохраняя пропорции.

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

Передадим три параметра: название, ширину и высоту.

//добавим в function.php
add_image_size( ‘new-thumb’, 50, 50 );

// выведем свою миниатюру записи в index.php
the_post_thumbnail(‘new-thumb’);?>

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

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

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

, пробовали его в самый верх после Анастасия :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Достаточно поменять параметры в 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’));

Источник

get_the_post_thumbnail() WP 2.9.0

Получает IMG тег миниатюры поста, если она существует.

Когда нужно получить только URL картинки, используйте get_the_post_thumbnail_url().

Стилизация миниатюр

Миниатюры создаваемые этой функцией получают класс wp-post-image (class=»wp-post-image»). Также, устанавливается класс в зависимости от размера миниатюры. В CSS миниатюры стилизуются через следующие селекторы:

Также можно задать свой класс:

Хуки из функции

Возвращает

Использование

Размер необходимой миниатюры:

По умолчанию: ‘post-thumbnail’

Строка в виде запроса или массив аргументов, которые определят атрибуты тега img.

Примеры

#1 Что вернет функция

#2 Базовый пример использования

#3 Размеры миниатюр

Размеры для картинок в WordPress обозначаются условно:

Указать конкретные размеры в пикселях для каждого типа можно в настройках (Параметры > мадиафайлы).

Эти примеры показывают, как можно получить картинку нужного размера:

Список изменений

С версии 2.9.0Введена.
С версии 4.4.0$post can be a post ID or WP_Post object.

Cвязанные функции

post_thumbnail image (картинки миниатюры поста)

thumbnail (image картинки-миниатюры)

Миниатюры

Миниатюры Вложения

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

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

Источник

Миниатюры записей и страниц в WordPress. Как задать и как вывести миниатюру поста?

Чуть больше практики по работе с миниатюрами WordPress в моём видеоуроке.

Потрясающая фишка в WordPress!

Начну с нуля. Итак, для начала вы должны понять разницу между миниатюрами и обычными изображениями из поста. Миниатюра — это что-то вроде превьюшки к посту, в самом посте она может даже и не использоваться.

Предположим, у вас есть какая-то категория, и на странице этой категории перед некоторыми записями (а может быть и перед каждой) есть какая-то картинка, которая по сути и является превьюшкой поста, т.е. миниатюрой. Если мы перейдем на страницу одной из записей, то можем найти эту картинку в её содержимом, а можем и не найти.

В общем ладно, в двух словах, миниатюра — это изображение-превью к постам, которое:

По сути вы можете использовать ее даже в качестве фона сайта, т.е. для каждой записи — собственный фон.

Шаг 1. Включение поддержки миниатюр для вашей темы WordPress

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

Всё, что нам потребуется для активации миниатюр — это вставить следующую строчку кода в ваш файл functions.php (файлов с таким названием может быть много — нам нужен именно тот, который находится непосредственно в папке с вашей текущей темой).

Если вы не хотите использовать миниатюры во всех типах постов сразу, вы можете подключить их например только для записей ( post ):

или только для страниц ( page ):

или только для записей и только для страниц:

Можно ли назначить миниатюру таксономии WordPress?

Стандартными средствами — нет. Вы можете использовать какой-нибудь из плагинов, добавляющих произвольные поля для таксономий (рубрик и меток в том числе), либо прописать URL изображения в описании вашего конкретного элемента таксономии.

Шаг 2. Как установить миниатюру для поста?

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

Способ 1. Метабокс «Миниатюра записи»

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

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

Для начала посмотрите в правую верхнюю часть страницы (возможно ее потребуется проскроллить к началу). Там должна быть вот такая вкладка Настройки экрана:

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

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

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

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

Способ 2. Кнопка «Добавить медиафайл»

Итак, переходим на страницу редактирования поста и нажимаем кнопку Добавить медиафайл:

В появившемся окне кликаем по ссылке Задать миниатюру:

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

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

Шаг 3. Выводим миниатюры постов на страницах сайта

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

Рассмотрим оба случая.

the_post_thumbnail() и get_the_post_thumbnail(). Стандартный способ вывода миниатюр.

Позволяет в качестве первого параметра указать ID поста, миниатюру которого нужно получить.При помощи этой функции можно вывести только миниатюру текущего поста из цикла.В качестве второго параметра можно указать размер получаемой миниатюры, по умолчанию — размер, заданный в Параметры > Медиафайлы.В качестве первого параметра можно указать размер выводимой миниатюры.

Особо заморачиваться не будем, рассмотрим один и тот же пример для каждой из функций. Итак, сначала пример для get_the_post_thumbnail():

Этот пример выводит заголовки (функция the_title()) и миниатюры постов со ссылками (функция the_permalink()) на сам пост.

Тот же самый пример для функции the_post_thumbnail():

Получение URL миниатюры при помощи функции wp_get_attachment_image_src() и get_post_thumbnail_id()

Функция wp_get_attachment_image_src() нужна для получения параметров изображения — его URL, ширины и высоты (в данном случае нам будет интересен именно URL). Она не работает в цикле и её обязательным параметром является ID вложения (ID миниатюры в данном случае).

В то же время ID миниатюры мы можем получить, используя функцию get_post_thumbnail_id(), указав в качестве параметра ID поста, иначе будет возвращаться ID миниатюры текущего поста из цикла.

Посмотрим, как это будет выглядеть на примере:

Как выбрать область обрезки миниатюры?

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

Для того, чтобы вы смогли сами выбирать область картинки для отображения на сайте, установите себе плагин Manual Image Crop. Этот плагин позволяет для каждого загруженного изображения для его каждого размера вручную установить область, отображаемую на сайте. Потрясающий инструмент!

Смотрите также

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Источник

Описание тонкостей по выводу миниатюры записи wordpress

Время на чтение: 6 минут

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

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

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

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

Добавление изображения-превью для поста или страницы в WordPress

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

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

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

Проблема повторяющихся изображений в постах

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

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

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

Местонахождение этой строчки может отличаться, но всегда следует начинать поиск с файла «Single.php». На примере стандартного WordPress шаблона Twenty Sixteen, нужно открыть редактора кода, который расположен в разделе «Внешний вид» административной панели. Здесь потребуется открыть файл «Single.php» и найти в коде строчку, отвечающую за вывод контента. Она выглядит так:

get_template_part( ‘template-parts/content’, ‘single’ );

Из этой строчки становится понятно, что продолжать поиск необходимо по файлу «content-single.php». Открыв этот файл в редакторе, вы найдете такую строку:

Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress

Именно она и отвечает за вывод миниатюры на странице отдельной статьи. Имейте ввиду, что эта строчка может выглядеть по-разному, все зависит от конкретного шаблона, но она обязательно должна содержать слова «post» и «thumbnail». Вам нужно просто заменить эту строчку на:

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

Включение поддержки миниатюры в шаблоне

Несмотря на то, что это встроенная функция WordPress, она будет работать только тогда, когда поддерживается установленным шаблоном. Почти все современные шаблоны WordPress поддерживают эту функцию, но иногда попадаются исключения. В таком случае, можно включить вывод превью самостоятельно. Чтобы это сделать, нужно просто добавить несколько тегов в файлы шаблона.

Первым делом, необходимо открыть файл «functions.php», находящийся в папке с темой, и добавить следующую строчку:

Это разрешит вывод миниатюры для записи или страницы во время создания. Если вы хотите включить эту функцию только для записи, то нужно добавить такую строку:

add_theme_support( ‘post-thumbnails’, array( ‘post’) );

А только для страницы такую:

add_theme_support( ‘post-thumbnails’, array( ‘page’) );

Далее, вы должны указать размеры, воспользовавшись один из двух способов, предлагаемых функциями WordPress: пропорциональное изменение или обрезка. В первом случае, изображение будет пропорционально (без искажений) сжиматься, пока не будет соответствовать указанной ширине и высоте. Например, если оригинальная картинка будет 100 × 50, а вы указали 50 × 50, то по итогу получится 50 × 25. Код первого способа выглядит так:

set_post_thumbnail_size( 50, 50 );

Преимущество этого способа в том, что картинки будут показаны целиком. Недостатком является то, что все они будут разного размера, что не всегда соответствует дизайну сайта. Но есть возможность ограничить их только по ширине, оставляя оригинальную высоту. Это можно сделать, просто указав большое число вторым параметром, например, такое 9999.
Как вывести миниатюру записи wordpress. Смотреть фото Как вывести миниатюру записи wordpress. Смотреть картинку Как вывести миниатюру записи wordpress. Картинка про Как вывести миниатюру записи wordpress. Фото Как вывести миниатюру записи wordpress
Второй способ изменения размера – обрезка. В этом случае изображение обрезается, чтобы соответствовать целевому коэффициенту пропорциональности, а затем сжимается, чтобы поместиться в заданные параметры наиболее точно. Код данного способа выглядит так:

set_post_thumbnail_size( 50, 50, true );

Преимущество здесь в том, что все картинки будут одинаковые, а недостаток, что часть картинки будет обрезана, а это может сильно сказаться на ее содержимом и даже исказить его смысл.

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

Заключение

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

Источник

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

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