Како побољшати слике у ВордПресс-у

Како побољшати слике у ВордПресс-у


Прошло је доста времена јер су слике биле нешто превелико за учитавање путем Интернета. Данас веб странице не могу постојати без њих. Иако се брзина интернета драматично повећавала током година, од виталног је значаја да водите рачуна о сликама на свом блогу.

Само зато што је слике једноставно отпремати на вашу веб локацију, то не значи да то требате да урадите без икаквих припрема. Неоптимизиране слике могу у ствари наштетити вашој веб локацији; од утицаја на начин на који вас посетиоци мисле на брзину веб странице и СЕО рангирање. Ако још увек нисте размишљали о томе, ту смо да вам покажемо неколико начина за побољшање слика у ВордПресс-у.

У овом водичу ћемо вам показати:

  • Како да оптимизујете слике за ВордПресс како бисте убрзали веб локацију и побољшали СЕО
  • Промените начин на који ВордПресс компримира ЈПЕГ слике
  • Најпопуларнији додаци за оптимизацију слике за ВордПресс
  • Додајте лагано учитавање за своје видео записе и слике
  • Прикажите пре и после слика на атрактиван начин
  • Како креирати интерактивне слике – цртајте, додајте описе и везе
  • Како регенерирати додатне величине слике
  • Уклоните атрибуте слике ширине и висине помоћу јКуери
  • Како да креирате прилагођене величине слике у програму за пренос медија
  • Направите аутоматски снимак било које веб локације и објавите је као слику у свом посту

Contents

Како да оптимизирате слике за ВордПресс тако да убрзате веб локацију и побољшате СЕО

Зашто бисте оптимизовали слике за ВордПресс? Ако се потрудите, можете очекивати следеће:

  • Брже мјесто
  • Боље СЕО
  • Мање сигурносне копије
  • Мања употреба пропусне ширине
  • Срећнији корисници

Такође бисте требали знати да постоје различите фазе у којима можете оптимизирати слике. О сликама можете водити рачуна и пре него што их пошаљете на блог или то можете учинити након преноса.

Брзо тестирајте слике на својој веб локацији

Пре него што почнете да радите на оптимизацији, можете брзо проверити веб локацију због брзине и перформанси. Употребом било којег алата са листе брзо ћете се упознати у каквом су облику слике на вашој веб локацији.

Ми волимо да користимо ГТметрик која ће вам чак показати и тачне слике због којих се ваша веб локација спорије учитава.

Оптимизирајте слике за ВордПресс пре отпреме

Док блогирају, већина људи не предузима све потребне кораке како би оптимизирала своје слике. Обично би људи само сликали с фотоапарата или паметног телефона, преузели је са Интернета или је креирали помоћу рачунарског софтвера.

Не размишљају о форматима, димензијама слике нити именима датотека. Ако слика изгледа добро, само претпостављају да је спремна за Интернет. Ако не прегледате своје слике, градите ка катастрофи.

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

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

Не постављајте слике на веб локацију ВордПресс пре него што проверите ширину и висину сваке слике. Ако, на пример, приказујете слике максимално 700 пк, заиста нема потребе за учитавањем шире слике. Ако то учините, имат ћете већу датотеку која ће успорити вашу веб локацију, а излаз ће бити исти. ВордПресс ће створити додатну величину, али то није изговор да слике не припремите пре отпреме.

Промјена величине слике је брза и једноставна. Постоји много бесплатних алата као што је Мицрософт Паинт који ће вам помоћи у томе. Можете чак и да пронађете бесплатне онлине алате за промену величине слике попут Еаси Ресизе.

Димензије слике ће се разликовати од теме до теме. Ако нисте сигурни коју бисте требали да употребите, детаљније погледајте своју ВордПресс тему и прегледајте слике, потражите документацију или затражите помоћ за помоћ.

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

Након промене димензија, требало би да размислите о промени квалитета слика. Зависно од софтвера, постоје различити начини за модификацију квалитета слика. На пример, увек популарни Пхотосхоп омогућава вам да сачувате слике за веб. Ова опција ће вам омогућити да снимите слике слабијег квалитета, али ће бити оптимизоване за вашу веб локацију.

Такође, ако одлучите да сачувате слику као ЈПЕГ, Пхотосхоп ће тражити да одаберете ниво квалитета. У овом случају, снижавање квалитета са 12 на само 8 драматично ће умањити величину слике, док разлика у квалитету неће бити толико велика.

Ако и даље не користите ниједан софтвер за промену квалитета својих слика, можете испробати бесплатно на мрежи Тини ПНГ оруђе. Само додајте слику и видећете шта разлика може да направи.

Одаберите прави формат

Чак и након промене величине и квалитета, требало би да размислите о промени формата. За почетак, само одабиром правог формата, можете скинути неколико килобајта са слике, ако не и више.

Формати слика

