Добавление миниатюры на страницу поста WordPress

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

Применение миниатюр в темах WordPress

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

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

Если в теме вашего блога на WordPress миниатюра записи не используется в теле поста — дочитайте статью до конца.

Как использовать Customizer WordPress

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

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

Настройка названия и дизайна сайта

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

Настройка меню

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

Чтобы создать первое меню вашего веб-сайта, нажмите «Создать новое меню», введите имя своего меню, выберите область отображения и нажмите «Далее». Когда вы создали меню, вы можете нажать на его название, чтобы настроить его параметры.

Читайте также:  Apple выпустила iOS 14.4 beta 2. Что нового

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

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

Чтобы узнать, как заполнить ваше меню страницами и публикациями, я рекомендую это руководство как создать меню в WordPress.

Изменить цветовую схему сайта WordPress

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

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

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

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

Изменить фоновое изображение WordPress

Если ваша тема использует фоновое изображение, WordPress Customizer также позволяет вносить изменения. Опять же, WordPress Customizer демонстрирует свою мощь, позволяя вам менять фоновое изображение и настраивать диапазон параметров отображения в одном и том же небольшом интерфейсе.

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

Мобильный и планшетный просмотр

И последнее, но не менее важная настройка: параметры предварительного просмотра Customizer WordPress для мобильных устройств и планшетов.

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

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

Вывод

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

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

Читайте также:  Почему Linux более безопасен, чем Windows?

Добавление специального кода в WordPress

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

Отображение миниатюр включается с помощью специальной функции, которая применяется в файле Не будем ничего выдумывать, будем следовать по порядку инструкции. Переходим в wp-content/themes/наш_шаблон. Ищем конец кода, и перед фрагментом кода ?> прописываем эту функцию:

add_theme_support(‘category-thumbnails’);

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

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

Опять отправляемся в , по аналоги добавляем ещё один небольшой код:

add_image_size($name, $width, $height, $crop);

Мы получаем код с 4-мя параметрами, которые отвечают за наши миниатюры категорий.

Добавление специального кода в WordPress

При использовании значения false, мы получаем миниатюру подгоняемую по одной стороне, если есть отклонения в исходных размерах. Т.к. один из размеров будет проигнорирован, мы не получим изображение со 100%-й пропорцией.

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

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

add_image_size(‘img_catalog’, 250, 300, true);

Добавление специального кода в WordPress

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

4) Присваиваем категории миниатюру. Если нам требуется использовать миниатюру, переходим в админ панель. Жмём клавишу — обновить.

5) Выводим миниаютры в шаблоне. Ищем файл Добавляем код:

Добавление специального кода в WordPress

echo wp_get_attachment_image($img_info->id, ‘img_catalog’)

Если Вы заметили, один из параметров мы использовали ранее.

Рекомендую к прочтению статьи:

  • Как узнать ID рубрики WordPress
  • Как скрыть рубрики WordPress
  • Вывести описание рубрики WordPress
  • Как убрать рубрики в WordPress
  • WordPress метки и рубрики
  • Плагин рубрик для WordPress

Сортировка категорий/рубрик на сайте WordPress

Метод тот же, перетаскивание мышкой рубрик и иерархий (под-категорий). Каждый пользователь WordPress сможет произвести сортировку категорий, независимо от опыта. Когда создаются рубрики для сайта или блога, то нет возможности расположить их в нужном нам порядке. Например, по алфавиту или разместить важные/главные категории в первых рядах. Да, мало ли, за чем. Нужно отсортировать и всё. Для начала можете удалить категорию Без рубрики.

И как обычно, в таких случаях, призовём на помощь — плагин. Модуль с названием — Category Order — Taxonomy Terms Order. Что в переводе значит: Сортировка категорий и элементов таксономии (иерархии).

Плагин Category Order — Taxonomy Terms Order

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

Читайте также:  7 лучших дистрибутивов на основе Arch Linux

Плагин — Сортировка рубрик WordPress

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

А в разделе Записи, появится новый пункт «Заказная сортировка», кликаете и перетаскиваете рубрики вверх или вниз. Если есть дочерние категории (элементы), их можно перетаскивать таким же способом:

Интерфейс списка категорий WP, перетаскивание с помощью мышки

Интерфейс множественных иерархий:

Сортировка множественных иерархий

Коллеги, есть ещё один бесплатный плагин для сортировки рубрик / категорий. Переведён на русский язык.

Custom Taxonomy Order — Пользовательский порядок таксономии

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

WordPress плагин — Custom Taxonomy Order

Custom Taxonomy Order — это плагин для WordPress, который позволяет упорядочивать термины таксономии.

Он поддерживает следующие функции:

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

Упорядочение категорий, тегов и терминов с помощью простого интерфейса перетаскивания. Чего изволите сортировать? Выбор Таксономии для сортировки:

Пользовательский порядок таксономии

Например, нажимаем Рубрики:

Сортировать Рубрики

Сортировка рубрик / категории, перетаскивая их в желаемом порядке. Или выставите их в алфавитном порядке. Раздел Настройка — Как сортировать эти рубрики? Хороший и удобный plugin для WordPress.

Вот вроде и всё, дорогие мои друзья и товарищи.

В заключение

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

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

Желаю вам всего хорошего и до новых встреч на страницах моего любимого и полезного блога. Удачи всем! Пока, пока.

Как добавить картинку в запись WordPress?

Поставьте курсор мыши в нужном месте текста записи. Нажмите «Добавить медиафайл». В окошке нажмите «Выберите файлы».

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

Появится окошко для внесения дополнительной информации.

Подпись – это фраза, которая будет выводиться под изображением. Можно не писать.

Как добавить картинку в запись WordPress?

Атрибут alt и описание лучше заполнить. Ключевые слова в этих полях – это еще один важный пункт оптимизации страницы в целом и изображения в частности.

Выравнивание – положение картинки относительно текста.

Размер – миниатюра, средний или полный.

Нажмите «Вставить в запись».