Jak poprawić obrazy w WordPress

Jak poprawić obrazy w WordPress


Minęło dużo czasu, odkąd obrazy były zbyt duże, aby można je było załadować przez Internet. Dzisiaj strony internetowe nie mogą istnieć bez nich. Mimo że prędkość Internetu gwałtownie wzrosła na przestrzeni lat, ważne jest, aby zająć się zdjęciami na swoim blogu.

Tylko dlatego, że łatwo przesyłać zdjęcia do swojej witryny, nie oznacza to, że powinieneś to zrobić bez żadnego przygotowania. Niezoptymalizowane obrazy mogą w rzeczywistości zaszkodzić Twojej witrynie na wiele sposobów; od wpływu na sposób, w jaki użytkownicy myślą o tobie, na szybkość witryny i rankingi SEO. Jeśli nadal o tym nie pomyślałeś, jesteśmy tutaj, aby pokazać kilka sposobów ulepszania obrazów w WordPress.

W tym przewodniku pokażemy Ci:

  • Jak zoptymalizować obrazy do WordPress, aby przyspieszyć witrynę i poprawić SEO
  • Zmień sposób, w jaki WordPress kompresuje obrazy JPEG
  • Najpopularniejsze wtyczki do optymalizacji obrazu dla WordPress
  • Dodaj leniwe ładowanie swoich filmów i zdjęć
  • Wyświetlaj zdjęcia przed i po w atrakcyjny sposób
  • Jak tworzyć interaktywne obrazy – rysuj, dodawaj opisy i linki
  • Jak zregenerować dodatkowe rozmiary obrazu
  • Usuń atrybuty obrazu szerokości i wysokości za pomocą jQuery
  • Jak utworzyć niestandardowe rozmiary obrazów w programie Media Uploader
  • Utwórz automatyczny zrzut ekranu dowolnej witryny i opublikuj go jako obraz w swoim poście

Contents

Jak zoptymalizować obrazy dla WordPress, aby przyspieszyć witrynę i poprawić SEO

Dlaczego warto zoptymalizować obrazy pod WordPress? Jeśli podejmiesz wysiłek, możesz spodziewać się:

  • Szybsza strona
  • Lepsze SEO
  • Mniejsze kopie zapasowe
  • Mniejsze wykorzystanie przepustowości
  • Szczęśliwi użytkownicy

Powinieneś także wiedzieć, że istnieją różne etapy optymalizacji obrazów. Możesz zająć się zdjęciami jeszcze przed przesłaniem ich na blog lub możesz to zrobić po przesłaniu.

Szybko testuj obrazy w swojej witrynie

Przed rozpoczęciem pracy nad optymalizacją możesz szybko sprawdzić witrynę pod kątem szybkości i wydajności. Korzystając z dowolnego narzędzia z listy, szybko dowiesz się, w jakim kształcie są obrazy w Twojej witrynie.

Lubimy korzystać GTmetrix które pokażą nawet dokładne obrazy, które powodują wolniejsze ładowanie witryny.

Zoptymalizuj obrazy do WordPress przed przesłaniem

Podczas blogowania większość osób nie podejmuje wszystkich niezbędnych kroków w celu optymalizacji swoich zdjęć. Zwykle ludzie po prostu robią zdjęcia ze swojego aparatu lub smartfona, pobierają je z Internetu lub tworzą za pomocą oprogramowania komputerowego.

Nie myślą o formatach, wymiarach obrazu ani nazwach plików. Jeśli zdjęcie wygląda dobrze, po prostu zakładają, że jest gotowe do Internetu. Jeśli nie sprawdzasz swoich zdjęć, zbliżasz się do katastrofy.

Zmień rozmiar zdjęć

Zmień rozmiar zdjęć

Nie przesyłaj zdjęć do swojej witryny WordPress przed sprawdzeniem szerokości i wysokości każdego zdjęcia. Na przykład jeśli wyświetlasz obrazy w maksymalnej rozdzielczości 700 pikseli, naprawdę nie ma potrzeby przesyłania szerszego obrazu. Jeśli to zrobisz, będziesz mieć większy plik, co spowoduje spowolnienie witryny, a wynik będzie taki sam. WordPress stworzy dodatkowy rozmiar, ale to nie jest wymówka, aby nie przygotowywać zdjęć przed przesłaniem.

Zmiana rozmiaru zdjęć jest szybka i łatwa. Istnieje wiele bezpłatnych narzędzi, takich jak Microsoft Paint, które Ci w tym pomogą. Możesz nawet znaleźć darmowe narzędzia online do zmiany rozmiaru obrazów takich jak Łatwa zmiana rozmiaru.

Wymiary obrazu będą się różnić w zależności od motywu. Jeśli nie masz pewności, którego z nich powinieneś użyć, zapoznaj się z motywem WordPress i sprawdź zdjęcia, wyszukaj dokumentację lub poproś o pomoc.

Zmień jakość

Po zmianie wymiarów należy rozważyć zmianę jakości zdjęć. W zależności od oprogramowania istnieją różne sposoby modyfikowania jakości zdjęć. Na przykład zawsze popularny program Photoshop umożliwia zapisywanie obrazów w Internecie. Ta opcja pozwoli ci zapisywać obrazy w niższej jakości, ale zostaną zoptymalizowane dla Twojej witryny.

Ponadto, jeśli zdecydujesz się zapisać zdjęcie jako JPEG, Photoshop poprosi o wybranie poziomu jakości. W takim przypadku obniżenie jakości z 12 do zaledwie 8 znacznie zmniejszy rozmiar obrazu, a różnica w jakości nie będzie tak duża.

Jeśli nadal nie używasz żadnego oprogramowania do zmiany jakości swoich zdjęć, możesz wypróbować bezpłatnie online Mały PNG narzędzie. Po prostu prześlij zdjęcie i zobacz, jaką to może zmienić.

Wybierz odpowiedni format

Nawet po zmianach rozmiaru i jakości należy rozważyć zmianę formatu. Na początek, po prostu wybierając odpowiedni format, możesz zdjąć kilka kilobajtów z obrazu, jeśli nie więcej.

