Bir Sitenin Ekran Görüntüsü, WordPress Siteye Nasıl Eklenir?

Bazı durumlarda herhangi bir sitenin ekran görüntüsünü, yazı ve sayfalarımıza ekleme ihtiyacı hissedebiliyoruz. Özellikle site veya tema tanıtımlarında, demo gösterimi listelerinde bu ihtiyacı daha çok hissediyoruz. Ben önceleri görüntüsünü yayınlamak istediğim bir sitenin önce windows ekran görüntüsü yakalama aracı ile ekran görüntülerini alıyor (yüksekliği ekrana sığmayan sitelerde aşağı kaydırdıkça aldığım ayrı ekran görüntülerini birleştiriyor), sonra bu ekran görüntüsünü optimize ediyor ve siteye yerleştiriyordum. Bu işlemi, görüntüsünü kullanacağım her site/tema için tek tek yapmak, kesme, yapıştırma ve kenarları düzeltme ile uğraşmak, onu uygun boyutlara getirip, dosya boyutunu küçültmek vs. faaliyetler epey yorucu oluyordu (cahilliğin gözünü seveyim). Sonra firefox tarayıcıda kullanabileceğim FireShot for FireFox eklentisini keşfettim (aynı eklentinin crome için hazırlanmışı da var). Herhangi bir sitenin, istediğim tarzdaki (görüntülenen kısım, sayfanın tamamı, belli bir alan vs) ekran görüntüsünü alıp kullanmanın ne kadar kolay olduğunu gördüm.

Sonra WordPress tarafından geliştirilen ve bir alt etki alanı yoluyla bize sunulan bir işlevi keşfetim. Bu işlevin, wordpress yazı ve sayfalarımızda, bir sitenin anlık ekran görüntüsünü resim olarak kullanmamızı sağladığını öğrendim. Her zaman olmasa da (çünkü oluşturulan görüntünün ön belleğe alınıp gösterilmesi bazen zaman alabiliyor), bu işlevi kullanarak paylaşımlarımı hazırlarken harcadığım zamanı çok çok kısaltmış oldum. Bu işlev, AppThemes‘in Kupon Kampanya Temasında da başarıyla kullanılmış. Eklenen promosyonların/kuponların geçerli olduğu sitelerin veya kupon sahibi firmaların web sitelerinin ekran görüntüsü, sayfalardaki listelerde otomatik bir şekilde resim olarak gösterilebiliyor.

Bu yazıda sizinle bu işlevi nasıl kullanabileceğinize dair kısa bir özet sunmak istedim.

Kısa Kod Kullanımı

Söz konusu wordpress işlevini, sayfa veya yazılarımıza ekleyeceğimiz bir kısa kod ile kullanıyoruz. En azından size sunmaya çalışacağım anlatım, işlevin bu şekilde kullanımına yönelik.

Yazı veya sayfa içine ekleyeceğimiz Kısa kodun yapısı şu şekilde:

[ss_screenshot width='Görüntünün genişlik değeri' site='http://www.siteadi.com']

Burada gördüğümüz gibi, kısa kodumuz iki parametre alıyor. Birincisi, ekran görüntüsünün gösterileceği görüntü nesnesinin genişliği, diğeri de ekran görüntüsü çekilecek olan web sitesinin URL’si. Bir sitenin ekran görüntüsünü, miniminnacık bu kısa kod ile yapabildiğimi gördükten sonra, doğal olarak eski uğraştırıcı yöntemlerimden utanç duyduğum anlar oldu.
Doğal olarak, herhangi bir kısakodu, canınız istediği anda, bu şekilde kullanamazsınız. WordPressin bu kısa kodu yorumlayabilmesi ve bir sonuç çıkartabilmesi için, bu kısa koda ait bir işlev hazırlayıp, bunu wordpresse tanıtmanız gerekir.

Kısa Kod İşlevinin Hazırlanması

Kısa kodumuzu, wordpress sitemizde istediğimiz şekilde kullanabilmemiz için, öncelikli olarak wordpressin aşağıdaki işlev ve işlev kaydı ile karşılaşması gerekir. Bu kodları temamızın functions.php dosyasına ekliyoruz:

add_shortcode('ss_screenshot', 'ss_screenshot_shortcode');
 
function ss_screenshot_shortcode($atts){
 
  $width = intval($atts['width']);   
  $width = (100 <= $width && $width <= 300) ? $width : 200;   
  $site = trim($atts['site']);
   
  if ($site != ''){   
     $query_url =  'http://s.wordpress.com/mshots/v1/' . urlencode($site) . '?w=' . $width;     
     $image_tag = '<img class="img-thumbnail" alt="' . $site . '" width="' . $width . '" src="' . $query_url . '" />';
     $output = '<a href = "' . $site . '">' . $image_tag . '</a>';
  }else{
     $output = 'Ekran görüntüsü alma hatası!';
  }
     return $output;
}

Burada, öncelikle ss_screenshot adında bir kısa kod oluşturup, bu kısa koda da ‘ss_screenshot_shortcode’ işlevini atadık. İşlev, $atts dizi parametresi aracılığı ile, kısa kod yazımından, yukarıda yazdığım genişlik ve site url değerlerini alır. (Genişlik değeri, 6.satırdaki gibi istenirse site için standart bir kontrole tabi tutulup, belli aralıktaki girişlerin, aynı genişliğe dönüştürülmesi sağlanabilir. Burada parametre olarak gönderilen genişlik 100-300 arasında ise, genişlik değeri 200 piksele dönüştürülmüştür). Sonrasında, eğer site URL’si boş değilse, bu URL’yi, wordpress alt etki alanındaki sisteme göndererek, oradan, url’si verilen sitenin ekran görüntüsünün dönmesini bekler. Dönen ekran görüntüsünü de, “genişlik” parametresi ile bildirdiğimiz genişlikte bir görüntü nesnesinin içine yerleştirir ve kısa kodun ekli olduğu yerde, site bağlantısıyla birlikte, tıklanabilir bir şekilde görüntüler.

Kullanım:

İşlevimizi functions.php dosyasına ekledikten sonra, herhangi bir sitenin ekran görüntüsünü yazı veya sayfamızda, ekran görüntüsünün gösterilmesini istediğimiz yere aşağıdaki gibi bir kısa kod eklememiz yeterli olacaktır. Örnekteki kısa kod, onu eklediğimiz yerde, ERT Yazılım Çalışma Grubumuzun Web Sayfasının 300 px genişliğinde bir ekran görüntüsünü gösterecektir.

[ss_screenshot width='300' site='http://www.ertyazilim.com']

Sonuç: