Как сделать миниатюру ссылкой

WordPress — Как сделать миниатюру ссылкой на пост?

У меня есть некоторые проблемы. Я использую тему WordPress — Intergalatic . Но на домашней странице большой фон поста не переносит нас на пост. Фон должен быть кликабельным и перенести нас в пост. Как это сделать?

Это код миниатюры.

Решение

Предполагая, что вы находитесь в цикле, и, судя по всему, вы должны изменить div на anchor

И, вероятно, изменить якорь на display:inline-background; и, возможно, добавьте высоту изображения к стилю, например:

Как получить URL миниатюры записи в WordPress

Опубликовано: ADv Дата 11.04.2020 в рубрике Своя тема Комментировать

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

Примечание: Вы должны знать основы работы темы в WordPress.

Просто вставляем следующий код в цикл, который вы пишете.

Убедитесь, что вы заменили thumbnail-size на нужный вам размер изображения. Стандартными размерами являются thumbnail, medium, large, и full. Вы также можете использовать дополнительные, добавленные вами, размеры изображений. Если вы используете собственные размеры, то стоит пересоздать все миниатюры. Можно задать миниатюру по-умолчанию.

Код делает следующее: сначала он получает ID миниатюры записи, затем он использует полученный ID и воссоздает путь к картинки или URL с помощью функции wp_get_attachment_image_src, которая возвращает массив. Этот массив можно использовать в собственном коде на свое усмотрение.

Мы надеемся, что эта статья помогла вам научиться получать URL миниатюры записи в WordPress.

Как установить стандартную миниатюру поста на WordPress

Введение

Изображения — это неотъемлемая часть не только всех статей, но и самого списка статей в блоге на WordPress. Изображение записи важно, так как оно отображается не только на сайте, но и в любом месте, где кто-то поделится этой записью.

Загрузить изображение, миниатюру для записи легко:

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

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

Для таких ситуаций есть прекрасное решение — установка стандартного изображения для записей.

Создаем миниатюру для записи

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

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

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

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

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

Существует три способа, как добавить стандартное изображение для всех постов, у которых оно не было загружено отдельно. То есть проблема «у записи нет картинки» исчезнет в принципе.

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

Вариант 1: использовать код

Стандартное изображение для записей без изображения можно прописать в файле темы. Сделать это не очень сложно.

1. Откройте файл дочерней темы (или child theme, более подробно читайте здесь ).

2. В функцию the_post_thumbnail() добавьте код ниже:

3. Вместо default-image.jpg напишите название нужного изображения.

4. Сохраните изменения.

Вариант 2: использовать первое изображение в статье

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

Поэтому нужно сделать следующее.

1. Добавьте код ниже в файл темы function.php:

2. Следующий код добавьте в файл дочерней темы:

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

3. Сохраните изменения.

Вариант 3: использовать плагин Quick Featured Images

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

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

Однако и в бесплатной версии есть полезные функции.

1. Установите плагин.

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

Это можно увидеть, зайдя в раздел «Записи»:

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

2. Зайдите в раздел плагина «Изображения по умолчанию»:

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

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

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

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

3. Сохраните внесенные изменения.

Заключение

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

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

Задача получения ссылки на миниатюру в wordpress наверняка попадалась тем, кто активно занимается wordpress разработкой будь то использование разных хаков или доработка шаблонов. Отображение миниатюр, конечно, проще всего реализовать через функцию the_post_thumbnail однако не всегда это возможно. Так, например, для хака получения первой картинки поста требовался именно URL (путь) изображения.

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

1. С помощью функции wp_get_attachment_image_src

Внимание! Здесь вместо параметра ‘Требуемый_thumbnail-size’ нужно указать размер миниатюры, ссылку которой вы хотите получить. По умолчанию это может быть: thumbnail, medium, large, или full. Однако допускается и использование специальных пользовательских типов, если они были определены в теме.

Код, разумеется, нужно размещать внутри цикла loop. Первая функция get_post_thumbnail_id определяет ID превьюшки поста, а вторая wp_get_attachment_image_src считывает ссылку (чуть ниже найдете ее описание).

2. С помощью функции get_post

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

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

Функция wp_get_attachment_image_src

Используется для получения информации о картинках-вложениях. Ее синтаксис следующий.

wp_get_attachment_image_src ($attachment_id, $size, $icon)

Где $attachment_id — ID вложения, $size — требуемый размер картинки (thumbnail, medium, large, full и др.), $icon — должно ли изображение использоваться как иконка.