Опште правило је врло једноставно. Ако имате фотографију, направите је ЈПЕГ. Ако имате логотип, векторску слику или врло једноставну рачунарску графику, идите са ПНГ-ом. Ако имате заиста малу слику без градијената или желите да прикажете једноставну анимацију попут оне која је приказана горе, можете да користите ГИФ. Генерално, ПНГ слике ће бити прилично веће од ЈПЕГ слика, а ви можете имати користи од промене формата.

У многим случајевима, преобликовање слика неће направити значајне разлике у квалитету, док можете очекивати разлику у величини. Следећи пут пре него што пошаљете ПНГ фотографију, фотографирајте је и покушајте да је сачувате као ЈПЕГ да бисте видели разлику. За детаљнија објашњења, молимо погледајте ово разлика између ПНГ, ЈПЕГ, ГИФ и СВГ.

Водите рачуна о именима

Иако назив датотеке може звучати неважно, заправо би требало да будете свесни. Име ваше сликовне датотеке садржи драгоцене податке за СЕО. Ако желите да други могу да пронађу вашу слику на Гоогле-у и другим претраживачима, требало би да јој дате одговарајуће име.

Предлажемо да слике именујете без размака. Не заборавите да уврстите кључне речи ако желите да се страница и слика рангирају. На пример, ако преносите слику Феррарија у Калифорнији, име датотеке требало би да буде „феррари-цалифорниа.јпг.“ Ако користите СЕО додатак за ВордПресс, већ знате да провјерава ваше алт ознаке за кључне ријечи. Да, заиста је важно имати правилно име слике.

Оптимизујте слике за ВордПресс након отпреме

Након што припремите слике на рачунару, можете да наставите са преносом. Надамо се да су ваше слике одговарајуће величине и квалитета. Проверили сте да су формат и име датотеке тачни. Након отпреме, ВордПресс ће вас питати за додатне информације. Не прескачите мета информације; попуните детаље о својим сликама тако да их можете лако организовати и припремити за СЕО.

Наслов, опис, алт текст и опис

Пазећи на техничке детаље, не треба заборавити на СЕО. Увек додајте наслов и опис медијума. Ово ће вам помоћи у управљању медијима ВордПресс-а, а радиће и на бољем СЕО-у. Такође, не заборавите алт ознаку која ће се приказати посетиоцима који не могу правилно видети вашу слику. Не само да ће ово бити корисно за ваше кориснике, већ ће вам помоћи и са СЕО-ом. Ваша ће се страница рангирати боље, а корисници ће моћи лакше пронаћи ваше нове слике.

Иако вам све време неће требати наслове, обавезно додајте слике за слике којима су потребна додатна објашњења (на пример, снимке екрана).

Измените слике помоћу ВордПресс-а

Ако схватите да слика и даље треба додатно уређивати, требали бисте знати да вам ВордПресс то омогућава чак и након што отпремите датотеку. Промените слике ротације, обрезивања и скалирања већ сте је отпремили Можете чак и да уредите само сличицу или све друге величине. Ворд-ов изворни уређивач је врло једноставан, али можете га уштедети с времена на време.

Обновите све сличице

Већина претходних техника помоћи ће вам у новим датотекама слика које тек требате да пошаљете. Али шта ако имате стотине ако не и хиљаде датотека већ учитаних на вашу ВордПресс локацију? Не брини; и даље можете да оптимизирате те слике и промените њихове величине.

За брзо решење, можда ће вас занимати бесплатни Регенерате Тхумбнаилс додатак који користи више од милион корисника. Ако желите већу контролу над сликама, требало би да проверите неке од најбољих ВордПресс додатака за оптимизацију слике које ћемо вам показати у следећим редовима овог чланка.

Како регенерирати додатне величине слике

Користите ВордПресс додатке

Наравно, постоје десетине ВордПресс додатака који вам могу помоћи да оптимизирате слике на својој веб локацији. Померите се према доле да бисте видели најбоље ВордПресс додатке за оптимизацију слика.

Лази Учитајте слике кад је потребно

Квалитет слика биће понекад важнији од њихове величине. То се углавном односи на фотографе који желе да њихове фотографије буду врхунске. Не могу да ризикују да смање величину или квалитет датотека. Ипак, то не значи да треба заборавити на оптимизацију. Да бисте у овом случају оптимизирали слике за ВордПресс, размислите о леном учитавању.

Лагано учитавање је техника која учитава слике само када их корисници требају (дођите до њих). На примјер, ако у један чланак ставите двадесет висококвалитетних фотографија, оне би нагло успориле вашу веб локацију. Али ако лењо учитате слике, чланак би био стреловито и фотографије би се учитавале само по потреби – у тренутку када корисник дође до њих.

Имајте одговарајуће слике

Иако је већина ВордПресс тема реактивна, то не мора нужно значити и да су слике одговарају. Пошто не желите да се велика слика учита на малом екрану, мораћете да региструјете додатне величине слике за своју веб локацију. Ако ваша тема не користи респонзивне слике, размислите о томе да запослите стручњака за посао – није тако лако као што можда звучи.