Formaty obrazu

Ogólna zasada jest bardzo prosta. Jeśli masz zdjęcie, zrób to JPEG. Jeśli masz logo, obraz wektorowy lub bardzo prostą grafikę komputerową, skorzystaj z PNG. Jeśli masz naprawdę mały obraz bez gradientów lub chcesz pokazać prostą animację, taką jak pokazana powyżej, możesz użyć GIF-a. Zasadniczo obrazy PNG będą znacznie większe niż obrazy JPEG, a zmiana formatu może przynieść korzyści.

W wielu przypadkach ponowne formatowanie zdjęć nie spowoduje znaczących różnic w jakości, podczas gdy można spodziewać się różnicy w rozmiarze. Następnym razem, zanim prześlesz zdjęcie PNG, zrób zdjęcie i spróbuj zapisać je jako JPEG, aby zobaczyć różnicę. Aby uzyskać bardziej szczegółowe wyjaśnienia, sprawdź różnica między PNG, JPEG, GIF i SVG.

Dbaj o nazwy plików

Chociaż nazwa pliku może wydawać się nieistotna, w rzeczywistości jest to coś, o czym powinieneś bardzo wiedzieć. Nazwa pliku obrazu zawiera cenne informacje dla SEO. Jeśli chcesz, aby inni mogli znaleźć Twój obraz w Google i innych wyszukiwarkach, powinieneś nadać mu odpowiednią nazwę.

Sugerujemy, aby nazwać obrazy bez użycia spacji. Nie zapomnij podać słów kluczowych, jeśli chcesz, aby strona i obraz miały rangę. Na przykład, jeśli przesyłasz zdjęcie z Ferrari California, nazwa pliku powinna być „ferrari-california.jpg”. Jeśli używasz wtyczki SEO do WordPress, już wiesz, że sprawdza tagi alt pod kątem słów kluczowych. Tak, naprawdę ważne jest, aby mieć prawidłową nazwę obrazu.

Po przesłaniu zoptymalizuj obrazy do WordPressa

Po przygotowaniu zdjęć na komputerze możesz kontynuować przesyłanie. Mamy nadzieję, że Twoje zdjęcia mają odpowiedni rozmiar i jakość. Upewnij się, że format i nazwa pliku są poprawne. Po przesłaniu WordPress poprosi o dodatkowe informacje. Nie pomijaj meta informacji; uzupełnij szczegółowe informacje o swoich zdjęciach, abyś mógł je łatwo uporządkować i przygotować do SEO.

Tytuł, opis, tekst alternatywny i podpis

Dbając o szczegóły techniczne, nie zapomnij o SEO. Zawsze dodawaj tytuł i opis do swoich mediów. Pomoże Ci to w zarządzaniu mediami WordPress, a także poprawi SEO. Nie zapomnij także o tagu alt, który będzie wyświetlany użytkownikom, którzy nie mogą prawidłowo zobaczyć Twojego obrazu. Będzie to nie tylko pomocne dla twoich użytkowników, ale również pomoże ci w SEO. Twoja strona będzie miała wyższą pozycję w rankingu, a użytkownicy będą mogli łatwiej znajdować nowe obrazy.

Chociaż nie będziesz potrzebować napisów przez cały czas, upewnij się, że dodałeś podpisy do obrazów wymagających dodatkowych wyjaśnień (na przykład zrzuty ekranu).

Edytuj obrazy za pomocą WordPress

Jeśli zdasz sobie sprawę, że zdjęcie nadal wymaga dalszej edycji, powinieneś wiedzieć, że WordPress pozwala to zrobić nawet po przesłaniu pliku. Zmień obrót, kadrowanie i skalowanie zdjęć już przesłałeś. Możesz nawet edytować tylko miniaturę lub wszystkie inne rozmiary. Natywny edytor WordPress jest bardzo prosty, ale od czasu do czasu możesz oszczędzać.

Zregeneruj wszystkie miniatury

Większość wcześniejszych technik pomoże ci w tworzeniu nowych plików obrazów, które wciąż zamierzasz przesłać. Ale co, jeśli masz setki, jeśli nie tysiące plików przesłanych już do Twojej witryny WordPress? Nie martw się; nadal możesz optymalizować te obrazy i zmieniać ich rozmiary.

Aby szybko to naprawić, możesz zainteresować się bezpłatną wtyczką Regenerate Thumbnails, z której skorzystało ponad milion użytkowników. Jeśli chcesz mieć większą kontrolę nad obrazami, powinieneś sprawdzić niektóre z najlepszych wtyczek WordPress do optymalizacji obrazu, które pokażemy Ci w poniższych liniach tego artykułu.

Jak zregenerować dodatkowe rozmiary obrazu

Użyj wtyczek WordPress

Oczywiście istnieją dziesiątki wtyczek WordPress, które mogą pomóc zoptymalizować obrazy w Twojej witrynie. Przewiń w dół, aby zobaczyć najlepsze wtyczki WordPress do optymalizacji obrazów.

Leniwe W razie potrzeby ładuj obrazy

Czasami jakość zdjęć będzie znacznie ważniejsza niż ich rozmiar. Dotyczy to głównie fotografów, którzy chcą, aby ich zdjęcia były na najwyższym poziomie. Nie mogą ryzykować zmniejszenia rozmiaru ani jakości plików. Nie oznacza to jednak, że powinieneś zapomnieć o optymalizacji. Aby zoptymalizować obrazy dla WordPress w tym przypadku, należy rozważyć leniwe ładowanie.

Leniwe ładowanie to technika, która ładuje obrazy tylko wtedy, gdy użytkownicy ich potrzebują (przewiń do nich). Na przykład, jeśli przesłałeś dwadzieścia wysokiej jakości zdjęć w jednym artykule, ogromnie spowolniłyby Twoją witrynę. Ale jeśli leniwie ładujesz obrazy, artykuł byłby błyskawiczny, a zdjęcia ładowałyby się tylko w razie potrzeby – w momencie, gdy użytkownik do nich dotrze.

Mieć responsywne obrazy

