Wordpress

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

29.04.2021

Содержание

Как предотвратить двойной вывод миниатюр в записях WordPress

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

Почему миниатюры выводятся дважды?

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

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

Как исправить это?

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

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

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

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

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

Источник: wpbeginner.com

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

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

Зачем и когда полезно скрывать миниатюры в WordPress?

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

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

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

Можно представить множество других ситуаций, когда вам придется скрыть миниатюру записи.

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

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

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

Просто перейдите в редактирование записи, в которой вы хотите скрыть миниатюру. В окне редактирования записи немного прокрутите страницу, и вы увидите блок под названием ‘Show/Hide Featured Image’.

Нужно отметить галочку рядом с опцией ‘Hide Featured Image’. Теперь можно сохранить запись и просмотреть на действие плагина на сайте.

Обратите внимание, что даже не смотря на то, что мы не убирали миниатюру у записи, плагин справился с работой и скрыл ее на сайте. Этот плагин НЕ удаляет или убирает в настройках миниатюру, он просто прячет ее на фронтенде вашего сайта. Если же вам понадобиться вернуть миниатюру снова, просто отредактируйте запись и снимите галочку у опции ‘Hide Featured Image’.

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

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]

Rating: 5.0/5 (6 votes cast)

Как обновить размеры миниатюр в WordPress с помощью Regenerate Thumbnails

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

Размеры изображений

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

  • photo.jpg
  • photo-150×150.jpg
  • photo-300×126.jpg
  • photo-672×360.jpg

Здесь видно, что к оригинальному изображению photo.jpg было создано три дополнительных файла для наших размеров. Размеры по умолчанию в WordPress можно изменять в разделе Параметры → Медиафайлы, а используются они при вставке изображений в записи, при создании галерей и в других местах.

Настройки размеров изображений в WordPress

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

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

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

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

Плагин Regenerate Thumbnails

Популярный плагин Regenerate Thumbnails позволяет обновить или перегенерировать все размеры изображений для всех существующих файлов в медиатеке WordPress. Сделать это можно в разделе Инструменты → Regen. Thumbnails:

Обновить миниатюры для всех файлов в WordPress

Если вы хотите обновить размеры только для определенных изображений в медиатеке WordPress, сделать это можно в разделе Медиафайлы → Библиотека. В настоящий момент плагин Regenerate Thumbnails работает только в режиме списка:

Обновить размеры для одного файла

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

Альтернативы

Обновить все размеры изображений можно командой wp media regenerate если вы используете утилиту WP-CLI. Сгенерировать размеры «по требованию» позволит плагин Dynamic Image Resizer, а с помощью модуля Photon популярного плагина Jetpack можно генерировать размеры «на лету» с помощью CDN-сервисов сети WordPress. com.

В самом ядре WordPress также появится возможность генерировать размеры изображений «на лету». Следить за развитием данного функционала можно в баг-трекере WordPress.

Как скрыть миниатюры из записей блога WordPress

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

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

Существует три способа скрытия миниатюры из записей:

  • изменения в коде применяемой темы;
  • плагин;
  • изменение CSS-стиля существующей темы.

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

Для первого способа требуется залезть в код темы и подправить его. Для этого надо удалить или закомментировать часть кода в файле, который отвечает за вывод поста. Обычно это single.php, либо content.php. Необходимо найти блок, отвечающий за показ миниатюры. В случае темы Hemingway это if ( has_post_thumbnail() ): … endif;

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

Можно установить плагин, например, Hide Featured Image. Для этого необходимо в админке своего блога зайти в «Плагины» — «Добавить новый» и вбить в строку поиска название нужного плагина. Плагин Hide Featured Image настраивается легко, проблем не должно возникнуть. Плагин будет выполнять роль костыля, который запретит вывод на экран ненужного вам фрагмента. Достоинство этого способа состоит в его легкости даже для начинающих блогеров, недостаток — возможно небольшое замедление загрузки страниц блога.

Третий способ предполагает небольшое изменение CSS-стиля блога. Переходим в настройки блога: «Внешний вид» — «Настроить» — «Дополнительный стили».

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

Просмотр кода элемента

Голубым цветом подсвечен исследуемый элемент. Нам нужно найти класс контейнера

<div>, в который заключен вывод миниатюры. Вот он, чуть выше. У темы Hemingway это <div class=»featured-media»>

Просмотр кода элемента

Теперь возвращаемся на предыдущую вкладку и добавляем в дополнительные стили следующее (featured-media заменить на свой класс!):

.featured-media {
    margin: 0;
    height: 0px !important;
    visibility: hidden !important;
}
Дополнительные стили

Вот и всё. Вывод миниатюры вместе с основным изображением больше вас не огорчает. Атрибут visibility: hidden скрывает объект. Атрибут height: 0 задаёт нулевую высоту объекта, а атрибут

margin: 0 удаляет ненужные отступы, если они были заданы в CSS темы. Два последних атрибута необходимы, чтобы не осталось нелепого пустого места на месте миниатюры.

Поделиться ссылкой:

Похожие записи:

Миниатюры в WordPress — визуальное представление записи

Здравствуйте, уважаемый читатель блога kviter. ru!

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

  1. Что такое миниатюра в WordPress?
  2. Чем миниатюра отличается от обычного изображения в записи?
  3. Где отображается миниатюра?
  4. Как задать миниатюру?

Что такое миниатюра в WordPress?

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

Чем миниатюра отличается от обычного изображения в записи?

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

 Где отображается миниатюра?

Для чего же нужна миниатюра в WordPress и где она отображается, если в самом тексте статьи она может и не быть. Тем не менее, она нужна.

В WordPress широко используются плагины, связывающие статью гиперссылками с другими материалами: плагины «Похожие записи», «Популярные записи», «Свежие записи». Большинство из этих плагинов использует миниатюры для создания превью-изображения статьи. Это делает ссылки более заметными и привлекательными.