Оптимизирајте слике за друштвене медије

Ако желите да осигурате да ваше слике изгледају добро на друштвеним мрежама, мораћете да направите додатни корак и оптимизирате метаознаке и ознаку шеме.

Ако користите СЕО додатак као што је Иоаст, не заборавите да проверите подешавања. На пример, Иоаст ће вам омогућити да поставите неколико ствари које се односе на друштвене медије. Дакле, идите на СЕО -> Социал и унесите информације на Фацебоок, Твиттер, Гоогле+ и Пинтерест.

Ако желите још, а желите да оптимизирате слике за додатне веб странице друштвених медија, погледајте ВПССО – Тачне Мета ознаке + Ознака шеме за оптимизацију друштвеног дељења и СЕО додатак.

Промените начин на који ВордПресс компримира ЈПЕГ слике

Ако на своју веб локацију ВордПресс преносите гомилу ЈПЕГ слика, можда сте приметили да губе на свом оригиналном квалитету. Ако сте се питали да ли је крива ВордПресс, сада ћете добити свој одговор – да, јесте!

Једном када пошаљете слику у ЈПЕГ формату, ВордПресс аутоматски мења компресију и одлучује да желите да слика изгуби на квалитету. Да будемо прецизнији, ВП користи 90% компресију на вашим ЈПГЕ-овима. То је сјајно ако су ваше слике тамо само за употребу као сличице за објаву или за приказивање у посту, али ако преносите своје фотографије, желите да оне буду што боље, тачно?

Срећом, требат ће вам само једна линија кода да бисте то промијенили.

Заустављање компресије ЈПЕГ слика:

Ако не желите да се ваше ЈПЕГ слике компресују, једноставно копирајте и залепите следећи код у своју функцију.пхп датотеку:

адд_филтер ('јпег_куалити', функција ($ арг) {ретурн 100;});

Не заборавите да сачувате измене и спремни сте за отпремање нових слика.

С друге стране, слике вам не би могле бити толико велике. Због тога ћете можда желети да се они још више компресују и штеде вам време приликом учитавања веб локације. Ако промените последњи број у тој линији кода, мењаћете квалитет ново учитаних слика.

Компримирајте ЈПЕГ слике још више:

Што је нижи број, то ће се више компресовати. На пример, да бисте компримовали те ЈПЕГ датотеке још више, требат ће вам овај код:

адд_филтер ('јпег_куалити', функција ($ арг) {ретурн 80;});

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

Важно: Ово ће утицати само на слике које отпремите након што сте залепили код у фунцтион.пхп. Да бисте променили величину и квалитет слика које већ имате у библиотеци, требаће вам додатак. Погледајте како регенерирати додатне величине слике.

Најпопуларнији додаци за оптимизацију слике за ВордПресс

На почетку овог чланка разговарали смо о томе како да оптимизирате слике за ВордПресс како бисте убрзали веб локацију и побољшали СЕО. Као што сте могли да видите, можете користити неколико различитих метода. Важно је да водите рачуна о сликама и пре него што их пошаљете на свој блог. Али када су слике већ постављене на веб локацији, можда ће бити немогуће поново да приуштите сваку слику одвојено и поново је поново поставите..

Не брини; нико не очекује да то учините у првом реду. Останите са нама у наредним минутама јер ћемо вам показати најпопуларније додатке за оптимизацију слике за ВордПресс.

Да бисте оптимизирали слике, морат ћете само одабрати додатак са листе. То ћете морати да конфигуришете и да изаберете ствари које ће додатак урадити за вас. Након тога моћи ћете да се опустите и делегирате посао додатку по вашем избору, док можете да почнете са организовањем медијских датотека.

Следећи додаци ће вам помоћи да компримирате слике на било којем ВордПресс сајту који имате. Они ће убрзати учитавање сајта и на крају помоћи да побољшате СЕО.

ВП Смусх

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

Са више од 700.000 активних инсталација, ВП Смусх мора да буде један од најбољих додатака за оптимизацију слике за ВордПресс. Можете брзо да оптимизујете слике користећи различите технике компресије. Сјајна ствар у компримовању слика помоћу ВП Смусх-а је да слике неће изгубити на квалитети. Не верујете нам? Тестирајте додатак.

Када смо разговарали о припреми слика за ВордПресс, поменули смо да је промена величине пресудан део процеса оптимизације. Овим додатком нећете морати бринути о томе јер вам ВП Смусх омогућава да поставите максималне димензије. Након тога све веће слике аутоматски ће се смањити пре него што их додате у библиотеку.

Овај фантастични додатак може радити са ЈПЕГ, ГИФ и ПНГ датотекама. Ради са свим вашим директоријумима, аутоматски се брине за прилоге, па чак и на више веб локација. Можете ручно да радите на свакој слици или да их скупно уредите педесет. Ако желите још боље резултате и више опција, погледајте ВП Смусх ПРО.