Chociaż większość motywów WordPress jest responsywna, nie musi to wcale oznaczać, że Twoje obrazy również odpowiadają. Ponieważ nie chcesz, aby duży obraz ładował się na małym ekranie, musisz zarejestrować dodatkowe rozmiary obrazu dla swojej witryny. Jeśli Twój motyw nie używa responsywnych obrazów, zastanów się nad zatrudnieniem profesjonalisty do pracy – nie jest to tak proste, jak mogłoby się wydawać.

Zoptymalizuj obrazy do mediów społecznościowych

Jeśli chcesz mieć pewność, że Twoje zdjęcia będą dobrze wyglądać w mediach społecznościowych, musisz zrobić dodatkowy krok i zoptymalizować metatagi i znaczniki schematu.

Jeśli używasz wtyczki SEO, takiej jak Yoast, nie zapomnij sprawdzić ustawień. Na przykład Yoast pozwoli Ci skonfigurować kilka rzeczy związanych z mediami społecznościowymi. Przejdź do SEO -> Społeczności i wprowadź informacje na Facebooku, Twitterze, Google+ i Pinterest.

Jeśli chcesz więcej i chcesz zoptymalizować obrazy pod kątem dodatkowych serwisów społecznościowych, sprawdź WPSSO – Dokładne metatagi + znaczniki schematu dla optymalizacji udostępniania społecznościowego i wtyczki SEO.

Zmień sposób, w jaki WordPress kompresuje obrazy JPEG

Jeśli przesyłasz kilka zdjęć JPEG na swojej stronie WordPress, być może zauważyłeś, że tracą oryginalną jakość. Jeśli zastanawiałeś się, czy winę za to ponosi WordPress, teraz otrzymasz odpowiedź – tak, to prawda!

Po przesłaniu obrazu w formacie JPEG, WordPress automatycznie zmienia kompresję i decyduje, że chcesz, aby obraz stracił na jakości. Mówiąc ściślej, WP używa 90% kompresji twoich plików JPGE. To świetnie, jeśli twoje zdjęcia mają być używane tylko jako miniatury postów lub do wyświetlenia w poście, ale jeśli przesyłasz swoje zdjęcia, chcesz, aby były jak najlepsze, prawda?

Na szczęście będziesz potrzebować tylko jednego wiersza kodu, aby to zmienić.

Zatrzymaj kompresję obrazów JPEG:

Jeśli nie chcesz kompresować obrazów JPEG, po prostu skopiuj i wklej następujący kod do pliku functions.php:

add_filter ('jpeg_quality', funkcja ($ arg) {return 100;});

Nie zapomnij zapisać zmian i możesz przesyłać nowe zdjęcia.

Z drugiej strony obrazy mogą nie być dla ciebie zbyt wielkim problemem. Możesz więc chcieć, aby były jeszcze bardziej skompresowane i zaoszczędzić czas na ładowaniu witryny. Jeśli zmienisz ostatni numer w tym wierszu kodu, zmienisz jakość nowo przesłanych zdjęć.

Kompresuj obrazy JPEG jeszcze bardziej:

Im niższa liczba, tym więcej zdjęć zostanie skompresowanych. Na przykład, aby jeszcze bardziej skompresować te pliki JPEG, potrzebujesz tego kodu:

add_filter ('jpeg_quality', funkcja ($ arg) {return 80;});

Nie zapomnij; domyślny poziom kompresji to 90.

Ważny: Wpłynie to tylko na obrazy, które prześlesz po wklejeniu kodu w functions.php. Aby zmienić rozmiar i jakość obrazów, które już masz w bibliotece, potrzebujesz wtyczki. Zobacz, jak zregenerować dodatkowe rozmiary obrazu.

Najpopularniejsze wtyczki do optymalizacji obrazu dla WordPress

Na początku tego artykułu rozmawialiśmy o tym, jak zoptymalizować obrazy do WordPress, aby przyspieszyć witrynę i poprawić SEO. Jak mogłeś zobaczyć, możesz użyć kilku różnych metod. Ważne jest, aby dbać o zdjęcia jeszcze przed przesłaniem ich na swojego bloga. Ale kiedy zdjęcia są już na stronie, może być niemożliwe ponowne zoptymalizowanie każdego obrazu osobno, a następnie przesłanie ich ponownie.

Nie martw się; nikt nie oczekuje, że to zrobisz. Pozostań z nami w najbliższych minutach, bo zaraz pokażemy Ci najpopularniejsze wtyczki do optymalizacji obrazu dla WordPress.

Aby zoptymalizować obrazy, wystarczy wybrać wtyczkę z listy. Będziesz musiał go skonfigurować i wybrać, co wtyczka zrobi dla Ciebie. Następnie będziesz mógł zrelaksować się i przekazać pracę wybranej wtyczce, a jednocześnie możesz zacząć porządkować swoje pliki multimedialne.

Poniższe wtyczki pomogą Ci skompresować obrazy w dowolnej witrynie WordPress. Sprawią, że strona ładuje się szybciej, a ostatecznie pomagają poprawić SEO.

WP Smush

CENA: za darmo

Dzięki ponad 700 000 aktywnych instalacji, WP Smush musi być jedną z najlepszych wtyczek do optymalizacji obrazu dla WordPress. Może szybko zoptymalizować obrazy przy użyciu różnych technik kompresji. Wspaniałą rzeczą w kompresji obrazów za pomocą WP Smush jest to, że nie tracą na jakości. Nie wierzysz nam? Przetestuj wtyczkę.

Kiedy rozmawialiśmy o przygotowaniu zdjęć do WordPress, wspomnieliśmy, że zmiana rozmiaru jest kluczową częścią procesu optymalizacji. Dzięki tej wtyczce nie musisz się tym martwić, ponieważ WP Smush pozwala ustawić maksymalne wymiary. Po wykonaniu tej czynności wszystkie większe obrazy zostaną automatycznie zmniejszone przed dodaniem ich do biblioteki.

Ta fantastyczna wtyczka może współpracować z plikami JPEG, GIF i PNG. Działa ze wszystkimi twoimi katalogami, automatycznie dba o załączniki, a nawet działa na wielu stronach. Możesz ręcznie operować na każdym obrazie lub edytować pięćdziesiąt z nich zbiorczo. Jeśli chcesz uzyskać jeszcze lepsze wyniki i więcej opcji, sprawdź WP Smush PRO.

