5 sfaturi pentru crearea unei teme WordPress pregătite pentru Retina

O temă WordPress este pregătită pentru retina dacă ia în considerare densitatea mare de pixeli a ecranelor retină și oferă imagini cu dimensiunile adecvate pentru aceste afișaje. Există câteva lucruri de luat în considerare atunci când pregătiți o retină cu tema WordPress: 1. Folosiți imagini de înaltă rezoluție. Ecranele Retina au o densitate de pixeli de 2 sau 3 ori mai mare decât cea a unui afișaj standard, așa că imaginile dvs. trebuie să fie de două sau trei ori mai mari pentru a arăta clar pe aceste dispozitive. 2. Utilizați un design receptiv. Un design receptiv se va asigura că tema dvs. arată bine pe toate dispozitivele, inclusiv pe ecranele retină. 3. Folosiți un plugin precum WP Retina 2x. Acest plugin va genera automat versiuni de înaltă rezoluție ale imaginilor dvs. și le va difuza pe dispozitivele retină . 4. Optimizați-vă imaginile. Asigurați-vă că vă optimizați imaginile pentru timpi de încărcare mai rapidi. 5. Folosiți un plugin de cache. Un plugin de stocare în cache va ajuta la accelerarea încărcării paginilor dvs. pe toate dispozitivele, inclusiv pe ecranele retină. Urmând aceste sfaturi, vă puteți asigura că tema dvs. WordPress este pregătită pentru retina.

Deoarece suportul Retina va fi disponibil pentru temele noastre WordPress în următoarele săptămâni, am vrut să vă împărtășesc cum le-am creat. Renovarea temei va dubla dimensiunea dispozitivelor Retina (cu aceleași dimensiuni) prin redarea imaginilor de două ori mai mari (dar cu aceleași dimensiuni). Pentru a afișa o imagine de 100×200, browserul trebuie să o comprima până la 100×400. Imaginile de fundal CSS și Sprite nu pot fi înlocuite de Retina.js deoarece nu folosesc etichete HTML. Pictogramele și butoanele trebuie actualizate, astfel încât site-ul dvs. să arate clar și receptiv pe un afișaj retină. Documentația pentru Font Awesome este excelentă și este una dintre cele mai robuste biblioteci de pictograme de font. Majoritatea pictogramelor fonturilor sunt instalate prin simpla încărcare a fișierelor și adăugarea declarației @Font-face.

De asemenea, puteți adăuga pictograme de font interesante, cum ar fi sigla Facebook, la acest șablon, care este scalabil și personalizabil. Cel mai simplu mod de a crea o favicon gata pentru retina este să folosești un script Java simplu. Pur și simplu creați un document Photoshop la 32×32, adăugați imaginea dvs. și salvați ca png24 (cu transparență) folosind Photoshop.

Cum fac o imagine pregătită pentru retina?

Pentru a face o imagine gata pentru retina , va trebui să creați o versiune a imaginii care este de două ori mai mare decât cea originală. Acest lucru se poate face în orice software de editare a imaginilor, cum ar fi Photoshop. După ce ați creat versiunea mai mare a imaginii, va trebui să o salvați ca fișier separat. Când încărcați imaginea pe site-ul dvs. web, va trebui să utilizați codul pentru a spune browserului să încarce versiunea mai mare a imaginii.

FooGallery poate fi activat în fila Imagini pentru a afișa imagini pregătite pentru retină. Când selectați dimensiunile Retina și faceți clic pe Aplicați valorile implicite la toate galeriile, imaginile gata de afișare în format Retina vor fi generate pentru toate galeriile existente. Dacă adăugați o nouă galerie, aceasta va genera automat imagini de dimensiunea retinei. Când imaginea FooGallery este afișată pe un ecran normal sau Retina, HTML-ul imaginii este optimizat automat pentru a fi afișat ca 300*300 pixeli. Dacă ați activat dimensiunile imaginii Retina pentru galeriile dvs., asigurați-vă că toate imaginile pe care le veți afișa în FooGallery sunt suficient de mari pentru a fi afișate pe un dispozitiv Retina. De exemplu, dacă doriți să afișați clar o imagine 600600 pe dispozitive cu retină bidimensională, va trebui să încărcați imagini din galerie cu o rezoluție de 12001200. Când activați setările retinei 2x și 3x, veți putea crea trei versiuni ale degetului mare.