Также для привлечения дополнительного трафика на сайт служат кнопки социальных сетей. При нажатии на такую кнопку на странице пользователя в соцсети автоматически публикуется анонс записи. (Кстати, поделитесь этой статьей со своими друзьями.) Этот анонс будет содержать миниатюру, если она задана. Сразу отмечу, для того, чтобы миниатюра отображалась в соцсетях, ее размер должен быть не менее 200 px, а лучше – больше 600 px. Об особенностях публикации миниатюр в соцсетях я постараюсь написать отдельную статью.

Как задать миниатюру?

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

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

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

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

Один из способов заработка в Интернете    — сервис Блогун.

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

Как поменять размер и расположение миниатюры в Word Press

Word Press позволяет выводить миниатюры записей возле их анонсов. Мы писали более подробно о способах выводах записей здесь. Миниатюры – это маленькие картинки, которые подбираются так, чтобы они охарактеризовали смысл записи. Это позволяет сделать статью узнаваемой на сайте, более приятной её анонсов на вид, и вообще это красиво и эстетично.

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

 

Как поменять размер миниатюр

Перед тем, как сделать нижеописанные советы, нужно снять копии с редактируемых файлов. Для начала мы залезем в файл темы, который выводит на сайте анонсы статей. Этот файл может называться loop.php или по-другому. В нём следует отыскать функцию, которая выводит миниатюру. Миниатюры в Word Press обознаются thumbnail, поэтому ищем функцию с этим словом.