EWWW Image Optimizer

CENA: za darmo

Za tą śmieszną nazwą kryje się jedna z najpopularniejszych wtyczek do optymalizacji obrazu dla WordPress. Podobnie jak poprzednio wspomniany, EWWW Image Optimizer może kompresować twoje zdjęcia bez wpływu na ich jakość. Gdy pomyślisz, że wtyczka może przyspieszyć Twoją witrynę w kilka sekund, będziesz już na dobrej drodze, aby ją pobrać. Gdy to zrobisz, możesz zoptymalizować obrazy zbiorczo, a galerie, takie jak GRAND FlaGallery, NextCellent i NextGEN, będą nawet miały własne strony optymalizacji zbiorczej.

Wszystkie obrazy używające klasy WP_Image_Editor w WordPress będą automatycznie zoptymalizowany, podczas gdy możesz ręcznie zastosować magię na wszystkich innych. Podoba nam się, że możesz wybrać foldery, które chcesz zoptymalizować. Aby uzyskać więcej informacji na ten temat oraz o tym, które wtyczki korzystają z tej klasy, otwórz oficjalny Strona EWWW Image Optimizer w repozytorium WordPress.

Kompresuj obrazy JPEG i PNG

CENA: za darmo

Małe obrazy kompresujące

Jeśli urocza mała panda z logo WordPress nie sprawia, że ​​chcesz dowiedzieć się więcej o tej wtyczce, nie wiemy, co będzie. A jeśli panda wygląda znajomo, to dlatego, że ta sama pomaga kompresować obrazy w witrynie TinyPNG. Tak, wygląda na to, że zwierzę jest bardziej wszechstronne niż początkowo sądziliśmy. Ale skupmy się na wtyczce.

Jeśli skorzystasz z tej wtyczki, Panda automatycznie zoptymalizuje twoje zdjęcia. Za każdym razem, gdy prześlesz nowy, wtyczka przejmie i wykona swoją pracę. Mimo to możesz zoptymalizować poszczególne zdjęcia lub zrobić to zbiorczo, przechodząc do biblioteki multimediów.

Kompresja obrazów JPEG i PNG obsługuje nawet animowane pliki PNG, działa doskonale na wielu stronach, jest kompatybilna z WooComerce i nie będzie mieć problemów z WP Offload S3.

Wielką zaletą wtyczki jest to, że pozwala ona ustawić atrybuty maksymalnej szerokości i wysokości dla wszystkich obrazów. Jeśli martwisz się, co spowoduje metadane, nie martw się; panda zachowa wszystkie informacje nienaruszone.

Nie ma ograniczeń rozmiaru pliku, możesz ustawić widżet pulpitu nawigacyjnego, a nawet działa z aplikacją mobilną WordPress. Ponieważ wszystko to, kompresuj obrazy JPEG i PNG ma ponad 100 000 aktywnych instalacji i zasługuje na miejsce na liście najlepszych wtyczek do optymalizacji obrazu dla WordPress.

Bezmyślność

CENA: za darmo

Bezmyślność

Chociaż zdjęcie tytułowe tej wtyczki może Cię odstraszyć, poświęć chwilę i spójrz na wszystkie funkcje Imsanity. Och, nawet nazwa wtyczki wydaje się szalona, ​​prawda? Po uzgodnieniu nazwy wtyczki zobaczysz, że ma ona wiele do zaoferowania.

Imsanity może automatycznie skalować obrazy, pozwala ustawić maksymalne wymiary, a nawet oferuje opcję zmiany rozmiaru. Jest to ważne, jeśli masz już na swoim blogu setki zdjęć wymagających optymalizacji.

Ta bezpłatna wtyczka jest świetną opcją, jeśli nie chcesz często zmagać się z jej ustawieniami. Wystarczy zainstalować i aktywować Imsanity, ustawić kilka opcji i możesz o tym zapomnieć; poradzi sobie na drodze do optymalizacji obrazu.

Podobała nam się opcja umożliwiająca konwersję obrazów BMP do JPG. Na wypadek, gdybyś miał wiele plików BMP, które jakiś czas temu zostały przez pomyłkę przesłane, będzie to ratownik.

Optymalizator obrazu ShortPixel

CENA: za darmo

Optymalizator obrazu ShortPixel

Dzięki ponad 30 000 aktywnych instalacji, ShortPixel Image jest nadal jedną z najpopularniejszych wtyczek do optymalizacji obrazu dla WordPress. Wtyczka jest pełna funkcji i będzie niezbędna dla witryn, które mają wiele zdjęć do zoptymalizowania.

ShortPixel Image Optimizer nie tylko zoptymalizuje dla Ciebie dokumenty JPG, PNG, GIF i PDF, ale także pozwoli ci przekonwertować dowolny obraz JPEG, PNG lub GIF na WebP. Wtyczka działa dobrze z innymi wtyczkami galerii i nie ma znaczenia, czy Twoja witryna korzysta z HTTP czy HTTPS. Pozwoli ci to usunąć dane EXIF ​​ze zdjęć (coś, co fotografowie z pewnością chcieliby mieć).

Wtyczka rozpoznaje obrazy, które już zoptymalizowała, więc w razie potrzeby pominie je. Zezwalasz lub nie zezwalasz na automatyczną optymalizację i robisz wiele, wiele więcej dzięki tej fantastycznej wtyczce. Sprawdź oficjalną stronę w repozytorium, aby zobaczyć wszystkie funkcje.

Optimus – Optymalizator obrazu WordPress

CENA: za darmo

Optimus

Podobnie jak wcześniej wspomniana wtyczka, Optimus zoptymalizuje twoje zdjęcia do WordPressa i zrobi to bez wpływu na jakość twoich zdjęć. Możesz zezwolić wtyczce na automatyczne działanie lub możesz wyłączyć tę opcję i zoptymalizować obrazy tylko w razie potrzeby.

