Как да подобрим изображенията в WordPress

Как да подобрим изображенията в WordPress


Измина доста време, тъй като изображенията бяха нещо твърде голямо, за да се заредят в интернет. Днес уебсайтовете не могат да съществуват без тях. Въпреки че през годините скоростите на интернет значително се увеличават, жизненоважно е да се грижите за снимки в блога си.

Само защото е лесно да качвате изображения на вашия сайт, това не означава, че трябва да го правите без никаква подготовка. Неоптимизираните изображения всъщност могат да навредят на вашия сайт по много начини; от това да повлияе на начина, по който посетителите мислят за вас, до скоростта на вашия уебсайт и SEO класациите. Ако все още не сте мислили за това, тук сме да ви покажем няколко начина за подобряване на изображенията в WordPress.

В това ръководство ще ви покажем:

  • Как да оптимизирате изображения за WordPress, за да ускорите вашия сайт и да подобрите SEO
  • Променете начина, по който WordPress компресира JPEG изображения
  • Най-популярните плъгини за оптимизиране на изображения за WordPress
  • Добавете мързеливо зареждане на вашите видеоклипове и изображения
  • Показвайте преди и след изображения по атрактивен начин
  • Как да създадете интерактивни изображения – рисувайте, добавяйте описания и връзки
  • Как да регенерирате допълнителни размери на изображението
  • Премахнете атрибутите на изображението за ширина и височина с jQuery
  • Как да създадете персонализирани размери на изображения в Media Uploader
  • Създайте автоматична екранна снимка на всеки уебсайт и го публикувайте като изображение в публикацията си

Contents

Как да оптимизирате изображения за WordPress, така че да ускорите сайта си и да подобрите SEO

Защо трябва да оптимизирате изображения за WordPress? Ако положите усилия, можете да очаквате следното:

  • По-бърз сайт
  • По-добро SEO
  • По-малки резервни копия
  • По-малко използване на честотна лента
  • По-щастливи потребители

Трябва също да знаете, че има различни етапи, на които можете да оптимизирате изображенията. Можете да се грижите за снимките, дори преди да ги качите в блог или да го направите след качването.

Бързо тествайте изображения на вашия сайт

Преди да започнете работа по оптимизацията, можете бързо да проверите вашия сайт за скорост и производителност. Използвайки някой от инструментите от списъка, бързо ще се запознаете под каква форма са изображенията на вашия сайт.

Обичаме да използваме GTmetrix което дори ще ви покаже точните изображения, които карат вашия сайт да се зарежда по-бавно.

Оптимизирайте изображенията за WordPress преди качване

Докато водят блогове, повечето хора не предприемат всички необходими стъпки, за да оптимизират своите изображения. Обикновено хората просто ще направят снимка от своята камера или смартфон, ще я изтеглят от интернет или ще я създадат с помощта на компютърен софтуер.

Те не мислят за формати, размери на изображението, нито за имената на файловете. Ако картината изглежда добре, те просто приемат, че е готова за интернет. Ако не проверите вашите изображения, вие се насочвате към бедствие.

Преоразмеряване на изображенията

Преоразмеряване на изображенията

Не качвайте изображения на вашия уебсайт WordPress, преди да проверите ширината и височината на всяка снимка. Ако например показвате изображения с максимум 700 пиксела, наистина няма нужда да качвате по-широка картина. Ако го направите, ще имате по-голям файл, който ще направи вашия сайт по-бавен, докато изходът ще бъде същият. WordPress ще създаде допълнителен размер, но това не е извинението да не подготвяте изображенията преди качването.

Оразмеряването на изображения е бързо и лесно. Има много безплатни инструменти като Microsoft Paint, които ще ви помогнат в това. Можете дори да намерите безплатни онлайн инструменти за преоразмеряване на изображения като Лесен размер.

Размерите на изображението ще варират от тема до тема. Ако не сте сигурни кой от тях трябва да използвате, разгледайте по-подробно вашата тема на WordPress и разгледайте снимки, потърсете документация или потърсете поддръжка за помощ.

Променете качеството

След промяна на размерите, трябва да помислите за промяна на качеството на изображенията. В зависимост от софтуера има различни начини за промяна на качеството на снимките. Например винаги популярният Photoshop ви позволява да запазвате изображения в мрежата. Тази опция ще ви позволи да запазвате изображения с по-ниско качество, но те ще бъдат оптимизирани за вашия сайт.

Освен това, ако решите да запазите картина като JPEG, Photoshop ще ви помоли да изберете нивото на качество. В този случай намаляването на качеството от 12 на само 8 ще намали драстично размера на изображението, докато разликата в качеството няма да е толкова голяма.

Ако все още не използвате софтуер за промяна на качеството на снимките си, можете да опитате безплатно онлайн Tiny PNG инструмент. Просто качете снимка и вижте каква разлика може да направи.

Изберете правилния формат

Дори след промените в размера и качеството, трябва да помислите за промяна на формата. За начало, само като изберете правилния формат, можете да свалите няколко килобайта от изображение, ако не и повече.

Формати на изображения

