Żyjemy w świecie wysokiej rozdzielczości. A ponieważ większość z nas spędza ponad osiem godzin dziennie na oglądaniu różnych typów ekranów, jakość zdjęć i znaków zawartych na tych ekranach jest bardzo ważne.
Chociaż są one dostępne dopiero od kilku lat, wyświetlacze Retina to przyszłość. Wysoka gęstość pikseli w wyświetlaczach Retina sprawia, że obrazy są wyraźne i wyraźne. A kto nie lubi ładnych, wyraźnych obrazów?
Nauczyć się stworzyć stronę internetową kompatybilny z ekranami Retina jest ważnym zasobem dla każdego twórcy stron internetowych. Niestety nie ma idealnego, idealnego rozwiązania, aby Twoja witryna była przyjazna dla użytkownika dzięki wyświetlaczom Retina-Ready.
Dlatego czekając, aż ktoś znajdzie najbardziej kompletne rozwiązanie, przyjrzeliśmy się niektórym z najlepszych możliwych opcji przygotowania witryny. W ten sposób nie dasz się zwieść, gdy nadejdzie czas, gdy na wszystkich urządzeniach siatkówka pojawi się w takiej czy innej formie.
Ale zanim zaczniesz, nie spiesz się Jak zainstalować WordPress, Ilu wtyczki należy zainstalować na WordPress.
Więc chodźmy do pracy!
Tworzenie wielu plików obrazów
Zacznijmy od podstaw. Najłatwiejszym sposobem uzyskania obsługi trybu Retina dla Twojej witryny jest tworzyć wiele odmian obrazu w różnych rozdzielczościach. Oznacza to, że dla każdego typu rozdzielczości (tj. 1x) należy utworzyć wersję tego klipu w wysokiej rozdzielczości (tj. 2x).
Zasadniczo możesz utworzyć wiele wersji tego samego pliku i użyć wtyczki, takiej jak WP Retina 2x lub skryptu, takiego jak retina.js, aby automatycznie wygenerować wersje „@ 2x” każdego rozmiaru obrazu lub znaleźć obrazy „@ 2x” i wyświetlić rozmiar odpowiadający każdemu urządzeniu.
Prawdą jest, że tworzenie wielu wersji tego samego obrazu może być procesem czasochłonnym. Niestety nie ma szybkiej metody, która automatycznie generuje te obrazy za Ciebie. Jednak, istnieje kilka wtyczek programu Photoshop, które umożliwiają szybką naprawę obrazów.
Wtyczki typu „ Retinize It Jest to seria działań programu Photoshop, które pozwalają łatwo zoptymalizować projekty pod kątem wyświetlaczy Retina. Jeśli używasz starszej wersji programu Photoshop (sprzed wersji CC), możesz użyć czegoś takiego jak „ Cztery Który w zasadzie robi wszystko, co robi obecne narzędzie Photoshop Generator, ale dla starszych wersji Photoshopa.
Scalable Vector Graphics (SVG)
Najłatwiejszym sposobem korzystania z trybu Retina jest użycie Scalable Vector Graphics (SVG) na swojej stronie internetowej. SVG to oparty na XML format grafiki wektorowej. Jak sama nazwa wskazuje, obraz SVG jest skalowalny, co oznacza, że obrazy można rozciągać tak daleko (lub tak mało), jak potrzeba, zachowując przy tym ostry i wyraźny obraz. Może to być szybki i łatwy sposób na wdrożenie trybu Retina bez większego wysiłku.
Czytaj także: Jak udostępniać obrazy WebP zamiast tradycyjnych plików PNG i JPG
Istnieją jednak dwie wady korzystania z formatu SVG na WordPress. Po pierwsze, ponieważ jest to format wektorowy, SVG nie nadaje się do wszystkich obrazów. Możesz więc używać SVG do logo i ikon, ale nie do plików takich jak zdjęcia (co jest nieco bolesne, jeśli lubisz używać obrazów o wysokiej rozdzielczości dla swojej witryny). Ale jeśli chcesz korzystać z prostych ikon, animacji lub ilustracji, pliki SVG z pewnością mogą być opcją dla witryny internetowej zgodnej z Retina.
Drugą wadą korzystania z SVG na WordPressie jest to, że nie jest to oficjalnie zgodny format z WordPress ze względów bezpieczeństwa. Ponieważ plik SVG jest zasadniczo plikiem XML, powoduje to otwarcie pliku wszystkie znane luki związane z formatem pliku XML, takie jak analiza przymusu, ataki XML External Entity Attack (XEE), ataki XML Denial of Service Attack (XDoS) itp.
Istnieje jednak sposób, aby włączyć obsługę SVG w Twojej witrynie, co zapewni bezpieczeństwo plików SVG.
Jak bezpiecznie włączyć SVG w WordPress
Bezpieczne SVG to wtyczka umożliwiająca bezpieczne włączenie obsługi plików SVG w Twojej witrynie. Ta wtyczka zapewnia wyleczenie plików SVG, aby zapobiec potencjalnym lukom XML w Twojej witrynie.
Trzymaj się z dala od wtyczek, które umożliwiają typowi MIME przesyłanie plików z SVG do biblioteki multimediów WordPress, ponieważ są one niebezpieczne i potencjalnie szkodliwe dla Twojej witryny. Jeśli więc naprawdę kusi Cię użycie formatu SVG w WordPress, upewnij się, że robisz to bezpiecznie i nie pobieraj pierwszej wtyczki SVG, którą widzisz.
Zwiększ liczbę konwersji na swoim blogu, czytając nasze typy zawartości 15 które generują więcej odwiedzających bloga
Niektóre wtyczki do integracji kompatybilności Retina z WordPress
Istnieje kilka skryptów i wtyczek dla kompatybilności z Retina, które mogą znacznie ułatwić Ci życie podczas próby skonfigurowania strony internetowej zgodnej z trybem Retina. Jednak, jak wspomniano wcześniej, większość dostępnych wtyczek i skryptów zastępuje obrazy obrazami o wysokiej rozdzielczości tylko w przypadku wyświetlaczy o wysokiej rozdzielczości. Nie rozciągają się jak SVG: nadal musisz tworzyć wiele obrazów o różnych rozdzielczościach.
1 - retina.js
retina.js jest jednym z najczęściej używanych skryptów do obsługi obrazów w wysokiej rozdzielczości. Jest to skrypt typu open source, który ułatwia wyświetlanie obrazów w wysokiej rozdzielczości na urządzeniach z wyświetlaczami Retina.
Skrypt sprawdza każdy obraz na stronie, aby zobaczyć, czy na serwerze znajduje się wersja tego obrazu w wysokiej rozdzielczości. Jeśli istnieje wariant o wysokiej rozdzielczości, skrypt zamienia rozdzielczość standardową na obraz o wysokiej rozdzielczości. Jest to jeden z najczęstszych sposobów wyświetlania obrazów wyświetlaczy Retina w Twojej witrynie.
Zobacz także: GIF, emotikony lub memy: dobry pomysł na strony WordPress?
2 - Gęsty
Podobne do retina.js, Gęsty to wtyczka jQuery, która oferuje łatwy sposób na wyświetlanie obrazów w formacie ze współczynnikiem pikseli. Skrypt wywołuje metodę inicjalizacji $ .fn.dense (), która jest ukierunkowana na znaczniki „img”, które w razie potrzeby będą służyć jako obrazy zgodne z trybem Retina.
Zastępuje więc wszystkie obrazy odpowiednią wersją wysokiej rozdzielczości, podobnie jak skrypt retina.js.
3 - WP Retina 2x
Ten ostatni można porównać do magicznego generatora obrazu Retina.
WP Retina 2x to wtyczka, która tworzy pliki graficzne wymagane przez urządzenia o wysokiej rozdzielczości i odpowiednio wyświetla je odwiedzającym. W przeciwieństwie do poprzednich dwóch skryptów, generuje obrazy o różnej rozdzielczości z obrazu początkowego. Jeśli więc nie jesteś zbyt zadowolony z ręcznego tworzenia różnych obrazów o różnych rozdzielczościach, ta opcja jest dla Ciebie.
To wszystko w tym samouczku, mam nadzieję, że pozwoli ci on przekonwertować twoje obrazy na obraz Retina Ready.
Odkryj także niektóre wtyczki premium WordPress
Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.
Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.
1. Fancy Lista autorów WordPress
Jak sama nazwa wskazuje, plugin Fantazyjna lista autorów WordPress wyświetla listę autorów Twojej witryny w widżecie. Ma prosty interfejs użytkownika, który pozwala wyświetlać informacje dowolnego autora na pasku bocznym. Wystarczy przeciągnąć widget autora na pasek boczny, a wtyczka wykona pracę.
Jego główne cechy to między innymi: możliwość aby wyświetlić autorów bloga w zabawny sposób, aby przyciągnąć nowych gości, możliwość wyświetlania listy autorów na pasku bocznym lub na stronie, możliwość rozpocząć zawody między autorami Twojego bloga, responsywny układ, obsługa skrótów i wiele więcej.
2. Łatwy spis treści
Ce WordPress Plugin przyjazny dla użytkownika umożliwia wstawianie spisu treści do swoich postów, stron i niestandardowych typów postów. Posiada wiele funkcji, z których najważniejsze to:
automatyczne zarządzanie spisem treści, obsługa tagu , Obsługa wtyczki Rankin Math, kompatybilność z kilkoma edytorami stron, takimi jak Gutenberg, Divi, Elementor, Program do tworzenia stron WPBakery i inne, możliwość wyboru, na których stronach publikacje mają być wyświetlane, automatyczne wstawianie spisu treści na niektórych stronach i wiele innych.
Jest WordPress Plugin darmowe oprogramowanie, które ma wszystko, czego potrzebujesz, aby wyświetlić spis treści, więc możesz wybrać go jako swój pierwszy wybór.
3. Zaawansowana edycja WooCommerce
Czy regularnie edytujesz swój katalog produktów? Niezależnie od tego, czy masz 100 produktów, czy 10.000 XNUMX, to WordPress Plugin premium to moim skromnym zdaniem „must have”: (to pierwsze słowo, które przychodzi mi na myśl).
Tylko za kilka dolarów, wtyczka WooCommerce Zaawansowana edycja zbiorcza sprawi, że życie stanie się łatwiejsze i zaoszczędzisz potworny czas. Bez wahania to bomba.
Polecane zasoby
Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.
- Źródła ruchu 5 zapewne wiecie
- Case Study: content marketing, jak uczyć się na błędach
- Dlaczego freelancerzy potrzebują codziennego harmonogramu
- 7 aspekty, które pomogą Ci stworzyć udany blog
Wnioski
Tutaj! To wszystko w tym samouczku, mam nadzieję, że pozwoli Ci on stworzyć obrazy Retina-Ready dla Twojej witryny. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na temat Tworzenie bloga WordPress.
Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires.
...