Данная функция чаще всего выглядит так: the_post_thumbnail (array(xxx,yyy), где xxx и yyy – это размеры миниатюры в пикселях. Обычно указывается 100 на 100 пикселей. И чтобы изменить размер, нужно поменять эти цифры. После сохранения файла вы увидите на странице вывода анонсов миниатюры заданного размера.

Изменение расположения миниатюры

Обычно в большинстве шаблонов миниатюры ставятся слева от анонса статьи. Чтобы поменять расположение надо снова редактировать код. Но теперь нам понадобится не файл вывода анонсов, а файл стилей – style.css.

Все картинки в CSS записываются в секции /* Images */, поэтому ищем сначала её, в а ней находим наши миниатюрки – код, который содержит слово thumbnail.

В блоке, который отвечает за thumbnail, находим строку float – это обтекание. Мы писали о стилях CSS на Word Press. Значение данной функции можно поменять на один из трёх вариантов – right, left или none, – обтекание справа, обтекание слева или без обтекания.

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

WordPress плагины для изображений — полезная подборка плагинов

Владимир Демянович03.05.2018

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

WordPress Слайдеры

  • FlexSlider — полностью адаптивный jQuery слайдер от WooThemes.
  • Meta Slider — гибкий, интуитивный плагин управления слайд-шоу, доступны четыре jQuery слайдерами, можно добавлять надписи на изображения.
  • Len Slider — WordPress плагин для создания слайдеров, каруселей или слайд-шоу.
  • WOW Slider — слайдер с отличными визуальными эффектами и огромным количеством шаблонов. Адаптивный, полностью работающий как CSS-слайдер при выключенном Javascript, поддержка смахиваний, всех браузеров, всех устройств, чистая и простая разметка, дружественен к поисковым системам.
  • Oik-Nivo-Slider — считается самым популярным слайдером изображений jQuery.
  • WP-Supersized — полноэкранное адаптивное слайдшоу, доступно много опций, использую его вот тут — picblog.org.ua/slideshow.
  • WordPress Content Slide — плагин для слайда картинок
  • Meteor Slides — минималистисный, адаптивный, приятный слайдер. Можно создавать несколько слайд-шоу, настраивать размер отображаемых изображений (нужно заранее обрезать), выбирать различные эффекты смены кадра.
  • Slider — wordpress.org/plugins/slider-image — обладает невероятно широким функционалом (разный вид кнопок, размеры изображений, текст в слайдах и тп.) и прост в настройке.
  • Full Page/ Full width Background Slider — плагин позволит вам при помощи шорткодов и готовых шаблонов, которые уже встроены в него, с легкостью добавить на сайт широкоформатный фоновый слайдер.
  • Avartan slider lite — адаптивный слайдер.

Оптимизация

  • EWWW Image Optimizer — оптимизация, сжатие изображений, то есть уменьшение их объема без видимой потери качества
  • DNUI Delete not used image — плагин при помощи которого можно удалить не используемые изображения и их многочисленные размеры миниатюр.
  • Image Cleanup — плагин который удаляет не используемые изображения.
  • Imsanity — изменяет размер загружаемых изображений, если они больше, чем указано в настройках плагина. Изображения оптимизируются в процессе загрузки на сервер, также есть возможность обработать ранее загруженные изображения.
  • WP Smush.it — плагин оптимизирующий изображения: ужимает изображения по весу, использует сервисы Smush.it Yahoo.
  • NIX Gravatar Cache — плагин кэширует аватарки сервиса граватар. Благодаря этому на страницах, где есть много комментариев, каждая аватарка будет запрашиваться не с сайта Gravatar, а из локального кэша, что ускоряет загрузку страницы.
  • Compress JPEG & PNG images — плагин по сжатию изображений от известного сервиса TinyPNG
  • Responsify WP — плагин для отображения адаптивных изображений, с использованием атрибутов srcset и sizes. Плагин позволяет очень тонко настроить в каких случаях какие наборы размеров адаптивных изображений отображать. Переопределяет даже вывод тех изображений, которые были вставлены путем прописывания html кода. Если с плагином не получается реализовать задуманное, то вот тут описано как это сделать самому: How to edit the srcset attribute in WordPress’ responsive images

WordPress-плагины для фотогалереи

  • NextGEN Gallery — одим из самых популярных плагинов WordPress благодаря своей многофункциональности.
  • Gallery — можно добавить в альбом видео из YouTube и Vimeo, есть редактирование, кадрирование, поворот и выравнивание изображений, адаптивность, лайтбокс. Есть несколько вариантов отображения галереи, начиная от миниатюр и заканчивая показом слайдов.
  • Image Gallery — огромный выбор галерей. Изюминка — блог-галерея: изображения и видео с названиями и текстом в разметке блога. Есть инструменты для редактирования изображений, лайтбокса, адаптивность.
  • AccessPress Instagram Feed — интеграция Instagram с сайтом. Поможет создать красивую галерею в виде мозаики с функцией лайтбокса для просмотра отдельных изображений. Удобен, легко настраивается.
  • Tribulant Slideshow Gallery — работает на Java-скрипте, функционирует достаточно быстро. Плагин фокусирует внимание на функции слайд-шоу и делает это довольно успешно.
  • Grand Flagallery — прекрасно совместим с iPhone, iPad, Android, BlackBerry и отлично SEO оптимизирован. Он может создавать галереи для фото, видео файлов, MP3-файлов, NIVO слайдера или виджетов для слайд-шоу, в галерею можно добавить фоновую музыку. Недостатком — использование Flash.
  • BestWebSoft Gallery — около миллиона загрузок, простота, функциональность и приятный интерфейс пользуется популярностью.
  • LightBox Gallery — У этого плагина, позволяющего создавать бокс-сеты из ваших фотографий, — целый набор характеристик:
    • Настройка режима отображения фотоснимков
    • Просмотр заголовков изображения во всплывающей подсказке
    • Отображение metadata
    • Разделение общей галереи на несколько страниц
    • Расширенные настройки галереи
  • Responsive Lightbox by dFactory — адаптивный лайтбокс плагин. Есть разные виды\стили лайтбокс галерей и эффектов. При добавлении изображений необходимо в поле «Ссылка» выбрать значение «Медиафайл», чтобы изображение открывалось в лайтбокс окне. Из минусов: на мобильном телефоне чтобы выйти из лайтбокса я автоматом нажимаю на кнопку назад, что браузером chrome воспринимается буквально — перейти на предыдущую страницу, а не просто закрыть лайтбокс.
  • Fotobook — Этот плагин для вашего сайта или блога на базе WordPress позволит связать между собой ваш аккаунт в социальной сети Facebook и фото-альбомы на сайте. Для импорта фотографий в галерею используется Facebook API, поэтому процесс передачи фотографий должен пройти легко. Плагин последний раз обновлялся в 2010-12-1
  • Gallery Carousel Without JetPack — плагин который делает очень красивую и удобную карусель про просмотре галереи

Миниатюры

  • Regenerate Thumbnails — маленький и простой плагин, с помощью которого можно перегенирировать миниатюры в блоге. Может быть полезен при смене шаблона, мне он помогает для перегенерации миниатюр, после переименования файлов изображений ( переименовываю с помощью плагина media file renamer)
  • Simple Image Sizes — при помощи этого плагина можно добавить к уже существующим размерам генерацию миниатюр нужного размера и перегенерировать миниатюры.
  • Force Regenerate Thumbnails — удаляет ранее созданные размеры и создает новые, на основе текущих установок.
  • AJAX thumbnail rebuild — позволяет пересоздать миниатюры. Полезен, если вы использовали функцию add_image_size() когда у вас уже есть загруженные изображения. (Это медленный плагин, но при этом в нем не бывает ошибок с недостатком выделенной памяти).
  • Auto Post Thumbnail — старенький, но до сих пор работающий плагин. Он автоматически устанавливает миниатюры (берется первое изображение в посте) в записях где они не были установлены. Это может пригодится тогда, когда Вы на большом сайте перешли на шаблон, где для красивого дизайна нужны миниатюры.

Остальные WordPress плагины для изображений

  • TwentyTwenty — накладывает два изображения друг на друга, которые можно сравнивать перетаскивая туда-сюда шторку.
  • WP Inject — с помощью этого плагина можно не выходя из WordPress’а, прямо на странице создания записи найти по ключевому слову и вставить свободно распространяемые изображения.
  • Easy Watermark — плагин для накладывания водяных знаков на изображения. Можно настроить чтобы плагин в автоматическом режиме накладывал водяные знаки, или же в ручном, на указанное изображение. Водяной знак может быть как текстом, так и загруженным изображением. Можно указывать для каких расширений файлов (jpg, png и тд.) и типов изображений (миниатюра, большое изображение, среднее изображение и т.д.) применять водяные знаки.
  • PB Responsive Images — интерактивно настраивает изображения в соответствии с разрешением монитора пользователя.
  • RICG Responsive Images — вывод изображений разных размеров (физических) в зависимости от разрешения экрана
  • SEO Friendly Images WordPress Plugin — Этот wordpress плагин автоматически оптимизирует атрибуты ALT и TITLE для каждой картинки, для которой они не были прописаны . Это сделает их валидным для поисковиков, и пусть совсем немного, но улучшит ваш рейтинг в их суровых глазах. Обновлялся давно
  • PB SEO Friendly Images — альтернатива плагину выше, обновляется. Есть интересные настройки, например lazy load
  • Remove Image Links — при загрузке и публикации изображений wordpress по умолчанию добавляет ссылку на само изображение, то есть если нажать на изображение, то открывается страничка с изображением, этот плагин, переопределяет настройки по умолчанию касательно прописывания ссылок в загружаемые изображения и удаляет ссылки с уже всех опубликованных изображений.
  • Media File Renamer — с помощью этого плагина можно физически переименовывать изображения, например под title-поста. Ссылки на изображения в посте также автоматически поправляются.
  • NIX Gravatar Cache — плагин кэширует аватарки сервиса граватар. Благодаря этому на страницах, где есть много комментариев, каждая аватарка будет запрашиваться не с сайта Gravatar, а из локального кэша, что ускоряет загрузку страницы.
  • Comment Images — при помощи этого плагина в комментариях можно прикреплять изображения, изображения загружаются на сам блог (не находятся на каких-либо внешних ресурсах) и сразу же  отображаются (ничего кликать и ни  по каким ссылкам переходить не надо)
  • Enable Media Replace — если вам нужно из библиотеки медиафайлов заменить одно изображение на другое, то этот плагин позаботится о том, чтобы ссылка на это изображение заменилась во всех записях, где используется это изображение (не миниатюра).

Подборки плагинов:

Понравилось? =) Поделись с друзьями:

Опубликовано в рубрике WordPress

размеров изображений в WordPress

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

  • в постах,
  • в портфеле,
  • во всплывающих окнах,
  • в виде миниатюр сообщений на страницах архива,
  • в виджетах,
  • в административной зоне и т.д .;

Так, например, WordPress позволяет использовать полноразмерные изображения на страницах сообщений и изображения размером 150 × 150 (например) на страницах архива.

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

Размеры изображений WordPress по умолчанию

WordPress по умолчанию поддерживает несколько размеров изображений. Вы можете найти и изменить их в области администрирования в «Настройки> Медиа».

Так, например, вы можете изменить размер миниатюр WordPress на этой странице.

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

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

 add_filter ('intermediate_image_sizes', 'misha_turn_off_default_sizes');

function misha_turn_off_default_sizes ($ default_image_sizes) {

не задано ($ default_image_sizes ['эскиз']); // отключаем размер эскиза
unset ($ default_image_sizes ['medium']); // выключаем средний размер
unset ($ default_image_sizes ['большой']); // отключаем большой размер

вернуть $ default_image_sizes;

}

medium_large

Размер изображения medium_large появился в WordPress 4.4 вместе с функцией адаптивных изображений. Он имеет фиксированную ширину 768 и пропорциональную высоту.

Вы можете деактивировать medium_large size так же просто, как с помощью этого кода:

 add_filter ('intermediate_image_sizes', 'misha_deactivate_medium_large');

function misha_deactivate_medium_large ($ default_image_sizes) {

$ default_image_sizes ['medium_large'];
вернуть $ default_image_sizes;

}

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

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

  • Если вам нужен список размеров изображений по умолчанию, вы можете использовать get_intermediate_image_sizes () , который возвращает массив с размерами изображений по умолчанию, например:
     print_r (get_intermediate_image_sizes ());
/ *
 Массив ([0] => миниатюра [1] => средний [2] => medium_large [3] => большой)
 * /
  • Если вам нужно указать зарегистрированных размеров изображений, вы получите их из глобальной переменной $ _wp_additional_image_sizes , и я могу сказать вам больше, вы также можете получить размеры изображения оттуда, например:
     global $ _wp_additional_image_sizes;
print_r ($ _wp_additional_image_sizes);
/ *
Множество
(
    [my-image-size-name] => Массив
        (
            [ширина] => 400
            [высота] => 400
            [урожай] => 1
        )

    [двадцать семнадцать-избранное-изображение] => Массив
        (
            [ширина] => 2000
            [высота] => 1200
            [урожай] => 1
        )
)
* /

Функции

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

the_post_thumbnail ()

Первое место в моем списке, потому что я использую его чаще, чем что-либо другое.

 the_post_thumbnail ($ size = 'thumbnail', $ attr = '');

Обратите внимание, что эта функция печатает тег , а не URL.

$ размер
Вот что можно использовать в качестве значения параметра:
$ attr
Вы можете передать сюда любые атрибуты HTML в виде массива, вы даже можете переписать атрибут src ! 😁
 the_post_thumbnail ('medium', array ('class' => 'my-image', 'data-id' => 1000));

get_the_post_thumbnail ()

Эта функция очень похожа на the_post_thumbnail (), разница в том, что:

  • Первый get_the_post_thumbnail () — идентификатор сообщения, все остальное то же самое,
  • Возвращает изображение, а не печатает его.

Пример:

 эхо get_the_post_thumbnail (get_the_ID (), 'средний');

wp_get_attachment_image_src ()

Функция позволяет получить URL изображения.

 wp_get_attachment_image_src ($ attachment_id, $ size = 'thumbnail');

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

Пример:

 $ image_array = wp_get_attachment_image_src (get_post_thumbnail_id (), 'большой');
эхо $ image_array [0];

Про параметр $ size и размер массива читайте чуть выше.

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

Этот процесс очень прост и состоит из двух шагов. Требуется первый шаг.

add_image_size ()

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

 add_image_size ($ size_name, $ width = 0, $ height = 0, $ crop = false);
$ имя_размера
Вы не можете использовать зарезервированные имена размеров изображения, вот они: thumb , thumbnail , post-thumbnail , medium , medium_large , large , full .
$ ширина
Ширина в пикселях, установить 0 — ширина неограничена.
$ высота
Высота в пикселях, установить 0 — высота неограничена, пример:
 add_image_size ('фиксированная ширина 500', 500, 0); // или просто пропустить третий параметр
$ урожай
Раньше этот параметр мог принимать, мог принимать только false или true , но теперь он намного более расширен, поэтому вот возможные значения:
Значение Описание
ложь (по умолчанию) Изображение не будет обрезано, его размер будет изменен в соответствии с вашим специальным размером
истина Размер изображения будет изменен и обрезан точно с заданным разрешением, будет использоваться центральная часть изображения.
массив (позиция_X, позиция_Y) position_X принимает:

position_Y принимает:

Значение Описание

Давайте посмотрим на пример:

 add_image_size ('имя-размера-изображения', 200, 200, массив ('слева', 'сверху'));

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

Также возможно сделать ручную обрезку с помощью плагина «Ручная обрезка изображения».

Но не создавайте изображений большого размера:

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

Как добавить собственный размер изображения в Media Uploader и Gutenberg

Когда вы вставляете изображения в виджеты и сообщения, WordPress (3.5+) позволяет вам выбрать, какой размер изображения использовать:

Как видите, туда можно добавить свой нестандартный размер:

 add_filter ('image_size_names_choose', 'misha_new_image_sizes');

