Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

Як багато позитивних оновлень відбулося в завантажувачі медіафайлів на WordPress за останні кілька років. У ньому з'явилися потужні інструменти для керування зображеннями, їх редагування в адмінці WordPress, створення галерей та багато корисних функцій. А з релізом нової версії WordPress 4.0 використається покращений медіа-браузер.

Сьогодні ви дізнаєтеся не лише про те, як змінити розмір зображень на WordPress та відредагувати їх, зменшити розмір файлу для прискорення завантаження сторінок сайту, але й як створюються галереї та активується для них карусель зображень.

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Дивіться також:

Керування розміром зображень на WordPress

При завантаженні зображень на WordPress автоматично створюються альтернативні розміри: мініатюра, середній розмір і великий. Їх точна ширина і висота задаються в Налаштуваннях → Медіафайли, як показано нижче:

Повний посібник із роботи із зображеннями на WordPress

Якщо в цих параметрах не вказати формат мініатюри, він буде згенерований автоматично.

Налаштування розміру мініатюр змінюються у файлі functions.php використовуваної вами теми. Таким чином, зміни розміру мініатюр в Налаштуваннях → Медіафайли не матиме жодного впливу на те, як відображатиметься мініатюра в записі. Особливо ця опція може стати в нагоді розробникам тем.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 );

У наведеному вище коді для мініатюри вказаний розмір в 150 х 150 пікселів. Така функція зміни розміру мініатюри посту є не настільки значною на тлі інших, але все ж таки досить корисною функцією. У ній є три аргументи:

<?php set_post_thumbnail_size( $width, $height, $crop ); ?> 

вміст $crop повідомляє WordPress про те, чи потрібно обрізати зображення чи ні. За замовчуванням ця функція в налаштуваннях вимкнена, але якщо змінити значення 'false'на'правда', вона активується, і WordPress обріже картинку.

Різні розміри мініатюр для різних шаблонів

При необхідності на різні сторінки можна додати картинки різних розмірів. Наприклад, на стартову сторінку сайту – мініатюру, в архів чи категорію – зображення середнього розміру. А самі розміри вибираються за допомогою функції add_image_size():

add_image_size( 'tag-thumb', 200,200 );
add_image_size( 'homepage-thumb', 220, 180 );

Щоб ці зміни відобразилися на сайті, необхідно додати невеликий код у файли шаблону, що використовується. У прикладі вище вказано два розміри мініатюр. Один для шаблону тегів Tags, другий для стартової сторінки. Мініатюра tag з'явиться, якщо додати до шаблону tags.php наступний код:

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'category-thumb' );
	 } ?>

Редагування зображень у WordPress

WordPress може похвалитися наявністю вбудованого редактора зображень, де можна обрізати, змінити розмір зображення або перевернути його. Є два способи користуватися цим редактором. Перший — перейти на Редагування зображення (Edit Image) за посиланням, яке з'явиться праворуч відразу після завантаження зображень.

Повний посібник із роботи із зображеннями на WordPress

Другий - зайти в Медіафайли → Бібліотека в адмінці, де знаходиться список нещодавно завантажених зображень, навести курсор мишки на одне з них і вибрати Редагування (Редагувати).

Повний посібник із роботи із зображеннями на WordPress

При натисканні на кнопку Редагування з'явиться кілька параметрів, які дозволяють обрізати зображення, перевернути його, масштабувати, а також відредагувати alt-текст, заголовок або опис:

Повний посібник із роботи із зображеннями на WordPress

Як уникнути появи дублів зображень на WordPress

Насправді функція створення різних розмірів зображень на WordPress набагато корисніша, ніж може здатися. З її допомогою можна відобразити різні розміри зображень залежно від розташування. Наприклад, в записі створити картинку середнього розміру, на головну або в архів помістити мініатюру, а при натисканні на ці зображення з'являться повноекранні розміри у високій якості.

Щоправда, не всі хочуть бачити на своїх сайтах графіку у різних форматах. Багато хто воліє використовувати стандартні розміри зображень. Наприклад, при створенні власних розмірів картинок для конкретних шаблонів не всі забажають використовувати будь-які інші параметри.

Стандартні розміри зображення створюються двома способами. Найпростіше зайти в розділ Установки → Медіафайли і встановити нулі (0) у полях, відповідних кожному з цих зображень.

Повний посібник із роботи із зображеннями на WordPress

Більш складний варіант – додати код у файл functions.php використовуваної теми:

function wplift_remove_image_sizes( $sizes) {
        unset( $sizes['thumbnail']);
        unset( $sizes['medium']);
        unset( $sizes['large']);

        return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'wplift_remove_image_sizes');

Автоматичне стиснення зображень

Автоматична оптимізація зображення під потрібний розмір файлу сприяє швидшому завантаженню записів та сторінок, що у свою чергу покращує SEO сайту та його ранжування у пошукових системах.

Як відомо, пошукові системи більше люблять сайти, завантаження сторінок яких не займає більше кількох секунд. З автоматичним стиском зображень добре впорається безкоштовний плагін WP Smush.