Optimus działa na wielu witrynach, nie jest obcy dla witryn e-commerce WordPress i jest całkowicie zoptymalizowany dla aplikacji mobilnych WordPress i Windows Live Writer. Przyspieszy twoją stronę bez konieczności dotykania linii kodu. Wtyczka oferuje znacznie więcej, ale będziesz musiał wybrać wersję premium. Aby zobaczyć więcej, przejdź do oficjalnej strony w repozytorium wtyczek WordPress.

Dodaj leniwe ładowanie swoich filmów i zdjęć w WordPress

Gdy zaczniesz dodawać dużo materiałów wideo i obrazów na swojej stronie, oczywiste jest, że zacznie się ładować wolniej. Bez względu na to, skąd pochodzą, filmy i duże obrazy będą miały duży wpływ na Twoją witrynę i spowodują, że użytkownicy będą czekać znacznie dłużej niż jest to konieczne do załadowania całej zawartości. Dzięki WordPress nie powinno to być wielkim problemem, a oto jak możesz łatwo naprawić sytuację.

Jeśli znasz się na PHP, jest świetny artykuł o dodawaniu leniwego ładowania obrazów i nieskończonego zwoju napisanego przez naszych kolegów na Eleganckie motywy.

Jeśli nie, w następnych kilku wierszach wymienimy jedne z najpopularniejszych leniwych wtyczek ładujących, które będą spraw, aby Twoja strona ładowała się szybciej. I nie będziesz musiał wiele robić, ale zainstalujesz wtyczkę i skonfigurujesz ją w kilku szybkich krokach.

Leniwe ładowanie filmów

CENA: bezpłatnie

Leniwe ładowanie filmów

Jeśli masz dużo filmów z YouTube i Vimeo, powinieneś rozważyć zainstalowanie tej wtyczki. Po skonfigurowaniu wtyczka umieści obraz na Twoim filmie, dzięki czemu Twoja strona ładuje się znacznie szybciej. Gdy użytkownik przewinie do filmu, obraz ten zostanie wyświetlony z przyciskiem „Odtwórz”. Po kliknięciu wideo rozpocznie się ładowanie i odtwarzanie. Proste demo można obejrzeć na stronie programisty.

WP YouTube Lyte

CENA: za darmo

WP YouTube Lyte

Ta wtyczka wykona swoją pracę w szybki i łatwy sposób. Po zainstalowaniu po prostu dodaj link do swojego filmu na Youtube lub użyj krótkiego kodu, aby go dodać. Możesz wybrać między dodaniem normalnego wideo, listy odtwarzania lub tylko audio z wybranego wideo. Następnie twoje filmy z Youtube otrzymają obraz, który umożliwi leniwe ładowanie. Wystarczy kliknąć obraz, aby rozpocząć odtwarzanie wideo lub audio.
Zobacz wersję demo na stronie programisty.

a3 Leniwy ładunek

CENA: za darmo
DEMO 1
DEMO 2

a3 Leniwy ładunek

Ten jest poświęcony twojej stronie mobilnej. Jeśli masz dużo zdjęć i / lub filmów, które chcesz pokazać odwiedzającym na urządzeniach mobilnych, powinieneś spojrzeć na a3 Lazy Load. Umożliwi to dodanie leniwego ładowania do zdjęć i filmów, a wtyczka pozwoli nawet wybrać efekty przejścia, które będą wyświetlane użytkownikom podczas przewijania ładowanej treści.

W obszarze administracyjnym możesz łatwo włączać i wyłączać treści, które chcesz opóźnić ładowanie. W przypadku osób włączonych treść zostanie załadowana tylko wtedy, gdy użytkownik przewinie do tej części treści.
Jest ładnie pokazane demo, które zawiera 1000 obrazów – każde jest ładowane tylko po przewinięciu do niego. Ponieważ ta wtyczka leniwie ładuje również filmy, istnieje demo wideo, które można zobaczyć, klikając powyższy link.

BJ Leniwy ładunek

CENA: za darmo

BJ Leniwy ładunek

Jeśli nie potrzebujesz wsparcia dla filmów i chcesz tylko, aby Twoje zdjęcia ładowały się leniwie, powinieneś sprawdzić tę wtyczkę WP. Po zainstalowaniu i skonfigurowaniu zastąpi twoje obrazy, miniatury, obrazy Gravatar, a nawet ramki iframe symbolem zastępczym. Podobnie jak wcześniej wspomniana wtyczka, ładuje zawartość tylko wtedy, gdy użytkownik do niej podejdzie.

Niezależnie od tego, czy chodzi o ładowanie obrazów czy filmów, jedna z wyżej wymienionych wtyczek pomoże ci w ciągu sekundy. Wszystkie są bezpłatne, więc nie ma wymówki, aby nie wypróbować przynajmniej jednej z wtyczek i zobaczyć, ile to zabierze twoich ramion. Oczywiście istnieje wiele innych wtyczek z tą samą funkcją i możesz je przeglądać i wypróbować wszystkie.

Wyświetlaj zdjęcia przed i po w atrakcyjny sposób

Jesteśmy pewni, że widziałeś już wiele przykładów zdjęć przed / po. Nie wiem o tobie, ale pierwszą rzeczą, o której myślimy, gdy widzimy wyrażenie „przed i po”, jest program treningu fitness, w którym ludzie pokazują swoje ciała przed i po programie ćwiczeń.

Jeśli się nad tym zastanowić, większość stron internetowych stosuje proste podejście do zaprezentowania różnic – robią oba zdjęcia i umieszczają je jeden obok drugiego, a nawet jeden nad drugim. Jeśli chcesz uzyskać ten sam wynik, nie czytałbyś tego artykułu, ponieważ już wiesz, jak to zrobić.

Co jeśli powiedzieliśmy ci, że istnieje oszałamiający wizualnie sposób na rozwiązanie tego problemu przed / po i jest on w zasięgu ręki? Cóż, jest i po konfiguracji, pochwalisz programistów, ponieważ końcowy wynik jest naprawdę, naprawdę fajny.

Dwadzieścia Dwadzieścia

CENA: bezpłatnie

Dwadzieścia Dwadzieścia

