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

WordPress’te Görseller için Büyüteçli Yakınlaştırma Nasıl Eklenir

WordPress’te resimler için Amazon benzeri bir yakınlaştırma eklemek ister misiniz?

Bir yakınlaştırma özelliği eklemek, kullanıcıların normal boyutlu bir görüntüde göremeyecekleri ayrıntıları görmelerini sağlayacaktır.

Bu makalede, WordPress’te resimler için nasıl kolayca büyütme yakınlaştırması ekleyebileceğinizi göstereceğiz.

How to add magnifying zoom for images in WordPress

Görüntüler için Neden Büyüteçli Yakınlaştırma Ekleyelim?

WordPress web sitenize büyüterek yakınlaştırma özelliği eklemek, ziyaretçilerin görüntülerin karmaşık ayrıntılarını net bir şekilde görmelerini sağlayacaktır.

Bir fotoğrafçılık web siteniz varsa, bir büyütme özelliği eklemek, kullanıcıların daha ince ayrıntıları görüntülemek için fotoğraflarınızı yakınlaştırmasına olanak tanır.

Benzer şekilde, bir çevrimiçi mağaza işletiyorsanız, müşterileriniz ürün görsellerini yakınlaştırabilecektir.

Birçok büyük e-ticaret sitesi, ürün görselleri için büyüteçli yakınlaştırma özelliğini zaten kullanıyor. Müşterilerin ürünü incelemesini sağlar ve mağazanızda daha iyi bir alışveriş deneyimi yaratır.

Bununla birlikte, iki farklı yöntem kullanarak WordPress’te resimler için nasıl kolayca büyütme yakınlaştırması ekleyebileceğinizi göstereceğiz. Tercih ettiğiniz yönteme geçmek için aşağıdaki bağlantıları kullanabilirsiniz.

Video Eğitimi

Subscribe to WPBeginner

Yazılı talimatları tercih ediyorsanız, okumaya devam edin.

Envira Gallery, WordPress için en iyi galeri eklentisidir. WordPress web siteniz için kolayca güzel resim galerileri oluşturmak için kullanabilirsiniz. Ayrıca, galeri resimlerinize yakınlaştırma işlevi eklemenizi sağlayan bir Yakınlaştırma Eklentisi ile birlikte gelir.

Diğer güçlü Envira özellikleri arasında sürükle ve bırak oluşturucu, önceden hazırlanmış galeri temaları, ışık kutusu açılır pencereleri, görüntü sıkıştırma, görüntü koruması ve daha fazlası bulunur.

Başlamak için Envira Gallery eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için WordPress eklentisi nasıl kurulur eğitimimizi takip edebilirsiniz.

Not: Envira Gallery ‘nin kullanabileceğiniz ücretsiz bir sürümü vardır. Ancak, Zoom Eklentisine erişmek için premium eklentinin ‘Plus’ planına yükseltmeniz gerekir.

Etkinleştirmenin ardından Envira Galeri ” Ayarlar sayfasına gitmeniz ve lisans anahtarınızı girmeniz gerekir. Lisans anahtarını Envira Galeri hesap alanınızda bulabilirsiniz.

Add the Envira Gallery license key

Bundan sonra, ‘Anahtarı Doğrula’ düğmesine tıklayın.

Ardından, Envira Galeri Eklentiler bölümüne gitmeniz gerekir. Buradan, Zoom Eklentisini bulmak için aşağı kaydırın ve ‘Yükle’ düğmesine tıklayın.

Install the Zoom Addon for Envira Gallery

Zoom Eklentisi yüklendikten sonra, anahtarı değiştirerek de etkinleştirmeniz gerekir.

Activate the Zoom Addon

Bir sonraki adım yeni bir galeri eklemektir. Bunu yapmak için WordPress kontrol panelinden Envira Gallery ” Add New seçeneğine gidin.

Buradan galeriniz için bir ad girebilir ve galerinize resim yüklemek için ‘Bilgisayarınızdan Dosya Seçin’ düğmesine tıklayabilirsiniz.

Add a new gallery

Ayrıca WordPress medya kitap lığındaki görüntüleri galerinize eklemek için ‘Diğer Kaynaklardan Dosya Seç’ düğmesine tıklayabilirsiniz.

Görüntüleri galerinize yükledikten sonra, küçük resimleri sürükleyip yerine bırakarak yeniden düzenleyebilirsiniz.

Edit image gallery in Envira

Resim galerinizi özelleştirmek için başka seçenekler de vardır. Örneğin, bir galeri düzeni seçebilir, resim başlıkları ve alt metin ekleyebilir, galeri ışık kutusunu etkinleştirebilir, resim başlıklarını gösterebilir, resim boyutlarını düzenleyebilir ve daha fazlasını yapabilirsiniz.

