Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać powiększenie dla obrazków w WordPressie?

Czy chcesz dodać powiększający zoom podobny do Amazon dla obrazków w WordPress?

Dodanie funkcji powiększenia pozwoli użytkownikom zobaczyć szczegóły, których nie widzieliby na obrazku w normalnym rozmiarze.

W tym artykule pokażemy, jak łatwo dodać powiększenie dla obrazków w WordPress.

How to add magnifying zoom for images in WordPress

Po co dodawać powiększenie do obrazków?

Dodanie funkcji powiększenia na twojej witrynie internetowej WordPress pozwoli odwiedzającym wyraźnie zobaczyć zawiłe szczegóły obrazków.

Jeśli prowadzisz witrynę internetową poświęconą fotografii, dodanie funkcji powiększenia pozwoli użytkownikom powiększyć twoje zdjęcia, aby zobaczyć najdrobniejsze szczegóły.

Podobnie, jeśli prowadzisz sklep internetowy, twoi klienci będą mogli powiększać obrazki produktów.

Wiele dużych witryn e-handlu używa już powiększenia dla obrazków produktów. Pozwala to klientom na zbadanie produktu i zapewnia lepsze wrażenia z zakupów w twoim sklepie.

W związku z tym pokażemy, jak łatwo dodać powiększenie dla obrazków w WordPressie przy użyciu dwóch różnych metod. Możesz użyć poniższych odnośników, aby przejść do preferowanej metody.

Film instruktażowy

Subscribe to WPBeginner

Jeśli wolisz pisemne instrukcje, czytaj dalej.

Envira Gallery to najlepsza wtyczka galerii dla WordPress. Możesz jej użyć do łatwego tworzenia 111111 pięknych galerii obrazków dla twojej witryny internetowej WordPress. Zawiera również dodatek Zoom, który pozwala dodać funkcję powiększania do twoich obrazków w galerii.

Inne potężne funkcje Envira obejmują kreator przeciągnij i upuść, gotowe motywy galerii, wyskakujące okienka lightbox, kompresję obrazów, zabezpieczenie obrazków i wiele innych.

Aby rozpocząć, należy zainstalować i włączyć wtyczkę Envira Gallery. Aby uzyskać więcej informacji, możesz skorzystać z naszego poradnika na temat instalacji wtyczki WordPress.

Uwaga: Istnieje darmowa wersja Envira Gallery, z której można korzystać. Jednak, aby uzyskać dostęp do dodatku Zoom, należy uaktualnić wtyczkę do planu premium „Plus”.

Po włączaniu należy przejść do strony Envira Gallery ” Ustawienia i wpisz klucz licencyjny. Klucz licencyjny można znaleźć w obszarze twojego konta Envira Gallery.

Add the Envira Gallery license key

Następnie kliknij przycisk „Zweryfikuj klucz”.

Następnie musisz przejść do Envira Gallery Addons. Następnie przewiń w dół, aby znaleźć dodatek Zoom i kliknij przycisk „Zainstaluj”.

Install the Zoom Addon for Envira Gallery

Po zainstalowaniu dodatku Zoom należy go również włączać, przełączając przełącznik.

Activate the Zoom Addon

Następnym krokiem jest utwórz nową galerię. Aby to zrobić, przejdź do Envira Gallery ” Utwórz nową z kokpitu WordPress.

W tym miejscu możesz wpisz nazwę swojej galerii i kliknij przycisk „Wybierz pliki z komputera”, aby przesłać obrazki do galerii.

Add a new gallery

Możesz także kliknąć przycisk „Wybierz pliki z innych źródeł”, aby dodać obrazki z biblioteki multimediów WordPress do twojej galerii.

Po przesłaniu obrazków do twojej galerii możesz zmienić ich kolejność, przeciągając i upuszczając miniaturki na miejsce.

Edit image gallery in Envira

Istnieją również inne opcje dostosowania twojej galerii obrazków. Można na przykład wybrać układ galerii, dodać tytuły obrazków i tekst alternatywny, włączyć lightbox galerii, wyświetlać podpisy obrazków, edytować wymiary obrazków i nie tylko.

Więcej szczegółów można znaleźć w naszym przewodniku na temat tworzenia responsywnych galerii obrazków za pomocą Envira Gallery.

Konfiguracja ustawień powiększenia obrazka

Aby dodać powiększenie do twoich obrazków w galerii, kliknij kartę „Zoom”. Następnie zaznacz pole, aby włączyć funkcję powiększenia.

Enable Zoom in Envira

Po włączeniu funkcji zoomu pojawią się ustawienia dodawania zoomu do twoich obrazków.

Można skonfigurować takie ustawienia jak powiększenie po najechaniu kursorem, efekt powiększenia, rodzaj powiększenia, pozycję okna powiększenia, rozmiar okna powiększenia, kolor tinty i inne.