function misha_new_image_sizes ($ sizes) {
$ добавляет = массив (
"my-image-size-name" => 'Misha size' // "image size name" => "Ярлык (что угодно)"
);
$ newsizes = array_merge ($ sizes, $ addizes);
return $ newsizes;
}

Замечательно то, что этот хук работает и с блоком изображений Гутенберга.

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

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

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

Есть два способа решить эту ситуацию — с помощью плагинов и с помощью кода:

Восстановить эскизы с помощью плагинов

Хорошо, я могу порекомендовать вам два простых плагина:

  • Восстановление эскиза Ajax
  • Принудительно восстановить эскиз

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

Обновить эскизы программно

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

 $ attachment_id = 5; // передаем сюда свой идентификатор вложения

$ path = get_attached_file ($ attachment_id);
$ meta = wp_generate_attachment_metadata ($ attachment_id, $ path);
wp_update_attachment_metadata ($ attachment_id, $ meta);

Как создать эскизы определенного размера изображения только для настраиваемых типов сообщений

Итак, представим, что на вашем веб-сайте зарегистрировано 10 настраиваемых типов сообщений, и каждый из них использует изображения 2-3 размеров на страницах веб-сайта.Легко понять, что когда мы загружаем любую картинку на сайт, WordPress создает ее 20-30 копий!

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

И хуки intermediate_image_sizes, и intermediate_image_sizes_advanced подходят для этой задачи.Супер простой пример ниже, после того, как вы вставите код в свой functions.php файл эскизов my-image-size-name не будет создан для изображений, загруженных из пользовательского типа сообщения page .

 add_filter ('intermediate_image_sizes_advanced', функция ($ sizes) {

if (isset ($ _REQUEST ['post_id']) && 'page' == get_post_type ($ _ REQUEST ['post_id'])) {
unset ($ sizes ['имя-размера-изображения']);
}

вернуть размеры $;

});

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

 / *
 * этот хук будет активирован, пока вы загружаете картинку
 * /
add_filter ('intermediate_image_sizes', 'misha_reduce_image_sizes');

function misha_reduce_image_sizes ($ sizes) {
/ *
* $ sizes - массив всех размеров изображений Array ([0] => thumbnail [1] => medium [2] => large [3] => post-thumbnail) »
* get_post_type () для получения типа сообщения
* /
$ type = get_post_type ($ _ REQUEST ['post_id']); // $ _REQUEST ['post_id'] идентификатор публикации, на которую загружается изображение

foreach ($ sizes as $ key => $ value) {

/ *
* используйте переключатель, если типов сообщений много
* /
if ($ type == 'page') {
if ($ value == 'regionfeatured') {// отключаем 'regionfeatured' для страниц
    не задано ($ sizes [$ key]);
    }
} else if ($ type == 'region') {
if (! in_array ($ value, array ('regionfeatured', 'misha335'))) {// для регионов отключаем все, кроме 'regionfeatured' и 'misha335'
    не задано ($ sizes [$ key]);
    }
} еще {
if ($ value! = 'thumbnail') {// выключаем все, кроме эскиза
    не задано ($ sizes [$ key]);
    }
}
}
вернуть размеры $;
}

Похожие сообщения

Миша Рудрастых

Я очень люблю WordPress, WooCommerce и Gutenberg. 12 лет опыта.

Нужна помощь разработчика? Свяжитесь с нами

Использование функции миниатюр нового сообщения в WordPress 2.9 kremalicious

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

№1. Активировать функцию

Добавление поддержки миниатюр сообщений WordPress в тему По какой-либо причине вам сначала нужно активировать эту функцию с помощью записи в файле functions.php вашей темы, чтобы получить окно миниатюр публикации в редакторе.

Так что просто откройте файл functions.php вашей темы в своем любимом редакторе или создайте его, если такого файла нет в папке вашей темы.Добавьте этот небольшой фрагмент кода в этот файл:

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

Это гарантирует, что установка WordPress до 2.9 не приведет к ошибкам при использовании темы с этой новой функцией.

№ 2. Добавить миниатюру сообщения в сообщение

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

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

Добавить миниатюру сообщения 2Щелкните здесь, и выбранное изображение будет назначено в качестве миниатюры сообщения. (К сожалению, ссылка Использовать как миниатюру отсутствует в диалоговом окне, которое появляется после загрузки изображения, она просто есть, если вы просматриваете свою медиатеку.)

Теперь вы можете закрыть медиа-диалог, и вы увидите изображение в поле для миниатюр публикации:

Миниатюра сообщения добавлена ​​

№ 3. Отображение миниатюры сообщения в вашей теме

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

Этот тег шаблона по умолчанию будет отображать миниатюру сообщения размером с миниатюру и, по сути, то же самое, что:

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

(Примечание: Мэтт [оставил комментарий на WP Engineer] (http: // wpengineer.com / the-ultimative-guide-for-the- post ( thumbnail-in-wordpress-2-9 / # comment-3053), заявив, что он не рекомендовал бы использовать эти названные аргументы, но пока не предоставил для этого никаких объяснений. )

Код выведет общий тег с классом wp-post-image. Излишне говорить, что это то, что вы можете выбрать с помощью css для дальнейшего стилизации только миниатюр сообщений:
[css] .wp-post-image {border: 2px solid #ccc; } [/ css]

# Пользовательский вывод

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

   'alignleft')); ?>

Если вы хотите добавить более одного класса, вы можете сделать это так:

   'alignleft another_class')); ?>

И вы можете добавить любые атрибуты к тегу , например, title , rel или alt attribute.По причинам доступности вы всегда должны добавлять по крайней мере атрибут alt:

.
   'alignleft', 'alt' => 'alttext')); ?>

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

   'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>

# Respect Media Settings

Наконец, если вы хотите соблюдать нестандартные размеры, которые вы или ваши пользователи установили в разделе «Настройки»> «Медиа», вы можете сначала получить эти размеры с помощью функции get_option, а затем поместить их в массив:

   'alignleft'));
?>

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

№ 4.

Сделайте его пуленепробиваемым (он же обратная совместимость)

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

