Създаване на адаптивни изображения за вашия WordPress сайт Всичко за WordPress
Отзивчивият уеб дизайн е най-новата тенденция в уеб разработката днес. Можете безкрайно да гледате как уебсайт плавно променя маркирането си, докато браузърът преоразмерява - този процес е хипнотизиращ и хипнотизиращ.
Все още обаче има един проблематичен аспект на адаптивния уеб дизайн – адаптивните изображения. Ако просто използвате CSS атрибута "max-width: 100%;", мобилните сайтове пак ще зареждат пълни изображения. Тук се крие основният проблем: ако вашият обикновен сайт има изображения с ширина 920px, тогава мобилната версия на този сайт все още ще зарежда тези обемисти изображения, което ще забави зареждането на страницата.
Използване на Picturefill
Picturefill е Javascript библиотека, която първоначално зарежда най-малкото изображение и след това го актуализира въз основа на разделителната способност на екрана на използваното устройство.
Този подход работи чудесно, защото за мобилни устройства почти нищо не се променя. Най-малкото изображение се зарежда много бързо.
За таблети и настолни компютри се дефинират изходни изображения с други размери.
За съжаление, синтаксисът за това е доста подробен:
Целият този код е само за едно изображение! За щастие можем да създадем кратък код за това; така че трябва да напишем кода само веднъж.
Да речем, че заменяме миниатюрата на всяка публикация с отзивчив кратък код. Дори ако преди това сте качили изображения с определена ширина, всичко е наред. Можем да използваме Regenerate Thumbnails, за да ги преоразмерим до правилния размер. Ще разгледам този аспект.малко по-късно.
Можете да приложите библиотеката към всеки съществуващ сайт. Ще направя дъщерна тема TwentyTwelve върху нова компилация с няколко изображения, заредени на 920px за демонстрационни цели. На теория кодът ще работи с всеки сайт.
Тук можете да видите две сладки котки. За съжаление размерът на изображението е доста голям. Това значително ще забави зареждането на страницата.
Губим ресурси за изображение, което се вижда само 1/3 от действителния му размер.
Можете да разрешите проблема с помощта на Picturefill. Ние обаче искаме да създадем нещо, при което човек не трябва да въвежда размера на изображение всеки път, за да го направи отзивчив.
По този начин ще използваме кратки кодове. В идеалния случай структурата на краткия код би била следната:
Нищо сложно. Единственият недостатък на този подход е, че функцията „Вмъкване в публикация“ ще бъде почти безполезна. Можете да разрешите проблема с помощта на хакове, но няма да ги разглеждам сега.
Нашите размери на изображения и референтни точки
За моя сайт TwentyTwelve ще използвам три размера на изображението:
- 740px е десктоп версията на изображението
- 540px - опция за изображение за таблети
- 340px - мобилна версия на изображението
Ще започнем с добавяне на нови размери на изображението. Изрязаните миниатюри ще се генерират при всяко качване на ново изображение.
Отворете файла functions.php на вашата тема (или го създайте в нова тема) и добавете следните редове към него:
Сега всеки път, когато се качи ново изображение, ще бъде създадена негова версия във всеки формат, който дефинираме. Параметър 9999 е височинатаизображения, т.е. позволяваме неограничена височина.
Какво да правим със старите изображения?
Повторно генериране на миниатюри е в менюто Инструменти
Отидете на страницата на приставката и щракнете върху бутона „Регенериране на всички миниатюри“. Ще видите лента за напредъка, показваща процеса на създаване на миниатюри в новите формати. Ако има много изображения, процесът може да бъде дълъг.
Плъгинът има доста добър интерфейс!
Вече имаме изображения с правилните размери. Време е да ги използвате!
Picturefill инсталация
Както при всяка друга Javascript библиотека, инсталирана в темата, трябва да добавим скрипта Picturefill към куката wp_enqueue_scripts(). Изтеглете Picturefill и го поставете в папката с теми.
Поставете кода по-долу във файла functions.php точно под функцията add_image_size():
Нашата функция add_picturefill() включва скрипта. За да го използвате, трябва да се свържете с wp_enqueue_scripts чрез add_action().
Ако запазите файла и опресните страницата, тогава в неговия изходен код в секцията head ще видите връзката на скрипта за запълване на изображения.
Сега е моментът да създадем нещо, което ще ни помогне автоматично да генерираме отзивчиви изображения, без да се налага да пишем твърде дълъг код през цялото време.
Кратък код за адаптивни изображения
Шорткодовете идват на помощ! Нашият кратък код ще изглежда така:
Доста просто, нали? Функцията за нашия кратък код ще направи следното:
Глоба. Написах малка функция, която ще върне идентификатора на изображението, когато въведете URL адреса на оригиналното изображение. Ако се опитате да прехвърлите миниатюра, функцията няма да работи. По-долу е кодовият фрагмент, който трябвамясто във файла functions.php:
Жалко, че WP няма вградена функция за това действие. Този код изглежда ужасно - това е основно заявка към базата данни, която търси в таблицата със записи (където се съхраняват прикачените изображения) ID и връща първия резултат.
Да се върнем на шорткодовете. За да сме сигурни, че функцията ни работи, ще изпълним нашия кратък код и след това ще го поставим в публикация. Поставете следния код във вашия файл functions.php след функцията get_attachment_id_from_src():
Този код е необходим, за да създадете отделен кратък код. Функцията add_shortcode() е подобна на функцията add_hook() по много начини, което я прави по-лесна за разбиране.
Функцията extract() използва нашите настройки по подразбиране, ако не е дадено нищо. Като цяло се надяваме, че ще зададете свои собствени ценности. Празен низ може да се използва за тестване, за да се види дали кодът на изображението ще бъде изведен.
На практика
Ще използвам краткия код, който току-що създадохме.
Сега, ако погледнем предния край на тази публикация, вместо кратък код, ще видим ID! Чудесен!
Сега, когато имаме функция, която връща идентификатор на изображение от URL, можем да изградим необходимия HTML код на Picturefill от него.
Нека пренапишем функцията responsive_image():
Краткият код вече ще изведе URL адресите, които сме дефинирали при писането му.
Picturefill код
Накрая сме готови да изведем някакъв HTML, който ще завърши адаптивното изображение. Тъй като ще използваме кратък код, ще трябва да върнем нещо, т.е. използвайте return вместо ехо.
Съвет: за да въведете дълги променливи, можете да използвате следната конструкция:
По този начин,можем да използваме това във функция за кратък код за извеждане на чист html код. Ето актуализираната функция - доста масивна, но всъщност просто добавя HTML:
Доста много код. Вярно, всичко, което направихме, е да формираме променливата $output.
В момента имаме работещ кратък код, който можем да използваме!
Ако разширите прозореца на браузъра, като разгледате елемента img, ще видите, че атрибутът src се променя, когато се достигнат точките на прекъсване.
Страхотно! Имаме отзивчиви изображения, които наистина ще помогнат за запазване на честотната лента на сървъра.
Ами миниатюрите?
Не се безпокой. Всичко, което трябва да направите, е да се разровите във вашите файлове с теми и да намерите the_post_thumbnail() или нещо подобно, за да покажете миниатюри. В случая с TwentyTwelve, трябва да се поровите във файла content.php (който замених с дъщерната си тема).
Отзивчивите миниатюри са готови.
Ако кодът не работи, не забравяйте да използвате Regenerate Thumbnails, за да преоразмерите изображенията до правилния размер.
Това е всичко. Ако искате да изтеглите източниците, компресирах дъщерната тема TwentyTwelve, с която работих в този урок.
Отзивчивите изображения са чудесен начин да запазите честотната лента на сървъра и да зарадвате посетителите си с бързо зареждащ се сайт. Надяваме се, че елементът на картината най-накрая ще бъде уточнен и тогава ще трябва да направим някои малки промени, за да останем в рамките на стандартите.