Daha fazla ayrıntı için Envira ile duyarlı resim galerileri oluşturma kılavuzumuza bakın.

Görüntü Yakınlaştırma Ayarlarını Yapılandırma

Galeri resimlerinize büyüterek yakınlaştırma eklemek için ‘Yakınlaştır’ sekmesine tıklayın. Ardından, yakınlaştırma işlevini etkinleştirmek için kutuyu işaretleyin.

Enable Zoom in Envira

Yakınlaştırma işlevi etkinleştirildiğinde, resimlerinize yakınlaştırma ekleme ayarları görünecektir.

Üzerine gelindiğinde yakınlaştırma, yakınlaştırma efekti, yakınlaştırma türü, yakınlaştırma penceresi konumu, yakınlaştırma penceresi boyutu, renk tonu rengi ve daha fazlası gibi ayarları yapılandırabilirsiniz.

Configure zoom settings

Yakınlaştırma ayarlarından memnun olduğunuzda, değişikliklerinizi kaydetmek ve bu galeriyi kullanılabilir hale getirmek için ‘Yayınla’ düğmesine tıklayın.

Publish your image gallery

Resim Galerinizi Büyüteçli Yakınlaştırma ile Gömme

Artık galeriniz hazır olduğuna göre, onu doğrudan WordPress’teki herhangi bir sayfaya veya yazıya ekleyebilirsiniz.

WordPress içerik düzenleyicisinden, Envira Galeri bloğunu eklemek için ‘+’ düğmesine tıklamanız yeterlidir. Ardından, hangi galerinin görüntüleneceğini seçmek için Envira Galeri bloğunun içindeki açılır menüye tıklayın.

Add Envira Gallery block

Ardından, WordPress blok düzenleyicisinde resim galerinizin bir önizlemesini göreceksiniz. Nasıl göründüğünden memnunsanız, yazıyı veya sayfayı yayınlayabilirsiniz.

Publish image gallery in WordPress page or post

Artık büyüterek yakınlaştırma özelliğini çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

Envira Gallery magnifying zoom example

Envira Gallery, fotoğrafçılık web sitelerine yakınlaştırma işlevi eklemek için harika bir eklentidir. Ancak, çevrimiçi mağazalar için de mükemmel çalışır.

Daha fazla bilgi edinmek için WooCommerce ürün resim galerisi oluşturma kılavuzumuza bakın.

Yöntem 2: WP Image Zoom ile WordPress’te Görüntüler İçin Büyüteçli Yakınlaştırma Nasıl Eklenir

Öncelikle WP Image Zoom eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Bu eğitimde ücretsiz sürümü kullanacağız, ancak daha fazla özelleştirme seçeneği istiyorsanız WP Image Zoom Pro’ya göz atmak isteyebilirsiniz. WP Image Zoom incelememizde eklenti hakkında daha fazla bilgi edinebilirsiniz.

Etkinleştirmenin ardından, WordPress yönetici kenar çubuğundan WP Image Zoom ” Zoom Ayarları sayfasına gitmeniz gerekir.

Ardından, ‘Yakınlaştırma Ayarları’ sekmesine geçerek ve kullanmak istediğiniz bir mercek şeklini seçerek yakınlaştırma efekti ayarlarını yapılandırmanız gerekir.

Choose a lens shape

Daire, kare ve yakınlaştırma penceresi mercek şekilleri arasından seçim yapabilirsiniz. Büyütme efekti için bir şekil kullanmak istemiyorsanız ‘Mercek Yok’ (⨯) seçeneğini bile seçebilirsiniz.

Tercih ettiğiniz lensi seçtikten sonra, nasıl çalıştığını görmek için seçilen lensle bir görüntüyü önizleyebileceğiniz bir sonraki adıma geçmeniz gerekir. Eklenti, değişikliklerinizi test etmek için kullanabileceğiniz bir önizleme görüntüsüne sahiptir.

Check the preview of the lens in step two

Ardından, ‘Genel’ sekmesine geçmeniz gerekir.

Buradan bir imleç türü seçebilir, bir animasyon efekti ayarlayabilir, farenin üzerine gelindiğinde veya fare tıklandığında yakınlaştırmayı etkinleştirebilir ve bir yakınlaştırma düzeyi tanımlayabilirsiniz.

Daha fazla seçenek istiyorsanız, bazı özellikler yalnızca WP Image Zoom eklentisinin pro sürümü için kullanılabilir.

Configure General tab settings in step 3

Seçimlerinizi buna göre yaptıktan sonra, üst kısımdan ‘Lens’ sekmesine gitmeniz yeterlidir.

Adım 1’de ‘daire’ veya ‘kare’ lensi seçtiyseniz artık lens boyutu, lens rengi, lens kenarlığı seçenekleri ve daha fazlası gibi ayarları yapılandırabilirsiniz.

