Массовое добавление и изменение атрибутов изображений (Alt, Title)

  Обновл. 31 Июл 2019  | 

Визуальный редактор WordPress

Визуальный редактор Вордпресс помогает отформатировать текст тем, кто не силен в HTML.

Обозначения

Визуальный редактор WordPress
  1. Добавить медиафайл – вставить картинку в текст
  2. Выделить текст жирным – выделите мышкой кусочек текста и нажмите эту кнопку
  3. Выделить курсивом
  4. Зачеркнутый текст
  5. Маркированный список
  6. Нумерованный список
  7. Цитата – оформить кусочек текста как цитату
  8. Сплошная горизонтальная линия
  9. Выравнивание текста по левому краю
  10. Выравнивание текста по центру
  11. Выравнивание текста по правому краю
  12. Вставить или изменить ссылку – выделить слово в тексте, нажать кнопку, в новом окне задать адрес ссылки
  13. Удалить ссылку – выделить ссылку, нажать эту кнопку
  14. Вставить тег «Далее» — в этом месте будет прерываться анонс статьи, выводимый в рубриках
  15. Показать/скрыть панель инструментов – показать или скрыть вторую строчку кнопок
  16. Абзац – задать кусочку текста формат абзаца или выбранного уровня заголовка
  17. Подчеркнутый текст
  18. Выравнивание текста по ширине страницы – делает все строки одинаковой длины
  19. Задать цвет текста
  20. Вставить из Word – по умолчанию текст из Word вставляется с потерей форматирования источника
  21. Очистить форматирование – очищение текста от всех стилей форматирования
  22. Добавить произвольный символ, которого нет на клавиатуре, из открывшейся таблички
  23. Уменьшить отступ абзаца
  24. Увеличить отступ абзаца
  25. Отменить последнее действие
  26. Повторить отмененное действие
  27. Горячие клавиши – всплывает подсказка об использовании комбинаций клавиш на клавиатуре
  28. Полноэкранный режим – скрывает отвлекающие элементы админки

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

Теория

Плюсы вывода похожих записей:

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

   + к внутренней оптимизации сайта;

   продлевает время пребывания посетителей на сайте;

   хорошо смотрится;

   полезно для посетителей.

Два способа, как это сделать:

   с помощью плагина;

   собственными ручками.

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

Вывод похожих записей может быть:

   по меткам;

   по рубрикам.

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

Сортировка записей / сообщений в WordPress

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

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

Изменить дату публикации сообщения в редакторе Гутенберг

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

Ребят, есть быстрый и простой способ изменять расположение ваших сообщений. Та дам, длинная пауза — перетаскивание (Drag and Drop) объектов компьютерной мышкой (опция перетаскивания).

Читайте также:  Ubuntu: В Chrome убрать пароль для разблокировки связки ключей?

С модулем Post Types Order или Real Custom Post Order for WordPress вы сможете разместить свои сообщения/записи, как вам захочется, в произвольном порядке. Например, запись годовой давности можно расположить на главной странице сайта, в первых рядах, а самый новый пост на задворках блога/сайта и так далее. Вообщем, вы меня поняли, надеюсь.

Post Types Order — сортировка типичных записей в WordPress

Изменение порядка записей и медиафайлов WordPress с помощью бесплатного плагина Post Type Order Order. Более 4 миллионов установок.

Плагин сортировка записей и вручную созданные объекты (доступные типы записей). Использует интерфейс Drag and Drop сортировки

Плагин WordPress Post Types Order

Мощный плагин, Order Post и Post Types Objects, использующий функцию перетаскивания в JavaScript. Порядок может быть настроен на странице списка архивов по типу постов WordPress по умолчанию — Все записи. Или в отдельном интерфейсе Изменить порядок (Re-Order), который отображает все объекты.

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

Установка и настройка плагина

Плагин был сделан с учетом того, что каждый может использовать сортировку, независимо от опыта работы с WordPress. Работать с данным модулем — инструментом очень просто. Установите его через установщик плагинов. Плагины — Добавить новый и ввести в запрос название модуля Post Types Order. На странице с результатами поиска он будет первый. Нажмите Установить:

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

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

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

Сортировка типичных записей базовые настройки

Затем, не забудьте нажать синею кнопку «Сохранить настройки». Далее, для изменения порядка отображения статей на вашем сайте в админке, раздел: Записи, появится новый пункт «Изменить порядок». Вот и нажимаем.

Отображение сообщений в нужном вам порядке