ЕВВВ Оптимизер слике

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

Иза смешног имена стоји један од најпопуларнијих додатака за оптимизацију слике за ВордПресс. Баш као и раније поменути, ЕВВВ Оптимизер слика може компресовати ваше слике без утицаја на њихов квалитет. Када размишљате о томе да додатак може да убрза вашу веб локацију у секунди, већ ћете бити на путу да је преузмете. Након што то учините, добићете да оптимизирате слике у великој мери, а галерије попут ГРАНД ФлаГаллери, НектЦеллент и НектГЕН чак ће добити и сопствене странице за оптимизацију у великој мери..

Све слике које користе ВП_Имаге_Едитор класу биће у ВордПрессу аутоматски оптимизовано, док можете ручно радити магију на свим осталим. Свидја нам се што сте одабрали мапе које желите да оптимизирате. За више детаља о томе и који додаци користе класу, отворите службену службу Страница ЕВВВ алат за оптимизацију слике у ВордПресс репозиторијуму.

Стисните ЈПЕГ и ПНГ слике

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

Тини Цомпресс Имагес

Ако слатка мала панда која садржи ВордПресс логотип не значи да желите да сазнате више о овом додатку, не знамо шта ћемо. А ако панда изгледа познато, то је зато што је она иста која вам помаже да компресујете слике на ТиниПНГ веб локацији. Да, чини се да је животиња свестранија него што смо првобитно мислили. Али фокусирајмо се на додатак.

Ако идете са овим додатком, Панда ће аутоматски оптимизирати ваше слике. Сваки пут када пошаљете нови, додатак ће преузети и обавити свој посао. Ипак, можете да оптимизујете појединачне слике или то радите скупно само тако што ћете отићи у библиотеку медија.

Компримовање ЈПЕГ и ПНГ слика чак подржава анимиране ПНГ-ове, савршено функционише на више места, компатибилан је ВооЦомерце и неће имати проблема са ВП Оффлоад С3.

Сјајна ствар додатка је што вам омогућава да поставите атрибуте максималне ширине и висине за све слике. Ако сте се бринули о томе шта ће то учинити метаподаци, не брините; панда ће све информације остати нетакнуте.

Не постоје ограничења величине датотека, морате поставити видгет надзорну таблу, а ради чак и са ВордПресс мобилном апликацијом. Због свега тога, Цомпресс ЈПЕГ и ПНГ слике имају више од 100 000 активних инсталација и заслужују место на листи најбољих додатака за оптимизацију слике за ВордПресс.

Имсанити

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

Имсанити

Иако би вас насловница овог додатка могла уплашити, погледајте секунду и погледајте све карактеристике Имсанити-а. Ох, чак и име додатка звучи сулудо, зар не? Након што сте у реду са називом додатка, видећете да има пуно тога за понудити.

Имсанити може аутоматски да скалира слике, омогућава вам да поставите максималне димензије, а чак садржи и опсежне величине величине. Ово је важно ако на свом блогу већ имате стотине слика за које је потребна оптимизација.

Овај бесплатни додатак је одлична опција ако се не желите много борити са подешавањима додатка. Потребно је само инсталирати и активирати Имсанити, поставити неколико опција и на то можете заборавити; управљаће на свој начин ка оптимизацији слике.

Свидела нам се опција која омогућава претварање БМП слика у ЈПГ. У случају да имате пуно БМП датотека које сте погрешно пренели пре неког времена, ово ће бити спасилачки налог.

СхортПикел Оптимизер за слике

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

СхортПикел Оптимизер за слике

Са више од 30.000 активних инсталација, СхортПикел Имаге је и даље један од најпопуларнијих додатака за оптимизацију слике за ВордПресс. Додатак је препун функција и биће обавезан за веб локације које имају пуно слика за оптимизацију.

СхортПикел Оптимизер за слике неће само оптимизирати ЈПГ, ПНГ, ГИФ и ПДФ документе за вас, већ ће вам и омогућити претворите било коју ЈПЕГ, ПНГ или ГИФ слику у ВебП. Додатак добро функционира са осталим додацима за галерију и нема везе да ли веб локација користи ХТТП или ХТТПС. Омогућиће вам да уклоните ЕКСИФ податке са слика (нешто што ће фотографи волети).

Додатак препознаје слике које је већ оптимизовао, тако да ће их прескочити по потреби. Овим фантастичним додатком можете дозволити или онемогућити аутоматску оптимизацију и учинити много, много више. Погледајте званичну страницу у складишту да бисте видели све функције.

Оптимус – ВордПресс алат за оптимизацију слике

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

Оптимус

Попут претходно споменутог додатка, Оптимус ће оптимизирати ваше слике за ВордПресс, и то ће учинити без утицаја на квалитет ваших слика. Можете дозволити да додатак аутоматски разријеши ствари или можете да искључите опцију и само по потреби оптимизирате слике.

