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

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

Зображення в WordPress: посібник з налаштування

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

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

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

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

Зображення в WordPress: посібник з налаштування

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

установки розмірів мініатюр для запису можуть бути перезаписані у файлі functions.php вашої теми. Якщо ви зробите це, зміна розмірів мініатюр у Параметри → Медіафайли не вплине на те, як WordPress відображатиме мініатюру запису. Ця опція корисна, зокрема, деяким розробникам тем.

if ( function_exists( 'add_theme_support' ) ) {
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().

if ( function_exists( 'add_image_size' ) ) {
	add_image_size( 'tag-thumb', 200,200 );
	add_image_size( 'homepage-thumb', 220, 180 );
	 }

Щоб відобразити ці розміри мініатюр, вам потрібно буде додати невеликий код у файли шаблонів. У прикладі вище ми створили два розміри мініатюр один для шаблону тегів, а інший для шаблону головної сторінки. Щоб відобразити мініатюру тега, ми додамо наступний код до нашого шаблону tags.php.

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

Обрізання зображень у WordPress

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

Є два способи отримати доступ до редактора зображень:

  • Коли ви завантажуєте зображення зі сторінки редагування запису, після завантаження зайдіть у галерею і клацніть на зображенні, яке ви хочете редагувати, а потім натисніть кнопку Змінити.
  • Або ви можете зайти в Медіафайли, завантажити своє зображення, якщо ви вже завантажили зображення, — клацнути посилання Редагувати.

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

Зображення в WordPress: посібник з налаштування

Відмова від створення копій зображень

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

Є два способи зробити це, перший — простий: перейти до Параметри → Медіафайли та встановити розміри зображень рівними нулю.

Зображення в 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');

Зображення в WordPress: посібник з налаштування

Створення галерей за допомогою Медіа-завантажувача

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

плагін Галерея NextGEN

Зображення в WordPress: посібник з налаштування

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

Зображення в WordPress: посібник з налаштування

Є багато хороших плагінів, які дозволяють вам відображати зображення, наприклад:

  • Dynamic Content Gallery Plugin
  • Галерея лайтбоксу
  • Grand FIAGallery
  • LightBox Evolution [преміум плагін]

Висновок

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

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

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

Майкл Шіш:

Те, що лікар прописав. Ще не ознайомився повністю, але шукав тлумачної інформації досить довго.

Чубака Іванович:

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

WordPresso:

Хіба що тільки за допомогою плагінів, але ми ніколи не зазнавали труднощів із вбудованим завантажувачем. Якщо перетягувати картинки в завантажувач шляхом dran'n'drop — дуже зручно виходить.

KeePass:

Підкажіть, будь ласка, за допомогою якого плагіна здійснюється zoom картинок у вашому блозі? (зокрема в цій статті) Я використовую «FancyBox for WordPress», але мені здається, що ви використовуєте краще рішення, ніж моє.

Заздалегідь вдячний за відповідь.

WordPresso:

Так, ми використовуємо FancyBox
http://wordpress.org/extend/plugins/fancybox-for-wordpress/
У налаштуваннях можна вибирати стиль візуалізації під час розкриття картинок.

KeePass:

Випадково не підкажіть налаштування, які ви використовуєте у блозі?

KeePass:

Як і ви використовуєте «FancyBox for WordPress». Можете поділитися своїми налаштуваннями?

Howtomake:

Добре написано, але з апдейтом про версію 3,5 все потужно зміниться http://make.wordpress.org/ui/2012/07/30/media-wireframes/

Макс:

Підкажіть будь ласка, а чи є плагін, що дозволяє змінювати розміри картинки «на льоту» (як timthumb), тобто ресайзити її за пропорціями, при цьому зберігати в папку і на місці виводу віддавати вже готовий файл, тим самим не завантажуючи сервер при виведенні?

WordPresso:

Така можливість є у NEXTgen Gallery. А взагалі, ви можете виводити зображення в будь-якій роздільній здатності без навантаження на сервер за допомогою стилів style.css

Moscowbomj:

Ви не зовсім зрозуміли. Мені потрібно не просто зображення виводити, мені потрібно його попередньо відмасштабувати під комірку в якій я виводитиму. Дозвіл може бути і горизонтальним, і вертикальним, а div в якому я виводитиму завжди має фіксований розмір. Отже, потрібно вивести зображення так, щоб розміри не спотворилися.

Сергій:

Як я довго шукав цю інфу! Спасибі велике!

Ольга Мірау:

Доброго дня! Мій блог: Хочу дізнатися, чому у мене в редакції запису мініатюра картинки красива, а після опублікування вона стає менше розмірів і в білій рамці. Десь в налаштуваннях Fancy рамки? Додаю дві картинки:

WordPresso:

Якщо ви користуєтеся FancyBox плагіном, то він додає свої стилі оформлення. Це можна редагувати в налаштуваннях плагіна. Якщо ж ні — тоді через файл style.css

Ольга Мірау:

Велике спасибі! Я вже подивилася - це в Fancy за замовчуванням.

Антон:

Зауважив, що при завантаженні картинки в новій версії Wordpress 3.5.0 система створює сторінку для цієї картинки, що дуже погано, адже її не можна закрити в роботі. Що можна зробити у такому разі? Приклад:

WordPresso:

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

Олексій Курбатов:

Доброго дня, допоможіть прибрати рамки з картинок, ось сайт fullportal.ru

Фарід:

Здрастуйте, проблема полягає в тому, що я використовую woocommerce.
Чи не могли б ви порадити що робити? Коли я створюю товар. Є мініатюра. Додаю та виходить ось що. Як зробити повне зображення? На рахунок деяких зображень (Повних- вони з'явилися при зміні теми - залишилися з минулого)

WordPresso:

Для початку почистіть кеш картинок (Гугл знає як), а потім я б на вашому місці перезалив знову всі картинки в тому самому (заздалегідь підготовленому) дозволі.

Олександр:

Доброго дня! А чому в цьому коді

ми вставляємо category-thumb, коли йдеться про теги. За логікою речей, якщо ми створили функцію 'tag-thumb', то і виводити потрібно саме її.

Чи я помиляюсь?

У себе зробив так. У functions.php
add_theme_support('post-thumbnails');
set_post_thumbnail_size (300, 9999); //Для мініатюр постів на головну
add_image_size( 'page-single', 620, 9999); //Для однієї сторінки
add_image_size( 'popular', 140, 9999); //Для популярних

Виводив так:
у loop постів на головній
для популярних

Олександр:

І ще питання. При додаванні мініатюри WP створює вказані мною розміри і кладе оригінал поруч із цими файлами.
Як можна позбутися оригіналу?

WPcafe.org:

Так написаний двигун WordPress, оригінали завжди залишаються недоторканими.

Іван:

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

WPcafe.org:

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

Євген Лопатін:

проблема з мініатюрами зображень: при завантаженні мініатюри wordpress (або woocommerce??) мимоволі обрізає картинку і як мініатюру виводить її центральну частину, що виглядає погано(( намагався стиснути картинку, тоді вона влазила в розмір мініатюри, але виводилася з незадовільною якістю) розмір мініатюри в налаштуваннях медіафайлів теж нічого не дала(( допоможіть знайти рішення

Олександр:

Євгене, вам потрібно за адресою http://ваш_сайт/wp-admin/options-media.php поставити нулі у всіх полях для зображень. Після цього відкрийте файл functions.php вашої теми і знайдіть там щось подібне до того, що описувалося в розділі «Різні розміри мініатюр для різних шаблонів» цього запису.
Вам потрібно встановити розмір зображень, наприклад (200, 200) або (200, 9999). У першому випадку будуть зображення 200х200 пікселів без обрізки центром. У другому випадку створюватимуться зображення шириною 200 пікселів та n-пікселів пропорційно по висоті.
Обов'язково перевірте наявність такого запису (200, 200, true). Це означає, що створюватимуться мініатюри 200х200 пікселів, але шляхом так званого «кропу» або зразки по центру. Вам потрібно забрати значення true.
За ідеєю має заробити. Якщо, звичайно, я вас правильно зрозумів.

Женя:

Олександр у мене та ж проблема що Євген Лопатін згідно вашої відповіді я максимум зміг поставити нулі, відкривши файл functions.php тут нічого не можу знайти може підкажіть приблизно де можна ставити розміри або де ж шукати ці рядки щоб поставити розміри, зарано дякую )

Женя:

Хотів уточнити, чи я використовую плагін woocommerce можливо в ньому потрібно виправити код ?

Ванільна Закордон:

Велике дякую!!!

Ось ця порада допомогла вирішити проблему: «Встановлення розмірів мініатюр для запису може бути перезаписано у файлі functions.php вашої теми…»

Олена:

Здрастуйте, тільки почала вивчати вордпрес. І відразу після встановлення виникла проблема із зображеннями. Зображення завантажуються, і в галереї зображень вони видно, але в самому пості їх немає, навіть значка не з'являється, але при перегляді HTML посилання є. Якщо, наприклад, я копіюю посилання на зображення зі свого блогу, то картинка з'являється.
Перше посилання завантажено через вордпрес, другий випадок посилання скопійовано і вставлено вручну.
Порадьте у чому може бути проблема. Усі установки стандартні.
GromavaElena@mail.ru

WPcafe.org:

У вас у першому випадку посилання вказане на картинку у форматі .bmp - браузери не люблять відображати картинки в цьому форматі. А в другому випадку – звичайний jpg. Використовуйте завжди картинки у форматі jpg або png - і у вас ніколи не буде проблем!

Андрій Смоляков:

Доброго дня Брати! Питання таке: чи можна в корені сайту створити папку, наприклад, IMG і туди залити по FTP, наприклад, кілька папок по 100 картинок у кожній і посилання на ці картинки вставляти куди потрібно. Щоб порядок був і система. Раніше робив сайти на HTML і відповідно кожну папку контролював. Чи можна так робити з WordPress?

WPcafe.org:

У корені сайту не бажано, а ось у wp-content/uploads цілком

Андрій Смоляков:

Дякую, так і зроблю – буде лад. А то кидаю зображення через медіа завантажувач і розумію, що щось не так)))

Андрій Смоляков:

Денис (все правильно?), є питання далі на мою тему.

Створив у wp-content/uploads папку IMG, скинув туди картинки, а вони ніде не відображаються, коли хочу вставити товар у Woocommerce.
Може плагін є який? щоб у штатній медіагалереї у каталогах сайту можна було пересуватися?

Denis Semenov:

Привіт!
Підкажіть, чи можна і як відресайзити вже залиті фотографії, якщо при заливці «large» стояв 5240, а зараз змінив на 1600 (власне, на цей дозвіл і треба відресайзити всі залиті фото, щоб вони не вантажили сторінку своїми повними версіями)? Фотографій багато і хотілося б не ручками їх міняти:)
Заранее спасибо за ответ!

