5 suggerimenti per la creazione di un tema WordPress pronto per Retina

Un tema WordPress è pronto per retina se tiene conto dell'elevata densità di pixel dei display retina e fornisce immagini di dimensioni adeguate per questi display. Ci sono alcune cose da considerare quando si prepara un tema Retina per WordPress: 1. Utilizzare immagini ad alta risoluzione. I display Retina hanno una densità di pixel di 2 o 3 volte quella di un display standard, quindi le tue immagini devono essere due o tre volte più grandi per apparire nitide su questi dispositivi. 2. Usa un design reattivo. Un design reattivo assicurerà che il tuo tema abbia un bell'aspetto su tutti i dispositivi, inclusi i display retina. 3. Usa un plugin come WP Retina 2x. Questo plugin genererà automaticamente versioni ad alta risoluzione delle tue immagini e le servirà ai dispositivi retina . 4. Ottimizza le tue immagini. Assicurati di ottimizzare le tue immagini per tempi di caricamento più rapidi. 5. Utilizzare un plug-in di memorizzazione nella cache. Un plug-in di memorizzazione nella cache aiuterà a velocizzare il caricamento delle tue pagine su tutti i dispositivi, inclusi i display retina. Seguendo questi suggerimenti, puoi assicurarti che il tuo tema WordPress sia pronto per la retina.

Poiché il supporto Retina sarà disponibile per i nostri temi WordPress nelle prossime settimane, volevo condividere con te come li abbiamo creati. Rinnovare il tuo tema raddoppierà le dimensioni dei dispositivi Retina (con le stesse dimensioni) rendendo le immagini di dimensioni doppie (ma con le stesse dimensioni). Per visualizzare un'immagine 100×200, il browser deve comprimerla fino a 100×400. Le immagini di sfondo CSS e Sprite non possono essere sostituite da Retina.js perché non utilizzano tag HTML. Icone e pulsanti devono essere aggiornati in modo che il tuo sito Web appaia nitido e reattivo su un display retina. La documentazione per Font Awesome è eccellente ed è una delle librerie di icone dei caratteri più robuste. La maggior parte delle icone dei caratteri viene installata semplicemente caricando i file e aggiungendo la dichiarazione @Font-face.

Puoi anche aggiungere icone di font interessanti come il logo di Facebook a questo modello, che è scalabile e personalizzabile. Il modo più semplice per creare una favicon pronta per la retina è utilizzare un semplice script Java. Crea semplicemente un documento Photoshop a 32 × 32, aggiungi la tua immagine e salva come png24 (con trasparenza) usando Photoshop.

Come faccio a rendere un'immagine pronta per la retina?

Per rendere un'immagine pronta per la retina , dovrai creare una versione dell'immagine che sia il doppio dell'originale. Questo può essere fatto in qualsiasi software di modifica delle immagini, come Photoshop. Dopo aver creato la versione più grande dell'immagine, dovrai salvarla come file separato. Quando carichi l'immagine sul tuo sito web, dovrai utilizzare il codice per indicare al browser di caricare la versione più grande dell'immagine.

FooGallery può essere abilitato nella scheda Immagini per visualizzare immagini pronte per la retina. Quando si selezionano le dimensioni Retina e si fa clic su Applica valori predefiniti a tutte le gallerie, verranno generate immagini pronte per la visualizzazione in formato Retina per tutte le gallerie esistenti. Se aggiungi una nuova galleria, genererà automaticamente immagini di dimensioni retina. Quando l'immagine FooGallery viene visualizzata su uno schermo normale o Retina, l'HTML dell'immagine viene automaticamente ottimizzato per essere visualizzato come 300*300 pixel. Se hai abilitato le dimensioni delle immagini Retina per le tue Gallerie, assicurati che tutte le immagini che visualizzerai in FooGallery siano sufficientemente grandi da poter essere visualizzate su un dispositivo Retina. Ad esempio, se desideri visualizzare chiaramente un'immagine 600600 su dispositivi retina bidimensionali, dovrai caricare le immagini della galleria con una risoluzione di 12001.200. Quando abiliti le impostazioni retina 2x e 3x, sarai in grado di creare tre versioni del tuo pollice.

Preparare il tuo sito web per Retina

Quando si visualizza un sito Web pronto per retina, l'immagine viene visualizzata a una risoluzione maggiore rispetto a un display a definizione standard su un dispositivo ad alta definizione. Questa risoluzione più elevata consente una presentazione più dettagliata dell'immagine, facilitandone la comprensione e la visualizzazione.
Se intendi utilizzare un software pronto per retina per il tuo sito Web, ti consigliamo di utilizzare la grafica vettoriale scalabile (SVG) il più possibile. Questo formato grafico è basato su XML e dispone di immagini di alta qualità. Per visualizzare immagini SVG, file XML o telefoni cellulari che visualizzano tali file sono accessibili tramite browser Internet.
Si consiglia di utilizzare un'immagine pronta per la retina prima di utilizzarla. Puoi farlo utilizzando un'immagine di 1920 × 1920 pixel, che è ciò che è noto come "2x". Poiché l'immagine rimarrà sul sito Web a 640 pixel di larghezza, aumenterai la densità del pixel utilizzando un'immagine di dimensioni doppie.
Se utilizzi un'immagine che non è pronta per la retina, ottimizzala per la visualizzazione sulla retina. Ciò può essere ottenuto utilizzando un'immagine con risoluzione 4x, nota anche come "risoluzione 4x". Nonostante la dimensione della grafica di 1024 pixel, apparirà comunque sul tuo sito perché è quattro volte più grande.