Оптимус делује на више места, није страна страна ВордПресс веб локација за електроничку трговину, а потпуно је оптимизован за ВордПресс Мобиле Аппс и Виндовс Ливе Вритер. Убрзаће вашу веб локацију без да морате да додирнете линију кода. Додатак нуди много више, али ћете морати да се пријавите за премиум верзију. Да бисте видели више, посетите званичну страницу у ВордПресс репозиторијуму додатака.

Додајте лагано учитавање својих видео записа и слика у ВордПресс

Једном када почнете додавати пуно видео и сликовног материјала на своју веб локацију, очигледно је да ће се почети учитавати спорије. Без обзира одакле долазе, видео снимци и велике слике деловат ће као велика тежина на вашој веб локацији и натераће ваше посетиоце да чекају много дуже него што је потребно да би учитали сав садржај. Са ВордПрессом то не би требало бити велика ствар и ево како можете лако поправити ситуацију.

Ако знате свој пут око ПХП-а, постоји сјајан чланак о додавању лењог учитавања слика и бесконачног скрола коју су написале наше колеге на Елегантне теме.

Ако не, у наредних неколико редака поменућемо неке од најпопуларнијих додатака за лењо учитавање који ће бити брже учитавање ваше веб локације. И нећете морати много да урадите, него да инсталирате додатак и подесите га у неколико брзих корака.

Лази Лоад фор Видеос

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

Лази Лоад фор Видеос

Ако имате пуно Иоутубе и Вимео видеа, размислите о инсталирању овог додатка. Након што га подесите, додатак ће ставити слику на ваш видео и због тога ће се ваша веб локација учитати много брже. Једном када посетилац крене до видеа, ова слика ће се приказати притиском на дугме за репродукцију. Након клика, видео ће се почети учитавати и репродуковати. Једноставна презентација може се видети на веб локацији програмера.

ВП ИоуТубе Лите

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

ВП ИоуТубе Лите

Овај додатак ће свој посао обавити на брз и једноставан начин. Након што га инсталирате, само додајте везу до свог Иоутубе видеа или га користите кратким кодом. Можете изабрати између додавања нормалног видео записа, плејлисте или само звука из одабраног видео записа. Након тога ће ваши Иоутубе видео снимци добити слику преко њега која ће омогућити лењо учитавање. Само кликните на слику да бисте започели видео или аудио.
Погледајте демонстрацију на веб локацији програмера.

а3 Лази Лоад

ЦЕНА: Бесплатно
ДЕМО 1
ДЕМО 2

а3 Лази Лоад

Овај је намењен вашој мобилној веб локацији. Ако имате пуно слика и / или видео записа које желите да покажете посетиоцима на мобилним уређајима, погледајте а3 Лази Лоад. Омогућиће вам да додате лагано учитавање својим сликама и видео записима, а додатак ће вам чак омогућити да изаберете ефекте преласка који ће се појавити код корисника док прегледавају садржај који учитава.

У административном подручју можете лако да укључите и искључите садржај који желите да лењо учитате. За оне који су укључени, садржај ће се учитавати само у време када посетилац пређе на тај део садржаја.
Постоји лепо приказан демо који садржи 1000 слика – свака се учитава само кад се померите до ње. Како овај додатак лењо учитава видео записе, постоји и видео демонстрација коју можете видети кликом на горњу везу.

БЈ Лази Лоад

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

БЈ Лази Лоад

Ако вам није потребна подршка за видео снимке и желите само да се ваше слике лено учитају, погледајте овај ВП додатак. Једном када се инсталирају и поставе, замениће ваше слике, сличице, слике Граватара, па чак и ифраме с резервоаром места. Слично као претходно споменути додатак, учитава садржај само кад корисник дође до њега.

Било да се ради о сликама или видеозаписима које желите да лењо учитате, један од горе наведених додатака помоћи ће вам у секунди. Сви су бесплатни, тако да нема оправдања да не испробате барем један додатак и видите колико ће тежина ваших рамена потрајати. Наравно, постоји много других додатака са истом функцијом и слободно их можете прегледати и испробати.

Прикажите пре и после слика на атрактиван начин

Сигурни смо да сте већ видели много примера слика пре и после. Не знамо за вас, али прво што имамо на уму када видимо фразу “пре и после” је програм фитнес тренинга где људи показују своје тело пре и после тренинга.

Ако размислите о томе, већина веб локација користи једноставан приступ да би приказала разлике – сликају обе слике и постављају их једну поред друге или чак једну изнад друге. Ако желите исти резултат, не бисте читали овај чланак, јер већ знате како то учинити.

Шта ако вам кажемо да постоји визуелно запањујући начин да се то реши пре и после проблема и то вам је надохват руке? Па, ту је и након постављања, похвалићете програмере јер је крајњи резултат заиста, супер.

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

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

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

