Tarayıcı Ekran Görüntülerini Otomatik Olarak Alma ve WordPress'te Görüntüleme

Yayınlanan: 2020-10-23

Görüntüler ve ekran görüntüleri, herhangi bir WordPress blogunda önemli bir unsurdur. Özellikle ekran görüntüleri, diğer sayfaların önemli yönlerini vurgulamanıza olanak tanır. Ancak, mükemmel tarayıcı ekran görüntülerini alıp gönderilerinize eklemek zor olabilir. İşletim Sisteminize (OS) bağlı olarak işi halledebilseniz de, sürekli ekran görüntüsü almak zor bir iştir.

Tarayıcı Ekran Görüntüleri eklentisine girin. Bu, WordPress düzenleyicisinden bile çıkmadan herhangi bir web sitesinin ekran görüntüsünü almanızı sağlar. Kulaklarınız buna dikildiyse, muhtemelen okumaya devam etmek isteyeceksiniz.

Nasıl çalıştığını kontrol edelim!

Youtube Kanalımıza Abone Olun

Tarayıcı Ekran Görüntüleri Eklentisine Giriş

Tarayıcı Ekran Görüntüleri eklentisi.

Tarayıcı Ekran Görüntüleri, tartışmasız bir şekilde web sitenizde bir yeri hak eden niş bir eklentidir. Bu WordPress editörü çıkmadan herhangi bir sayfanın dinamik tarayıcı ekran görüntülerini çekmelerine olanak tanıyor. Bu, tercih ettiğiniz seçeneğe bağlı olarak hem Klasik hem de Blok Düzenleyiciler için geçerlidir. Bu, yeni tarayıcı pencereleri açmanızı ve görüntülerinizi platformun dışında daha da optimize etmenizi gerektiren işletim sistemine özgü çözümlerin aksine.

Klasik Düzenleyici kullanıyorsanız, Tarayıcı Ekran Görüntüleri, istediğiniz çekimleri oluşturmak için özel bir kısa kod kullanmanıza olanak tanır. Herhangi bir sayfaya veya gönderiye birden fazla ekran görüntüsü ekleyebilirsiniz ve aynısı Blok Düzenleyici için de geçerlidir.

Eklenti dinamik olarak ekran görüntüleri oluşturduğundan, içeriğiniz için güncel olmayan çekimler kullanmak istemediğiniz durumlar için mükemmeldir. Tarayıcı Ekran Görüntüleri kısa kodu veya engellemesi içeren bir sayfanız veya yayınınız varsa, ziyaretçiler gerçek zamanlı bir ekran görüntüsü görür. Bu, belirli içerik türleri için baştan çıkarıcı bir önermedir.

Hangi yaklaşımı kullanırsanız kullanın, eklenti, alınan tarayıcı ekran görüntülerinin çözünürlüğünü özelleştirmenize de olanak tanır. Ayrıca resimlerinize alternatif metin ve metinlerin yanı sıra özel CSS sınıfları da ekleyebilirsiniz.

Ancak, bu eklentinin yalnızca 'ekranın üst kısmındaki' tarayıcı ekran görüntülerini aldığını anlamak önemlidir. Bu, kaydırmanız gereken alanların gösterilmeyeceği anlamına gelir. Bu alanın ne kadar büyük olduğu, her tarayıcı ekran görüntüsü için yapılandırdığınız parametrelere bağlı olacaktır ve bunu nasıl yapacağınızı daha sonra öğreneceksiniz.

Ana Özellikler:

  • Tarayıcı pencerenizdeki herhangi bir web sitesinin özel çekimlerini yapmak için kısa kodlar veya bloklar kullanın.
  • Manuel olarak almak veya yüklemek zorunda kalmadan içeriğinize tarayıcı ekran görüntüleri ekleyin.
  • Tarayıcı ekran görüntülerinizin çözünürlüğünü özelleştirin.
  • Eklentinin oluşturduğu görüntülere özel CSS sınıfları ekleyin.
  • Resimlerinize bağlantılar ve alternatif metin ekleyin.

Fiyat: Ücretsiz | Daha fazla bilgi

Tarayıcı Ekran Görüntüleri Eklentisi Nasıl Kullanılır (2 Yaklaşım)

Şimdiye kadar, Tarayıcı Ekran Görüntüsü eklentisinin nasıl çalıştığını zaten biliyorsunuz, bu yüzden nasıl kullanılacağını tartışalım. Kısa kodlar, eklentinin temel bir parçasıdır, bu yüzden önce buna bakalım.

1. Dinamik Tarayıcı Ekran Görüntüleri Oluşturmak için Kısa Kodları Kullanın

Tarayıcı Ekran Görüntüleri eklentisi, dinamik tarayıcı görüntüleri oluşturmak için aşağıdaki özel kısa kodu kullanmanızı sağlar:

[browser-shot url="elegantthemes.com" width="600" height="400"]

