Здравейте!
Всяка публикация на WordPress може да съдържа изображения с различни размери. Едни от тези изображения са миниатюрите, известни още като WordPress thumbnails. Това са малките версии на всяка снимка или графика, която решите да вмъкнете във вашите публикации и/или да използвате като featured image.
Къде най-често мога да видя WordPress thumbnails (миниатюри)?
В зависимост от темата, която използвате тези изображения могат да бъдат позиционирани различно. Но най-пресният пример, който мога да дам е с Optibg.com. Разгледайте началната страница на моя блог или някоя от страниците с категории и ще видите миниатюрите към всяка една моя публикация. Също така в лявата лента с популярни публикации можете да видите отново наличие на същите WordPress thumbnails (миниатюри).
Защо ще пожелая да оразмеря тези изображения?
По подразбиране всяка една WordPress инсталация задава фиксирани стойности за размерите на WordPress thumbnails (миниатюри). Тези размери са 150×150 пиксела и ако това съотношение отговаря на съотношението на качените от вас изображения, то най-вероятно няма да пожелаете да ги промените.
Но аз лично силно се съмнявам, че всяко едно изображение на вашия WordPress сайт ще бъде квадратно. Просто вероятността за това е минимална, а изображение в друго съотношение, различно от това, което е заложено по подразбиране в WordPress ще предизвика генериране на грозно изрязани WordPress thumbnails (миниатюри). Със сигурност това ще намали usability-то на вашия сайт, тъй като посетителите ви няма да могат да видят тези изображения изцяло, което означава, че е много вероятно те да не пожелаят да кликнат на публикациите ви и така в последствие да ги видят в пълните им размери.
В общи линии миниатюрите следва да привлекат интереса на вашите посетители. Ако те са грозни и непълни, то това е много вероятно да не се случи. Макар, че ако съдържанието на публикациите ви е наистина качествено и носи висока стойност за вашите читатели, то те биха били склонни да изтърпят и грозно оразмерените WordPress thumbnails (миниатюри). Но нека да не забравяме, че от гледна точка на SEO вие трябва да предоставяте високо качество на абсолютно всяко едно съдържание, което е налично на вашия сайт. Миниатюрите също спадат към категорията „съдържание“. Надявам се с това да сте се убедили защо е важно те да бъдат оптимизирани и оразмерени коректно.
Как мога да извърша оразмеряване на WordPress thumbnails (миниатюри)?
Моята препоръка е да прецените как искате да изглеждат вашите миниатюри още в процеса на планиране на структурата и дизайна на вашия WordPress сайт. Тогава чисто и просто можете да отидете на Settings -> Media в админ панела и да зададете желаните от вас стойности за размерите на всички изображения, които ще фигурират на сайта ви, в това число и тези на вашите WordPress thumbnails (миниатюри).
На изображението по-долу ще видите избраните от мен стойности за миниатюрите в Optibg.com. Обърнете внимание, че не съм поставил отметка на “ „. Препоръката ми е да постъпите по същия начин. Според мен така ще получите много по-добре генерирани миниатюри, които ще паснат на вашата WordPress тема. Разбира се, можете да експериментирате и да изпробвате различни комбинации в зависимост вашите цели.
След като зададете стойностите за WordPress thumbnails (миниатюри), кликнете на бутона „Save changes“. Всички качени изображения от вас от този момент нататък, вече ще имат генерирани миниатюри в зададените размери.
А какво се случва с вече качените изображения и техните миниатюри?
Съвършено нищо (или поне в повечето случаи трябва да се случи точно това). Тоест новите стойности, които сте задали няма да им повлияят.
Тогава как мога да оразмеря и старите WordPress thumbnails (миниатюри)?
Най-лесният и безопасен начин е чрез плъгина Regenerate Thumbnails. След като го инсталирате и активирате, отидете в секцията Media -> Library от админ панела на вашия WordPress сайт. Задръжте мишката на избраното от вас изображение и кликнете на Regenerate Thumbnails.
Можете да изберете и повече от едно изображение и да зададете тази команда от Bulk Actions. След като плъгина си свърши работата ще имате коректно оразмерени WordPress thumbnails (миниатюри) според зададените от вас размери.
Лесно е, нали? 🙂
UPDATE: А какво се случва с останалите размери в менюто Settings -> Media, ако променя техните стойности? А мога ли да добавя допълнителни custom размери?
Да започнем с първия въпрос – реално погледнато Medium и Large размерите също са вид миниатюри, но просто са по-големи и съответно са по-прегледни при поставяне в съдържанието. WordPress позволява всяко изображение да бъде оразмерено с custom размери в момента, в който го вмъкнем в публикацията. Това означава, че ако сте определили подходящ custom размер (да речем за Large), то можете да въведете тези стойности в менюто Settings -> Media и след това да използвате отново плъгина Regenerate Thumbnails. Така той ще регенерира всички Large размери и ще постигнете бързо желания ефект за всички публикации, където той е използван. Същото важи, разбира се и за Medium. Освен това тези размери по подразбиране запазват съотношението на оригиналното изображение.
А сега с втория въпрос – да можете да зададете custom размери и дори да ги наименовате както желаете. Също така можете да определите дали миниатюрите с тези размери да бъдат изрязвани 1:1 или съотношението им да бъде запазено спрямо оригиналното изображение. Освен това можете да зададете и Unlimited Height, което означава, че изображението ще е изрязано спрямо заложената ширина. Това е идеално най-вече за инфографики, които по подразбиране са винаги с по-голяма дължина, отколкото ширина. Дори можете да настроите къде точно да бъдат използвани тези ваши custom размери.
За целта можете да подходите така:
- Да редактирате някои WordPress файлове и да добавите код към тях (ще работи само за текущо използваната тема) *препоръчвам го за напреднали потребители* или да преминете директно на:
- Да инсталирате плъгин, който ще ви улесни драстично и ще приложи настройките за всички теми (този плъгин може автоматично да направи и редакциите на файловете в стъпка 1, което е идеално за начинаещи потребители);
Стъпка1
Първо трябва да редактирате functions.php (желателно е да правите промени по файла за дъщерната тема, а не за главната). Добавете следното в този файл:
add_theme_support( 'post-thumbnails' );
С това позволявате на вашата тема да използва post thumbnails.
Сега следва да добавите новите размери (продължаваме с файла functions.php). В примера по-долу ще предложа вариант за hard crop (1:1 изрязване спрямо зададените размери), за soft crop (изрязване, съобразено със съотношението на оригиналното изображение) и за unlimited height.
add_image_size( 'nov_thumbnail_razmer_1', 110, 110, true ); // Hard Crop add_image_size( 'nov_thumbnail_razmer_2', 250, 190 ); // Soft Crop add_image_size( 'nov_thumbnail_razmer_3', 590, 9999 ); // Unlimited Height
Нека да поясня какво виждате:
- add_image_size е команда за добавяне на нов размер;
- nov_thumbnail_razmer_1/2/3 е името на custom размера. Така то ще бъде показано в менюто за вмъкване на изображение в публикация;
- След това в кода виждате примерните размери;
- True в първия ред активира hard crop;
- 9999 в последния позволява unilimited height;
Запазете промените по functions.php.
След като вече сте задали новите размери, сега следва да определите къде да бъдат показвани по подразбиране (примерно като featured image). Отворете файла от вашата тема (тук преценката е ваша в зависимост от темата, която използвате), където желаете да покажете тези размери и добавете следния код в post loop-а:
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>Important!
Тази стъпка може да бъде използвана директно като първа и тя ще ви помогне да постигнете всичко описано по-горе, но без да ви се налага да редактирате каквито и да е файлове. Това е идеалният вариант за всички начинаещи потребители на WordPress и аз го препоръчвам! Да не говорим, че така ще имате настройка за всяка една тема, която имате инсталирана в момента или ще инсталирате в бъдеще.
От друга страна тази стъпка е подходяща и за напредналите потребители, като ги улеснява да извършат докрай техните ръчно въведени промени, описани в стъпка 1.
За целта ще ви помоля да деактивирате плъгина Regenerate Thumbnails и да инсталирате плъгина Simple Image Sizes.
Активирайте го и отидете в менюто Settings -> Media. В него ще забележите, че вече ще можете да добавяте нови custom размери; да избирате къде да бъдат показвани, както и какъв crop да им бъде приложен. Освен това този плъгин също спомага за бързото регенериране на миниатюри (има функционалност подобна на Regenerate Thumbnails). Дори ще можете да промените и наименованията и настройките на размерите по подразбиране.
Направете нужните настройки, поставете отметка „Show in post insertion“ за всеки размер, който желаете да използвате и изтрийте кеша на плъгина за кеширане, който използвате. Насладете се на постигнатия ефект!
Стъпка 3
Тъй като плъгинът в Стъпка 2 е много стара версия, то към днешна дата препоръчвам да добавите следния код във functions.php файла (за предпочитане този, който сте създали за дъщерната тема). С това дефакто можете да избегнете и поставянето на последния код от Стъпка 1 (ако разбира се нямате нужда от него). Ще се нуждаете при всяко едно положение от плъгина Regenerate Thumbnails (описан по-горе).
И така – имате новите размери, които сте задали в Стъпка 1, а сега под тях във functions.php поставете следния код:
add_filter( 'image_size_names_choose', 'optibg_tutorial_custom_sizes' );
function optibg_tutorial_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'nov_thumbnail_razmer_1' => __( 'Nov Razmer 1 - Kato ime za display' ),
'nov_thumbnail_razmer_2' => __( 'Nov Razmer 2 - Kato ime za display' ),
'nov_thumbnail_razmer_3' => __( 'Nov Razmer 3 - Kato ime za display' ),
) );
}
Кратко разяснение – от целия PHP код по-горе е нужно да знаете, че извикваме код от WordPress, наречен кукичка, чрез който закачаме нови размери за изображения. Това е image_size_names_choose. След това посочваме свързана функция с име по наш избор, което можете да промените при желание и нужда – това е частта с optibg_tutorial_custom_sizes. След това създаваме въпросната функция и в нея поставяме първо зададените размери като техническо наименование, а след това в скобите задаваме името на всеки размер, както ще желаем да го видим при вмъкване на картинка в панела на WordPress.
След като запазите functions.php, задължително използвайте Regenerate Thumbnails, за да генерирате новите размери. След това изчистете кеша и можете да започнете да ги използвате при вмъкване в публикации.
Това е от мен!
Успех и до нови срещи!