Так что неплохо было бы сделать это обратно совместимым с каким-нибудь быстрым, если не вуду, кодом, беззастенчиво адаптированным из WP-Recipes:

  if ((function_exists ('has_post_thumbnail')) && (has_post_thumbnail ())) {
  the_post_thumbnail ();
} еще {
  $ Image = get_post_meta ($ post-> ID, 'пост-изображение', истина);
  if ($ Image) {
    echo '';
  }
}

Сначала проверяется, существует ли функция и добавлен ли эскиз сообщения с этой новой функцией.Если это так, он просто возвращает миниатюру сообщения. В противном случае он возвращается к тому, что вы использовали в своей теме раньше, обычный способ — проверить и получить значение специального настраиваемого поля с именем, например пост-изображение и вывести его. Вы можете добавить все, что использовали ранее, в инструкцию else. Et voilà, теперь он обратно совместим, ура!

№ 5. Ресурсы и дополнительная информация

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

о нет!

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

# Обновления статей

20.12.2009 Добавлены некоторые ресурсы и примечание об именованных аргументах.
20.12.2009 Проверка функции для добавления темы Поддержка в начале
20.12.2009 исправлен код массива размеров в разделе Custom Output
12 / 17/2009 Добавлены примеры кода для соблюдения настроек мультимедиа

Как улучшить качество изображений в WordPress — Pixelgrade

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

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

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

  • Используйте позицию JPEG-first: , когда прозрачность не требуется, всегда используйте файл JPEG с приличной степенью сжатия 7 или 8. Масштаб от 1 до 10, 1 — максимальное сжатие, а 10 — максимальное сжатие. Наименьшее количество. Если вам нужна прозрачность, выберите PNG;
  • Максимальные размеры изображения должны составлять около 2000 x 3000 пикселей , но всегда стремитесь к меньшим.Конечно, изображения размером 4000 x 5000 пикселей выглядят великолепно, но этот размер подходит для печати, а не для Интернета;
  • Когда вы вставляете изображение в WordPress, у вас есть возможность выбрать его размер. Это исходный загруженный размер (полный) или один из размеров миниатюр WordPress (например, большой, средний, маленький). Выбирайте с самым маленьким , который соответствует вашим потребностям, но почти никогда не используйте Full.

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

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

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

Чтобы решить эти проблемы, мы предлагаем попробовать следующие решения:

  1. Увеличить установленный по умолчанию предел сжатия изображений JPEG в WordPress. По умолчанию WordPress сжимает ваши изображения с качеством около 82%, чтобы повысить производительность сайта для мобильных пользователей. Если это вызывает ваши проблемы, вы можете отключить сжатие изображений или немного уменьшить его.
  2. Измените размер миниатюр по умолчанию и повторно создайте их с помощью плагина, такого как «Регенерировать миниатюры» или «Простые размеры изображений». В большинстве случаев эта проблема появляется, когда вы переключаетесь с одной темы WordPress на другую. Обычно новые изображения, загруженные после активации новой темы, выглядят хорошо, но все старые эскизы уродливы и искажены. Два упомянутых плагина должны помочь.
  3. Изменение резкости изображений с измененным размером.
  4. Независимо от формата файла используйте цветовое пространство RGB (экран).Цветовое пространство CMYK используется только в печатных СМИ. Этот плагин автоматически конвертирует ваши изображения в JPEG и RGB.

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

Дополнительные показания:

Миниатюра сообщения

/ избранное изображение в информационном бюллетене

Вы можете вставить миниатюру сообщения или избранное изображение в информационный бюллетень с помощью плагина WordPress Newsletters.

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

Короткий код

Используйте этот шорткод для отображения избранного изображения или миниатюры сообщения:

Атрибуты

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

  • post_id = X — При желании укажите post_id для использования избранного изображения определенного сообщения, в противном случае текущее сообщение будет принято автоматически.
  • выровнять = влево | центр | нет | right — Укажите выравнивание изображения, он добавляет атрибут HTML allign к тегу изображения.Идеально подходит для электронной почты.
  • hspace = X — Укажите интервал вокруг изображения в пикселях. Атрибут hspace HTML со значением X добавляется к тегу изображения.
  • размер = эскиз | большой | средний | * обычай * | X, Y — размер отображаемого эскиза. По умолчанию используется эскиз, но вы можете указать любой предопределенный размер изображения WordPress или пользовательский размер изображения или, в качестве альтернативы, с шириной и высотой, разделенными запятыми, например. 300 200;

Вот несколько примеров:

Выровненный по левому краю эскиз с интервалом
Большое изображение по центру

Миниатюра публикации в автоматическом и ручном режиме

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

Шорткод сообщений, последние сообщения и рассылка новостей

Изображение может быть автоматически заполнено для цикла текущих сообщений при использовании коротких кодов [newsletters_post ...] или [newsletters_posts ...] , а также подписок на последние сообщения и функции «Отправить как информационный бюллетень», где сообщение, страница или заказное сообщение отправляется в виде информационного бюллетеня.

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

Миниатюра пользовательского сообщения

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

Фильтрация вывода миниатюр сообщений

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

newsletters_post_thumbnail_attr

newsletters_post_thumbnail_output

Нравится:

Нравится Загрузка…

Связанные

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

Сегодня к

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

Хотя CSS и JavaScript могут адаптировать дизайн для работы на небольших устройствах с сенсорными экранами, контент по-прежнему в основном идентичен. Пользователям мобильных телефонов придется потратить время и деньги на загрузку большого изображения, предназначенного для настольной версии, которое затем уменьшится до гораздо меньшего размера на их устройстве.

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

Решением этих проблем являются отзывчивых изображений .

Введение в адаптивные изображения

Если вы не знакомы с этой концепцией, я бы порекомендовал прочитать «Адаптивные изображения на практике» в A List Apart, прежде чем продолжить.

Реализация в WordPress изменяет разметку тегов изображений, встроенных в контент. Это выполняется каждый раз, когда страница генерируется функцией wp_make_content_images_responsive (), которая подключена к фильтру the_content .

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

