5 wskazówek dotyczących tworzenia szablonu WordPress zgodnego z siatkówką

Motyw WordPress jest gotowy na siatkówkę, jeśli bierze pod uwagę wysoką gęstość pikseli wyświetlaczy siatkówki i wyświetla obrazy, które są odpowiednio dopasowane do tych wyświetlaczy. Przygotowując siatkówkę do motywu WordPress, należy wziąć pod uwagę kilka rzeczy: 1. Używaj obrazów o wysokiej rozdzielczości. Wyświetlacze Retina mają gęstość pikseli 2 lub 3 razy większą od standardowego wyświetlacza, więc obrazy muszą być dwa lub trzy razy większe, aby wyglądały ostro na tych urządzeniach. 2. Użyj responsywnego projektu. Responsywny projekt zapewni, że Twój motyw będzie dobrze wyglądał na wszystkich urządzeniach, w tym na wyświetlaczach Retina. 3. Użyj wtyczki, takiej jak WP Retina 2x. Ta wtyczka będzie automatycznie generować wersje obrazów w wysokiej rozdzielczości i wyświetlać je na urządzeniach Retina . 4. Zoptymalizuj swoje obrazy. Pamiętaj, aby zoptymalizować obrazy, aby przyspieszyć ładowanie. 5. Użyj wtyczki buforującej. Wtyczka buforująca pomoże przyspieszyć ładowanie stron na wszystkich urządzeniach, w tym na wyświetlaczach Retina. Postępując zgodnie z tymi wskazówkami, możesz upewnić się, że Twój motyw WordPress jest gotowy na siatkówkę.

Ponieważ wsparcie Retina będzie dostępne dla naszych motywów WordPress w nadchodzących tygodniach, chciałem podzielić się z wami, w jaki sposób je stworzyliśmy. Odświeżenie motywu podwoi rozmiar urządzeń Retina (o tych samych wymiarach), renderując obrazy dwukrotnie większe (ale o tych samych wymiarach). Aby wyświetlić obraz 100×200, przeglądarka musi go skompresować do 100×400. Obrazy tła CSS i Sprite nie mogą być zastąpione przez Retina.js, ponieważ nie używają tagów HTML. Ikony i przyciski muszą zostać zaktualizowane, aby Twoja witryna wyglądała wyraźnie i responsywnie na wyświetlaczu siatkówki. Dokumentacja Font Awesome jest doskonała i jest to jedna z najbardziej niezawodnych bibliotek ikon czcionek. Większość ikon czcionek instaluje się, po prostu przesyłając pliki i dodając deklarację @Font-face.

Do tego szablonu można również dodać fajne ikony czcionek, takie jak logo Facebooka, które można skalować i dostosowywać. Najprostszym sposobem na stworzenie faviconu gotowego do siatkówki jest użycie prostego skryptu Java. Po prostu utwórz dokument Photoshop w rozmiarze 32×32, dodaj obraz i zapisz jako png24 (z przezroczystością) za pomocą Photoshopa.

Jak zrobić obraz gotowy do siatkówki?

Aby przygotować obraz do siatkówki , musisz stworzyć wersję obrazu, która jest dwa razy większa od oryginału. Można to zrobić w dowolnym oprogramowaniu do edycji obrazu, takim jak Photoshop. Po utworzeniu większej wersji obrazu musisz zapisać ją jako osobny plik. Gdy przesyłasz obraz do swojej witryny, musisz użyć kodu, aby poinformować przeglądarkę, aby wczytała większą wersję obrazu.

FooGallery można włączyć na karcie Obrazy, aby wyświetlać obrazy gotowe do siatkówki. Po wybraniu rozmiarów siatkówki i kliknięciu opcji Zastosuj ustawienia domyślne do wszystkich galerii obrazy gotowe do wyświetlenia w formacie siatkówki zostaną wygenerowane dla wszystkich istniejących galerii. Jeśli dodasz nową galerię, automatycznie wygeneruje ona obrazy o rozmiarze siatkówki. Gdy obraz FooGallery jest wyświetlany na normalnym ekranie lub ekranie Retina, kod HTML obrazu jest automatycznie optymalizowany do wyświetlania w rozdzielczości 300*300 pikseli. Jeśli włączyłeś rozmiary obrazów Retina dla swoich galerii, upewnij się, że wszystkie obrazy, które będziesz wyświetlać w FooGallery, są wystarczająco duże, aby można je było wyświetlić na urządzeniu Retina. Na przykład, jeśli chcesz wyraźnie wyświetlić obraz 600600 na dwuwymiarowych urządzeniach siatkówki, musisz przesłać obrazy galerii w rozdzielczości 12001200. Po włączeniu ustawień siatkówki 2x i 3x będziesz mógł utworzyć trzy wersje kciuka.

Przygotowanie witryny do obsługi siatkówki

Podczas przeglądania strony internetowej obsługującej siatkówkę obraz jest wyświetlany w wyższej rozdzielczości niż na ekranie o standardowej rozdzielczości na urządzeniu o wysokiej rozdzielczości. Ta wyższa rozdzielczość pozwala na bardziej szczegółową prezentację obrazu, ułatwiając jego zrozumienie i zobaczenie.
Jeśli zamierzasz używać w swojej witrynie oprogramowania obsługującego siatkówkę, zaleca się używanie w jak największym stopniu skalowalnej grafiki wektorowej (SVG). Ten format graficzny jest oparty na XML i zawiera obrazy wysokiej jakości. Aby wyświetlić obrazy SVG, pliki XML lub telefony komórkowe wyświetlające te pliki można uzyskać za pośrednictwem przeglądarek internetowych.
Zaleca się, aby przed użyciem użyć obrazu gotowego na siatkówkę. Możesz to osiągnąć, używając obrazu 1920 × 1920 pikseli, czyli tak zwanego „2x”. Ponieważ obraz pozostanie w witrynie o szerokości 640 pikseli, zwiększasz gęstość piksela, używając obrazu o dwukrotnie większym rozmiarze.
Jeśli używasz obrazu, który nie jest gotowy na siatkówkę, zoptymalizuj go do wyświetlania na siatkówce. Można to osiągnąć za pomocą obrazu o rozdzielczości 4x, znanego również jako „rozdzielczość 4x”. Grafika ma 1024 piksele i będzie nadal widoczna w Twojej witrynie, ponieważ jest czterokrotnie większa.

Co to jest motyw WordPress gotowy na Retina?

Gotowy na siatkówkę motyw WordPress to motyw, który został zaprojektowany do pracy z urządzeniami wyposażonymi w wyświetlacz Retina o wysokiej rozdzielczości . Oznacza to, że motyw będzie wyglądał ostro i wyraźnie na urządzeniach takich jak iPhone i iPad. Motywy obsługujące siatkówkę stają się coraz bardziej popularne, ponieważ coraz więcej osób korzysta z urządzeń siatkówki.

Zapoznaj się z poniższą listą, jeśli szukasz responsywnych lub gotowych na Retina motywów WordPress . Ogólnie rzecz biorąc, te motywy są proste w użyciu, dobrze wyglądają na komputerach stacjonarnych, tabletach i smartfonach i nie wymagają dużego wysiłku z Twojej strony. Możesz użyć dowolnego kreatora stron, z którego chcesz utworzyć dowolny układ. Inovado, gotowy na siatkówkę motyw WordPress, zawiera mnóstwo potężnych opcji dostosowywania. Kolejnym motywem premium WordPress jest Superhero, który jest przeznaczony dla przedsiębiorców i startupów. Ten motyw WordPress jest gotowy na siatkówkę i responsywny dzięki czystemu systemowi siatki. Wiz, uniwersalny motyw, może być używany przez firmy każdej wielkości, start-upy i małe organizacje.

Konfigurator motywów ułatwia konfigurowanie i dostosowywanie Pin Maker — responsywnego motywu bloga WordPress . Ten motyw WordPress ma zawartość HTML5 / CSS3 i jest oparty na Twitter Bootstrap. Jest gotowy na siatkówkę, kompatybilny z różnymi przeglądarkami i w pełni responsywny. Motyw Prothoma - Business WordPress może być używany przez różne firmy, w tym agencje cyfrowe i firmy. Pin Auto Spa to motyw WordPress z auto detailingiem. Ten szablon WordPress gotowy na siatkówkę jest idealny dla myjni samochodowych, warsztatów samochodowych i warsztatów mechanicznych, a także serwisów samochodowych. Legatus to idealny wybór dla blogów, magazynów online, gazet internetowych i innych publikacji, ponieważ zapewnia responsywny projekt.

Włącz obrazy siatkówki dla przejrzystej strony internetowej

Kliknij zakładkę „Wygląd” po zainstalowaniu wtyczki w panelu administracyjnym WordPress. Opcja „ Retina Images ” znajduje się w sekcji „WP Retina 2x” strony. Aby włączyć obrazy siatkówki, przejdź do przycisku „Włącz”.

Jak dodać obraz siatkówki do WordPressa?

Dodawanie obrazu siatkówki do WordPressa to proces dwuetapowy: najpierw musisz dodać obraz o wyższej rozdzielczości do biblioteki multimediów, a następnie musisz dodać wiersz kodu do pliku functions.php motywu. Aby dodać obraz o wyższej rozdzielczości do biblioteki multimediów, po prostu prześlij kopię obrazu, która jest dwa razy większa od normalnego obrazu. Na przykład, jeśli Twój normalny obraz ma wymiary 400 x 300 pikseli, obraz siatkówki powinien mieć wymiary 800 x 600 pikseli. Po umieszczeniu obrazu siatkówki w bibliotece multimediów należy dodać wiersz kodu do pliku functions.php motywu. Ten wiersz kodu powie WordPressowi, aby wyświetlał obraz siatkówki na urządzeniach siatkówki: add_filter( 'wp_get_attachment_image_src', 'retina_support_src' ); function retina_support_src( $obraz ) { $obraz[0] = str_replace( '.jpg', '@2x.jpg', $obraz[0] ); zwróć $obraz; } Po wprowadzeniu tego kodu WordPress automatycznie wyświetli obraz siatkówki na dowolnym urządzeniu siatkówki, które odwiedza Twoją witrynę.

Obrazy siatkówki WordPress

Zakładając, że potrzebujesz wskazówek, jak tworzyć obrazy siatkówki dla WordPress: Tworząc obrazy dla swojej witryny WordPress, upewnij się, że tworzysz wersje, które są dwa razy większe niż standardowe obrazy. Na przykład, jeśli standardowy obraz ma szerokość 400 pikseli, utwórz obraz siatkówki o szerokości 800 pikseli. Nazwij swoje obrazy zgodnie z tym, czym są, a następnie dołącz „@2x” do nazwy pliku obrazu siatkówki. Tak więc, jeśli standardowy obraz ma nazwę „logo.jpg”, obraz siatkówki będzie miał nazwę „[chroniony pocztą elektroniczną]”. Pamiętaj, aby skompresować obrazy siatkówki, aby nie spowalniały witryny. Otóż ​​to! Postępując zgodnie z tymi prostymi wskazówkami, możesz mieć pewność, że Twoje obrazy będą wyglądać świetnie na wszystkich urządzeniach, w tym na urządzeniach Retina.

Jeśli nie zaimplementujesz obrazów Retina, Twoja witryna będzie wolniejsza dla wszystkich użytkowników. Obszar pikseli jest taki sam, jak w przypadku standardowego obrazu, dzięki czemu obrazy są ostrzejsze i jaśniejsze. Gdy nowoczesne urządzenie firmy innej niż Apple wyświetla obraz @2x, traktuje go jako większy obraz. Obrazy Retina są generowane za pomocą WP Retina 2X, który jest najczęściej używanym generatorem obrazów Retina dla witryn WordPress. Usługa zapewnia również regularne obrazy dla użytkowników bez ekranów Retina. Skąd wiesz, czy obraz jest dostępny na dedykowanym wyświetlaczu, jeśli nie masz urządzenia Apple, aby go przetestować? Narzędzia programistyczne Chrome mogą Ci w tym pomóc.

Skalowalna grafika wektorowa – najlepszy sposób na tworzenie obrazów siatkówki na swojej stronie internetowej.

Obraz siatkówki WordPressa to obraz o wysokiej rozdzielczości, który można zobaczyć na monitorze 4K, laptopie z systemem Windows 10 lub tablecie. Możesz łatwo stworzyć obraz siatkówki swojej witryny, używając skalowalnej grafiki wektorowej (SVG), gdy tylko jest to możliwe. Jeśli chodzi o optymalizację obrazów dla wyświetlaczy Retina, możesz je zmaksymalizować, używając zoptymalizowanego obrazu o szerokości 1920 × 130 pikseli.