Configure zoom settings

Gdy będziesz zadowolony z ustawień powiększenia, kliknij przycisk „Opublikuj”, aby zapisać zmiany i udostępnić twoją galerię.

Publish your image gallery

Osadzanie twojej galerii obrazków z powiększeniem Magnifying Zoom

Teraz, gdy twoja galeria jest gotowa, możesz dodać ją bezpośrednio do dowolnej strony lub wpisu w WordPress.

W edytorze treści WordPress wystarczy kliknąć przycisk „+”, aby dodać blok Envira Gallery. Następnie kliknij menu rozwijane wewnątrz bloku Envira Gallery, aby wybrać galerię do wyświetlenia.

Add Envira Gallery block

Następnie zobaczysz podgląd twojej galerii obrazków w edytorze bloków WordPress. Jeśli jesteś zadowolony z jej wyglądu, możesz opublikować wpis lub stronę.

Publish image gallery in WordPress page or post

Teraz możesz przejść na twoją witrynę internetową, aby zobaczyć funkcję powiększenia w działaniu.

Envira Gallery magnifying zoom example

Envira Gallery to świetna wtyczka do dodawania funkcji zoom do witryn internetowych z fotografiami. Doskonale sprawdza się również w sklepach internetowych.

Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat tworzenia galerii obrazków produktów WooCommerce.

Metoda 2: Jak dodać powiększenie dla obrazków w WordPressie za pomocą WP Image Zoom

Najpierw należy zainstalować i włączyć wtyczkę WP Image Zoom. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

W tym poradniku będziemy korzystać z darmowej wersji, ale jeśli chcesz mieć więcej opcji konfiguratora, możesz sprawdzić WP Image Zoom Pro. Możesz dowiedzieć się więcej o wtyczce w naszej recenzji WP Image Zoom.

Po włączaniu należy przejść do strony WP Image Zoom ” Zoom Settings z panelu bocznego administratora WordPress.

Następnie należy skonfigurować ustawienia efektu zoomu, przechodząc do karty „Ustawienia zoomu” i wybierając kształt obiektywu, którego chcemy użyć.

Choose a lens shape

Do wyboru są kształty koła, kwadratu i soczewki okna powiększenia. Możesz nawet wybrać opcję „Bez soczewki” (⨯), jeśli nie chcesz używać kształtu do efektu powiększenia.

Po wybraniu preferowanego obiektywu należy przewinąć w dół do następnego kroku, w którym można wyświetlić podgląd obrazka z wybranym obiektywem, aby zobaczyć, jak działa. Wtyczka posiada obrazek podglądu, który można wykorzystać do przetestowania twoich zmian.

Check the preview of the lens in step two

Następnie należy przejść do karty „Ogólne”.

W tym miejscu można wybrać rodzaj kursora, ustawić efekt animacji, włączyć powiększanie po najechaniu myszą lub kliknięciu myszą oraz zdefiniować poziom powiększenia.

Jeśli chcesz mieć jeszcze więcej opcji, niektóre funkcje są dostępne tylko dla wersji pro wtyczki WP Image Zoom.

Configure General tab settings in step 3

Po dokonaniu odpowiednich wyborów, po prostu przejdź do karty „Obiektyw” od góry.

Możesz teraz skonfigurować ustawienia, takie jak rozmiar obiektywu, kolor obiektywu, opcje obramowania obiektywu i inne, jeśli wybrałeś obiektyw „okrągły” lub „kwadratowy” w kroku 1.

Lens Settings

Jeśli wybrano opcję Zoom Window Lens, należy przejść do karty konfiguracji „Zoom Window”.

Z tego miejsca można zmienić szerokość i wysokość okna powiększenia, pozycjonowanie, odległość od głównego obrazka, kolory obramowania i inne.

Zoom window settings

Następnie wystarczy kliknąć przycisk „Zapisz zmiany”, aby zapisać twoje ustawienia.

Następnie wystarczy skonfigurować kilka ustawień ogólnych.

Clcik the Save Changes for the last step

Konfiguracja ogólnych ustawień wtyczki

Następnie należy przejść do karty Ustawienia ogólne w ustawieniach wtyczki.

Z tego miejsca można teraz włączać funkcje, takie jak powiększanie obrazków produktów WooCommerce, miniaturek, urządzeń mobilnych, stron załączników, stron kategorii produktów i nie tylko.

Wszystko, co musisz zrobić, to po prostu zaznaczyć pola obok tych opcji.

Go to the General Settings tab and check the boxes beside the options you want to activate

Można również usuwać efekt lightbox, dzięki czemu użytkownicy mogą płynnie powiększać obrazki.