Faceți site-ul dvs. gata pentru Retina

Când vizualizați un site web pregătit pentru retină, imaginea este afișată la o rezoluție mai mare decât ar fi afișată pe un afișaj cu definiție standard pe un dispozitiv de înaltă definiție. Această rezoluție mai mare permite o prezentare mai detaliată a imaginii, făcând-o mai ușor de înțeles și văzut.
Dacă intenționați să utilizați software pregătit pentru retina pentru site-ul dvs. web, se recomandă să utilizați Scalable Vector Graphics (SVG) cât mai mult posibil. Acest format grafic este bazat pe XML și are imagini de înaltă calitate. Pentru a vizualiza imagini SVG, fișierele XML sau telefoanele mobile care afișează acele fișiere pot fi accesate prin intermediul browserelor de internet.
Se recomandă să utilizați o imagine care este pregătită pentru retină înainte de ao utiliza. Puteți realiza acest lucru utilizând o imagine de 1920 × 1920 pixeli, care este ceea ce se numește „2x”. Deoarece imaginea va rămâne pe site cu o lățime de 640 de pixeli, creșteți densitatea pixelului folosind o imagine de două ori mai mare.
Dacă utilizați o imagine care nu este pregătită pentru retină, optimizați-o pentru afișare pe retină. Acest lucru poate fi realizat prin utilizarea unei imagini cu rezoluție 4x, cunoscută și sub numele de „rezoluție 4x”. În ciuda dimensiunii lățimii de 1024 de pixeli a graficului, aceasta va apărea în continuare pe site-ul dvs., deoarece este de patru ori mai mare.

Ce este tema WordPress pregătită pentru Retina?

O temă WordPress pregătită pentru retina este o temă care a fost concepută pentru a funcționa cu dispozitive care au un afișaj retină de înaltă rezoluție . Aceasta înseamnă că tema va arăta clară și clară pe dispozitive precum iPhone și iPad. Temele pregătite pentru retina devin din ce în ce mai populare pe măsură ce tot mai mulți oameni folosesc dispozitive retina.

Vă rugăm să găsiți lista de mai jos dacă sunteți în căutarea unor teme WordPress receptive sau pregătite pentru retina. Aceste teme, în general, sunt simplu de utilizat, arată bine pe desktop, tablete și smartphone-uri și nu necesită mult efort din partea dvs. Puteți utiliza orice generator de pagini pe care doriți să creați orice aspect doriți cu ele. Inovado, o temă WordPress pregătită pentru retină, vine cu o multitudine de opțiuni puternice de personalizare. O altă temă premium WordPress este Superhero, care este concepută pentru antreprenori și startup-uri. Această temă WordPress este pregătită pentru retina și receptivă, datorită unui sistem de grilă curat. Wiz, o temă versatilă, poate fi folosită de companii de toate dimensiunile, startup-uri și organizații mici.

Un dispozitiv de personalizare a temei simplifică configurarea și personalizarea Pin Maker – Tema de blog WordPress responsive . Această temă WordPress are conținut HTML5 / CSS3 și se bazează pe Twitter Bootstrap. Este pregătit pentru retină, compatibil cu browsere încrucișate și pe deplin receptiv. Tema Prothoma – Business WordPress poate fi folosită de o varietate de companii, inclusiv agenții digitale și companii. Pin Auto Spa este o temă WordPress cu detalii automate. Această temă WordPress pregătită pentru retina este ideală pentru întreprinderile de spălătorie auto, atelierele de reparații auto și de mecanică, precum și pentru serviciile auto. Legatus este o alegere ideală pentru bloguri, reviste online, ziare online și alte publicații, deoarece oferă un design responsive.

