Изменение фона сайта на картинку из превью в статье


Содержание материала:

Новая функция WordPress 2.9 – превью для постов

Просмотрев парочку статей в русских блогах о WordPress и небольшие короткие заметки в англоязычных проектах относительно функции превью для постов в версии 2.9, я подумал, что тема достаточно простая и особо рассказывать там нечего. Но сегодня решил все же чуть более детально рассмотреть вопрос и, к моему удивлению оказалось, что там просто великое множество нюансов. Короче говоря, решил поделиться с вами всеми находками и составить самый подробный мануал относительно функции превью для постов (Post Thumbnail) в WordPress 2.9.

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

Активация функции the_post_thumbnail

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

if ( function_exists( ‘add_theme_support’ ) ) add_theme_support( ‘post-thumbnails’ );

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

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

add_theme_support( ‘post-thumbnails’, array( ‘post’ ) ); // добавить для постов add_theme_support( ‘post-thumbnails’, array( ‘page’ ) ); // добавить для страниц

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

Следующий шаг от Mark Jaquith – установка размеры для ваших превью в шаблоне. Для этого имеется два разных подхода – ресайз или вырезание части картинки. Ресайз позволяет пропорционально уменьшать изображения для поста до указанных вами параметров. Например, у вас есть картинка 100х50, тогда при уменьшении до 50х50 вы фактически получите превью размером 50х25. Преимущество этого метода в том, что отображаться будет все изображение целиком. Плохо то, что в таком случае вы можете получить не всегда одинаковые картинки – ресайз будет производиться то по ширине, то по высоте. В таком случае можно немного «схитрить» и указать для неважной величины очень большое значение – допустим, ширину картинки поставить в 50, а высоту – 9999. В итоге вы получите все превью с шириной 50, что весьма органично впишется в любой дизайн:)

set_post_thumbnail_size( 50, 50 ); // ресайз до размерности 50х50

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

set_post_thumbnail_size( 50, 50, true );

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

Добавление превью (миниатюры) для поста

После активации функции в админке при написании постав вы увидите блок «Миниатюра записи», где можно будет загрузить картинку. После клика на ссылку появится стандартное окно добавления изображения (Add Media), где можно выбрать изображение со своего компа или уже имеющееся в галерее. При выборе картинки из галереи в самом конце страницы с настройками вы найдете ссылочку «Использовать как миниатюру» (Use as thumbnail) – кликаем, и все готово.

На странице после загрузки фото будет такая же ссылка. Если вы все сделали правильно, то превью отобразится в блоке «Миниатюра записи».

Вывод миниатюры (превью) в шаблоне блога

За отображение превью отвечает функция the_post_thumbnail, поэтому в каком-то из файлов шаблона, например, index.php мы пишем:

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

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

Кстати, интересно, что Matt Mullenweg в комментариях на одном из блогов не рекомендовал использовать именные аргументы для функции как thumbnail и другие, но пока никак это не объяснил.

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

Результатом вызова функции the_post_thumbnail() будет генерация тега с классом wp-post-image, для которого вы можете прописать некоторые настройки в CSS по типу рамки или чего-то подобного:

За вторую часть поста спасибо автору данной полезной заметки. Поскольку пост получился немаленьким, то еще один подпункт статьи я вынесу в следующий пост. В принципе, имеющейся информации должно хватить, завтра я покажу парочку полезных примерчиков применения данной функции на практике. Кстати, там в проверке наличия прервью для поста я говорил о другом варианте. Для вывода изображений вполне можно использовать произвольные поля (custom fields) — как раз недавно об этом писал в своем основном блоге.

WordPress.org

Русский

Поддержка → Проблемы и решения → Преобразовать превью (миниатюру) в картинку к записи

Преобразовать превью (миниатюру) в картинку к записи

Здравствуйте!
Есть ли возможность добавить картинку из превью (миниатюры) в начало записи? Может существует какой-то плагин, который может это сделать автоматически, либо код?

У меня забавная ситуация:

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

Сейчас проблема в том, что у меня в блоге есть записи, у которых в начале идёт встроенное видео из YouTube. С помощью плагина (Video Thumbnails), мне удалось создать автоматически превью ко всем записям, где отсутствовала обложка. Проблема в том, что теперь перед каждым роликом аналогичное изображение. Нужно либо через код убрать превью и вставить вместо них соответствующую картинку, либо ещё что-то сделать.