Повний посібник із роботи із зображеннями на WordPress

Ви також можете скористатися опцією Bulk Smush.it для стиснення всіх давніших зображень на сайті, а також їх оптимізації.

Повний посібник із роботи із зображеннями на WordPress

Створення галерей зображень

Для додавання галереї зображень у запис потрібно натиснути кнопку Додати медіафайл и Створити галерею, в яку можна буде завантажити кілька фотографій. Це дуже просто зробити, достатньо відзначити галочкою всі картинки, які мають бути у галереї.

Повний посібник із роботи із зображеннями на WordPress

Після завантаження їх можна поміняти місцями та поставити у потрібному порядку для відображення на сайті, видалити непотрібні, додати нові та інше.

Після цього натиснути кнопку Створити галерею, і її буде додано до запису.

Повний посібник із роботи із зображеннями на WordPress

Тема, що використовується, відобразить галерею у форматі сітки. При натисканні на будь-яке зображення користувач потрапить на сторінку з єдиним зображенням цієї галереї.

Повний посібник із роботи із зображеннями на WordPress

Карусель для організації галереї зображень

Знайомі ви з плагіном Jetpack чи ні, але у ньому є одна чудова функція під назвою Carousel (карусель). Після натискання на галерею з'являться повноекранні зображення, які можна переглядати за допомогою кнопок «Попереднє» та «Наступне».

Повний посібник із роботи із зображеннями на WordPress

Це незамінна функція для фотографів, щоб розмістити своє портфоліо. До того ж є можливість для відображення даних EXIF.

Джерело: wplift.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 15

Кен:

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

Дмитро:

Добрий день. Чи можна зробити так, щоб розміри зображень, які створює тема, можна було вибрати зі списку, коли ви вставляєте зображення в пост? На даний момент для вибору доступні лише оригінали.

Алекс:

А як просто без запису додати зображення, скрізь тільки й пишуть додати картинку в запис і тд. я хотів би знати як без запису додавати картинки на сайт, ось допустимо зробити блок портфоліо. адже з картинками там не потрібен ніякий текст запис?
Дякуємо!

WPcafe.org:

В адмінці WordPress зайдіть у Медіафайли — Додати новий

Алекс:

Ну це якщо шаблон стандартний, а якщо шаблон свій зверстаний, адже там записи виходять по черзі і якщо я хочу замінити п'яту картинку або хочу поставити картинку куди мені хочеться як можна так зробити крім до запису більше нікуди не можна що додати картинку?

Віталій:

Доброго дня, а підкажіть як у категорії товарів додавати картинки?

Андрій:

Версія WordPress 4.9.1
Загалом питання такого плану
Чи можна зробити, щоб у медіафайлах за промовчанням показувалися зображення поточного дня або за поточний місяць, а не за весь час?
prntscr.com/hmznnw

Микола:

Ось що мене зовсім не влаштовує у ВП, так це робота з фотками, які розкладаються по папках по датах. Ситуація (одна з багатьох): інтернет-магазин, всі фотки по артикулу, тобто. артикул 123 та фотка 123.jpg і т.д. Фоток більше 1000. Треба замінити усі ці фотки на нові. Зазвичай це робиться просто - всі фотки лягають у папку, наприклад, shop і все, перезалив і забув. Як у ВП із цим? Те саме з припустимо слайдером, я в Джумлі кладу в папку images/slider фотки 1.jpg, 2.jpg і т.д. Потім фотографії замінити на новенькі — з такими ж назвами перезалив і краса. У ВП із цим як я розумію серйозну проблему.

Maksovich:

Микола, сам думав якийсь час над цим. У всіх дорожніх движках файли розкладаються по папках з ID запису або ще якось. Поспішаю поділитися незамінним плагіном, який виправляє це непорозуміння у вордпресі — Custom Upload Dir

Maksovich:

До речі навіть якщо як ви писали зайти в Налаштування → Медіафайли і задати нулі (0) в полях, то вордпрес все рівно генерує картинку середніх розмірів, але своїх розмірів щось типу 768х768. Що це в біса таке.

Maksovich:

Знайшов рішення. Сам спитав називається і сам відповів. Загалом з версії 4.4 генерується додаткове зображення середніх розмірів 768х??? щоб це відключити потрібно зайти на приховану сторінку з усіма налаштуваннями, у тому числі й налаштуваннями плагінів : /wp-admin/options.php там знайти medium_large_size_w та виставити на 0

Олексій:

Підкажіть, роблю однотипні пости, зображення посту - квадратне, отримую в результаті в деяких постах квадратне, в деяких обрізане зверху та знизу. Закономірності не бачу
Щоправда, код джерела різний. Але чому він різний зрозуміти не можу!!

Ігор:

Підкажіть, як вимкнути можливість редагування зображень усередині візуального редактора зовсім?

Володимир:

Доброго дня. Підкажіть, будь ласка, як замінити банер на домашній сторінці? Дякую.

WPcafe:

Або в розділі Реклама, якщо така є в налаштуваннях шаблону, або в коді файлу header.php

Додати коментар або відгук