WordPress'te Görüntüler İçin Büyütme Yakınlaştırması Nasıl Eklenir

WordPress'te görseller için Amazon benzeri bir büyüteç efekti eklemek ister misiniz? Büyüteç efekti, süslü bir özellikten daha fazlasıdır; ziyaretçilerinizin normalde göremeyecekleri küçük ayrıntıları görmelerini sağlayan kullanışlı bir araçtır. 

Müşterilerin ürünlerin dokusunu ve kalitesini görmek istediği çevrimiçi mağazalar için bir yakınlaştırma özelliği eklemenizi şiddetle tavsiye ederiz. Ayrıca, görüntüleyicilerin bir resimdeki her ayrıntıyı görmek istediği fotoğrafçılık web siteleri için de yararlıdır.

Görüntülerinize büyüteç benzeri bir yakınlaştırma ekleyerek kullanıcı deneyimini iyileştirebilir, kullanıcıların ilgisini daha uzun süre canlı tutabilir ve hatta satışları artırabilirsiniz.

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

Resimler İçin Büyüteç Yakınlaştırma Neden Eklenir?

WordPress web sitenize bir büyüteç yakınlaştırma özelliği eklemek, ziyaretçilerin resimlerin 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 fotoğraflarınıza daha yakından bakarak ince ayrıntıları görmelerini sağlayacaktır.

Benzer şekilde, eğer bir çevrimiçi mağaza işletiyorsanız, müşterileriniz ürün resimlerine yakınlaşabilecektir.

Birçok büyük e-ticaret sitesi zaten ürün görselleri için büyüteç efekti kullanıyor. Müşterilerin ürünü incelemesine olanak tanır ve mağazanızda daha iyi bir alışveriş deneyimi yaratır.

Bununla birlikte, size WordPress'te üç farklı yöntem kullanarak resimler için kolayca büyüteç yakınlaştırma eklemeyi göstereceğiz. Tercih ettiğiniz yönteme atlamak için aşağıdaki bağlantıları kullanabilirsiniz.

• Yöntem 1: Envira Gallery ile WordPress'te Görüntüler İçin Büyüteç Yakınlaştırması Ekleyin (Önerilen)
• Yöntem 2: WP Image Zoom ile WordPress Görselleri İçin Büyüteç Efekti Ekleme
• Method 3: Add a Magnifying Zoom for Images in WordPress with WPCode

Yöntem 1: Envira Gallery ile WordPress'te Görseller İçin Büyüteç Efekti Ekleme (Önerilen)

Envira Gallery, WordPress için en iyi galeri eklentisidir. Bunu, WordPress web siteniz için kolayca güzel resim galerileri oluşturmak üzere 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ı, açılır pencere efektleri, 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, bir WordPress eklentisinin nasıl kurulacağına dair eğitimimizi takip edebilirsiniz.

Etkinleştirdikten sonra, Envira Gallery » Settings sayfasına gitmeniz ve lisans anahtarınızı girmeniz gerekir. Lisans anahtarını Envira Gallery hesap alanınızda bulabilirsiniz.

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

Ardından, Envira Gallery » Eklentiler'e gitmeniz gerekir. Buradan, Yakınlaştırma Eklentisini bulmak için aşağı kaydırın ve 'Yükle' düğmesine tıklayın.

Yakınlaştırma Eklentisi kurulduktan sonra, anahtarı çevirerek etkinleştirmeniz de gerekir.

Bir sonraki adım yeni bir galeri eklemektir. Bunu yapmak için WordPress kontrol panelinden Envira Gallery » Yeni Ekle'ye gidin.

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

Galerilere resim eklemek için ‘Diğer Kaynaklardan Dosya Seç’ düğmesine tıklayarak WordPress medya kütüphanesinden resim ekleyebilirsiniz.

Galerinize resim yükledikten sonra, küçük resimleri sürükleyip bırakarak yeniden düzenleyebilirsiniz.

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ırın

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

Yakınlaştırma işlevi etkinleştirildikten sonra, görüntülerinize yakınlaştırma ekleme ayarları görünecektir.

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.

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

Görüntü Galerinizi Büyüteç Yakınlaştırmayla Gömme

Galeriniz hazır olduğuna göre, onu doğrudan WordPress'teki herhangi bir sayfaya veya gönderiye ekleyebilirsiniz.

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

Ardından, WordPress blok düzenleyicisinde görüntü galerinizin bir önizlemesini göreceksiniz. Görünüşünden memnunsanız, gönderiyi veya sayfayı yayınlayabilirsiniz.

Büyütme yakınlaştırma özelliğini çalışırken görmek için şimdi web sitenizi ziyaret edebilirsiniz.

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 hakkındaki kılavuzumuza bakın.

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

WP Image Zoom, resimlerinizde kolayca bir büyüteç oluşturmanıza olanak tanıyan ücretsiz bir WordPress eklentisidir.

Öncelikle, WP Image Zoom eklentisini yükleyip etkinleştirmeniz gerekir. Daha fazla ayrıntı için lütfen adım adım kılavuzumuza bakın: WordPress eklentisi nasıl kurulur.

Bu eğitimde ücretsiz sürümü kullanacağız, ancak daha fazla özelleştirme seçeneği istiyorsanız WP Image Zoom Pro'yu incelemek isteyebilirsiniz. Eklenti hakkında daha fazla bilgiyi WP Image Zoom incelememizde öğrenebilirsiniz.

Etkinleştirdikten sonra, WordPress yönetici kenar çubuğundan WP Image Zoom » Zoom Settings sayfasına gitmeniz gerekir.