Общото правило е много просто. Ако имате снимка, направете JPEG. Ако имате лого, векторно изображение или много проста компютърно генерирана графика, отидете с PNG. Ако имате наистина малко изображение без градиенти или искате да покажете проста анимация като тази, показана по-горе, можете да използвате GIF. По принцип PNG изображенията ще бъдат доста по-големи от JPEG изображенията и можете да се възползвате от промяна на формата.

В много случаи преформатирането на изображения няма да доведе до съществени разлики в качеството, докато можете да очаквате разликата в размера. Следващия път, преди да качите PNG снимка, дайте си снимка и опитайте да я запишете като JPEG, за да видите разликата. За по-подробно обяснение, моля, разгледайте разлика между PNG, JPEG, GIF и SVG.

Внимавайте с имена на файлове

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

Предлагаме ви да именувате изображения, без да използвате интервали. Не забравяйте да включите ключови думи, ако искате страницата и изображението да се класират. Например, ако качвате снимка на Ferrari California, името на файла трябва да бъде „ferrari-california.jpg.“ Ако използвате SEO плъгин за WordPress, вече знаете, че той проверява алт маркерите ви за ключови думи. Да, наистина е толкова важно да имате правилно име на изображението.

Оптимизирайте изображенията за WordPress след качване

След като подготвите изображения на вашия компютър, можете да продължите с качването. Да се ​​надяваме, вашите изображения са само с подходящ размер и качество. Уверете се, че форматът и името на файла са правилни. След качването WordPress ще ви поиска допълнителна информация. Не пропускайте мета информацията; попълнете подробностите за вашите изображения, за да можете лесно да ги организирате и да се подготвите за SEO.

Заглавие, описание, алт текст и надпис

Докато се грижите за техническите характеристики, не трябва да забравяте за SEO. Винаги добавяйте заглавието и описанието към медиите си. Това ще ви помогне при управлението на медиите в WordPress, а също така ще работи за по-добро SEO. Освен това, не забравяйте алт маркера, който ще бъде показан за посетители, които не могат правилно да видят вашето изображение. Това не само ще бъде полезно за вашите потребители, но и ще ви помогне с SEO. Вашата страница ще се класира по-добре и потребителите ще могат да намерят по-лесно новите ви изображения.

Въпреки че няма да ви трябват надписи през цялото време, не забравяйте да добавите такива за изображения, които се нуждаят от допълнителни обяснения (например екранни снимки).

Редактирайте изображения с WordPress

Ако разберете, че снимката все още се нуждае от допълнително редактиране, трябва да знаете, че WordPress ви позволява да го направите дори и след като качите файла. Променете снимките на въртене, изрязване и мащаб вече сте качили. Можете дори да редактирате само миниатюра или всички други размери. Родният редактор на WordPress е много прост, но може да ви спести от време на време.

Регенерирайте всички миниатюри

Повечето от предишните техники ще ви помогнат с нови файлове с изображения, които тепърва ще качвате. Но какво ще стане, ако имате стотици, ако не хиляди файлове, които вече са качени на вашия WordPress сайт? Не се притеснявайте; все още можете да оптимизирате тези изображения и да промените техните размери.

За бързо коригиране може да се интересувате от безплатен плъгин Regenerate Thumbnails, който се използва от повече от един милион потребители. Ако искате повече контрол над изображенията, трябва да разгледате някои от най-добрите WordPress приставки за оптимизация на изображенията, които ще ви покажем в следващите редове на тази статия.

Как да регенерирате допълнителни размери на изображението

Използвайте приставки за WordPress

Разбира се, има десетки приставки за WordPress, които могат да ви помогнат да оптимизирате изображенията на вашия сайт. Превъртете надолу, за да видите най-добрите WordPress приставки за оптимизиране на изображения.

Lazy Заредете изображения, когато е необходимо

Понякога качеството на снимките ще бъде много по-важно от техния размер. Това важи най-вече за фотографите, които искат снимките им да бъдат първокласни. Те не могат да рискуват да намалят размера, нито качеството на файловете. И все пак това не означава, че трябва да забравите за оптимизацията. За да оптимизирате изображенията за WordPress в този случай, трябва да помислите за мързеливо зареждане.

Мързеливо натоварване е техника, която зарежда изображения само когато потребителите се нуждаят от тях (превъртете се до тях). Например, ако качите двадесет висококачествени снимки в една статия, те значително ще забавят вашия сайт. Но ако мързеливо заредите изображенията, статията ще светкавично и снимките ще се зареждат само при нужда – в момента, когато потребителят стигне до тях.

Имайте отзивчиви изображения

Въпреки че по-голямата част от темите на WordPress са отзивчиви, това не означава непременно, че и вашите изображения са отзивчиви. Тъй като не искате голямо изображение да се зареди на малък екран, ще трябва да регистрирате допълнителни размери на изображенията за вашия сайт. Ако темата ви не използва отзивчиви изображения, помислете за наемане на професионалист за работата – не е толкова лесно, колкото може да звучи.

Оптимизирайте изображенията за социалните медии