Это разметка, созданная WordPress 4.3 для изображения, встроенного в контент:

 beach

Это результат в WordPress 4.4 и новее:

 пляж

Как видите, адаптивная разметка намного более подробна:

  • Атрибут srscset содержит список доступных размеров изображений с указанием их ширины. Итак, для изображения beach-768x576.jpg ширина 768w , ширина 768 пикселей.
  • Атрибут sizes содержит указания о том, какой размер изображения загружать в зависимости от ширины области просмотра. Итак, (max-width: 840px) 100vw, 840px означает: «Является ли область просмотра меньше 840px? Если да, изображение будет во всю ширину области просмотра. В противном случае это будет фиксированный размер 840 пикселей.

Изображения, перечисленные в атрибуте srcset , соответствуют различным размерам, которые WordPress автоматически генерирует. Версия 4.4 представляет новый промежуточный размер по умолчанию, medium_large , который имеет ширину 768 пикселей без ограничения по высоте.Это помогает заполнить пробел между средними и большими размерами.

Улучшения тегов шаблона

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

Если вы создаете свои собственные теги шаблонов, которые выводят разметку изображения, вам нужно будет добавить атрибуты srcset и sizes , чтобы получить поддержку адаптивных изображений.WordPress 4.4 представляет функции wp_get_attachment_image_srcset () и wp_get_attachment_image_sizes () , которые возвращают соответствующие данные для этих новых атрибутов HTML.

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

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

Настройка разметки адаптивных изображений

Для изменения содержимого атрибутов srcset можно использовать фильтр wp_calculate_image_srcset . Он передает массив данных. Вот образец элемента этого массива:

 [300] =>
 array (3) {
 ["url"] =>
 строка (77) "http: // website.com / wp-content / uploads / 2015/12 / beach-300x225.jpg "
 ["дескриптор"] =>
 строка (1) "ш"
 ["значение"] =>
 интервал (300)
 }

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

Чтобы изменить содержимое атрибута sizes , вы можете использовать фильтр wp_calculate_image_sizes .Он передает содержимое этого атрибута в виде строки. Вы можете посмотреть Twenty Sixteen, чтобы увидеть пример использования этого фильтра.

Еще один интересный фильтр, на который стоит обратить внимание, — это wp_get_attachment_image_attributes . Хотя этот фильтр существует с версии 2.8, массив $ attr , который проходит через фильтр, получил два дополнения в 4.4. Вот несколько примеров данных:

 массив (5) {
 ["src"] =>
 строка (85) "http://website.com/wp-content/uploads/2015/12/beach-1200x900.jpg "
 ["класс"] =>
 строка (45) "вложение-сообщение-миниатюра размер-сообщение-миниатюра"
 ["alt"] =>
 строка (7) "Big Sur"
 ["srcset"] =>
 строка (450) "http://website.com/wp-content/uploads/2015/12/beach-300x225.jpg 300w, http://website.com/wp-content/uploads/2015/12/beach- 768x576.jpg 768w, http://website.com/wp-content/uploads/2015/12/beach-1024x768.jpg 1024w, http://website.com/wp-content/uploads/2015/12/beach- 1200x900.jpg 1200 Вт, http://website.com/wp-content/uploads/2015/12/beach.jpg 1600 Вт "
 ["размеры"] =>
 строка (33) "(max-width: 1200px) 100vw, 1200px"
}

Twenty Sixteen использует этот фильтр для изменения вывода the_post_thumbnail () .Поскольку фильтр передает размер $, , который содержит имя размера изображения, вы можете использовать его, например, для нацеливания на все изображения со средним размером .

Также есть новый фильтр под названием max_srcset_image_width . Этот фильтр позволяет разработчикам тем устанавливать максимальную ширину изображения для включения в атрибут srcset . По умолчанию этот фильтр установлен на 1600 . Например, если вы установите для него значение 500 , WordPress будет включать в набор srcset только изображения, ширина которых равна или меньше 500 пикселей.

Адаптивные изображения в темах

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

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

Дополнительная литература

Для получения дополнительной информации вы можете прочитать «Адаптивные изображения в WordPress 4.4» в блоге Make / Core. Если вы хотите узнать о теме адаптивных изображений в целом, я бы порекомендовал прочитать «Использование адаптивных изображений (сейчас) в A List Apart».

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

, Васим Аббас, 29 мая 2017 г.

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

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

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

  • Шаг 1. Установите и активируйте плагин Envira Gallery на своем сайте
  • Шаг 2. Создайте изображение галерея с использованием Envira
  • Шаг 3. Перейдите в настройки конфигурации и выберите размер изображения
  • Шаг 4. Опубликуйте галерею изображений в WordPress

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

Готовы начать? Пошли!

Шаг 1. Установите и активируйте плагин Envira Gallery на вашем сайте

Первое, что вам нужно сделать, это установить и активировать плагин Envira Gallery на вашем сайте WordPress.

Вы можете узнать больше о том, как установить и активировать Envira в WordPress.

Шаг 2: Создание галереи изображений с помощью Envira

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

Давайте начнем с добавления заголовка и добавим фотографии в раздел Native Envira Gallery.

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

Шаг 3. Перейдите в настройки конфигурации и выберите размер изображения.

После добавления фотографий перейдите на вкладку «Конфигурация». Вам нужно прокрутить вниз до Размер изображения и выбрать свой размер в раскрывающемся списке.

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

Поскольку мы выбираем Medium 300 × 300 для размера изображения, нам нужно установить высоту строки на 300.В противном случае размер изображения не повлияет на миниатюры.

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

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

Шаг 4. Опубликуйте галерею изображений в WordPress

Когда галерея изображений будет опубликована, вы увидите новый виджет Envira Gallery Code под виджетом публикации. Вам нужно скопировать шорткод из этого виджета.