Твенти Твенти име је овог фантастичног додатка који можете бесплатно преузети у ВордПресс репозиторијуму додатака.

Додатак ће вам омогућити да поставите једну слику изнад друге и пустит ћете да се играте клизачем како бисте сакрили / открили слику. Погледајте демонстрацију и видећете о чему причамо.

ОК, сада када сте закачени на овај мали додатак, да видимо како да направите овај запањујући ефекат. Иако је релативно лако створити демо ефекат, ипак ћете морати знати свој основни ХТМЛ. Идемо:

  1. Креирајте нови пост или отворите постојећи
  2. Убаците две слике у пост. Ако радите у Висуал Едитор-у, требало би да видите слику једну изнад друге. Ако радите у уређивачу текста, требало би да видите код сличан овом:
  3. 
    
    
    
  4. Унесите ознаку [двадесет двадесет] пре прве слике
  5. Након другог унесите ознаку [/ двадесет двадесет]
  6. Требали бисте завршити са нечим таквим у свом уређивачу текста:

    [двадесет двадесет]
    
    
    
    [/ двадесет двадесет]
    
  7. Проверите да ли су слике исте величине како бисте постигли најбоље резултате
  8. Прегледајте или објавите свој пост и уживајте у својим визуелно запањујућим сликама пре и после

Како креирати интерактивне слике – цртајте, додајте описе и везе

Данас је тешко покренути веб страницу без мултимедије. Слике, видео снимци и музика део су практично сваког вебсајта. Просечни корисник интернета увелико зависи од визуелних подстицаја, тако да морате водити рачуна о визуелним и интерактивним деловима веб локације. Чланци са сликама примају 94% више прегледа него они без једног. Такође, већ је позната чињеница да мултимедија на веб локацијама може повећати РОИ од маркетинга садржаја.

Надамо се да нема потребе да вас убедимо да водите рачуна о сликама на својој веб локацији. Чак и ако не користите слике у чланцима (што би требало), користите истакнуте слике, зар не? Постоји прилично много додатака за галерију који вам могу помоћи у управљању сликама на вашој ВордПресс веб локацији, можете имати теме повезане са фотографијом, повезати Инстаграм са својом ВордПресс веб страницом и још много тога. Али шта ако желите да направите више интерактивног садржаја?

За почетак ће вас можда занимати додавање ефекта пре-после који ће ваши корисници волети. Не заборавите на виртуелну стварност у ВордПрессу која је све популарнија након што је Аутоматтиц увео ВР у ВордПресс.цом. Ипак, нешто недостаје. Да ли је могуће направити интерактивне слике са деловима који се могу кликнути? Да, то је могуће, а ми ћемо вам показати колико је то забавно и лако.

Скрене пажњу

ЦЕНА: Бесплатно
ДЕМО

Прво што ће вам се овај додатак свидети је да је потпуно бесплатан! Као и било који други додатак из ВордПресс спремишта, можете га преузети за неколико минута, инсталирати и активирати. Бесплатна верзија ће вам омогућити да радите са једном интерактивном сликом. Ако желите више, мораћете да се пријавите за ПРО верзију, али о томе ћемо касније.

Додатак је респонзиван и не морате бринути да ли ће интерактивне слике бити правилно приказане на било ком уређају. Не само да ће се слика скалирати у складу са величином екрана, већ ће радити и у већини модерних и старијих прегледача (десктоп и мобилни). Привуците пажњу користи елементе платна када се приказују у новим прегледачима, док ће се вратити на мапе слика ако је учитате у старијој.

Карактеристике

Пре него што пређете на пример који ће вам показати колико је моћан овај једноставан додатак, погледајте шта треба очекивати од Привлачења пажње:

  • Драв – Након што отпремите слику, добит ћете прилику да на њој цртате облике. Изаберите било који део слике који ће се моћи одабрати / кликнути
  • Боје – Прилагодите боје тако да можете прилагодити жаришта вашем дизајну веб локације
  • Означите показивачем изнад – Покажите други део слике ако корисник лебди изнад одабраног дела
  • Прикажи више информација – Прикажите више информација о изабраном делу слике
  • Идите на УРЛ – Преусмерите кориснике на било који УРЛ ако кликну на одабир

Подесите подешавања пажње

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

Користићемо пример са демо странице како бисмо вам показали шта тачно можете да урадите са Привуците пажњу. Па да видимо како изгледа интерактивна мапа Хаваја када је створена с додатком.

Прво што бисте морали да урадите је да пронађете слику острва Хаваји. Након што дођете до Привуците пажњу -> Уреди слику, требало би да отпремите слику у подручје на десној бочној траци. Једном када се слика учита, забава може почети.

Овде можете одабрати боје за истакнуте боје (боја, обруб, непрозирност, итд.), Стил „више информација“ (слика, наслов, боја текста, итд.). Ако не желите ручно одабрати сваку боју сваке слике, брзо можете одабрати шему боја са десне бочне траке.