Ако искате да сте сигурни, че изображенията ви изглеждат добре в социалните медии, ще трябва да направите допълнителна стъпка и да оптимизирате мета таговете и маркирането на схемата..

Ако използвате SEO плъгин като Yoast, не забравяйте да проверите настройките. Например Yoast ще ви позволи да настроите няколко неща, свързани със социалните медии. Така че, отворете SEO -> Social и въведете информацията във Facebook, Twitter, Google+ и Pinterest.

Ако искате повече и искате да оптимизирате изображения за допълнителни уебсайтове в социалните медии, разгледайте WPSSO – Точна мета тагове + Маркиране на схемата за оптимизация на социалното споделяне и SEO плъгин.

Променете начина, по който WordPress компресира JPEG изображения

Ако качвате куп JPEG изображения на вашия уебсайт WordPress, може би сте забелязали, че губят от първоначалното си качество. Ако сте се чудили дали виновен е WordPress, сега ще получите своя отговор – да, така е!

След като качите изображение във формат JPEG, WordPress автоматично променя компресията и решава, че искате изображението да загуби качество. За да бъдем по-конкретни, WP използва 90% компресия на вашите JPGE. Това е чудесно, ако вашите изображения са само там, за да бъдат използвани като миниатюри за публикуване или да бъдат показани в публикация, но ако качвате вашите снимки, искате да бъдат възможно най-добри, нали??

За щастие, ще ви трябва само един ред код, за да промените това.

Спиране на компресиране на JPEG изображения:

Ако не искате вашите JPEG изображения да бъдат компресирани, просто копирайте и поставете следния код във файла function.php:

add_filter ('jpeg_quality', функция ($ arg) {return 100;});

Не забравяйте да запазите промените и сте готови да качите нови изображения.

От друга страна, изображенията може да не са толкова големи за вас. Така че може да искате те да бъдат още по-компресирани и да ви спестят време при зареждане на вашия сайт. Ако промените последния номер в този ред код, ще промените качеството на ново качените изображения.

Компресирайте още JPEG изображения:

Колкото по-малко е числото, толкова повече изображения ще бъдат компресирани. Например, за да компресирате тези JPEG файлове още повече, ще ви е необходим този код:

add_filter ('jpeg_quality', функция ($ arg) {return 80;});

Не забравяйте; нивото на компресия по подразбиране е 90.

важно: Това ще се отрази само на изображения, които качвате, след като поставите кода в функции.php. За да промените размера и качеството на изображенията, които вече имате в библиотеката, ще ви е необходим плъгин. Вижте как да регенерирате допълнителни размери на изображението.

Най-популярните плъгини за оптимизиране на изображения за WordPress

В началото на тази статия говорихме за това как да оптимизирате изображенията за WordPress, така че да ускорите сайта си и да подобрите SEO. Както можехте да видите, има няколко различни методи, които можете да използвате. Важно е да се грижите за изображенията дори преди да ги качите в блога си. Но когато снимките вече са на сайта, може да стане невъзможно повторното оптимизиране на всяко изображение отделно и след това да ги качите още веднъж.

Не се притеснявайте; никой не очаква от вас да го направите. Останете с нас в следващите минути, тъй като предстои да ви покажем най-популярните приставки за оптимизиране на изображения за WordPress.

За да оптимизирате изображенията, просто ще трябва да изберете приставката от списъка. Ще трябва да го конфигурирате и да изберете неща, които плъгинът ще направи за вас. След това ще можете да се отпуснете и да делегирате работата на избрания от вас плъгин, докато можете да започнете да организирате вашите медийни файлове.

Следните плъгини ще ви помогнат да компресирате изображенията на всеки сайт на WordPress, който имате. Те ще направят зареждането на сайта по-бързо и в крайна сметка ще ви помогнат да подобрите SEO.

WP Smush

ЦЕНА: Безплатно

С повече от 700 000 активни инсталации, WP Smush трябва да бъде един от най-добрите плъгини за оптимизиране на изображения за WordPress. Той може бързо да оптимизира изображенията, като използва различни техники за компресиране. Най-голямото нещо при компресирането на изображения с WP Smush е, че изображенията няма да загубят качество. Не ни вярвате? Тествайте приставката.

Когато говорихме за подготовка на снимки за WordPress, споменахме, че оразмеряването е решаваща част от процеса на оптимизация. С този плъгин няма да се притеснявате за това, тъй като WP Smush ви позволява да задавате максимални размери. След това всички по-големи изображения автоматично ще бъдат намалени, преди да ги добавите в библиотеката.

Този фантастичен плъгин може да работи с JPEG, GIF и PNG файлове. Работи с всички ваши директории, автоматично се грижи за прикачените файлове и дори работи на многосайтови. Можете да работите ръчно върху всяко изображение или да редактирате петдесет от тях в насипно състояние. Ако искате още по-добри резултати и повече опции, вижте WP Smush PRO.

EWWW оптимизатор на изображения

ЦЕНА: Безплатно

