Знаете ли вы, насколько важно использовать изображения на веб-сайте, особенно в условиях современного интернет-маркетинга? Прежде всего, они способны разнообразить монотонный текст, что делает восприятие информации более легким. Кроме того, графика создает уникальную атмосферу на страницах, что способствует увеличению посещаемости и конверсии ресурса.
Исследования показывают, что записи в блоге, содержащие изображения, получают на 94% больше просмотров по сравнению с теми, где они отсутствуют. По этой причине следует максимально использовать возможности изображений для достижения наилучших результатов.
Давайте рассмотрим 10 фрагментов кода, которые помогут вам более грамотно применять изображения в WordPress.
Обратите внимание: представленные ниже коды нужно добавлять в основной файл конфигурации вашей активной темы WordPress, который называется functions.php.
Если вы не уверены, как производить изменения в functions.php, вам стоит воспользоваться плагином ProFunctions, который существенно упрощает эту задачу.
1. Добавление атрибута alt к изображениям
Не забывайте добавлять атрибут alt для изображений. Это помогает поисковым системам понять, о чем изображение, и улучшает SEO.
2. Оптимизация размера изображений
Перед загрузкой изображений на сайт, убедитесь, что они оптимизированы по размеру. Это поможет ускорить загрузку страниц и повысит пользовательский опыт.
3. Использование формата WebP
Рассмотрите возможность использования формата WebP для изображений. Этот формат обеспечивает лучшее сжатие без потери качества по сравнению с JPEG и PNG.
4. Создание миниатюр
Используйте функции WordPress для автоматического создания миниатюр изображений, чтобы сделать их более доступными для пользователей.
5. Установка прав доступа к изображениям
Убедитесь, что права доступа к загруженным изображениям настроены правильно. Это предотвратит несанкционированный доступ к вашим медиафайлам.
6. Использование плагинов для галерей
Для создания профессионально выглядящих галерей изображений используйте специализированные плагины, такие как Envira Gallery или NextGEN Gallery.
7. Упрощение встраивания изображений с помощью шорткодов
Создайте шорткоды для быстрого встраивания изображений в записи и страницы, что значительно упростит процесс редактирования.
8. Внедрение lazy loading
Используйте технологии lazy loading, чтобы загружать изображения по мере прокрутки страницы. Это улучшит производительность и скорость загрузки.
9. Персонализированные изображения для социальных сетей
Создавайте отдельные изображения для социальных сетей, используя плагины, которые автоматически генерируют изображения, оптимизированные для различных платформ.
10. Регулярное обновление медиа-библиотеки
Не забывайте регулярно обновлять и очищать свою медиа-библиотеку от устаревших и ненужных изображений. Это не только улучшает производительность, но и облегчает поиск нужных медиафайлов.
Следуя этим рекомендациям, вы сможете значительно повысить эффективность изображения на вашем сайте WordPress и улучшить общий пользовательский опыт.
1. Отключение автоматического JPEG-сжатия
Крайне важно обеспечить минимальный размер всех изображений на сайте для их быстрой загрузки. Рекомендуется использовать плагины для автоматического сжатия картинок без потери качества (мы подробно обсуждали это в одной из предыдущих статей).
Если такие плагины инсталлированы, вам не понадобятся встроенные функции сжатия JPEG, которые по умолчанию уменьшают качество изображений до 90%. Эту функцию можно отключить с помощью следующего кода:
function site_disable_jpeg_optimize() { return 100; } add_filter( 'jpeg_quality', 'site_disable_jpeg_optimize' );
2. Добавление фавикона
Фавикон (favicon wordpress) – это небольшой значок, который отображается в левом углу вкладки с вашим сайтом. Он позволяет легко идентифицировать сайт, особенно если в браузере открыто несколько страниц одновременно.
Фавикон можно создать самостоятельно или, воспользовавшись бесплатным онлайн-сервисом, таким как favicon.cc. По завершении загрузите иконку в корневую папку вашей темы (например, /wp-content/your-theme-name/), а затем добавьте следующий код для ее отображения:
function site_insert_favicon() { echo ''; } add_action( 'wp_head', 'site_insert_favicon');
3. Отображение фавикона в качестве Gravatar
Если у вас нет желания или времени на создание индивидуального фавикона, простой альтернативой может стать использование уже существующего Gravatar.
Gravatar, связанный с электронной почтой вашего профиля в WordPress, будет использоваться как фавикон. Просто добавьте следующий код в файл functions.php:
function site_gravatar_as_favicon() { $GetTheHash = md5(strtolower(trim(get_bloginfo('admin_email')))); return 'http://www.gravatar.com/avatar/' . $GetTheHash . '?s=16'; } function favicon() { echo ''; } add_action( 'wp_head', 'favicon' );
4. Добавление поддержки миниатюр в теме
Перед тем как продолжить, убедитесь, что ваша тема поддерживает миниатюры записей. Это важный шаг для оптимизации изображений в WordPress.
Эта опция, как правило, включена, но если вдруг нет, вы можете исправить это с помощью следующей строки:
add_theme_support( 'post-thumbnails' );
5. Установка обязательного наличия миниатюры публикуемой записи
Лучше всего, если каждая запись в вашем блоге будет иметь миниатюру. Однако иногда публикация может не иметь миниатюры по различным причинам. Эта проблема часто возникает на платформах с несколькими авторами.
Если вы добавите следующий код в functions.php и попытаетесь опубликовать запись без миниатюры, получите сообщение: “Вы должны выбрать миниатюру, прежде чем ваш пост будет опубликован.”
function site_check_thumbnail( $post_id ) { if (get_post_type($post_id) != 'post') return; if (!has_post_thumbnail($post_id)) { set_transient('has_post_thumbnail', 'no'); remove_action('save_post', 'site_check_thumbnail'); wp_update_post(array('ID' => $post_id, 'post_status' => 'draft')); add_action('save_post', 'site_check_thumbnail'); } else { delete_transient('has_post_thumbnail'); } } function site_thumbnail_error() { if (get_transient('has_post_thumbnail') == 'no') { echo 'Вы должны выбрать миниатюру, прежде чем ваш пост будет опубликован.
'; delete_transient('has_post_thumbnail'); } } add_action('save_post', 'site_check_thumbnail'); add_action('admin_notices', 'site_thumbnail_error');
6. Отображение миниатюр в RSS-ленте
По умолчанию миниатюры не отображаются в RSS-лентах сайтов на WordPress. Если вы хотите автоматически размещать свои посты в соцсетях, публикации с изображениями будут выглядеть намного привлекательнее. К счастью, это можно решить с помощью простого кода:
function site_rss_post_thumbnail($content) { global $post; if (has_post_thumbnail($post->ID)) $content = '' . get_the_post_thumbnail($post->ID, 'thumbnail') . '
' . $content; return $content; } add_filter('the_content_feed', 'site_rss_post_thumbnail');
7. Удаление тегов абзацев из изображений
Часто теги абзацев вокруг изображений, вставленных в пост, могут ухудшать внешний вид темы. Поэтому лучше от них избавиться. Для этого можно использовать следующий PHP-код:
function site_filter_ptags_on_images($content) { return preg_replace('/\s*()?\s*(![10 трюков для более эффективного использования изображений в WordPress]()
)\s*(<\s*\/a>)?\s*<\s*\/p>/iU', '\1\2\3', $content); } add_filter('the_content', 'site_filter_ptags_on_images');
8. Удалить ширину и высоту добавленных изображений
По умолчанию WordPress добавляет HTML-атрибуты ширины и высоты ко всем изображениям, вставляемым в записи или страницы.
В большинстве случаев это необходимо, поскольку это гарантирует, что блок нужного размера изображения будет элементом контента, даже если оно еще не загружено. Однако бывают ситуации, когда эти параметры не нужны, например, если вы хотите изменить CSS стили страницы.
Если требуется удалить атрибуты ширины и высоты по умолчанию, воспользуйтесь следующим кодом:
function site_remove_width_attribute($html) height)="\d*"\s/', "", $html); return $html; add_filter('post_thumbnail_html', 'site_remove_width_attribute', 10); add_filter('image_send_to_editor', 'site_remove_width_attribute', 10);
9. Добавление собственного логотипа на страницу входа
WordPress по умолчанию отображает свой логотип на странице авторизации (/wp-login.php) с URL-ссылкой на официальный сайт. Владельцы сайтов часто хотят поменять его на собственный. Для этого необходимо добавить в functions.php следующий код:
function site_custom_login_logo() { echo ''; } add_action('login_head', 'site_custom_login_logo');
10. Добавление своего логотипа на страницу администратора
В WordPress можно изменить стандартную иконку как на странице входа, так и на странице администратора. Для этого:
function site_custom_admin_logo() { echo ' { your_custom_logo_here }'; } add_action('admin_head', 'site_custom_admin_logo');