Может у кого есть идеи, как лучше поступить в таком случае?

  • Тема изменена 4 мес., 3 нед. назад пользователем Asome.
  • Тема изменена 4 мес., 3 нед. назад пользователем Asome.

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

  • Ответ изменён 4 мес., 3 нед. назад пользователем O.

Spectrum, спасибо за идею! Надеюсь, Вы правильно поняли, что я имел ввиду: из превью вытащить картинку и телепортировать её в обычную картинку в начале записи (заметки).

Может существует какой-то плагин

Гугл выдал Featured Image in Content. Возможно, подойдет.

Denis Yanchevskiy, спасибо! Уже пробовал, не помогло.

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

Спасибо за советы!

Я решил свою проблему! Пришлось подойти к процессу творчески. Если у кого подобная ситуация, вот Вам инструкция:

Наткнулся на плагин Hide Featured Image, но он работал некорректно, скрывал превью только в записях на главной странице, но миниатюра вновь была видна через категории (разделы / рубрики) и теги (метки).

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

Вот инструкция на английском: Как скрыть превью (миниатюру) в разных записях, которые можно отключить напрямую, или выбрать определённые категории и теги…

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

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

tag — это раздел меток.
none — моя метка, для которой я прописал именно такое название (адрес), когда её создавал.
!important — приписал на всякий случай.

Топ-пост этого месяца:  YAGLA — контекст становится слишком дорогим, а SEO слишком рискованным, поэтому Ягла предлагает

Если кто хочет прописать ID вместо «адреса» метки, то нужно скачать плагин Simply Show IDs.

Как сделать фон сайта картинкой HTML

В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: Фон в HTML. В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.

Картинка в качестве фона страницы — HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:

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

Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.

Картинка в качестве фона страницы — CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:

Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо «сшиваться» по краям.

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

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

SEO оптимизация картинок и изображений для сайта

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

СЕО оптимизация изображений

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

Размер изображения

Чем больше картинка — тем лучше. Если поисковая система найдет несколько дублей одного изображения, она выберет картинку большего размера. Это не значит, что надо вставлять на страницу огромные изображения. Большая картинка в полном разрешении может открываться отдельной страницей по ссылке. На самой же странице достаточно разместить превью изображения. Миниатюра изображения не должна быть слишком миниатюрной (а масло слишком масленым). Изображения меньше 100-150 пикселей поисковики могут расценить как элемент дизайна и не пустить в выдачу.

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

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

Расположение изображения

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

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

Подпись под картинкой

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

Атрибут изображения alt тега img

Атрибут изображения alt — альтернативное текстовое описания изображения. Данный атрибут информирует посетителя сайта о содержимом изображения текстовым сообщением, в том случае, если в браузере пользователя отключено отображение картинок или при загрузке изображения произошла ошибка. Это выглядит примерно так:

Изображение является ссылкой на оригинальную картинку.

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

Атрибут изображения title тега img

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

ЧПУ названия файла изображения

Еще один существенный способ обозначить содержимое картинки и еще больше оптимизировать изображение для поиска — сделать так, чтобы название файла с изображением соответствовало содержимому картинки. Например, если на картинке изображен белый кот, то так и надо написать — belyj-kot.jpg. Так сразу становится понятно, что (скорее всего) внутри файла. ЧПУ (человекопонятный урл) формат гораздо лучше информирует как человека, так и поискового робота, чем pic_7642.jpg. Понятные названия очень позитивно влияют на SEO оптимизацию изображений.

Формат изображения

Чем меньше будет размер картинки в килобайтах, тем быстрее она будет загружаться на странице. Самыми популярными форматами изображений для web являются — .jpg, .png, .gif. Эти форматы изображений в разной степени оптимизированы и позволяют получить хорошее соотношение размера картинки и веса файла для каждого типа изображений (иконки, рисунки, фотографии). Правильно выбирайте формат изображения.

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

Итог: СЕО оптимизированная картинка

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