Зад смешното име има един от най-популярните плъгини за оптимизиране на изображения за WordPress. Подобно на споменатия по-горе, EWWW Image Optimizer може да компресира вашите изображения, без да влияе на качеството им. Когато мислите за това, че приставката може да ускори вашия сайт за секунди, вече ще сте на път да го изтеглите. След като направите това, ще получите оптимизиране на изображения в насипно състояние, а галерии като GRAND FlaGallery, NextCellent и NextGEN дори ще получат свои собствени страници за групово оптимизиране..

Ще бъдат всички изображения, които използват клас WP_Image_Editor в WordPress автоматично оптимизиран, докато можете ръчно да работите с магията върху всички останали. Харесва ни, че можете да изберете папки, които искате да оптимизирате. За повече подробности относно това и кои плъгини използват класа, моля, отворете официалния Страница за оптимизатор на изображения EWWW в хранилището на WordPress.

Компресиране на JPEG и PNG изображения

ЦЕНА: Безплатно

Tiny Compress Images

Ако сладката малка панда с логото на WordPress не ви кара да искате да научите повече за тази приставка, ние не знаем какво ще стане. И ако пандата изглежда позната, това е, защото е същата, която ви помага да компресирате изображения в уебсайта на TinyPNG. Да, изглежда животното е по-многостранно, отколкото първоначално сме смятали. Но нека се съсредоточим върху приставката.

Ако отидете с този плъгин, Panda автоматично ще оптимизира вашите изображения. Всеки път, когато качвате нова, плъгинът ще поеме и ще свърши своята работа. Все пак можете да оптимизирате отделни снимки или да го направите групово, само като отидете в медийната библиотека.

Компресиране на JPEG и PNG изображения дори поддържа анимирани PNG файлове, работи перфектно на мултисайт, той е съвместим с WooComerce и няма да има проблеми с WP Offload S3.

Страхотното нещо на приставката е, че ви позволява да задавате максимални атрибути на ширина и височина за всички изображения. Ако сте се тревожили за това какво ще направи метаданните, не се притеснявайте; пандата ще запази цялата информация непокътната.

Няма ограничения за размер на файла, можете да зададете джаджа на табло за управление и тя дори работи с мобилното приложение WordPress. Тъй като всичко това, компресиране на JPEG и PNG изображения има повече от 100 000 активни инсталации и заслужава място в списъка с най-добрите приставки за оптимизиране на изображения за WordPress.

Imsanity

ЦЕНА: Безплатно

Imsanity

Въпреки че изображението на корицата за този плъгин може да ви изплаши, отделете секунда и разгледайте всички характеристики на Imsanity. О, дори името на приставката звучи безумно, нали? След като сте добре с името на приставката, ще видите, че тя може да предложи много.

Imsanity може автоматично да мащабира изображения, позволява ви да зададете максимални размери и дори разполага с опция за обемно преоразмеряване. Това е важно, ако вече имате стотици снимки в блога си, които се нуждаят от оптимизация.

Тази безплатна приставка е чудесна опция, ако не искате да се борите много с настройките на приставката. Всичко, което е необходимо, е да инсталирате и активирате Imsanity, да зададете няколко опции и можете да забравите за него; тя ще управлява свой собствен път към оптимизация на изображението.

Харесахме опцията, която ви позволява да конвертирате BMP изображения в JPG. Само в случай, че имате много BMP файлове, които погрешно сте качили преди време, това ще бъде спасител.

Оптимизатор на изображения на ShortPixel

ЦЕНА: Безплатно

Оптимизатор на изображения на ShortPixel

С повече от 30 000 активни инсталации, ShortPixel Image все още е един от най-популярните плъгини за оптимизиране на изображения за WordPress. Плъгинът е пълен с функции и ще бъде задължителен за сайтове, които имат много изображения за оптимизиране.

ShortPixel Image Optimizer не само ще оптимизира JPG, PNG, GIF и PDF документи за вас, но също така ще ви позволи конвертирате всяко JPEG, PNG или GIF изображение в WebP. Приставката работи добре с други плъгини на галерията и няма никакво значение дали вашият сайт използва HTTP или HTTPS. Тя ще ви позволи да премахнете EXIF ​​данни от изображения (нещо, което фотографите ще обичат да имат).

Плъгинът разпознава изображения, които вече е оптимизиран, така че ще ги пропусне при нужда. Можете да разрешите или забраните автоматичната оптимизация и да направите много, много повече с този фантастичен плъгин. Вижте официалната страница в хранилището, за да видите всички функции.

Optimus – WordPress оптимизатор на изображения

ЦЕНА: Безплатно

Optimus

Точно като споменатия по-рано плъгин, Optimus ще оптимизира вашите изображения за WordPress, и ще направи това, без да се отрази на качеството на вашите снимки. Можете да оставите приставката да работи нещата автоматично или можете да изключите опцията и да оптимизирате изображения само когато е необходимо.

Optimus работи на многосайтови сайтове, не е странно за сайтовете за електронна търговия на WordPress и е напълно оптимизиран за WordPress Mobile Apps и Windows Live Writer. Той ще ускори вашия сайт, без да се налага да докосвате ред код. Плъгинът предлага много повече, но ще трябва да се включите в премиум версията. За да видите повече, моля, отидете на официалната страница в хранилището на приставки за WordPress.