Привуците пажњу - како креирати интерактивне слике у ВордПресс-у

Најчаробнији део догађа се у Подручја жаришта екран поставки. Овде ћете добити своју слику учитану у пуној величини. Све што сада треба да урадите је да започнете цртање и креирате нову жаришну тачку. Можете додати колико год желите бодова, што значи да можете креирати свеобухватне изборе колико желите. Морате створити што више врућих тачака, а свако може имати своја подешавања.

Дакле, у овом примјеру требали бисте одабрати једно од острва. Изаберите наслов за острво, додајте опис и додатну слику која ће се приказати када корисник пређе преко жаришта (десни део ГИФ слике приказан горе).

Поновите поступак за свако острво за које желите да буде интерактиван. Једном када будете спремни за приступне тачке, само копирајте пречицу са десне стране. Налепите пречицу у пост, страницу, виџет или где год желите да покажете своју нову интерактивну мапу, и готови сте! Ако желите да преусмерите кориснике на било коју другу страницу када су кликнули на изборе, само морате да изаберете УРЛ уместо описа. Лако као то!

ПРО верзија

Иако ће бесплатна верзија бити савршена ако вам треба само једна слика, ПРО верзија омогућиће вам да на својој веб локацији имате онолико интерактивних слика колико желите. Иако ће ово бити најважнија ствар коју треба размотрити, ПРО верзија ће вам добити чак више од више слика.

Функција могућности распореда ће вам показати више информација о одабраним деловима слике. На пример, приказат ћете информације у фасцикли или у једноставној траци са алаткама која ће се појавити након што корисник пређе преко одабраног дела слике.

Такође постоји двадесет унапред дефинисаних палета боја, тако да не морате ручно да прилагођавате сваку боју. ПРО верзија ће вас коштати 74 долара за лиценцу за једну локацију, али ако вам треба више од једне интерактивне слике, то ће бити не-паметно.

Како регенерирати додатне величине слике

Релативно је лако регистровати нове величине слике у вашој ВордПресс теми. Након што сте систему рекли колико велике слике требају бити, именовали их и одлучили како да их обрезујете, слободни сте да дистрибуирате слике где год желите. Али шта је са старим сликама?

Ако сте користили неку од техника коју смо вам показали, припремили сте травњак за нове слике. Без обзира да ли користите ново регистроване величине слика за умањене слике или допуштате ауторима да их користе у објавама, нова правила важе само за слике које су пренете након што сте извршили промену у датотеци фунцтион.пхп. Да бисте променили старије слике, предлажемо вам да користите додатак Регенерате Тхумбнаилс.

Обнови сличице:

ЦЕНА: Бесплатно
  1. Иди на Додаци-> Додај ново
  2. Потражите „Обнови сличице“
  3. Инсталирајте и активирајте додатак
  4. Иди на Алати-> Реген.Тхумбалс

Ако желите да промијените величину свих слика, једноставно кликните на дугме „Обнови све сличице“ и сачекајте да додатак обави тежак посао..

Како регенерирати додатне величине слике

Ако желите да видите слике које ће бити промењене или ако желите да промените величину само неких слика, идите у своју библиотеку медија где ћете наћи нову опцију под „Групне акције“ и једну поред сваке слике у пољу галерија.

Добра ствар додатка је да не брише ваше оригиналне слике. Створиће нове величине слика које можете да користите у својој теми, док ће вам оригиналне бити остављене да их касније употребљавате или ручно обришете ако одлучите да вам нису потребне..

То је то. Уживајте у својим новим сличицама или погледајте Једноставне величине слике додатак који може учинити исту ствар.

Уклоните атрибуте слике ширине и висине помоћу јКуери

Када додајете слике у ВордПресс пост, систем аутоматски додаје атрибуте висине и ширине слици. То је обично добра ствар, али понекад се неће свидети чињеница да свака слика добија те атрибуте.

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

Али ако сте прочитали чланак или сами испробали функцију, приметили сте да она утиче само на слике пренесене након што је функција инсталирана у ваш ВП систем. Ако већ имате базу података која је пуна постова са уметнутим сликама, горе споменута функција неће вам много помоћи са вашим старим атрибутима слике.

Пошто вероватно не можете ручно да прођете кроз сваку слику и обришете ширину и висину једну по једну, вероватно вам је потребна друга функција која ће уклонити те атрибуте за све постојеће слике уграђене у ваше постове. У том случају сте на правом месту јер ћемо вам показати једноставан начин аутоматског уклањања атрибута слике ширине и висине с неколико редака јКуери кода. Не плашите се претходне фразе – чак ни не морате знати шта је јКуери, само следите следећа три корака и бићете обављени тренутачно.

Уклоните атрибуте слике ширине и висине:

  1. Отворите хеадер.пхп датотеку из мапе тема
  2. Копирајте и залепите овај код било где између и ознаке:
  3.  
  4. Сачувај промене

