Вы знаете, что изображения на сайте очень важны, особенно сегодня, в мире интернет-маркетинга. Во-первых, они разбавляют скучный текст, позволяя лучше воспринимать информацию. Кроме того, картинки создают на страницах веб-ресурса особую обстановку, способствуя росту его популярности и конверсии.
Доказано, что публикации в блоге с изображениями получают на 94% больше просмотров, чем без них. Поэтому имеет смысл использовать все преимущества картинок, получая от них максимальную отдачу.
Рассмотрим 10 фрагментов кода, которые позволят вам более эффективно использовать изображения в WordPress.
Важно!!! Приведенные ниже части кода необходимо вставлять в основной конфигурационный файл вашей активной WordPress-темы functions.php.
Если вы не знаете, как редактировать functions.php, то в этом случае вам поможет плагин ProFunctions.
1. Отключение автоматического JPEG-сжатия
Обеспечение того, чтобы все изображения сайта имели как можно меньший размер (и, следовательно, быстро загружались), имеет жизненно важное значение. Поэтому для WordPress рекомендуется использовать плагины для автоматического сжатия картинок без потери их качества (детально об этом мы писали в одной из наших прошлых статей).
Если у вас установлены эти плагины, то вам вовсе не нужны встроенные возможности WordPress сжатия JPEG. Они по умолчанию сжимают этот тип изображений до 90% от его исходного качества. Эту функцию можно эффективно отключить с помощью следующего кода:
function wpschool_disable_jpeg_optimize() {
return 100;
}
add_filter( 'jpeg_quality', 'wpschool_disable_jpeg_optimize' ); 2. Добавление фавикона
Фавикон (favicon wordpress) – это маленькое изображение, которое отображается в левом углу вкладки открытого сайта. Картинка позволяет визуально идентифицировать тот или иной сайт, особенно если в браузере их открыто несколько.
Фавикон можно создать с нуля или с помощью бесплатного онлайн-сервиса, например, favicon.cc. Как только вы это сделаете, загрузите иконку в корневую папку вашей темы (например, /wp-content/your-theme-name/) и включите ее отображение, используя следующий код:
function wpschool_insert_favicon(){
echo "<link rel='shortcut icon' href='" . get_stylesheet_directory_uri() . "/favicon.ico' />" . "n";
}
add_action( 'wp_head', 'wpschool_insert_favicon'); 3. Отображение фавикона в качестве Gravatar
Если у вас нет времени или желания создавать пользовательский фавикон, быстрой и простой альтернативой является использование уже существующего Gravatar.
Gravatar, прикрепленный к адресу электронной почты, указанному в вашем профиле WordPress, будет использоваться в качестве значка. Для этого нужно просто добавить следующий код в functions.php:
function wpschool_gravatar_as_favicon() {
$GetTheHash = md5( strtolower( trim( get_bloginfo( 'admin_email' ) ) ) );
return 'http://www.gravatar.com/avatar/' . $GetTheHash . '?s=16';
}
function favicon() {
echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.wpschool_gravatar_as_favicon().'" />';
}
add_action( 'wp_head', 'favicon' ); 4. Добавление поддержки миниатюр в теме
Прежде чем вы сделаете что-нибудь еще, вам нужно убедиться, что ваша тема поддерживает миниатюры записей. Это действительно важный шаг для оптимизации изображений в WordPress.
Эта функция почти всегда включена. Если же это не так, то следующая строка исправит это:
add_theme_support( 'post-thumbnails' );
5. Установка обязательного наличия миниатюры публикуемой записи
Как правило, каждая публикуемая запись вашего блога должна иметь миниатюру. Но иногда бывает так, что запись была опубликована, но по какой то причине у нее отсутствует миниатюра. Особенно эта проблема актуальна на сайтах с несколькими авторами.
Если добавить следующий код в functions.php и попытаться опубликовать запись без миниатюры, то вы получите следующее сообщение: “Вы должны выбрать миниатюру, прежде чем ваш пост будет опубликован.”
function wpschool_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', 'wpschool_check_thumbnail' );
wp_update_post( array( 'ID' => $post_id, 'post_status' => 'draft' ) );
add_action( 'save_post', 'wpschool_check_thumbnail' );
} else {
delete_transient( "has_post_thumbnail" );
}
}
function wpschool_thumbnail_error() {
if ( get_transient( "has_post_thumbnail" ) == "no" ) {
echo "<div id='message' class='error'><p><strong>Вы должны выбрать миниатюру, прежде чем ваш пост будет опубликован.</strong></p></div>";
delete_transient( "has_post_thumbnail" );
}
}
add_action( 'save_post', 'wpschool_check_thumbnail' );
add_action( 'admin_notices', 'wpschool_thumbnail_error' ); 6. Отображение миниатюр в RSS-ленте
По умолчанию миниатюры не отображаются в RSS-ленте WordPress-сайта. Если вы собираетесь автоматически выставлять свои посты в соцсетях, то ваши публикации с красивым изображением смотрелись бы намного лучше. К счастью, решение этой задачи достаточно простое. Просто используйте следующий фрагмент кода:
function wpschool_rss_post_thumbnail( $content ) {
global $post;
if( has_post_thumbnail( $post->ID ) )
$content = '<p>' . get_the_post_thumbnail( $post->ID, 'thumbnail' ) . '</p>' . $content;
return $content;
}
add_filter( 'the_content_feed', 'wpschool_rss_post_thumbnail' ); 7. Удаление тегов абзацев из изображений
Часто теги абзацев вокруг вставленных в посте изображений могут нарушить общий дизайн темы. Поэтому целесообразно от них избавиться. Для можно воспользоваться следующим PHP-кодом:
function wpschool_filter_ptags_on_images( $content ){
return preg_replace( '/\s*(<a>)?\s*(<img alt="10 трюков для более эффективного использования изображений в WordPress" />)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content );
}
add_filter( 'the_content', 'wpschool_filter_ptags_on_images' );</a> 8. Удалить ширину и высоту добавленных изображений
По умолчанию WordPress добавляет HTML-атрибуты ширины и высоты к каждому изображению, которое добавляется в запись или на страницу.
В большинстве случаев это необходимо, так как гарантирует, что блок соответствующего размера самого изображения будет выведен в контенте, даже если оно еще не загружено. Однако бывают ситуации, когда этих размеров не должно быть, особенно когда вы пытаетесь изменить CSS-стили страницы.
Если вам все же нужно будет избавиться от заданных ширины и высоты по умолчанию, используйте следующий код:
function wpschool_remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
add_filter( 'post_thumbnail_html', 'wpschool_remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'wpschool_remove_width_attribute', 10 ); 9. Добавление собственного логотипа на страницу входа
WordPress по умолчанию на странице авторизации (/wp-login.php) отображает свой логотип с URL-ссылкой на официальный сайт. Часто владельцы сайтов хотят изменить его на собственный. Этого можно добиться, вставив в functions.php следующие строки:
function wpschool_custom_login_logo() {
echo '
h1 a { background-image:url('.get_bloginfo('template_directory').'/logo.gif) !important; }
';
}
add_action( 'login_head', 'wpschool_custom_login_logo' ); 10. Добавление своего логотипа на страницу администратора
В WordPress, как на странице входа, так и на странице администратора, можно изменить заданную по умолчанию иконку. Для этого:
function wpschool_custom_admin_logo() {
echo '<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/logo.png) !important; }
</style>';
}
add_action( 'admin_head', 'wpschool_custom_admin_logo' ); Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Спасибо большое, все давольно интересно и главное просто!
Спасибо большое, давно искала подобное!