Добавете мързеливо зареждане на вашите видеоклипове и изображения в WordPress

След като започнете да добавяте много видео и изображения на вашия уебсайт, очевидно е, че той ще започне да се зарежда по-бавно. Независимо откъде идват, видеоклиповете и големите изображения ще действат като голяма тежест на вашия сайт и ще накарат посетителите ви да чакат много по-дълго, отколкото е необходимо, за да заредят цялото съдържание. С WordPress това не би трябвало да е голяма работа и ето как можете лесно да поправите ситуацията.

Ако знаете пътя си около PHP, има страхотна статия за добавяне на мързеливо зареждане на изображения и безкрайното превъртане, написано от нашите колеги на Елегантни теми.

Ако не, в следващите няколко реда ще споменем някои от най-популярните лениви зареждащи плъгини, които ще бъдат ускорете зареждането на сайта си по-бързо. И дори няма да се наложи да направите много, освен да инсталирате приставка и да я настроите в няколко бързи стъпки.

Мързеливо натоварване за видеоклипове

ЦЕНА: безплатно

Мързеливо натоварване за видеоклипове

Ако имате много видеоклипове в Youtube и Vimeo, трябва да помислите за инсталирането на този плъгин. След като го настроите, плъгинът ще постави изображение на вашето видео и поради това вашият уебсайт ще се зареди много по-бързо. След като посетител превърта видео, това изображение ще бъде показано с бутон за възпроизвеждане над него. След щракване видеоклипът ще започне да се зарежда и възпроизвежда. Проста демонстрация може да се гледа на сайта на програмиста.

WP YouTube Lyte

ЦЕНА: Безплатно

WP YouTube Lyte

Този плъгин ще свърши работата си по бърз и лесен начин. След като го инсталирате, просто добавете връзка към видеоклипа си в Youtube или използвайте кратък код, за да го добавите. Можете да изберете между добавяне на нормално видео, плейлист или само аудио от избрано видео. След това вашите видеоклипове в Youtube ще получат изображение над него, което ще даде възможност за мързеливо зареждане. Просто кликнете върху изображението, за да стартирате вашето видео или аудио.
Вижте демонстрация на сайта на програмиста.

a3 Мързеливо натоварване

ЦЕНА: Безплатно
DEMO 1
DEMO 2

a3 Мързеливо натоварване

Този е посветен на вашия мобилен сайт. Ако имате много изображения и / или видеоклипове, които искате да покажете на посетителите си на мобилни устройства, трябва да разгледате a3 Lazy Load. Това ще ви позволи да добавите мързеливо зареждане към вашите изображения и видеоклипове, а плъгинът дори ще ви позволи да изберете ефекти на преход, които ще се показват на потребителите, докато те превъртат през съдържанието, което се зарежда.

В областта на администратора можете лесно да включите и изключите съдържанието, което искате да мързеливо зареждате. За тези, които са включени, съдържанието ще се зарежда само в момента, когато посетител превърта тази част от съдържанието.
Има добре показана демонстрация, която включва 1000 изображения – всяко се зарежда само веднъж, когато превъртите до нея. Тъй като този плъгин мързеливо зарежда видеоклипове, има и видео демонстрация, която можете да видите, като щракнете върху връзката по-горе.

BJ Lazy Load

ЦЕНА: Безплатно

BJ Lazy Load

Ако не се нуждаете от поддръжка за видеоклипове и искате само вашите изображения да се мързеливо зареждат, трябва да проверите този WP плъгин. След като бъде инсталиран и настроен, той ще замени вашите изображения, миниатюри, снимки на Gravatar и дори и рамки с заместител. Подобно на гореспоменатия плъгин, той ще зарежда съдържание само след като потребител стигне до него.

Независимо дали става въпрос за изображения или видеоклипове, които искате да мързелувате, един от гореспоменатите плъгини ще ви помогне за секунда. Всички те са безплатни, така че няма оправдание да не опитате поне един от плъгините и да видите колко тегло на раменете ви ще поеме. Разбира се, има много други плъгини със същата функция и вие сте свободни да разглеждате и изпробвате всички тях.

Показвайте преди и след изображения по атрактивен начин

Сигурни сме, че вече сте виждали много примери за преди / след изображения. Не знаем за вас, но първото нещо, което имаме предвид, когато виждаме фразата „преди и след“, е програма за фитнес тренировки, където хората показват тялото си преди и след тренировъчна програма.

Ако се замислите, повечето уебсайтове използват прост подход, за да покажат разликите – те правят двете изображения и ги поставят едно до друго или дори едно над друго. Ако искате същия резултат, няма да четете тази статия, защото вече знаете как да го направите.

Ами ако ви казахме, че има визуално зашеметяващ начин за решаване на проблема преди / след проблема и то точно в обхвата на вашата ръка? Е, има и след настройка, ще похвалите разработчиците, защото крайният резултат е наистина, наистина страхотен.

Двадесет двадесет

ЦЕНА: безплатно

Двадесет двадесет

Twenty Twenty е името на този страхотен плъгин, който можете да изтеглите безплатно в хранилището на приставки за WordPress.