Twenty Twenty to nazwa tej niesamowitej wtyczki, którą można pobrać za darmo w repozytorium wtyczek WordPress.

Wtyczka umożliwia umieszczenie jednego obrazu nad drugim i pozwala na grę za pomocą suwaka, dzięki czemu można ukryć / odsłonić obraz. Zobacz wersję demo, a zobaczysz, o czym mówimy.

OK, teraz, kiedy podłączyłeś się do tej małej wtyczki, zobaczmy, jak stworzyć ten niesamowity efekt. Chociaż odtworzenie efektu demonstracyjnego jest stosunkowo łatwe, nadal musisz znać swoją podstawową wersję HTML. Chodźmy:

  1. Utwórz nowy post lub otwórz istniejący
  2. Wstaw dwa zdjęcia do posta. Jeśli pracujesz w Edytorze wizualnym, powinieneś zobaczyć obraz jeden nad drugim. Jeśli pracujesz w edytorze tekstu, powinieneś zobaczyć kod podobny do tego:
  3. 
    
    
    
  4. Wpisz [twentytwenty] tag przed pierwszym obrazem
  5. Po drugim wpisz [/ twentytwenty] tag
  6. Powinieneś skończyć z czymś takim w swoim edytorze tekstu:

    [twentytwenty]
    
    
    
    [/ twentytwenty]
    
  7. Upewnij się, że zdjęcia mają ten sam rozmiar, aby osiągnąć najlepsze rezultaty
  8. Wyświetl podgląd lub opublikuj swój post i ciesz się oszałamiającymi obrazami przed i po zdjęciach

Jak tworzyć interaktywne obrazy – rysuj, dodawaj opisy i linki

Dzisiaj trudno jest prowadzić stronę internetową bez multimediów. Obrazy, filmy i muzyka są częścią praktycznie każdej strony internetowej. Przeciętny użytkownik Internetu jest silnie uzależniony od bodźców wizualnych, więc musisz zadbać o elementy wizualne i interaktywne swojej witryny. Artykuły ze zdjęciami otrzymują 94% więcej wyświetleń niż ci bez niego. Ponadto wiadomo już, że multimedia na stronach internetowych mogą zwiększyć zwrot z inwestycji w content marketing.

Mamy nadzieję, że nie ma potrzeby namawiać Cię do dbania o zdjęcia w Twojej witrynie. Nawet jeśli nie używasz obrazów w artykułach (co powinieneś), używasz polecanych obrazów, prawda? Istnieje wiele wtyczek galerii, które mogą pomóc w zarządzaniu obrazami na stronie WordPress, możesz mieć motywy związane z fotografią, połączyć Instagram z witryną WordPress i robić wiele więcej. Ale co, jeśli chcesz stworzyć więcej interaktywnych treści?

Na początek możesz być zainteresowany dodaniem efektu obrazu przed, który pokochają Twoi użytkownicy. Nie zapomnij o wirtualnej rzeczywistości w WordPress, która staje się coraz popularniejsza po wprowadzeniu VR przez WordPress.com. Mimo wszystko czegoś brakuje. Czy można tworzyć interaktywne obrazy z klikalnymi częściami? Tak, to możliwe, a my zaraz pokażemy, jak to jest przyjemne i łatwe.

Przyciągnąć uwagę

CENA: za darmo
PRÓBNY

Pierwszą rzeczą, którą spodoba ci się ta wtyczka, jest to, że jest całkowicie darmowa! Podobnie jak w przypadku każdej innej wtyczki z repozytorium WordPress, możesz ją pobrać, zainstalować i aktywować w ciągu kilku minut. Darmowa wersja pozwoli Ci pracować z jednym interaktywnym obrazem. Jeśli chcesz więcej, będziesz musiał wybrać wersję PRO, ale porozmawiamy o tym później.

Wtyczka jest responsywna i nie musisz się martwić, że interaktywne obrazy będą poprawnie wyświetlane na dowolnym urządzeniu. Nie tylko obraz będzie skalowany zgodnie z rozmiarem ekranu, ale będzie działał w większości nowoczesnych i starszych przeglądarek (stacjonarnych i mobilnych). Funkcja Draw Attention korzysta z elementów canvas, gdy są wyświetlane w nowych przeglądarkach, podczas gdy wróci do map obrazów, jeśli załadujesz ją do starszej.

funkcje

Zanim przejdziemy do przykładu, który pokaże, jak potężna jest ta prosta wtyczka, zobaczmy, czego można oczekiwać od Draw Uwaga:

  • Remis – Po przesłaniu obrazu będziesz miał możliwość narysowania na nim kształtów. Wybierz dowolną część obrazu, która będzie dostępna do wyboru / klikalna
  • Zabarwienie – Dostosuj kolory, aby dopasować punkty aktywne do projektu witryny
  • Podświetl po najechaniu myszką – Pokaż inną część obrazu, jeśli użytkownik umieści kursor nad wybraną częścią
  • Pokaż więcej informacji – Wyświetl więcej informacji o wybranej części obrazu
  • Idź do adresu URL – Przekieruj użytkowników na dowolny adres URL, jeśli klikną zaznaczenie

Narysuj ustawienia uwagi

Przykład – interaktywna mapa Hawajów

Skorzystamy z przykładu z witryny demonstracyjnej, aby pokazać, co dokładnie możesz zrobić dzięki funkcji Draw Attention. Zobaczmy więc, jak wygląda interaktywna mapa Hawajów po utworzeniu za pomocą wtyczki.

Pierwszą rzeczą, którą musisz zrobić, to znaleźć obraz wysp na Hawajach. Po przejściu do Zwróć uwagę -> Edytuj obraz, powinieneś przesłać zdjęcie do obszaru na prawym pasku bocznym. Po załadowaniu obrazu zabawa może się rozpocząć.

Tutaj możesz wybrać kolory świateł (kolor, obramowanie, krycie itp.), Stylizować „więcej informacji” (obraz, tytuł, kolor tekstu itp.). Jeśli nie chcesz ręcznie wybierać każdego koloru dla obrazu, możesz szybko wybrać schemat kolorów z prawego paska bocznego.

Zwróć uwagę - jak tworzyć interaktywne obrazy w WordPress

Najbardziej magiczna część dzieje się w Obszary Hotspot ustawienia ekranu. Tutaj załadujesz obraz do pełnego rozmiaru. Wszystko, co musisz teraz zrobić, to zacząć rysować i utworzyć nowy punkt dostępu. Możesz dodać tyle punktów, ile chcesz, co oznacza, że ​​możesz tworzyć kompleksowe selekcje, jak chcesz. Możesz utworzyć tyle punktów aktywnych, z których każdy może mieć własne ustawienia.

W tym przykładzie powinieneś wybrać jedną z wysp. Wybierz tytuł wyspy, dodaj opis i dodatkowy obraz, który pojawi się, gdy użytkownik najedzie na punkt aktywny (prawa część obrazka GIF pokazanego powyżej).

Powtórz ten proces dla każdej wyspy, na której chcesz być interaktywny. Po przygotowaniu hotspotów po prostu skopiuj krótki kod z prawej strony. Wklej shortcode do posta, strony, widżetu lub gdziekolwiek chcesz pokazać swoją nową interaktywną mapę i gotowe! Jeśli chcesz przekierować użytkowników na dowolną inną stronę po kliknięciu wybranych opcji, wystarczy wybrać adres URL zamiast opisu. To takie proste!

Wersja PRO

Podczas gdy darmowa wersja będzie idealna, jeśli potrzebujesz tylko jednego obrazu, Wersja PRO pozwoli Ci mieć tyle interaktywnych zdjęć na swojej stronie, ile chcesz. Chociaż będzie to najważniejsza rzecz do rozważenia, wersja PRO zapewni Ci więcej niż wiele obrazów.

Funkcja Opcje układu pozwala wyświetlić więcej informacji o wybranych częściach obrazu. Na przykład możesz wyświetlić informacje w schowku lub na prostym pasku narzędzi, który pojawi się po najechaniu myszką na wybraną część obrazu.

Istnieje również dwadzieścia predefiniowanych palet kolorów, więc nie musisz ręcznie dostosowywać każdego koloru. Wersja PRO kosztuje 74 USD za licencję na jedną stronę, ale jeśli potrzebujesz więcej niż jednego interaktywnego obrazu, nie będzie to łatwe.

Jak zregenerować dodatkowe rozmiary obrazu

Zarejestrowanie nowych rozmiarów obrazów w motywie WordPress jest stosunkowo łatwe. Po tym, jak poinformujesz swój system, jak duże powinny być twoje obrazy, nadasz im nazwy i zdecydujesz, jak je przyciąć, możesz dystrybuować obrazy w dowolnym miejscu. Ale co ze starymi obrazami?

Jeśli zastosowałeś jedną z technik, które ci pokazaliśmy, przygotowałeś murawę na nowe obrazy. Niezależnie od tego, czy używasz nowo zarejestrowanych rozmiarów obrazów dla miniatur postów, czy pozwalasz autorom na używanie ich w postach, nowe zasady obowiązują tylko w przypadku zdjęć przesłanych po dokonaniu zmiany w pliku functions.php. Aby zmienić starsze obrazy, zalecamy użycie wtyczki Regenerate Thumbnails.

Regeneruj miniatury:

CENA: za darmo
  1. Iść do Wtyczki-> Dodaj nowe
  2. Wyszukaj „Regeneruj miniatury”
  3. Zainstaluj i aktywuj wtyczkę
  4. Nawigować do Narzędzia-> Regen.Thumbnails

Jeśli chcesz zmienić rozmiar wszystkich swoich zdjęć, po prostu kliknij przycisk „Regeneruj wszystkie miniatury” i poczekaj, aż wtyczka wykona ciężką pracę.

Jak zregenerować dodatkowe rozmiary obrazu

Jeśli chcesz zobaczyć obrazy, których rozmiar ma zostać zmieniony lub jeśli chcesz zmienić rozmiar tylko niektórych obrazów, przejdź do Biblioteki multimediów, gdzie znajdziesz nową opcję w „Akcjach zbiorczych” i jedną obok każdego zdjęcia w Galeria.

Zaletą wtyczki jest to, że nie usuwa ona oryginalnych zdjęć. Stworzy tylko nowe rozmiary obrazów, których możesz użyć w motywie, a oryginalne zostaną pozostawione do późniejszego użycia lub ręcznie usunięte, jeśli zdecydujesz, że ich nie potrzebujesz.

Otóż ​​to. Ciesz się nowymi miniaturami lub sprawdź Proste rozmiary obrazu wtyczka, która może zrobić to samo.

Usuń atrybuty obrazu szerokości i wysokości za pomocą jQuery

Podczas dodawania obrazów do posta WordPress system automatycznie dodaje do obrazu atrybuty wysokości i szerokości. Zazwyczaj jest to dobra rzecz, ale są chwile, kiedy nie spodoba ci się fakt, że każde zdjęcie ma te atrybuty.

Jeśli chcesz usunąć atrybuty w punkcie przesyłania, możesz to zrobić za pomocą prostej funkcji, którą pokazaliśmy ci ostatnim razem.

Ale jeśli sam przeczytałeś artykuł lub wypróbowałeś tę funkcję, zauważyłeś, że wpływa ona tylko na obrazy przesłane po zainstalowaniu tej funkcji w systemie WP. Jeśli masz już bazę danych zawierającą posty z wstawionymi obrazami, wyżej wspomniana funkcja nie pomoże ci ze starymi atrybutami obrazu.

Ponieważ prawdopodobnie nie możesz ręcznie przejrzeć każdego obrazu i usuwać kolejno szerokości i wysokości, prawdopodobnie potrzebujesz innej funkcji, która usunie te atrybuty dla wszystkich istniejących obrazów osadzonych w Twoich postach. W takim przypadku jesteś we właściwym miejscu, ponieważ zamierzamy pokazać Ci prosty sposób automatycznego usuwania atrybutów obrazu szerokości i wysokości za pomocą kilku linii kodu jQuery. Nie bój się z poprzednią frazą – nie musisz nawet wiedzieć, co to jest jQuery, wystarczy wykonać trzy kolejne kroki, a skończysz w mgnieniu oka.

Usuń atrybuty obrazu szerokości i wysokości:

  1. Otwórz plik header.php z folderu motywu
  2. Skopiuj i wklej ten kod w dowolnym miejscu pomiędzy i tagi:
  3.  
  4. Zapisz zmiany

I jesteś skończony! Kod wykona swoją magię po otwarciu postu zawierającego obraz i usunie z niego znaczniki szerokości i wysokości.

Jak utworzyć niestandardowe rozmiary obrazów w programie Media Uploader

Jeśli używasz programu Media Uploader do obsługi obrazów w WordPress, prawdopodobnie widziałeś wiele opcji obrazów. Między wieloma możesz wybrać rozmiar obrazu, który możesz wysłać do swojego artykułu.

Do wyboru są opcje miniaturek, średnich, dużych i pełnowymiarowych, ale wszystkie te opcje mają predefiniowane wartości. Jeśli więc używasz niestandardowego motywu, często utkniesz w miejscu zmieniając szerokość i wysokość każdego obrazu w kółko.

W rzeczywistości nie musisz tego robić. Jest fajna mała funkcja o nazwie add_image_size (), która jest doskonałym narzędziem dla programistów. A po tym artykule okaże się również przydatny.

Załóżmy, że Twój motyw ma niestandardową szerokość i chcesz łatwo osadzać obrazy, aby idealnie się tam pasowały. Powiedzmy, że szerokość wynosi 666 pikseli (nie będziemy się zastanawiać, dlaczego ustawiłeś szerokość na tę liczbę, to twój wybór). Aby to zrobić, musisz dodać dodatkowy przycisk radiowy do Media Uploader. Za pomocą poniższego kodu dodasz jeszcze jeden rozmiar, który jest o połowę mniejszy od oryginalnego.

  1. Otwórz plik functions.php
  2. Skopiuj i wklej ten fragment kodu:
  3. funkcja custom_image_sizes () {
    add_image_size („one-size”, 333, 333, true);
    add_image_size ('inny rozmiar', 666, 666, prawda);
    }
    
    add Działalności („init”, „custom_image_sizes”);
    
    funkcja show_image_sizes ($ rozmiary) {
    $ rozmiary [„one-size”] = __ („Rozmiar niestandardowy 1”, „isitwp”);
    $ rozmiary [„inny rozmiar”] = __ („Rozmiar niestandardowy 2”, „isitwp”);
    zwróć rozmiary $;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. Zapisz zmiany
  5. Spróbuj dodać obraz z programu Media Uploader, w którym powinieneś zobaczyć nowe opcje rozmiaru w „Ustawieniach wyświetlania załączników”

Utwórz automatyczny zrzut ekranu dowolnej witryny i opublikuj go jako obraz w swoim poście

Jeśli chcesz wyświetlić miniaturę witryny, musisz przejść do witryny, wydrukować ją lub zrobić zrzut ekranu z programem lub dodatkiem do przeglądarki. Następnie musisz zmodyfikować obraz, przyciąć go do odpowiedniego rozmiaru i przesłać go do WordPress, abyś mógł użyć zrzutu ekranu w poście.

Jeśli nie musisz od czasu do czasu robić tej migawki, nie będzie problemu, ale jeśli częściej używasz zrzutów ekranu z różnych stron internetowych, z przyjemnością usłyszysz, że jest niesamowita funkcja, która oszczędzaj czas i nerwy.

W tej części przewodnika zamierzamy pokazać pełną funkcję, która tworzy krótki kod, którego można użyć do robienia migawek dowolnej strony internetowej, którą chcesz.

Utwórz automatyczny zrzut ekranu:

  1. Otwórz funkcje. Php
  2. Skopiuj i wklej następujący kod:
  3. funkcja wp_webscreen ($ atts, $ content = NULL) {
    wyciąg (shortcode_atts (tablica (
    „snap” => „http://s.wordpress.com/mshots/v1/”,
    „url” => „http://www.firstsiteguide.com”,
    „alt” => „wploop”,
    „w” => „600”, // szerokość
    „h” => „450” // wysokość
    ), $ atts));
    
    $ img = '„. $ alt. „„;
    zwróć $ img;
    }
    add_shortcode („screen”, „wp_webscreen”);
  4. Zmień domyślne zmienne w tablicy
  5. Zapisz zmiany

Ta funkcja tworzy krótki kod, którego można łatwo użyć w dowolnym miejscu na stronie WordPress. Niezależnie od tego, czy chcesz użyć zrzutu ekranu strony internetowej w poście, widżecie paska bocznego lub stopce, po prostu c / p krótki kod w odpowiednim miejscu:

[screen url = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ h =” 450 ″]

Wspaniałą cechą tej funkcji jest to, że zapisuje obraz jako dynamiczny adres URL, co oznacza, że ​​po utworzeniu migawki za pomocą krótkiego kodu automatycznie się odświeży w przyszłości i zawsze będzie wyświetlać bieżący wygląd witryny określonej w tym krótkim kodzie.

Pamiętaj, że możesz bezpośrednio zmienić parametry skrótu. Nie musisz modyfikować kodu w pliku functions.php, jeśli chcesz zrobić migawkę innego adresu URL lub migawkę w innym wymiarze.

Przykład:

Powiedzmy, że chcesz zrobić zrzut ekranu Google i powiększyć go do rozmiaru 200 × 400 pikseli:

[screen url = ”http://www.google.com” alt = ”Google” w = ”200 ″ h =” 400 ″]

Możesz wszystko uczynić jeszcze łatwiejszym, zapisując shortcode w przycisku, dzięki czemu możesz wstawić go do posta za pomocą jednego kliknięcia przycisku.

Wniosek

Nie musisz instalować wszystkich wtyczek i funkcji, które wymieniliśmy, aby poprawić obrazy w witrynie WordPress. Mamy jednak nadzieję, że znalazłeś przynajmniej kilka wskazówek, które pomogą Ci zoptymalizować obrazy lub ulepszyć je w jakikolwiek sposób.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map