Che cos'è il tema WordPress pronto per Retina?

Un tema WordPress predisposto per retina è un tema progettato per funzionare con dispositivi dotati di display retina ad alta risoluzione . Ciò significa che il tema apparirà nitido e chiaro su dispositivi come iPhone e iPad. I temi pronti per la retina stanno diventando sempre più popolari poiché sempre più persone utilizzano i dispositivi retina.

Trova l'elenco di seguito se stai cercando temi WordPress responsive o retina-ready . Questi temi, nel complesso, sono semplici da usare, hanno un bell'aspetto su desktop, tablet e smartphone e non richiedono molto sforzo da parte tua. Puoi utilizzare qualsiasi generatore di pagine che desideri per creare qualsiasi layout che desideri con loro. Inovado, un tema WordPress pronto per retina, viene fornito con una miriade di potenti opzioni di personalizzazione. Un altro tema WordPress premium è Superhero, progettato per imprenditori e startup. Questo tema WordPress è pronto per la retina e reattivo, grazie a un sistema di griglia pulito. Wiz, un tema versatile, può essere utilizzato da aziende di tutte le dimensioni, startup e piccole organizzazioni.

Un personalizzatore di temi semplifica l'impostazione e la personalizzazione di Pin Maker - Responsive WordPress Blog Theme . Questo tema WordPress ha contenuto HTML5 / CSS3 ed è basato su Twitter Bootstrap. È pronto per la retina, compatibile con tutti i browser e completamente reattivo. Il tema Prothoma – Business WordPress può essere utilizzato da una varietà di aziende, comprese le agenzie digitali e le aziende. Pin Auto Spa è un tema WordPress con dettagli automatici. Questo tema WordPress pronto per la retina è ideale per le attività di autolavaggio, riparazioni auto e officine meccaniche, nonché per i servizi automobilistici. Legatus è la scelta ideale per blog, riviste online, giornali online e altre pubblicazioni perché fornisce un design reattivo.

Abilita le immagini Retina per un sito Web chiaro

Fai clic sulla scheda "Aspetto" dopo aver installato il plug-in nel pannello di amministrazione di WordPress. Un'opzione " Immagini Retina " si trova nella sezione "WP Retina 2x" della pagina. Per abilitare le immagini retina, vai al pulsante "Abilita".

Come aggiungo l'immagine Retina a WordPress?

L'aggiunta di un'immagine retina a WordPress è un processo in due fasi: in primo luogo, devi aggiungere un'immagine a risoluzione più elevata alla tua libreria multimediale, quindi devi aggiungere una riga di codice al file functions.php del tuo tema. Per aggiungere un'immagine a risoluzione più alta alla tua libreria multimediale, carica semplicemente una copia dell'immagine che sia il doppio della tua immagine normale. Ad esempio, se l'immagine normale è 400x300px, l'immagine retina dovrebbe essere 800x600px. Una volta che hai la tua immagine retina nella tua libreria multimediale, devi aggiungere una riga di codice al file functions.php del tuo tema. Questa riga di codice dirà a WordPress di servire l'immagine retina ai dispositivi retina: add_filter( 'wp_get_attachment_image_src', 'retina_support_src' ); funzione retina_support_src($immagine) { $immagine[0] = str_replace('.jpg', '@2x.jpg', $immagine[0]); restituisce $immagine; } Con questo codice attivo, WordPress servirà automaticamente l'immagine retina a qualsiasi dispositivo retina che visita il tuo sito.

Immagini Retina di WordPress

Supponendo che tu voglia suggerimenti su come creare immagini retina per WordPress: quando crei immagini per il tuo sito Web WordPress, assicurati di creare versioni due volte più grandi delle tue immagini standard. Ad esempio, se l'immagine standard è larga 400 px, crea un'immagine retina larga 800 px. Assegna un nome alle tue immagini in base a ciò che sono, quindi aggiungi "@2x" al nome del file dell'immagine retina. Quindi, se la tua immagine standard è denominata "logo.jpg", la tua immagine retina sarebbe denominata "[email protected]". Assicurati di comprimere le immagini retina in modo che non rallentino il tuo sito web. Questo è tutto! Seguendo questi semplici suggerimenti, puoi assicurarti che le tue immagini abbiano un bell'aspetto su tutti i dispositivi, compresi i dispositivi retina.

Se non implementi le immagini Retina, il tuo sito web sarà più lento per tutti gli utenti. L'area dei pixel è la stessa di un'immagine standard, risultando in immagini più nitide e luminose. Quando un dispositivo moderno non Apple visualizza l'immagine @2x, la considera come un'immagine più grande. Le immagini Retina vengono generate utilizzando WP Retina 2X, che è il generatore di immagini Retina più utilizzato per i siti WordPress. Il servizio fornisce anche immagini regolari per gli utenti senza schermi Retina. Come fai a sapere se un'immagine è disponibile su un display dedicato se non hai un dispositivo Apple per testarla? Gli strumenti di sviluppo di Chrome possono aiutarti a farlo.

Grafica vettoriale scalabile: il modo migliore per creare immagini Retina per il tuo sito web.

L' immagine retina di WordPress è un'immagine ad alta risoluzione che può essere vista su un monitor 4K, un laptop Windows 10 o un tablet. Puoi facilmente creare un'immagine retina del tuo sito Web utilizzandoScalable Vector Graphics (SVG) quando possibile. Quando si tratta di ottimizzare le immagini per i display retina, è possibile massimizzarle utilizzando un'immagine ampia 1920 × 130 pixel che è stata ottimizzata.