Макс Єрьомін:

Я не став би робити це засобами WordPress. Набагато простіше і швидше буде скачати всю папку з картинками на комп'ютер, поставити XnView і через команду Інструменти - Пакетна обробка перетворити всю папку до максимального розміру 1600. Всі фотки які були більше 1600 уріжуться, всі які менше залишаться колишніми.

WPcafe.org:

Ви знайдете відповідь у цих двох уроках:

https://hostenko.com/wpcafe/tutorials/zagruzka-izobrazheniy-s-zadannyim-razresheniem-v-wordpress/

https://hostenko.com/wpcafe/tutorials/foto-galereya-na-wordpress-s-izobrazheniyami-zadannogo-razmera/

Nataly:

Вітання. Дуже потрібна підказка.
Якщо встановити параметр ширини для Medium size у Параметри → Медіафайли, то цей же розмір хіба не повинен показуватися при виборі розміру для картинки, яка вставляється в пост? У мене чомусь так і залишилися дефолтні 300х120.

Заранее спасибо.

Андрій Смоляков:

Створив у wp-content/uploads папку IMG, скинув туди картинки FTP, а вони ніде
не відображаються, коли хочу вставити товар у Woocommerce.
Може плагін є який? щоб у штатній медіагалереї у каталогах сайту можна було пересуватися? А не вибирати із сотні залитих картинок потрібну. Сміти, якщо ставлю дурне питання (((

Борис:

Дуже навіть не дурне питання, у мене також проблема

Ілля:

Як робити мініатюри для постів, не завантажуючи їх на вордпрес? а додаючи url як пост з інших фотохостингів. (Проблема у розмірі та створенні купи копій).

Борис:

Не можу розібратися ((( Мучуся вже години 3 ... Як в моїй темі відключити виведення картинок мініатюрами-мне потрібно щоб картинки виводилися в повний розмір).

Додав до 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');

Не допомогло((( У налаштуваннях теж відключив…)

Ось як виглядає файл, який відповідає за виведення запису-content.php

» alt=»»>

» alt=»»>

Андрій:

Скажіть, а чи можна вивести клікабельне посилання категорії або мітки на мініатюру посту? Як, наприклад, на деяких постах сайту 4pda.ru

Тетяна:

Доброго дня! задаю мініатюру, а вона ж і виводиться першою картинкою під час відкриття всього посту. Як зробити, щоб мініатюра не відображалася у самому пості, а лише в анонсі на головній. Сайт тільки почала:

WPcafe.org:

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

Ігор:

Доброго дня, у мене при завантаженні зображень створюється копій 10 з різним розміром. Вони просто забивають мені сервер. Мені потрібно зробити так, щоб залишити лише 3 розміри, які використовуються сайтом. Підкажіть будь ласка. Буду дуже вдячний, якщо хтось допоможе

Віктор:

Допоможіть змінити директорію зображень!
"Налаштування медіафайлів" - "Завантаження файлів" - у мене немає цього підпункту, а у Вас на картинці є! , при тому, що оновлений до останнього WP. А проблема в наступному: Створив Папку і /Content-WP створював і /Upload створюю папку images (і права змінював на папки і під папки) ложу туди name.png а їх не видно і через посилання не відкривається. Допоможіть будь ласка…правильно налаштувати цю справу, і більше написали б про плагіни для самого WP редактора як його розширити (але не про візуальних редакторів), Попередньо вдячний.

Кирило:

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

Олексій:

Шановний авторе, підкажіть, як так зробити, що фото на сайті були навпаки НЕ клікабельні і при натисканні не включалася нова сторінка. Ось у вас у цьому пізнавальному матеріалі деякі фотки статичні, а деякі при натисканні збільшуюсь. Я хочу зробити так, щоб всі фото на моєму сайті були статичними (тобто при натисканні лівою кнопкою миші нічого не відбувалося, тільки якщо вибрати і відкрити в новому вікні фото тільки на правій кнопці миші)?

WPcafe.org:

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

Дмитро:

Підкажіть будь ласка, завантажую фото розміром 56 кілобайт, а воно 213 кілобайт, як це виправити?

Макс:

класний у Вас сайт - дякую за допомогу у вирішенні проблем

Dokaf:

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

aznoginsk:

Добрий день.
Коли відкрита адмін панель, все норм., всі завантажені зображення у записі дома. Як тільки на сайт заходжу, немає картинок, один текст. Що не так роблю?
Сайт noginskblog.wordpress.com

Людмила:

Доброго дня! Підкажіть у чому може бути проблема - в редакторі сторінки при натисканні на картинку не з'являється віконце редагування картинки. І я не можу видалити картинку.

Руслан:

Здравствуйте.
Я початківець блогер. Починаю самотушки вивчати двигун Вордпрес. У процесі створення було все добре, але 3 дні тому захотів в одній статті змінити фотографію, то при натисканні на фотографію вона чомусь не виділилася. Раніше все було гаразд.
Версія движка 4,3,11
Буду дуже вдячний Вам за поради, чому це сталося та як це виправити?

Руслан:

А як мені зробити ширину 100%? у налаштуваннях тільки піксельні розміри

Ольга:

Доброго дня, зненацька фотографії з WordPress стали в мініатюрах перетворюватися на овальні, як яйце по довжині. Що я роблю не так? Дякую! Ольга М.

Володимир:

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

Андрій:

мені сподобалося

Марія:

Привіт! Оновила версію WordPress 5.1.4. При публікації зараз зображення не активне, тобто не збільшується при натисканні на нього. Раніше при оформленні запису все було доступно і зрозуміло. При публікації нотатки із зображенням можна було натиснути на картинку, і вона збільшувалася у розмірі. Зараз у цій версії не знаю, як це зробити. Засмутилася щось. Багато часу займає публікація матеріалу.

Діма:

Днями дізнався про сервіс BAILRY – безкоштовна регулярна (періодична) перевірка сайту на доступність. Можливо, комусь він знадобиться! Є там і платна підписка для постійного контролю доступності сайту. Удачі всім!

Антон:

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

Наприклад, картинка була 300х100 пікселів, то зараз вона виглядає як 870х280 пікселів. Якщо намагаюся вставити старі, раніше завантажені зображення з бібліотеки, всі вони залишаються величезними. Якщо спробувати завантажити нові зображення, вони не відображаються у статті. Хоча до бібліотеки вони завантажилися.

У мене в налаштуваннях WordPress за умовчанням варто "поміщати завантажені мною файли в папки за місяцем та роком". Пробував вимкнути не допомагає. Але зауважив, що якщо на хостингу скопіювати старі картинки з папок 2018-2021 або завантажити нові в папку 2017 року тоді все нормально відображається.

Ще на сайті встановлений плагін WebP Converter for Media, може він якось впливає. Хоча намагався його видаляти, не допомагає.

Підкажіть, будь ласка, в чому може бути проблема? Ось сторінка сайту з цією проблемою: https://wmzi.ru/zarabotok-na-kapche/

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

WPcafe:

Спробуйте інший шаблон.
І бажано роботи проводити на хилі сайту на технічному домені, щоб уникнути таких проблем.

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