И готови сте! Код ће учинити своју магију након што отворите пост који садржи слику и уклони ознаке ширине и висине са ње.

Како да креирате прилагођене величине слике у програму за пренос медија

Ако користите Медиа Уплоадер за обраду слика у ВордПресс-у, вероватно сте видели бројне могућности за слике. Између многих можете одабрати величину слике коју можете послати у свој чланак.

Постоје опције за умањене слике, средње, велике и пуне величине, али све те опције имају унапред дефинисане вредности. Дакле, ако користите прилагођену тему, чешће или не, заглавили сте са променом ширине и висине за сваку слику изнова и изнова.

Заправо, не морате то да радите. Постоји уредна мала функција звана адд_имаге_сизе () која је одличан алат за програмере. Након овог чланка, наћи ћете га и корисног.

Рецимо да ваша тема има прилагођену ширину и желите да лако уметнете слике да се она савршено уклопи. Рецимо да је ширина 666пк (нећемо улазити у питање зашто сте поставили ширину на овај број, то је ваш избор). Да бисте то учинили, морате да додате додатни радио дугме у Медиа Уплоадер. Помоћу доњег кода додаћете још једну величину која је половина оригиналне.

  1. Отворите датотеку своје функције.пхп
  2. Копирајте и залепите овај део кода:
  3. функција цустом_имаге_сизес () {
    адд_имаге_сизе ('једна величина', 333, 333, тачно);
    адд_имаге_сизе ('друга величина', 666, 666, тачно);
    }
    
    додавање ('инит', 'цустом_имаге_сизес');
    
    функција схов_имаге_с величине ($ величине) {
    $ сизе ['оне-сизе'] = __ ('Прилагођена величина 1', 'иситвп');
    $ сизе ['отхер-сизе'] = __ ('Прилагођена величина 2', 'иситвп');
    вратити $ величине;
    }
    
    адд_филтер ('имаге_сизе_намес_цхоосе', 'схов_имаге_сизе');
  4. Сачувај промене
  5. Покушајте да додате слику са свог Медиа Уплоадер-а где би требало да видите своје нове величине у оквиру „Подешавања приказа прилога“

Направите аутоматски снимак било које веб локације и објавите је као слику у свом посту

Ако желите да прикажете умањену веб локацију, требало би да одете на веб локацију, штампате је на екрану или направите снимак екрана са програмом или додатком прегледача. Тада бисте морали да модификујете слику, исечете је на праву величину и пошаљете је на свој ВордПресс како бисте могли да користите снимку екрана у посту.

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

У овом делу водича ми ћемо вам показати комплетну функцију која ствара кратки код који можете да користите за прављење снимака било које веб странице.

Креирајте аутоматски снимак екрана:

  1. Отворите фунцтион.пхп
  2. Копирајте и залепите следећи код:
  3. функција вп_вебсцреен ($ аттс, $ цонтент = НУЛЛ) {
    екстракт (схортцоде_аттс (низ) (
    "снап" => 'хттп://с.вордпресс.цом/мсхотс/в1/',
    "урл" => 'хттп://ввв.фирстситегуиде.цом',
    "алт" => 'вплооп',
    "в" => '600', // ширина
    "х" => '450' // висина
    ), $ аттс));
    
    $ имг = ''. $ алт '';
    ретурн $ имг;
    }
    адд_схортцоде ("екран", "вп_вебсцреен");
  4. Промените задате променљиве у низу
  5. Сачувај промене

Ова функција ствара кратки код који лако можете користити било где на веб локацији ВордПресс. Без обзира да ли желите да употребите снимку екрана веб странице у посту, додатак на бочној траци или у подножју, на пример, једноставно ц / п кратак код на правом месту:

[сцреен урл = ”хттп://ввв.фирстситегуиде.цом” алт = “фсг” в = ”600 ″ х =” 450 ″]

Оно што је сјајно у овој функцији је то што слику чува као динамички УРЛ, што значи да ће се, након што створите снимак са кратким кодом, убудуће аутоматски освежити и увек приказати тренутни изглед веб локације наведен у кратком коду..

Имајте на уму да параметре кратког кода можете променити директно из њега. Не морате да мењате код у датотеци фунцтион.пхп ако желите да направите снимак другог УРЛ-а или да снимите фотографију у другој димензији.

Пример:

Рецимо да желите да направите снимак Гоогле-а и повећате га од 200 × 400 пиксела:

[сцреен урл = ”хттп://ввв.гоогле.цом” алт = “Гоогле” в = ”200 ″ х =” 400 ″]

Све можете учинити још једноставнијим ако кратки код сачувате у дугме тако да га можете убацити у пост једним притиском на дугме.

Закључак

Не морате да инсталирате све додатке и функције које смо поменули да бисте побољшали слике на вашој ВордПресс веб локацији. Али надамо се да сте пронашли бар неколико савета који ће вам помоћи да оптимизујете слике или их побољшате на било који начин.

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