Теперь перейдите на страницу страниц / сообщений »Добавить новый или отредактируйте существующую страницу / сообщение в бэкэнде WordPress. В визуальном редакторе вам нужно вставить шорткод.

Обязательно опубликуйте страницу / сообщение.

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

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

Если вам нравится этот учебник, подпишитесь на нас в Facebook и Twitter, чтобы получить больше бесплатных руководств, советов и ресурсов по WordPress.

Используете WordPress и хотите получить Envira Gallery бесплатно?

Envira Gallery помогает фотографам создавать красивые фото и видео галереи всего за несколько кликов, чтобы они могли продемонстрировать и продать свои работы.

Как отображать похожие сообщения в WordPress вручную или с помощью плагинов

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

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

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

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

Давайте рассмотрим оба варианта:

Вариант № 1: Добавить функции связанных сообщений вручную

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

Чтобы добавить функциональность вручную, вам нужно будет добавить в вашу тему следующий код:

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

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

Теперь добавьте следующий код в свой файл style.css:

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

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

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

Вариант № 2: Используйте плагин «Похожие сообщения»

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

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

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

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

Jetpack

Если вы используете плагин Jetpack на своем сайте, у вас уже есть функциональность для связанных сообщений — вам просто нужно включить модуль, посетив «Jetpack»> «Настройки»> «Трафик» и включив соответствующие сообщения. раздел. Затем вы можете выбрать, включать ли текст заголовка и изображения. Затем вы можете настроить текст «связанных сообщений», перейдя в «Внешний вид»> «Настройщик».

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

Функции:

  • Встроенный в плагин Jetpack
  • Обработка происходит вне сайта, поэтому безопасно для общих хостов
  • Изменить текст в Настройщике

Цена: Бесплатно

Подробнее

Связанные сообщения

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

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

Функции:

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

Цена: Бесплатно

Просмотреть подробности

Связанные сообщения от AddThis

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

Инструмент рекомендаций по содержанию помогает отображать рекомендованный (связанный) контент с вашего веб-сайта в каждом сообщении.

Этот плагин помогает отображать два разных типа рекомендаций. Один из них называется «Что дальше» и отображается в правом или левом нижнем углу вашего веб-сайта. Он появляется, когда пользователь начинает прокручивать ваш контент. Другой называется нижний колонтитул рекомендуемого содержимого.Как следует из названия, он отображает связанный контент в конце ваших сообщений.

Самое приятное в этом плагине то, что ресурсоемкий вход в систему не выполняется на серверах вашего веб-сайта. Вместо этого он работает на серверах AddThis.

Характеристики:

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

Цена: Бесплатно

Просмотреть подробности

Плагин еще одного связанных сообщений (YARPP)

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

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

Хотя YARPP — один из лучших плагинов связанных сообщений, он также является одним из наиболее ресурсоемких плагинов связанных сообщений. Поскольку этот плагин потребляет много ресурсов, он заблокирован большинством поставщиков управляемого хостинга WordPress, включая WP Engine и Media Temple.

Функции:

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

Цена: Бесплатно

Просмотреть подробности

Связанные сообщения по таксономии

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

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

Функции:

  • Шорткоды позволяют отображать связанные сообщения в любом месте.
  • Позволяет включать и исключать термины из поиска.
  • Сначала отображаются сообщения с наибольшим количеством общих терминов.

Цена: Бесплатно

Подробнее

Yuzo

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

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

Характеристики:

  • Легкий и менее ресурсоемкий.
  • Десятки вариантов настройки.
  • Предлагает удобный для новичков интерфейс.
  • Один из самых быстрых доступных вариантов.
  • Кеши для экономии ресурсов и времени сервера.

Цена: Бесплатно

Просмотреть подробности

Контекстные связанные сообщения

Контекстные связанные сообщения — это плагин, требующий значительных ресурсов.И, как и YARPP, он заблокирован большинством поставщиков управляемого хостинга WordPress, включая WP Engine и Media Temple.

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

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

Функции:

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

Цена: Бесплатно

Просмотреть подробности

Связанные сообщения Pro

Связанные сообщения Pro — популярный плагин премиум-класса, который отображает связанные сообщения после вашего контента. Он предлагает десятки вариантов настройки и поставляется с тремя красивыми макетами. Он поставляется с 65 готовыми шаблонами для каждого макета.

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

Особенности:

  • 65 красивых готовых шаблонов на выбор.
  • Доступны три различных варианта компоновки.
  • Предлагает чистый и удобный сервер.
  • Предлагает дополнительные кнопки навигации для связанных сообщений.
  • Позволяет настраивать типы сообщений из различных плагинов, включая WooCommerce и bbPress.

Цена: $ 15

Просмотреть подробности

Виджет Better Related Posts

Виджет Better Related Posts — это премиальный плагин WordPress.Он позволяет вам настроить размер миниатюр, цвет текста, количество элементов и заголовки виджетов. Он также позволяет отображать на странице несколько экземпляров одного и того же виджета.

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

Функции:

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

Цена: $ 7

Просмотреть подробности

Встроенные связанные сообщения

Встроенные связанные сообщения позволяют отображать связанные сообщения между вашим контентом. Возможно, вы видели подобные предложения на популярных новостных сайтах, таких как Business Insider, Wall Street Journal и Forbes.

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

Функции:

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

Цена: Бесплатно

Просмотреть подробности

Связанные сообщения для WordPress

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

Функции:

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

Цена: Бесплатно

Подробнее

Заключение

Отображение связанных сообщений в вашем контенте — отличный способ снизить показатель отказов и увеличить количество просмотров страниц. Более того, это также помогает вам автоматически связывать сообщения на вашем веб-сайте. Хотя использование плагина предоставит вам гораздо больше функций, он также потребует больше ресурсов, поэтому вам следует посмотреть, как ваш сайт реагирует, если вы находитесь на общем хостинге, или выбрать плагин, такой как Jetpack, который выполняет обработку на своих собственных серверах, поэтому выиграл ‘ t влияют на скорость вашего сайта.

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

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