Откроется специальная страница с хронологическим порядком ваших статей, они расположены друг за другом, где вы можете очень легко путём перетаскивания (Drag and Drop) мышкой отсортировать свои публикации/сообщения в нужном вам порядке, то есть, произвольно, как вам душе угодно. Просто перетащите мышью заголовки постов, чтобы изменить их порядок. Курсор мой на снимке не отображается:

Запись — Изменить порядок с помощью курсора мышки

Нажимаете на нужный пост курсором мышки и удерживая её, перетаскиваете сообщения в нужное вам место. Вот, как то так. Здесь, курсор виден:

Изменения порядка публикаций с помощью перетаскивания

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

Перетаскивание поста курсором мышки

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

Меняем порядок изображений WP

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

Если по какой-то причине ваш вид не обновляется, то вы либо делаете что-то неправильно, либо код вашей темы не использует стандартный запрос для правил WordPress Codex.

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

Настройка General

Затем, спускаемся ниже и проставляем птички, как показано на скриншоте. Не забываем нажать на синюю клавишу «Save Changes», то есть «Сохранить изменения».

Настройка плагина Contextual Related Posts

Настройка List tuning

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

Читайте также:  В iOS 13.4 Beta 3 найдена функция восстановления для iPhone

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

Настройка плагина Contextual Related Posts

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

В разделе Order posts, выбираем Randomli, это значит, что похожие записи, будут выводится в случайном порядке.

Спускаемся ниже и продолжаем настройки List tuning. Осталось совсем немножко, а именно проставить птички в пункте Post types to include (Типы сообщений для включения) возле Post (после) и Page (страница) и сохраняем изменения.

Настройка плагина Contextual Related Posts

Настройка Output

В пункте меню Heading of posts, вписываем заголовок нашего блока вывода похожих записей. Я написала «Похожее по теме», вы можете написать любой удобный для вас заголовок.

В пункте меню Show when no posts are found, это означает «Показывать, когда сообщения не найдены» отмечаем «Blank output», то есть будет показываться пустой вывод, это выглядит эстетичней, чем «Показ пользовательского текста».

Настройка плагина Contextual Related Posts

Спускаемся ниже, там можно отметить Длину выдержки, я написала 11. Так же можно ограничить длину заголовка сообщения (в символах), я поставила 60.

Больше здесь настраивать ничего не надо, а следует нажать на синюю клавишу Save Changes и сохранить изменения.

Настройка Thumbnail

Настройка плагина Contextual Related Posts

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

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

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

Настройка плагина Contextual Related Posts

Далее нужно выбрать размер миниатюры, я отметила «crp_thumbnail (150×150)».

Спускаемся ниже. Здесь следует обозначить ширину, высоту миниатюры, твердые кадры. Так же выбрать «Атрибуты размера миниатюр».

Затем, можно оставить предложенные настройки «Названия мета-поля миниатюр». А в пункте «Получить первое изображение» обязательно поставить птичку.

Настройка плагина Contextual Related Posts

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

После изменения настроек, не забываем нажать на «Сохранить изменения».

Настройка Стили

Настройка плагина Contextual Related Posts

Переходим в следующий пункт меню «Стили». Здесь я выбрала «Округлые миниатюры» и сохранила изменения. Так как пункты «без стилей» и «Только текст» мне не понравились.

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

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

Настройка плагина Contextual Related Posts

Указав параметры, как на скриншоте, получился симпатичный блок вывода похожих записей. В пункте меню «Количество сообщений для отображения» поставила 6.

Далее в пункте меню «Расположение поста» отметила «Отобразить миниатюры со строками перед заголовком». Ширину и высоту миниатюр установила 260, сохранила изменения.

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

Настройка плагина Contextual Related Posts

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

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

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

Настройка плагина Contextual Related Posts

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

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

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

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

add_theme_support(‘category-thumbnails’);

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

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

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

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

Читайте также:  Как восстановить GRUB, когда Ubuntu не запускается

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

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

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

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 );

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

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

Итоги по оптимизации атрибутов изображений

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

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

Какая может быть стратегия:

  • физически переименовать файлы, можно воспользоваться плагином;

  • обновить название, описание, подпись, alt из имени файла с помощью Auto Image Attributes From Filename (обновятся метаданные в библиотеке);

  • обновить атрибуты в контенте на лету с помощью плагина Seo Optimized Images By , или SEO Images Optimizer by Weblizar по нужной вам схеме.

Похожее