Do korzystania z tej funkcji potrzebna jest jednak wersja Pro wtyczki.

Remove the lightbox option by checking the box

Jeśli nie zamierzasz usuwać lightboxa dla obrazków, musisz przewinąć w dół do opcji „Włącz wewnątrz lightboxa” i zaznaczyć pole obok niej.

Uwaga: Możesz zobaczyć obsługiwane lightboxy, aby upewnić się, że zoom działa poprawnie wewnątrz lightboxa na twojej witrynie.

Check enable inside lightbox option

Po zakończeniu dostosowywania ustawień nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać twoje ustawienia.

Powiększenie będzie teraz włączone dla produktów WooCommerce.

Możesz przejść na stronę twojego sklepu internetowego, aby sprawdzić funkcję powiększania.

Zoom feature enabled on the WooCommerce store

Jeśli jednak chcesz włączyć powiększanie obrazków we wpisach i na stronach WordPress, musisz wykonać poniższe kroki.

Włączanie powiększenia dla obrazków w edytorze bloków

Domyślnie powiększenie nie jest włączone dla obrazków w twoich wpisach i na stronach. Musisz zrobić to ręcznie po dodaniu obrazka do twojej treści.

Najpierw musisz otworzyć wpis, który chcesz edytować w edytorze bloków.

Następnie należy przesłać obrazek do tego wpisu z biblioteki multimediów lub twojego komputera.

Gdy to zrobisz, po prostu kliknij obrazek, aby otworzyć panel ustawień blokowania w prawym rogu ekranu.

Z tego miejsca wystarczy przejść do karty „Style” i kliknąć przycisk „Z powiększeniem”, aby zastosować powiększenie do twojego obrazka.

Click on the Zoom button

Następnie wystarczy kliknąć przycisk „Aktualizuj” lub „Opublikuj” u góry, aby zapisać twoje ustawienia.

Funkcja powiększenia będzie wyglądać tak na twojej witrynie:

Zoom feature preview

Uwaga: Ten krok należy powtórzyć za każdym razem, gdy chcesz dodać efekt powiększenia do pojedynczego obrazka.

Zalecamy korzystanie z wysokiej jakości obrazków, aby funkcja zoomu wyglądała świetnie. Wysokiej jakości obrazki mają zazwyczaj większy rozmiar pliku i dłużej się wczytują, co ma wpływ na szybkość i wydajność twojej witryny internetowej.

Aby rozwiązać ten problem, musisz zoptymalizować swoje obrazki pod kątem sieci przed przesłaniem ich do WordPressa.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać powiększenie dla obrazków w WordPress. Warto również zapoznać się z naszym przewodnikiem na temat optymalizacji obrazków pod kątem wyszukiwarek i naszymi najlepszymi wtyczkami do kompresji obrazów.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

14 komentarzyZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Sofie

    Thanks for this article. Can you help me understand how I can use this for a page/blog when I use the divi builder? Where can I then add something so this function works?

    • WPBeginner Support

      You would want to reach out to the plugin’s support for the current method to use the plugin with a page builder.

      Administrator

  3. Kenny

    Any chance that there is a zoom plugin that will work with LayerSlider images? I want the background of my LayerSlider slide to zoom in with a magnifying glass so that people can see the image larger on screen.

    • WPBeginner Support

      We would first recommend reaching out to LayerSlider’s support to see if they have a recommended plugin for adding zoom

      Administrator

  4. michel hissi

    can you please tell me about image size. if image size of website is low then can we use this plugin.

    • WPBeginner Support

      Yes, you can still use this plugin if you are optimizing your images :)

      Administrator

  5. santhosh muralidhar

    please show the steps by using the new Wordpress editor. I think in the new editor there is no option to add a zoom magnify feature for the image. I searched and tried a lot but could not find that option.

    • WPBeginner Support

      We will certainly look to update our articles as we are able, for this, the option to add the CSS class that the plugin needs for an image would be in the block’s settings.

      Administrator

  6. Tony

    Please could you tell me how to add image zoom to product images in woocommerce? the article instruct how to add zoom to post and pages only.

    • WPBeginner Support

      The plugin should still work for WooCommerce, if it is not applying to WooCommerce then you would need to reach out to the plugin’s support for them to take a look.

      Administrator

  7. Eliezer Braun

    I keep getting this message when I press on the magnifying glass after I have selected the image for zoom.

    First you have to select the image to which you want to add the zoom feature

  8. Eileen Bednarz

    I’d love to get this to work on my site, but I have a Pinterest plug-in that I can’t deactivate. I suspect that plug-in interferes with this plug-in. Any suggestions on removing to odious Pinterest plug-in are welcome.

    • Eileen Bednarz

      P.S. I’m not a programmer and don’t dare go into the FTP or whatever it’s called.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.