Ardından, 'Yakınlaştırma Ayarları' sekmesine geçerek yakınlaştırma efekti ayarlarını yapılandırmanız ve kullanmak istediğiniz bir lens şekli seçmeniz gerekir.

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

Tercih ettiğiniz lensi seçtikten sonra, seçilen lensin nasıl çalıştığını görmek için seçilen lensle bir görüntüyü önizleyebileceğiniz bir sonraki adıma kaydırmanız gerekir. Eklentide, değişikliklerinizi test etmek için kullanabileceğiniz bir önizleme görüntüsü bulunur.

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

Buradan bir imleç türü seçebilir, bir animasyon efekti ayarlayabilir, fareyle üzerine gelindiğinde veya fare tıklamasıyla yakınlaştırmayı etkinleştirebilir ve bir yakınlaştırma seviyesi tanımlayabilirsiniz.

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

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

1. Adımda 'daire' veya 'kare' lensi seçtiyseniz, lens boyutu, lens rengi, lens kenar seçenekleri ve daha fazlası gibi ayarları yapılandırabilirsiniz.

Yakınlaştırma Penceresi Lensi'ni 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 resimden uzaklığı, kenarlık renklerini ve daha fazlasını değiştirebilirsiniz.

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

Genel Eklenti Ayarlarını Yapılandırın

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

Buradan, WooCommerce ürün resimleri, küçük resimler, mobil cihazlar, ek sayfaları, ürün kategori sayfaları ve daha fazlası üzerinde yakınlaştırmayı etkinleştirebilirsiniz.

Yapmanız gereken tek şey, bu seçeneklerin yanındaki kutucukları işaretlemek.

Ayrıca, kullanıcıların resimleri sorunsuz bir şekilde yakınlaştırması için lightbox efektini kaldırabilirsiniz.

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

Resimler için ışık kutusunu kaldırmayacaksanız, ‘Işık Kutusu İçinde Etkinleştir’ seçeneğine aşağı kaydırın ve yanındaki kutucuğu işaretleyin.

Not: Sitenizdeki bir ışık kutusu içinde yakınlaştırmanın düzgün çalıştığından emin olmak için desteklenen ışık kutularını görebilirsiniz.

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

Büyüteç yakınlaştırma artık WooCommerce ürünleri için etkinleştirilecektir.

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

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

Blok Düzenleyicide Resimler İçin Büyüteç Yakınlaştırmayı Etkinleştirin

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

Öncelikle, düzenlemek istediğiniz gönderiyi blok düzenleyicide açmanız gerekir.

Ardından, medyadan veya bilgisayarınızdan o yazıya bir resim yüklemeniz gerekir.

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

Buradan, 'Stiller' sekmesine gidin ve resminize büyüteç yakınlaştırması uygulamak için 'Yakınlaştırmalı' düğmesine tıklayın.

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:

Not: Yakınlaştırma efektini tek bir resme eklemek istediğinizde bu adımı her seferinde tekrarlamanız gerekecektir.

Yöntem 3: WPCode ile WordPress'te Resimler İçin Büyüteç Yakınlaştırma Nasıl Eklenir

Ayrıca ücretsiz WPCode eklentisini kullanarak WordPress'teki resimlerinize büyüteç yakınlaştırma özelliği ekleyebilirsiniz.

WPCode, piyasadaki en iyi kod parçacığı eklentisidir ve özel kodu web sitenize güvenli ve kolay bir şekilde eklemenizi sağlar. Resimler için büyüteç dahil, sadece birkaç tıklamayla ekleyebileceğiniz 393'ten fazla hazır kod parçacığı ile birlikte gelir.

Başlamak için ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Yardımcı olması için, bir WordPress eklentisinin nasıl kurulacağına dair eğitimimize bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinizden Kod Parçacıkları » Kütüphane bölümüne gidin.

Bu sizi, sitenize ekleyebileceğiniz tüm farklı parçacıkları görebileceğiniz Parçacık Kütüphanesi'ne götürecektir.

Buradan, kitaplıktaki ‘Görüntüler için Büyüteç’ snippet'ini arayın.

Bulduğunuzda, üzerine gelin ve ‘Snippet kullan’ düğmesine tıklayın.

WPCode, kodu otomatik olarak ekleyecek ve doğru ekleme yöntemini seçecektir.

Şimdi yapmanız gereken tek şey anahtarı ‘Etkin Değil’den ‘Etkin’e getirmek ve ardından ‘Güncelle’ düğmesine tıklamaktır.

Hepsi bu kadar! WordPress web sitenizi ziyaret ettiğinizde, üzerine geldiğinizde bir büyüteç beliren tüm görsellerinizin olduğunu göreceksiniz.

Not: Yakınlaştırma özelliğinin harika görünmesi için yüksek kaliteli görüntüler kullanmanızı öneririz. Yüksek kaliteli görüntüler normalde dosya boyutunda daha büyüktür ve yüklenmesi daha uzun sürer, bu da web sitesi hızınızı ve performansınızı etkileyecektir.

Bu sorunu çözmek için, WordPress'e yüklemeden önce görüntülerinizi web için optimize etmeniz gerekir.

Video Eğitim

Yazılı eğitimleri sevmiyorsanız, bunun yerine video eğitimimizi izleyebilirsiniz:

WPBeginner'a Abone Olun

Umarım bu makale, WordPress'te görüntülere büyüteç yakınlaştırma eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca, arama motorları için görüntüleri nasıl optimize edeceğiniz ve en iyi görüntü sıkıştırma eklentileri hakkındaki rehberlerimize de göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.