Приставката ще ви позволи да поставите едно изображение над другото и ще ви позволи да играете с плъзгач, за да можете да скриете / разкриете изображението. Моля, вижте демонстрацията и ще видите за какво говорим.

Добре, сега, когато сте закачени на този малък плъгин, нека да видим как да създадете този зашеметяващ ефект. Въпреки че е сравнително лесно да пресъздадете демонстрационния ефект, все пак ще трябва да знаете пътя си около основния HTML. Да тръгваме:

  1. Създайте нова публикация или отворете съществуващата
  2. Поставете две изображения в публикацията. Ако работите в Visual Editor, трябва да видите изображението едно над другото. Ако работите в текстов редактор, трябва да видите код, подобен на този:
  3. 
    
    
    
  4. Въведете [двадесет и двадесет] маркера преди първото изображение
  5. След втория въведете [/ dvadesettwenty] таг
  6. Трябва да свършите с нещо подобно във вашия редактор на текстове:

    [Twentytwenty]
    
    
    
    [/ Twentytwenty]
    
  7. Уверете се, че снимките ви са с еднакъв размер, за да постигнете най-добри резултати
  8. Визуализирайте или публикувайте публикацията си и се наслаждавайте на визуално зашеметяващите си преди и след снимки

Как да създадете интерактивни изображения – рисувайте, добавяйте описания и връзки

Днес е трудно да се управлява уебсайт без мултимедия. Изображенията, видеоклиповете и музиката са част от практически всеки уебсайт. Средният потребител в Интернет е силно зависим от визуалните стимули, така че трябва да се грижите за визуалните и интерактивните части на вашия сайт. Статии с изображения получават 94% повече гледания отколкото тези без един. Освен това, вече е известен факт, че мултимедията на уебсайтове може да повиши ROI от маркетинг на съдържанието.

Надяваме се, че няма нужда да ви убеждаваме да се грижите за изображенията на вашия сайт. Дори и да не използвате изображения в статии (които би трябвало), използвате черти изображения, нали? Има доста много приставки за галерия, които могат да ви помогнат да управлявате изображения на вашия WordPress сайт, можете да имате теми, свързани с фотографията, да свържете Instagram с вашия сайт на WordPress и да направите много повече. Но какво ще стане, ако искате да създадете по-интерактивно съдържание?

Като за начало може да ви е интересно да добавите ефект след изображение, който вашите потребители ще харесат. Не забравяйте за виртуалната реалност в WordPress, която става все по-популярна, след като Automattic въведе VR в WordPress.com. Все пак нещо липсва. Възможно ли е да се правят интерактивни изображения с части с възможност за кликване? Да, това е възможно, а ние сме на път да ви покажем колко е забавно и лесно.

Привлече вниманието

ЦЕНА: Безплатно
ДЕМОНСТРАЦИЯ

Първото нещо за този плъгин, което ще ви хареса е, че той е напълно безплатен! Подобно на всеки друг плъгин от хранилището на WordPress, можете да го изтеглите, инсталирате и активирате за няколко минути. Безплатната версия ще ви позволи да работите с едно интерактивно изображение. Ако искате повече, ще трябва да се включите в PRO версията, но ще поговорим за това по-късно.

Плъгинът е отзивчив и не е нужно да се притеснявате, че интерактивните изображения се показват правилно на всяко устройство. Не само, че изображението ще се мащабира според размера на екрана, но ще работи в повечето съвременни и по-стари браузъри (настолни и мобилни). Привличане на вниманието използва елементи на платно, когато се показва в нови браузъри, докато той ще се върне към карти с изображения, ако го заредите в по-стар.

Характеристика

Преди да стигнете до пример, който ще ви покаже колко мощен е този прост плъгин, нека да видим какво да очаквате от Draw внимание:

  • Рисувам – След като качите изображение, ще получите шанс да рисувате фигури върху него. Изберете някоя част от вашето изображение, която ще стане избираема / кликваща
  • Цветове – Персонализирайте цветовете, така че да можете да направите горещи точки подходящи за вашия сайт
  • Маркирайте върху задържане – Покажете друга част от изображението, ако потребителят задържи курсора върху избраната част
  • Покажи повече информация – Показване на повече информация за избраната част от изображението
  • Отидете на URL – Пренасочване на потребителите към всеки URL адрес, ако кликнат върху селекцията

Начертайте настройките за внимание

Пример – Интерактивна карта на Хаваите

Ще използваме примера от демонстрационния сайт, за да ви покажем какво точно можете да направите с Draw внимание. Така че, нека да видим как изглежда интерактивна карта на Хаваите, когато е създадена с приставката.

Първото нещо, което би трябвало да направите, е да намерите изображение на островите на Хаваите. След като отидете до Обърнете внимание -> Редактиране на изображение, трябва да качите снимката в областта от дясната странична лента. След като изображението се зареди, забавлението може да започне.

Тук можете да изберете цветове за акцентите (цвят, рамка, непрозрачност и т.н.), стилизирайте „полето за повече информация“ (изображение, заглавие, цвят на текста и т.н.). Ако не искате да избирате ръчно всеки цвят за изображението, можете бързо да изберете цветова схема от дясната странична лента.