В оптимизации картинок для поиска нет ничего сложного. Главное — не лениться и прописывать уникальный alt, title и ЧПУ название файла картинки. Такми образом, можно внести на страницу очень много дополнительного текстового контента, который поможет сделать страницы сайта более релевантными. Ну и конечно же не забываем про трафик, который дают СЕО оптимизированные изображения, если они попадают в Яндекс.Картинки и Google Картинки.

Оптимизируйте картинки. Используйте контент эффективно.

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

Клуб Adobe Muse

Открытый клуб · 1 992 участника

Как изменить превью сайта?

Андрей Архипов 0

  • Новенький
  • Участник 0
  • 3 публикации

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

Готовим картинки для сайта без Photoshop

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

  • оригинальными (чтобы не «мозолить» людям глаза одними и теми же картинками из сайта в сайт);
  • качественными (без размытостей или шума);
  • с правильным соотношением размер/вес/качество (чтобы страница загрузилась за 2-4 секунды, а не 20-40 – таких терпеливых мало).

Но лучше 1 раз сделать самому, чем 100 раз прочитать. Поэтому сегодня займемся сугубо практикой.

Допустим, что мы пишем статью о том, какие жилые комплексы строит компания-застройщик, и хотим разбавить «сухой» текст картинками.

Шаг 1. Подбираем картинку

Проще всего открыть поисковик и взять с просторов интернета чуть ли не первое попавшееся изображение типового жилого комплекса:

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

Поэтому берем фотоаппарат и идем фотографировать. Получаем более реалистичное фото:

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

Топ-пост этого месяца:  Учебник по основам HTML, для начинающих

Фотография взята с сайта https://unsplash.com/ – это сборник бесплатных фотографий хорошего качества. Еще один аналогичный сайт – http://isorepublic.com/

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

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

Согласитесь, уже хочется купить. Здесь правильный свет, фон, цвета, яркость и прочее. Товар выглядит реальным и качественным.

Шаг 2. Оптимизируем размеры, вес, яркость картинки

Итак, фотографию мы выбрали (сходили и сняли на обычный фотоаппарат) и загрузили на компьютер, получился вот такой оригинал – http://1ps.ru/files/blog/2020/images-prepare/IMG_20200919_174243.jpg

Теперь посмотрим на его параметры. Для этого наводим курсор мыши на картинку, и над ней всплывает информация:

В пункте «Размеры» указаны ширина и высота фотографии – 1944 на 2592 пикселя. В строчке ниже «Размер» – это вес фотографии – 2,32 мегабайта.

Это большие размеры. Такая картинка, во-первых, займет всю ширину страницы (и даже больше). Во-вторых, будет загружаться 20-40 секунд. Вывод: картинку надо уменьшить.

Для работы с картинками можно использовать специальные программы, например, тот же Photoshop. Но разобраться с ним не так просто.

Поэтому мы воспользуемся одним из онлайн-редакторов фотографий. Я выбрала https://fotostars.me/. Возможно, вы найдете другой, но основные действия во всех этих редакторах совпадают.

Открываем онлайн-редактор, жмем кнопку «Редактировать фото». Загружаем наше изображение.


Сначала уменьшим размер картинки (ширину и высоту). Выбираем справа «Изменить размер»:

Указываем нужные размеры. Например, поставим ширину 900 пикселей. Этого достаточно, чтобы рассмотреть детали на фотографии. Затем жмем «Готово»:

Теперь можем обрезать фотографию, если считаем, что на ней есть что-то лишнее по краям. Выбираем «Обрезать»:

Перетаскиваем мышкой края рамки, выделяя нужную нам часть картинки. Жмем «Готово».

Еще можно изменить яркость и контраст фотографии. Например, если вы делали снимок в пасмурный день. Выбираем пункт «Цвета»:

Перетаскиваем бегунки «Яркость» и «Контраст» и смотрим как меняется наша картинка (она будет слева):

Еще один интересный инструмент – «Температура»:

Передвигая бегунок, можно сделать фотографию более «теплой», солнечной:

Для любителей «поиграться со шрифтами» есть набор готовых фильтров – пункт «Эффекты»:

Например, можем выбрать эффект «Мадрид»:

Размер и яркость картинки мы поменяли, теперь нужно ее сохранить, жмем на иконку «Скачать» вверху справа:

Откроется окно «Параметры сохранения». Здесь отметим качество 75% – картинка сохранится с оптимальным для веба соотношением вес/качество.

Жмем «Сохранить». Теперь нам надо указать имя картинки. Напишем название на латинице и без пробелов, пробелы можно заменить на дефис (-) или символ подчеркивания (_). Хотя кириллицу и пробелы хорошо воспринимают практически все браузеры, всегда есть вероятность (пусть и малая), что у одного из клиентов картинка не отобразится из-за какого-нибудь кириллического символа в названии. Поэтому лучше подстраховаться.

Проверяем теперь параметры фотографии:

Вес картинки уменьшился в 7 раз. Уже лучше, но можно еще чуть больше «сжать» картинку в сервисе https://tinypng.com/. Открываем сайт и перетаскиваем нашу картинку в зеленую рамку справа от жизнерадостной панды:

Панда сжимает нашу картинку еще на 29%. Скачиваем результат по ссылке «download»:

Вообще, 235 килобайт – это тоже довольно «тяжелая» картинка. Для размещения на сайте хорошо подходят картинки весом до 50-60 Кб. Но сделать «легче» эту картинку мы уже не можем, иначе она станет плохой по качеству.

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

Снова идем в фоторедактор (которым пользовались выше), меняем размер картинки на 300*375 пикселей и сохраняем, но только с другим названием, например, добавляем «_preview».

Посмотрим на размеры картинки-превью:

Теперь вес картинки приемлемый. Можем выкладывать ее на страницу.

Шаг 3. Размещаем картинку на странице

Сделаем на примере WordPress (в других админках процесс в целом аналогичен).

Создаем страницу, пишем текст. Ставим курсор туда, куда хотим поставить картинку, и жмем кнопку «Добавить медиафайл» (или ищите кнопку с иконкой «Картинка»).

Загружаем в библиотеку файлов обе картинки – обработанную нами большую картинку и ее превью. Сначала выделим большую картинку и скопируем ее URL (адрес), он нам понадобится чуть дальше.

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

Далее жмем «Вставить в запись» (именно для превью). Картинка вставилась в текст:

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

И сохраняем страницу.

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

Если у вас на сайте установлен плагин для просмотра картинок в модальном окне (lightbox), то большая картинка откроется не в новой вкладке, а во всплывающем окне:

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

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

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

Всех снова рад видеть на страницах полюбившегося вам блога smarticle.ru. С вами вновь ваш покорный слуга с полезной статьей.

Относительно недавно один из наших пользователей спросил нас, возможно ли добавить превью видео, вместо обычного изображения-миниатюры?

По умолчанию, WordPress добавляет только уменьшенные картинки к записям, но а как насчет того, чтобы делать превью видео?

В этой статье мы подробно расскажем как это сделать.

Для этого нам потребуется следующий плагин – Featured Video Plus. Устанавливаем и активируем его, после этого заходим в редактор записей, через создание нового поста или редактирования уже существующего. Там вы увидите новую область под названием «Featured Video».

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

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

Конфигурация настроек превью видео к WordPress

Вы можете настроить ваши ролики в миниатюрах, перейдя в Настройки » Медиа

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

Если вы ничего не выбрали из пунктов выше, то можете вручную отобразить лучшие из них, вставив короткий код [ featured — video — plus ] или php функцию.

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

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

Плагин отлично работает с такими видео хостингами как Youtube, Vimeo, Daily Motion. Если вы хотите установить себе кнопку Youtube на сайт, то переходите по ссылке и применяйте. Все очень подробно по шагам расписано.

Нажимаете на «Сохранить изменения» когда все отстроите и вперед любоваться превью видео к вашим постам в WordPress.

На этом все. Всем пока и спасибо за внимание.

Клуб Adobe Muse

Открытый клуб · 1 992 участника

Как изменить превью сайта?

Андрей Архипов 0

  • Новенький
  • Участник 0
  • 3 публикации

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

Идеальное превью ссылки для Facebook: 7 советов

Оформляем сниппеты, по которым будут кликать. Инструкция от создателей графического редактора Crello.

