Ne jetojmë në një botë me definicion të lartë. Dhe pasi që shumica prej nesh kalon më shumë se tetë orë në ditë duke parë lloje të ndryshme të ekraneve, cilësia e imazheve dhe personazhet e përfshira në këto ekrane janë shumë të rëndësishme.
Megjithëse ato kanë qenë në dispozicion vetëm për disa vjet, shfaqjet Retina janë rruga e së ardhmes. Dendësia e lartë e pikselëve në ekranet Retina i bën imazhet të qarta dhe të freskëta. Dhe kush nuk i do imazhet e këndshme dhe të freskëta?
Mësoni të krijoni një faqe në internet i pajtueshëm me ekranet Retina është një aset i rëndësishëm për çdo zhvillues uebi. Fatkeqësisht, nuk ka asnjë zgjidhje ideale dhe perfekte për ta bërë faqen tuaj të internetit miqësore për përdoruesit me ekranet Retina-Ready.
Pra, ndërsa ne presim që dikush të gjejë zgjidhjen më të plotë, ne kemi parë disa nga opsionet më të mira të mundshme për përgatitjen e faqes suaj të internetit. Në atë mënyrë, ju nuk do të mashtroheni kur të vijë koha kur të gjitha pajisjet do të shfaqen Retina në një formë ose në një tjetër.
Por para se të filloni, merrni kohën për të parë Si për të instaluar një temë WordPress, Sa plugins ju nevojitet për të instaluar në WordPress.
Atëherë le të shkojmë në punë!
Krijimi i skedarëve të shumëfishtë me imazhe
Le të fillojmë me bazat. Mënyra më e lehtë për të marrë mbështetjen Retina mode për faqen tuaj te internetit është për të krijoni variacione të shumta të imazhit në rezolucione të ndryshme. Kjo do të thotë që për çdo lloj rezolucioni (d.m.th. 1x) duhet të krijoni një version me rezolucion të lartë të atij klipi (d.m.th. 2x).
Në thelb mund të krijoni versione të shumëfishta të së njëjtës skedar dhe të përdorni një shtojcë si WP Retina 2x ose një skenar si retina.js për të gjeneruar automatikisht versionet "@ 2x" të secilës madhësi të imazhit ose të gjeni imazhe "@ 2x" dhe të shfaqni madhësia që korrespondon me secilën pajisje.
Shtë e vërtetë që krijimi i shumë versioneve të të njëjtit imazh mund të jetë një proces që kërkon kohë. Fatkeqësisht, nuk ka ndonjë metodë të shpejtë që gjeneron automatikisht këto imazhe për ju. Megjithatë, ekzistojnë disa shtesa Photoshop që ju lejojnë të riparoni shpejt imazhet tuaja.
Shtojcat si " Rimarrë atë E cila është një seri veprimesh Photoshop që ju lejojnë të optimizoni lehtësisht dizajnet tuaja për shfaqjet Retina. Nëse po përdorni një version të vjetër të Photoshop (para-CC), mund të përdorni diçka si " Katër E cila në thelb bën gjithçka që bën vegla aktuale e Gjeneratorit të Photoshop-it, por për versionet më të vjetra të Photoshop-it.
Grafika Vektore e Shkallëzueshme (SVG)
Mënyra më e lehtë për të ecur përpara me mënyrën Retina është përdorimi i formatit Scalable Vector Graphics (SVG) në faqen tuaj të internetit. SVG është një format i imazhit vektorial i bazuar në XML. Siç sugjeron emri, një imazh SVG është i shkallëzuar, që do të thotë që imazhet mund të shtrihen aq larg (ose sa më pak) sa të jetë e nevojshme, ndërsa janë akoma të freskëta dhe të qarta. Mund të jetë një mënyrë e shpejtë dhe e lehtë për ju për të zbatuar Modalitetin Retina pa shumë përpjekje.
Lexo gjithashtu: Si të siguroni imazhe WebP në vend të PNG & JPG tradicionale
Megjithatë, ka dy dobësi për të përdorur SVG në WordPress. E para është që meqenëse është një format vektorial, SVG nuk është i përshtatshëm për të gjitha imazhet. Kështu që ju mund të përdorni SVG për logot dhe ikonat, por jo për skedarët si fotot (gjë që është pak dhimbje nëse dëshironi të përdorni imazhe me rezolucion të lartë për faqen tuaj në internet). Por nëse doni të përdorni ikona të thjeshta, animacione ose ilustrime, skedarët SVG mund të jenë patjetër një mundësi për një uebfaqe të përputhshme me modalitetin Retina.
Dobësia e dytë për përdorimin e SVG në WordPress është se nuk është një format zyrtarisht i përputhshëm me WordPress për shkak të shqetësimeve të sigurisë. Meqenëse një skedar SVG është në thelb një skedar XML, kjo e hap atë të gjitha dobësitë e njohura që lidhen me formatin e skedarit XML, të tilla si analiza shtrënguese, Sulmet e Subjekteve të Jashtme XML (XEE), Sulmet e Sulmit të Mohimit të Shërbimit XML (XDoS), etj.
Sidoqoftë, ekziston një mënyrë për të mundësuar mbështetjen e SVG për faqen tuaj të internetit që do t'i bëjë skedarët tuaj SVG të sigurt.
Si të aktivizoni me siguri SVG në WordPress
SVG e sigurt është një plugin që ju lejon të sigurt të mundësuar SVG mbështetjen e skedarëve në faqen tuaj te internetit. Kjo shtojcë siguron që skedarët tuaj SVG të dezinfektohen për të parandaluar çdo dobësi të mundshme të XML që ndikon në faqen tuaj të internetit.
Qëndroni larg shtojcave që lejojnë llojin MIME të lejojë ngarkimin nga SVG në bibliotekën mediatike WordPress pasi këto janë të rrezikshme dhe potencialisht të dëmshme për faqen tuaj në internet. Pra, nëse vërtet tundoheni të përdorni formatin SVG në WordPress, sigurohuni që ta bëni në mënyrë të sigurt dhe mos e shkarkoni shtojcën e parë SVG që shihni.
Drejtoni më shumë konvertime në blogun tuaj duke lexuar tonë 15 llojet e përmbajtjes që gjenerojnë më shumë vizitorë në blogun tuaj
Disa shtojca për të integruar përputhshmërinë e Retina në WordPress
Ka disa skripta dhe shtojca për pajtueshmërinë Retina që mund ta bëjnë jetën tuaj shumë më të lehtë kur përpiqeni të konfiguroni një faqe interneti të përputhshme me mënyrën Retina. Sidoqoftë, siç u përmend më herët, shumica e shtojcave dhe skenareve të disponueshëm, zëvendësojnë imazhet tuaja me imazhe me rezolucion të lartë vetëm për shfaqje me rezolucion të lartë. Ato nuk shtrihen si një SVG: ju ende keni nevojë të krijoni imazhe të shumëfishta me rezolucione të ndryshme.
1 - retinë.js
retina.js është një nga skriptet më të përdorura për të shërbyer imazhe me rezolucion të lartë. Ky është një skenar me burim të hapur që e bën të lehtë shërbimin e imazheve me rezolucion të lartë në pajisjet me shfaqje Retina.
Skenari kontrollon secilën imazh në faqe për të parë nëse ka një version me rezolucion të lartë të këtij imazhi në server. Nëse ekziston një variant me rezolucion të lartë, skripti ndërron rezolucionin standard me imazhin me rezolucion të lartë. Kjo është një nga mënyrat më të zakonshme për të shërbyer imazhe për shfaqjet Retina në faqen tuaj të internetit.
Shih gjithashtu: GIF, Emojis ose Memes: një ide e mirë për faqet e internetit të WordPress?
2 - I dendur
Ngjashëm me retina.js, i dendur është një shtojcë jQuery që ofron një mënyrë të thjeshtë për të shërbyer imazhe në formatin e raportit piksel. Skripti e quan metodën $ .fn.dense () të inicializimit, e cila synon etiketat "img" që do të shërbejnë si imazhe të përputhshme në mënyrën Retina, sipas nevojës.
Kështu që ai zëvendëson të gjitha imazhet me versionin përkatës me rezolucion të lartë ashtu si skenari retina.js.
3 - WP Retina 2x
Kjo e fundit mund të krahasohet me një gjenerator magjik të imazhit Retina.
WP Retina 2x është një shtojcë që krijon skedarë imazhi të kërkuar nga pajisjet me High-DPI dhe i shfaq ato në mënyrë të përshtatshme për vizitorët tuaj. Ndryshe nga dy skenarët e mëparshëm, ai gjeneron imazhe me rezolucion të ndryshëm nga një imazh fillestar. Pra, nëse nuk jeni shumë të kënaqur me krijimin manualisht të imazheve të ndryshme me rezolucione të ndryshme, ky opsion është për ju.
Kjo është gjithçka për këtë tutorial, shpresoj se do t'ju lejojë të konvertoni imazhet tuaja në imazhin Retina Ready.
Zbuloni gjithashtu disa shtesa premium WordPress
Mund të përdorni të tjera WordPress plugins për të dhënë një pamje moderne dhe për të optimizuar trajtimin e blogut ose faqes tuaj të internetit.
Ne ju ofrojmë këtu disa shtesa premium WordPress që do t'ju ndihmojnë ta bëni atë.
1. Një Fancy WordPress Author List
Siç sugjeron emri, shtojca Lista e dashuruar e autorit të WordPress-it tregon listën e autorëve për faqen tuaj në një widget. Ajo ka një ndërfaqe të thjeshtë të përdoruesit që lejon shfaq informacionin e cilitdo autor në shiritin anësor. E tëra çfarë ju duhet të bëni është të tërheqni widget-in e autorit në shiritin anësor dhe plugina do të bëjë punën.
Karakteristikat e tij kryesore janë ndër të tjera: mundësia për të shfaqur autorët e blogut në një mënyrë argëtuese për të tërhequr vizitorë të rinj, aftësia për të shfaqur një listë autorësh në shiritin anësor ose në faqe, aftësinë për të filloni një konkurs midis autorëve të blogut tuaj, një plan urbanistik i përgjegjshëm, mbështetje për kode të shkurtra dhe shumë më tepër.
Shkarkim | DEMO | web hosting
2. Tabela e thjeshtë e përmbajtjeve
Ce plugin WordPress miqësore për përdoruesit ju lejon të futni një tabelë të përmbajtjes në postimet, faqet dhe llojet e postimeve tuaja të personalizuara. Ka shumë veçori, më kryesoret janë:
menaxhim automatik i një tabele të përmbajtjes, mbështetje për etiketën , Mbështetja e shtojcës Rankin Math, pajtueshmëria me disa redaktorë faqesh si Gutenberg, Divi, Elementor, WPBakery Page Builder dhe të tjerët, mundësia e zgjedhjes në cilat faqe botimet tuaja dëshironi ta shfaqni, futja automatike e tabelës së përmbajtjes në faqe të caktuara, dhe shumë të tjera.
Kjo është një plugin WordPress program falas që ka gjithçka që ju nevojitet për të shfaqur tabelën tuaj të përmbajtjes, ndaj mos ngurroni ta zgjidhni atë si zgjedhjen tuaj të parë.
Shkarko | DEMO | web hosting
3. WooCommerce Advanced Bulk Edit
A e modifikoni rregullisht katalogun tuaj të produkteve? Nëse keni 100 produkte ose 10.000, kjo plugin WordPress premium është për mendimin tim modest "A duhet të ketë": (Kjo është fjala e parë që vjen në mendje).
Për vetëm disa dollarë, plugin Redaktimi pjesa më e madhe e WooCommerce të përparuar do ta bëjë jetën më të lehtë dhe do t'ju kursejë kohë monstruoze. Nuk ka asnjë hezitim është një bombë.
Shkarko | DEMO | web hosting
Burimet e rekomanduara
Mësoni rreth burimeve të tjera të rekomanduara për t'ju ndihmuar të ndërtoni dhe menaxhoni uebfaqen tuaj.
- Burimet e trafikut 5 që ju ndoshta e injoroni
- Studimi i rastit: Content marketing, si për të mësuar nga gabimet
- Pse profesionistët e pavarur kanë nevojë për një program ditor
- 7 aspekte që do të ju ndihmojë të krijojë një blog të suksesshëm
Përfundim
Këtu! Kjo është e gjitha për këtë manual, shpresoj se do t'ju lejojë të krijoni imazhe të gatshme për retinë për faqen tuaj të internetit. Mos hezitoni të ndajeni me miqtë tuaj në rrjetet tuaja të preferuara sociale.
Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë Krijimi i blogut të WordPress.
Nëse keni sugjerime ose vërejtje, lërini ato në seksionin tonë komente.
...