Обърнете внимание - как да създавате интерактивни изображения в WordPress

Най-вълшебната част се случва в Зони на гореща точка екран за настройки. Тук ще получите вашето изображение заредено в пълен размер. Всичко, което трябва да направите сега, е да започнете да рисувате и да създадете нова гореща точка. Можете да добавите колкото искате точки, което означава, че можете да създавате изчерпателни селекции, колкото искате. Можете да създадете толкова горещи точки, и всеки може да има свои собствени настройки.

Така че в този пример трябва да изберете един от островите. Изберете заглавие на острова, добавете описание и допълнителното изображение, което ще се покаже, след като потребителят задържи горещата точка (дясната част на GIF изображението, показано по-горе).

Трябва да повторите процеса за всеки от островите, които искате да бъдат интерактивни. След като сте готови горещите си точки, просто копирайте краткия код от дясната страна. Поставете краткия код в публикация, страница, джаджа или където искате да покажете новата си интерактивна карта и сте готови! Ако искате да пренасочите потребителите към някоя друга страница, след като кликнат върху избраните, просто трябва да изберете URL адреса вместо описанието. Лесно като това!

PRO версия

Въпреки че безплатната версия ще бъде перфектна, ако се нуждаете от само едно изображение, то PRO версия ще ви позволи да имате толкова интерактивни изображения на вашия сайт, колкото искате. Въпреки че това ще бъде най-важното нещо, което трябва да се има предвид, PRO версията ще ви осигури дори повече от множество изображения.

Функцията за опции на оформлението ще ви позволи да покажете повече информация за избрани части от картината. Например, ще трябва да показвате информация в лайтбокс или в обикновена лента с инструменти, която ще се появи, след като потребителят задържи курсора върху избраната част от изображението.

Има и двадесет предварително определени цветни палети, така че не е нужно да персонализирате всеки цвят ръчно. PRO версията ще ви струва 74 долара за лиценз за един сайт, но ако имате нужда от повече от едно интерактивно изображение, това ще бъде не-мозъчен.

Как да регенерирате допълнителни размери на изображението

Сравнително лесно е да регистрирате нови размери на изображения във вашата WordPress тема. След като кажете на системата си колко големи трябва да бъдат вашите изображения, назовавате ги и решите как да ги изрязвате, вие сте свободни да разпространявате изображения навсякъде, където искате. Но какво ще кажете за старите образи?

Ако сте използвали някоя от техниките, които ви показахме, сте подготвили тревата за нови изображения. Независимо дали използвате ново регистрирани размери на изображения за миниатюри за публикации или разрешавате на авторите да ги използват в публикации, новите правила се прилагат само за тези изображения, които са качени, след като сте направили промяната във файла function.php. За да промените по-старите изображения, предлагаме да използвате приставката Regenerate Thumbnails.

Възстановяване на миниатюри:

ЦЕНА: Безплатно
  1. Отидете на Приставки-> Добавяне на нови
  2. Търсене за „Възстановяване на миниатюри“
  3. Инсталирайте и активирайте приставката
  4. Навигирайте до Tools-> Regen.Thumbnails

Ако искате да преоразмерите всичките си изображения, просто кликнете върху бутона „Regenerate All Thumbnails“ и изчакайте приставката да свърши тежката работа.

Как да регенерирате допълнителни размери на изображението

Ако искате да видите изображенията, които ще бъдат преоразмерени, или ако искате да промените размера на някои от изображенията, отидете в медийната си библиотека, където ще намерите нова опция под „Групови действия“ и едно до всяка снимка в полето галерия.

Хубавото на приставката е, че не изтрива оригиналните ви изображения. Той ще създаде само нови размери на изображенията, които можете да използвате във вашата тема, докато оригиналните ще ви оставят да ги използвате по-късно или да изтриете ръчно, ако решите, че нямате нужда от тях.

Това е. Насладете се на новите си миниатюри или разгледайте Прости размери на изображенията плъгин, който може да направи същото.

Премахнете атрибутите на изображението за ширина и височина с jQuery

Когато добавяте изображения към публикация в WordPress, системата автоматично добавя атрибутите на височина и ширина към картината. Това обикновено е хубаво нещо, но има моменти, когато няма да ви хареса фактът, че всяко изображение получава тези атрибути.

Ако искате да премахнете атрибутите точно в момента на качване, можете да го направите чрез проста функция, която ви показахме миналия път.

Но ако прочетете статията или изпробвате функцията сами, забелязахте, че тя засяга само изображения, качени след инсталирането на функцията във вашата WP система. Ако вече имате база данни, пълна с публикации с вмъкнати изображения, гореспоменатата функция няма да ви помогне много със старите ви атрибути на изображения.

Тъй като вероятно не можете да преминавате през всяко изображение ръчно и да изтривате ширина и височина едно по едно, вероятно имате нужда от друга функция, която ще премахне тези атрибути за всички съществуващи изображения, вградени във вашите публикации. В този случай вие сте на правилното място, защото ние сме на път да ви покажем един прост начин за автоматично премахване на атрибутите на изображението по ширина и височина с няколко реда код на jQuery. Не се плашете с предишната фраза – дори не е нужно да знаете какво е jQuery, просто следвайте следващите три стъпки и ще бъдете изпълнени накратко.