Activați imaginile Retina pentru un site web clar

Faceți clic pe fila „Aspect” după instalarea pluginului în panoul de administrare WordPress. O opțiune „ Imagini Retina ” se află în secțiunea „WP Retina 2x” a paginii. Pentru a activa imaginile retinei, accesați butonul „Activare”.

Cum adaug o imagine Retina la WordPress?

Adăugarea unei imagini retină la WordPress este un proces în doi pași: mai întâi, trebuie să adăugați o imagine cu rezoluție mai mare în biblioteca dvs. media, apoi trebuie să adăugați o linie de cod în fișierul functions.php al temei. Pentru a adăuga o imagine cu rezoluție mai mare în biblioteca dvs. media, pur și simplu încărcați o copie a imaginii dvs. care este de două ori mai mare decât imaginea dvs. normală. De exemplu, dacă imaginea normală este de 400x300px, imaginea retinei ar trebui să fie de 800x600px. Odată ce aveți imaginea retinei în biblioteca media, trebuie să adăugați o linie de cod în fișierul functions.php al temei. Această linie de cod va spune WordPress să difuzeze imaginea retinei dispozitivelor retinei: add_filter( 'wp_get_attachment_image_src', 'retina_support_src'); function retina_support_src( $image ) { $image[0] = str_replace( '.jpg', '@2x.jpg', $image[0] ); returnează $imagine; } Cu acest cod introdus, WordPress va difuza automat imaginea retinei pe orice dispozitiv retină care vă vizitează site-ul.

Imagini WordPress Retina

Presupunând că doriți sfaturi despre cum să creați imagini retină pentru WordPress: atunci când creați imagini pentru site-ul dvs. WordPress, asigurați-vă că creați versiuni care sunt de două ori mai mari decât imaginile dvs. standard. De exemplu, dacă imaginea dvs. standard are o lățime de 400 de pixeli, creați o imagine de retină cu o lățime de 800 de pixeli. Denumiți-vă imaginile în funcție de ceea ce sunt, apoi adăugați „@2x” la numele fișierului imagine retină. Deci, dacă imaginea dvs. standard se numește „logo.jpg”, imaginea retinei va fi numită „[email protected]”. Asigurați-vă că comprimați imaginile retinei, astfel încât acestea să nu încetinească site-ul. Asta e! Urmând aceste sfaturi simple, vă puteți asigura că imaginile dvs. arată grozav pe toate dispozitivele, inclusiv pe cele cu retină.

Dacă nu implementați imagini Retina, site-ul dvs. va fi mai lent pentru toți utilizatorii. Zona pixelilor este aceeași ca într-o imagine standard, rezultând imagini mai clare și mai luminoase. Când un dispozitiv modern non-Apple afișează imaginea @2x, o tratează ca pe o imagine mai mare. Imaginile Retina sunt generate folosind WP Retina 2X, care este cel mai utilizat generator de imagini Retina pentru site-urile WordPress. Serviciul oferă, de asemenea, imagini obișnuite pentru utilizatorii fără ecrane Retina. De unde știi dacă o imagine este disponibilă pe un afișaj dedicat dacă nu ai un dispozitiv Apple pentru a o testa? Instrumentele de dezvoltare Chrome vă pot ajuta să faceți acest lucru.

Grafică vectorială scalabilă – Cel mai bun mod de a crea imagini Retina pentru site-ul dvs. web.

Imaginea retinei WordPress este o imagine de înaltă rezoluție care poate fi văzută pe un monitor 4K, un laptop cu Windows 10 sau o tabletă. Puteți crea cu ușurință o imagine retină a site-ului dvs. utilizând grafică vectorială scalabilă (SVG) ori de câte ori este posibil. Când vine vorba de optimizarea imaginilor pentru afișajele retină, le puteți maximiza utilizând o imagine cu lățime de 1920×130 pixeli care a fost optimizată.