Lens Settings

Yakınlaştırma Penceresi Lensini seçtiyseniz, ‘Yakınlaştırma Penceresi’ yapılandırma sekmesine geçmeniz gerekir.

Buradan, yakınlaştırma penceresinin genişliğini ve yüksekliğini, konumlandırmayı, ana görüntüden uzaklığı, kenarlık renklerini ve daha fazlasını değiştirebilirsiniz.

Zoom window settings

Ardından, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamanız yeterlidir.

Bundan sonra yapmanız gereken tek şey birkaç genel ayarı yapılandırmaktır.

Clcik the Save Changes for the last step

Genel Eklenti Ayarlarını Yapılandırma

Ardından, eklenti ayarlarının altındaki Genel Ayarlar sekmesine geçmeniz gerekir.

Buradan artık WooCommerce ürün görsellerinde, küçük resimlerde, mobil cihazlarda, ek sayfalarında, ürün kategorisi sayfalarında ve daha fazlasında yakınlaştırma gibi özellikleri etkinleştirebilirsiniz.

Tek yapmanız gereken bu seçeneklerin yanındaki kutuları işaretlemek.

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

Işık kutusu efektini de kaldırabilirsiniz, böylece kullanıcılar görüntüleri sorunsuz bir şekilde yakınlaştırabilir.

Ancak, bu özellik için eklentinin Pro sürümüne ihtiyacınız olacaktır.

Remove the lightbox option by checking the box

Resimler için ışık kutusunu kaldırmayacaksanız, ‘Işık Kutusu İçinde Etkinleştir’ seçeneğine kaydırmanız ve yanındaki kutuyu işaretlemeniz gerekir.

Not: Sitenizdeki bir lightbox içinde yakınlaştırmanın iyi çalıştığından emin olmak için desteklenen lightbox’ları görebilirsiniz.

Check enable inside lightbox option

Ayarları yapmayı tamamladığınızda, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

WooCommerce ürünleri için büyüteçli yakınlaştırma artık etkinleştirilecek.

Yakınlaştırma özelliğimizi kontrol etmek için çevrimiçi mağazanızı ziyaret edebilirsiniz.

Zoom feature enabled on the WooCommerce store

Ancak, WordPress yazılarında ve sayfalarında resimler için yakınlaştırmayı etkinleştirmek istiyorsanız, aşağıdaki adımı izlemeniz gerekir.

Blok Düzenleyicide Görüntüler için Büyütme Yakınlaştırmayı Etkinleştirme

Varsayılan olarak, yazılarınızdaki ve sayfalarınızdaki resimler için büyütme yakınlaştırması etkin değildir. İçeriğinize bir görsel ekledikten sonra bunu manuel olarak yapmanız gerekir.

İlk olarak, düzenlemek istediğiniz bir gönderiyi blok düzenleyicide açmanız gerekir.

Ardından, medya kitaplığından veya bilgisayarınızdan bu gönderiye bir görsel yüklemeniz gerekir.

Bunu yaptıktan sonra, ekranın sağ köşesindeki Blok Ayarları panelini açmak için resmin üzerine tıklamanız yeterlidir.

Buradan ‘Stiller’ sekmesine gidin ve resminize büyütme yakınlaştırması uygulamak için ‘Yakınlaştırma ile’ düğmesine tıklayın.

Click on the Zoom button

Bundan sonra, ayarlarınızı kaydetmek için üstteki ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklamanız yeterlidir.

Yakınlaştırma özelliği sitenizde şu şekilde görünecektir:

Zoom feature preview

Not: Tek bir görüntüye yakınlaştırma efekti eklemek istediğiniz her seferde bu adımı tekrarlamanız gerekecektir.

Yakınlaştırma özelliğinin harika görünmesi için yüksek kaliteli görseller kullanmanızı öneririz. Yüksek kaliteli görsellerin dosya boyutu normalde daha büyüktür ve yüklenmesi daha uzun sürer, bu da web sitenizin hızını ve performansını etkiler.

Bu sorunu çözmek için, resimlerinizi WordPress’e yüklemeden önce web için optimize etmeniz gerekir.

Umarız bu makale WordPress’te görseller için nasıl büyütme yakınlaştırma ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca görsellerin arama motorları için nasıl optimize edileceğine ilişkin kılavuzumuza ve en iyi görsel sıkıştırma eklentileri için en iyi seçimlerimize de göz atmak isteyebilirsiniz.

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

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.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

13 yorumBir Cevap Bırakın

  1. 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.

      Yönetici

  2. 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

      Yönetici

  3. 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 :)

      Yönetici

  4. 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.

      Yönetici

  5. 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.

      Yönetici

  6. 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

  7. 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.

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.