Премахване на атрибути на изображението по ширина и височина:

  1. Отворете header.php файла от вашата папка с теми
  2. Копирайте и поставете този код навсякъде между и етикети:
  3.  
  4. Запазите промените

И сте готови! Кодът ще направи своята магия, след като отворите публикация, която съдържа изображение и ще премахне от нея етикети за ширина и височина.

Как да създадете персонализирани размери на изображения в Media Uploader

Ако използвате Media Uploader за обработка на изображения в WordPress, вероятно сте виждали множество опции за изображения. Между много от тях можете да изберете размер на изображението, което можете да изпратите до вашата статия.

Има опции за миниатюри, средни, големи и пълен размер, от които можете да избирате, но всички тези опции имат предварително зададени стойности. Така че, ако използвате персонализирана тема, по-често, отколкото не, сте залепени с промяна на ширина и височина за всяко изображение отново и отново.

Всъщност не е нужно да го правите. Има една чиста малка функция, наречена add_image_size (), която е чудесен инструмент за разработчиците. И след тази статия, ще го намерите и полезен.

Да речем, че темата ви има персонализирана ширина и искате лесно да вградите изображения, за да се поберат идеално там. Нека да кажем, че ширината е 666px (няма да навлизаме защо сте задали ширината на това число, това е ваш избор). За целта е необходимо да добавите допълнителен радио бутон към Media Uploader. С кода по-долу ще добавите още един размер, който е половината от първоначалния.

  1. Отворете своя function.php файл
  2. Копирайте и поставете този код:
  3. функция custom_image_sizes () {
    add_image_size ('един размер', 333, 333, вярно);
    add_image_size ('друг размер', 666, 666, вярно);
    }
    
    добавяне ('init', 'custom_image_size');
    
    функция show_image_sizes ($ размери) {
    $ size ['one-size'] = __ ('Персонализиран размер 1', 'isitwp');
    $ size ['another-size'] = __ ('Персонализиран размер 2', 'isitwp');
    върнете $ размери;
    }
    
    add_filter ('image_size_names_choose', 'show_image_size');
  4. Запазите промените
  5. Опитайте да добавите изображение от вашия Media Media Uploader, където трябва да видите новите си опции за размер в „Настройки за показване на дисплея“

Създайте автоматична екранна снимка на всеки уебсайт и го публикувайте като изображение в публикацията си

Ако искате да покажете миниатюра на уебсайт, ще трябва да отидете на уебсайта, да го отпечатате на екрана или да направите екранна снимка с програма или добавка на браузъра. След това ще трябва да модифицирате изображението, да го изрежете до правилния размер и да го качите в WordPress, така че да можете да използвате екрана в публикация.

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

В тази част от ръководството, ние ще ви покажем пълната функция, която създава кратък код, който можете да използвате за правене на снимки на всяка уеб страница, която искате.

Създайте автоматична екранна снимка:

  1. Отворете функции.php
  2. Копирайте и поставете следния код:
  3. функция wp_webscreen ($ atts, $ content = NULL) {
    екстракт (shortcode_atts (масив (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // ширина
    "h" => '450' // височина
    ), $ atts));
    
    $ img = ''. $ alt. ";
    върнете $ img;
    }
    add_shortcode ("екран", "wp_webscreen");
  4. Променете променливите по подразбиране в масива
  5. Запазите промените

Тази функция създава кратък код, който можете лесно да използвате навсякъде в уебсайта си на WordPress. Независимо дали искате да използвате екранната снимка на уеб страница в публикация, джаджа на страничната лента или в долния си колонтитул, например, просто c / p краткия код на правилното място:

[screen url = ”http://www.firstsiteguide.com” alt = “fsg” w = ”600 ″ h =” 450 ″]

Това, което е чудесно за тази функция, е, че тя запазва изображението като динамичен URL адрес, което означава, че след като създадете моментна снимка с краткия код, той автоматично ще се обнови в бъдеще и винаги показва текущия вид на уебсайта, посочен в краткия код.

Обърнете внимание, че можете да промените параметрите на краткия код директно от него. Не е нужно да променяте кода във файла function.php, ако искате да направите снимката на друг URL адрес или да направите снимката в друго измерение.

Пример:

Нека да кажем, че искате да направите екранна снимка на Google и да я направите 200 × 400 пиксела:

[screen url = ”http://www.google.com” alt = “Google” w = ”200 ″ h =” 400 ″]

Можете да направите всичко още по-лесно, като запазите краткия код в бутон, така че да можете да го вмъкнете в публикация с едно щракване на бутон.

заключение

Не е нужно да инсталирате всички плъгини и функции, които споменахме, за да подобрите изображенията на вашия WordPress сайт. Но се надяваме, че сте намерили поне няколко съвета, които ще ви помогнат да оптимизирате изображенията или да ги подобрите по някакъв начин.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map