Kısa kod iki temel parametre içerir: genişlik ve yükseklik . Her iki parametre de piksel değerlerini kullanır ve eklentinin çekim yapmak için kullandığı varsayılan çözünürlük 600 x 400'dür . Elbette, ekran görüntüsünü almak istediğiniz belirli URL'yi de kısa koda eklemek isteyeceksiniz.

Blok Düzenleyici veya Klasik Düzenleyici kullanmanızdan bağımsız olarak, kısa kod aşağıdakine benzer bir ekran görüntüsü oluşturacaktır:

Zarif Temalar ana sayfası.

Ancak, Tarayıcı Ekran Görüntüleri ayrıca birkaç özel parametre ayarlamanıza da olanak tanır. Genişlik ve yüksekliğin yanı sıra, bunlar şunları içerir:

  • Alt: Bu parametre, ekran görüntüsünüz için alternatif metin belirlemenizi sağlar.
  • Bağlantı: Bu parametreyi kullanarak görüntünün hangi bağlantıya işaret ettiğini seçebilirsiniz (bu, çekimin başladığı yerden farklı olabilir).
  • Hedef: Bu parametre, resim bağlantılarının yeni bir pencerede açılıp açılmayacağını kontrol etmenizi sağlar.

Örnek olarak, tüm parametreleri içeren tam bir kısa kod şöyle görünür:

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]

Altyazıları manuel olarak eklemek için kısa kodları da kullanabilirsiniz:

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]Here's the caption[/browser-shot]

Çoğu durumda, kullanacağınız en önemli iki parametre genişlik ve yüksekliktir . Sık sık çektiğiniz tüm tarayıcı ekran görüntüleri için aynı değerleri kullanmak en iyi sonuçları vermeyecektir, bu nedenle parametrelerinizi içeriğe uyacak şekilde uyarlamak isteyeceksiniz.

2. Web Sitenize Ekran Görüntüleri Eklemek için Blokları Kullanın

Blok Düzenleyiciyi kullanırsanız, Tarayıcı Ekran Görüntüleri eklentisi, Tarayıcı Görüntüleri adlı yeni bir bloğa erişmenizi sağlar:

Tarayıcı Çekimleri bloğu ekleme.

Bloğu seçmek, eklentiden ekran görüntüsü oluşturmak için hangi web sitesini kullanmak istediğinizi soracaktır. Bu örnekte Amazon ABD ana sayfasını kullanıyoruz:

Amazon homepage.d'nin tarayıcı ekran görüntüsünü alma

Görsel Bul'a tıkladığınızda, eklenti bir ekran görüntüsü "alacak" ve bunu Blok Düzenleyici'de görüntüleyecektir:

Amazon'un bir tarayıcı ekran görüntüsü.

Akılda tutulması gereken bir şey, eklentinin sizin için özel sayfalara erişememesi veya bu sayfalarda oturum açamamasıdır. Bu tür tarayıcı ekran görüntüleri için kirli işleri kendiniz yapmanız gerekecek.

Devam ederek, bu ekran görüntüsünün sağında Blok ayrıntıları sekmesini görebilirsiniz. Bu, daha önce tartıştığımız tüm parametreleri özel kısa kodlar eklemenize gerek kalmadan değiştirmenizi sağlar.

Tarayıcı ekran görüntülerinizin genişliğini ve yüksekliğini değiştirmek, Blok Düzenleyiciyi kullanarak çok daha kolaydır. Bunun nedeni, düzenleyicinin yükseklik ve genişlik parametrelerinin altındaki Resmi Yenile düğmesine basarak bir önizlemeyi kontrol etmenizi sağlamasıdır:

Tarayıcı ekran görüntüsünün çözünürlüğünü değiştirme.

Her iki örneği de karşılaştırırsanız, çözünürlükteki değişikliğin eklentinin sizin için ekran görüntüsü aldığı alanı nasıl değiştirdiğini görebilirsiniz. Bunun ötesinde, ekran görüntülerinize özel bağlantılar ekleyebilir, yeni bir sekmede açılıp açılmayacaklarını yapılandırabilir ve burada özel CSS sınıfları ayarlayabilirsiniz.

Çözüm

Blogunuzun içeriğine düzenli olarak tarayıcı ekran görüntüleri eklerseniz, Tarayıcı Ekran Görüntüleri eklentisi size çok zaman kazandırabilir. Oldukça niş bir eklentidir, ancak bahsettiğimiz kalabalığın arasındaysanız, gönderileri düzenlemeyi çok daha kolay hale getirecektir.

Tarayıcı Ekran Görüntülerini kullanarak, basit bir kısa kod veya Blok Düzenleyici kullanarak tarayıcınızın ekran görüntülerini ekleyebilirsiniz. Kısa kodlar için eklenti, ekran görüntülerini genişlik, yükseklik ve hatta alt (alt metin için) gibi özelleştirmenizi sağlayan çeşitli parametreler içerir.

Tarayıcı Ekran Görüntüleri eklentisinin nasıl kullanılacağı hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım!

VectorMine / Shutterstock.com tarafından sağlanan makale küçük resmi