После выполнения функция возвращает 4 параметра:

1. ссылку на картинку (тот самый thumbnail url, что мы ищем);
2. ширину изображения;
3. высоту изображения;
4. true|false значение в зависимости от того представляет ли файл вложения сгенерированную картинку или полноразмерную, загруженную пользователем.

Кроме того, если функция не нашла соответствующее изображение, она возвращает значение false.

Самый простой пример ее использования:

$image_attributes = wp_get_attachment_image_src( $attachment_ > » w >» height=» » />

Здесь считывается картинка-вложение с >

Итого. Получить в wordpress ссылку на миниатюру можно с помощью функции wp_get_attachment_image_src, которая кроме thumbnail url передает также ширину/высоту изображения.

Мысли. Кейсы. Работающие методики. Мои секреты в интернет-бизнесе.

Как сделать красивое превью ссылки для Вконтакте и Facebook

Если Вы когда-то сталкивались с вставкой ссылки в ВК или Facebook (далее FB), публикацией, шарингом (share\поделиться), то наверняка замечали картинки, которые публикуются вместе с ссылкой. Возьмем, к примеру, mail.ru. Если найти у них какую-то статью и попробовать поделиться ей, то запись в соц. сетях будет опубликована с картинкой, которая передает тему статьи в целом.

Берем вот эту статью — https://afisha.mail.ru/cinema/news/48375/ и пробуем поделиться ей.

Нажимаем на «ВКОНТАКТЕ«. Как видите, к ссылке сразу есть изображение. Так же, автоматически подтягивается название и описание (title, description). Нажимаем «Отправить» и запись опубликуется на стене страницы.

Переходим на страницу и видим запись с заголовком и картинкой. Смотрится это отлично и действительно есть желание кликнуть на нее.

Таким же образом и в FB.

Как же сделать так на своем сайте

Для этого, существует http://ogp.me/. Разметку Open Graph используют Вконтакте, Facebook, Twitter, Google+, LinkedIn, и множество других сервисов. Данная разметка помогает регулировать сниппеты вашего сайта при публикации на различных сервисах: заголовок, описание, картинку и ее размер, ссылку, тип объекта, локализацию и много других. Нас же сейчас интересует именно картинка и ее правильные размеры. Для того, чтобы добавить разметку к себе на сайт, нужно между тегами , разместить нужные данные разметки. По примеру Мейл.ру, размещаем картинку и ее размеры, ссылку на страницу.

После этого, у Вас будет подгружаться нужная Вам картинка с нужными размерами. Выше указан оптимальный размер — 1200 х 630, более делать не нужно. Так же есть отдельные настройки сниппета для Твиттер и FB, об этом можете почитать на официальном сайте Open Graph, ссылка выше. Если у Вас Joomla или WordPress, то можно установить специальные расширения для этого. Для Joomla — Phoca Open Graph, RSSEO и т.д., их можно найти большое количество. Для WordPress — Yoast SEO (желательно Premium).

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

Были времена, когда WordPress не умел работать с миниатюрами (thumbnails). Завершилась эта эпоха в конце 2009 года, когда впервые в движке WordPress появилась их поддержка. Сегодня WordPress предлагает богатый функционал работы с миниатюрами.

Как включить поддержку миниатюр в шаблоне WordPress

Для поддержки миниатюр в шаблоне сайта, в файл functions.php надо добавить следующий php код:

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

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

где news — тип произвольной записи.

Как вывести миниатюры на странице

Код для вывода миниатюр, с ссылкой на статью, в шаблоне сайта:

Значение thumbnail, которое указано в скобках для функции the_post_thumbnail может иметь следующий вид: thumbnail, medium, large, full. Это названия размеров изображений, которые генерирует WordPress по умолчанию.

Добавляем новые размеры к изображениям

Если нужно добавить отдельный вид размеров, со своим названием, то это делается следующим php кодом в файле functions.php:

И чтобы вывести в шаблоне сайта именно это изображение, в функции the_post_thumbnail нужно указывать своё новое название:

Удаление автоматически-создаваемых миниатюр

Обрезка миниатюр в WordPress

Разберем следующий php код:

‘new_size’ — название размера
«400, 300» — ширина и длина
«true» — пропорции картинки будут обрезать ровно.

Последнее значение часто представляет сложность для выбора. Обрезать ли картинки жестко по размерам или убрать значение «true» и тогда картинка будет резаться до самой большей части.

В чем различие true и false?

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

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

Если же не указывать true, то изображения могут быть разных пропорций и не всегда это будет смотреться гармонично. Если хочется заморачиваться, это можно исправить добавив к изображению лишний фон по вертикали или диагонали, чтобы привести картинку к определенным пропорциям, например: 3:2 или 4:3. Фон добавляется в Photoshop или любом другом редакторе.

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

Подключение миниатюр wordpress, их настройка и использование.

Адаптация Сайта под ВСЕ разрешения экранов

Доброго времени суток. Меня зовут Михаил.

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

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

Доброго времени суток, друзья. Сегодня на SdelaemBlog.ru, мы поговорим о миниатюрах wordpress. Или, как их еще можно назвать, превью изображений. В этой статье, вы сможете узнать, что такое миниатюра wordpress, как подключить ее к своей теме, если она не подключена, как настроить ее отображение, а также в каких случаях ее можно использовать на вашем сайте?

И чтобы не затягивать, сразу начнем разбирать все вопросы, перечисленные выше.

Что такое миниатюра wordpress и где ее можно использовать?

Миниатюра wordpress — это уменьшенная копия изображения на сайте, использующем для администрирования движок wordpress, по другому ее можно назвать превью изображения или мини картинка.

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

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

Проверка поддержки миниатюры wordpress темой.

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

Если миниатюры wordpress подключены, то в правой колонке мы увидим окошко под названием «Миниатюра записи», со ссылкой «Задать миниатюру».

Если этого окошка мы не видим, следует проверить отсутствие возможности добавлять миниатюру в настройках экрана. Для этого, в правом верхнем углу, необходимо кликнуть на вкладку «Настройки экрана». И проверить отсутствие пункта «Миниатюра записи».

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

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

Подключение миниатюры wordpress и вывод ее в анонсе статьи.

Чтобы подключить миниатюры wordpress к нашей теме, необходимо в админке, или с помощью текстового редактора NotePad++, открыть файл functions.php и в самом низу, перед ?>, добавить следующий код:

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

А как теперь использовать ее в анонсе статьи? Чтобы вывести миниатюру на главной странице, необходимо прописать в файле index.php или loop.php, в нужном месте код:

Если вы испытываете затруднения в поиске нужного места, то просто найдите вот такой код:

И перед ним вставьте код вывода миниатюры wordpress.

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

Немного подробнее о том, из чего состоит данный код:

• 1. открывающий тег , и закрывающий — тег предназначенный для создания ссылок. Именно он сделает миниатюру ссылкой.
• 2. href=" " — ссылка на статью.
• 3. title=" " — тайтл (заголовок) ссылки, который будет виден, при наведении на нее курсора. Берется из заголовка статьи.
• 4. — функция вывода мини картинки.

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

И между скобками, вместо «здесь стили миниатюры», добавить необходимые стили. Это, что касается обычного, стандартного вывода, без использования, каких-либо параметров.

Параметры миниатюры wordpress.

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

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

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

И соответственно, для каждого параметра, есть свои селекторы, для файла стилей css.

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

Автоматическое назначение миниатюры wordpress и вывод ее в анонсе статьи.

А как быть, если на сайте довольно внушительный список контента и задавать миниатюру вручную, будет довольно проблематично. Для этого мы можем использовать другую функцию, которая автоматически будет создавать мини картинку из первого изображения статьи. Для этого, в файле functions.php, после ?> добавим функцию:

Теперь, чтобы вывести миниатюру в анонсе статьи, то есть на главной, открываем файл index.php или loop.php и добавляем код с функцией вывода миниатюры (функцию из предыдущего примера можно удалить), в то же место, что и при стандартном выводе:

Теперь, немного разберемся, из чего состоит данный код.

• 1. Тег — собственно именно этот тег и будет выводить картинку, так как сама функция только выдергивает ссылку на первое изображение из поста.
• 2. title=" " — тайтл (заголовок) изображения, который можно увидеть при наведении курсора на миниатюру записи wordpress.
• 3. src="https://sdelaemblog.ru/miniatyuri-wordpress" — ссылка на изображение, которое будет выводиться. Как можно заметить, именно здесь находится функция, которая и отвечает за ссылку на мини картинку.
• 4. alt=" " — альтернативный текст изображения. В случаях, когда в браузере отключена загрузка изображений, будет появляться alt, как бы описывая, что здесь должно быть за изображение.
• 5. w >Вполне возможно, что при вставке данного кода, на главной странице появится по два изображения, к каждому анонсу. Результатом этой ошибки может быть использование стандартного вывода анонса:

А чтобы данная ошибка исчезла, достаточно заменить его, на:

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

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

По использованию миниатюры wordpress в анонсе статьи, в принципе все. Но ведь нам еще может понадобится оформить внешний вид картинки, с помощью файла style.css. Возможно, у некоторых возникнет проблема, связанная с тем, какие селекторы использовать, для оформления.

Для оформления мини картинки, выводимой данным способом, можно просто добавить класс для тега . Например, чтобы код выглядел так:

Здесь мы добавили класс mini, который выглядит так: . Вы можете добавить любой другой. После данной манипуляции, стили для миниатюры можно будет прописать вот так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

get_the_post_thumbnail()	the_post_thumbnail()
Возвращает миниатюру поста в виде HTML-тега , возвращаемый HTML-код можно использовать в других функциях или записать в переменную.	Выводит миниатюру поста, является эквивалентом для:
Позволяет в качестве первого параметра указать 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 миниатюры текущего поста из цикла.

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

Как видите, в качестве второго параметра мы также можем указать размер получаемого изображения в виде строки ( один из зарегистрированных размеров, например thumbnail , medium , large , full и т.д.) или в виде массива array( 100, 100 ) . Чтобы миниатюры на сайте получались качественными, задавайте соответствующие размеры.

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

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

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

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

Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2020 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.

WordPress - Как сделать миниатюру ссылкой для публикации?

У меня есть некоторые проблемы. Я использую тему WordPress - Intergalatic. Но на главной странице большой фон почты не доводит нас до поста. Фон должен быть кликабельным и перемещать нас в сообщение. Как это сделать?

Это код миниатюры.

Предполагая, что вы находитесь в цикле, и, по внешнему виду, вы должны изменить div на якорь

И, вероятно, измените привязку для display:inline-background; и, возможно, добавьте высоту изображения в стиль:

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

Доброго времени суток. ��

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

Вывод картинки, текста и описания для сайта, осуществляется благодаря разметке Open Graph. Она как раз и создана для того, чтобы вы видели картинку, название и краткое описание для ссылки, вместо обычного УРЛ. Ведь так же красивее, понятнее и намного эффективнее. Но от куда берется эта разметка Open Graph, если вы ее не добавляли на сайт?

Если вы используете какую-то систему для управления сайтом, в народе "Движок", то скорее всего вы устанавливаете плагины, модули, дополнения и тд. У каждого движка свои названия этих дополнительных опций. Суть в том, что некоторые из них, что рассчитаны на работу в СЕО области и там или автоматически определяются параметры для вывода Open Graph или же вы прописываете, даже не задумываясь для чего. Например, у WordPress, в этом вопросе самый популярный плагин - SEO by Yoast. Так же, часто все формируется автоматически, даже если нет ни плагинов ни разметки. Соцсети и мессенджеры просто берут первую попавшуюся картинку с сайта, тайтл и какой-то текст или описание страницы. Хорошо, если картинку угадает или хотя бы лого поставит, но иногда так бывает, что ставит что попало. Например, иконку какую-то или вообще фон сайта. Согласитесь, это не всегда может понравится.

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

Далее нужно каждому МЕТА-тегу заполнить параметр content="", чтобы правильно это сделать, распишу подробнее, за что отвечает каждый:

• og:title - Заглавие страницы, он же тайтл. Можете скопировать из тега . .
• og:site_name - Название сайта.
• og:url - Ссылка страницы, где вы добавляете этот код. Если это лендинг и у него одна страница, то это просто ссылка на главную сайта. если сайт самописный и у него много страниц, то вам придется для каждой указать свой тег, со своей ссылкой.
• og:description - Описание страницы. Можете скопировать из тега description для страницы, на которую добавляете теги.
• og:image - Ссылка на картинку, что характеризует страницу. Если это тот же лендинг, то можете указать ссылку на лого сайта, или нарисовать конкретную картинку для этих целей. На сайте, этой картонкой выступает изображение для статей и тд.

Готовый вариант может быть примерно таким:

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

Недавно была написана новая статья об Open Graph с инструкцией для WordPress - Как подключить Open Graph к WordPress

На этом все, спасибо за внимание. ��

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