Цукерберг и его команда регулярно злят пользователей — то радикальными изменениями алгоритма ленты, то брешами в системе безопасности данных. Самые импульсивные громко хлопают дверью и удаляются из соцсети, но таких единицы. Остальные не спешат терять накопленную за годы лояльную аудиторию.

Даже со всеми оговорками Facebook остаётся одной из главных соцсетей, а значит, и важным инструментом продвижения. Приток внешних ссылок на платформу не прекращается, но далеко не всегда они отображаются корректно. И в этом (на удивление) виноват не Facebook, а создатели ссылок.

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

Убедитесь, что картинку видно

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

Ссылка получает неправильный сниппет в двух случаях. В первом виноват неполный или устаревший линк. Тогда в сниппете вообще не будет картинки или она будет неправильной. Во втором — некорректные настройки сайта, на который ведёт ссылка.

Настроить правильные параметры можно при помощи разметки Open Graph. Она помогает социальным сетям, включая Facebook, подхватывать и отображать ссылки на сайт с аккуратными описаниями. Даже если всё настроено правильно, время от времени полезно проверять отображение ссылок. Официальный инструмент Facebook Sharing Debugger поможет понять, всё ли с ними хорошо — там можно проверить ссылки перед шерингом, чтобы исключить ошибки.

Несуществующая ссылка со сниппетом без картинки-превью (слева) и настроенный сниппет (справа)

Топ-пост этого месяца:  Гугл аккаунт — как его создать, защитить вход и узнать 10 секретов, о которых вы не догадывались

Задайте правильный размер изображения

В сниппетах отображается изображение размером 476 × 249 пикселей, но Facebook рекомендует загружать картинки от 1200 × 628 пикселей. Так превью будет хорошо смотреться на мониторах с высоким разрешением.

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

Фотография в сниппете, которая отображается неправильно (слева), и фотография, которая отображается правильно (справа). Фото на превью: Depositphotos

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

Подготовьте несколько шаблонов

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

В Crello есть шаблон «Facebook-реклама» с правильным размером и сотней вариантов оформления. Адаптируйте их или с нуля создайте свои с фирменной цветовой палитрой из брендбука и своим логотипом. Crello также позволяет бесплатно добавлять кастомные шрифты, хотя обычно хватает универсальных Open Sans и Roboto.

Графика для сниппета — с фотографией и иллюстрацией, оба примера сделаны в Crello

Не забывайте об эстетике

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

Качественная фотография в сниппете (слева) и размытая фотография в сниппете (справа). Фото в превью: Depositphotos

Не перегружайте иллюстрации текстом

До лета 2020 года Facebook запрещал размещать на рекламной иллюстрации больше 20% текста. Если требование нарушалось, в публикации отказывали. По новым правилам, текст может занимать больше 1/5 пространства, но чем его больше — тем меньший охват получит рекламный пост.

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

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

Проверка текста на изображении

Создайте динамичный пост

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

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

Скриншот с форматами (слева), кликабельная галерея (справа)

Создайте пост с кнопкой

Формат с CTA-кнопкой увеличивает кликабельность поста в 2,85 раза, но доступен только для рекламных публикаций.

Создавая рекламный пост, выберете кнопку с одним из восьми действий — например, отправить сообщение, подать заявку и узнать о чем-то подробнее. Формат для Facebook довольно новый, поэтому в посте важно объяснить пользователям, зачем нажимать на кнопку — иначе можете их запутать.

Скриншот с форматами кнопки (слева), пост с одной из кнопок (справа). Фото в превью: Depositphotos

Подведём итоги

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

Чеклист, который поможет все сделать правильно:

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

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

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

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

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

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

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

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

  • Заголовок – появляется при наведении курсора;
  • Подпись – можно вывести специальным кодом;
  • Атрибут alt – альтернативный текст, отображается вместо отсутствующего изображения;
  • Описание – краткое описание содержания картинки.

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

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

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

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

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

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

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

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

Именно она и отвечает за вывод миниатюры на странице отдельной статьи. Имейте ввиду, что эта строчка может выглядеть по-разному, все зависит от конкретного шаблона, но она обязательно должна содержать слова «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.

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

set_post_thumbnail_size( 50, 50, true );

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

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

Заключение

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

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