Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Posts
Code

WordPress Siteniz için Web Sitelerinin Anlık Ekran Görüntüleri Nasıl Oluşturulur

by
Length:ShortLanguages:

Turkish (Türkçe) translation by Barış Ertuğrul (you can also view the original English article)

Bu eğitimde açığa çıkmış bir sır öğreneceksiniz: WordPress.com tarafından sağlanan bir hizmeti kullanarak WordPress yazılarınızda kullanmak için web sitelerinin anlık ekran görüntülerini nasıl çekip, resim olarak görüntüleyebilirsiniz. Hatta, bu ekran görüntülerinin gösterimi için kullanımı kolay kısakod dönüştürmesi bile hazırlayacağız...haydi başlayalım!


Arka Plan

Bir kaç yıl öncesinde, Wordpress'in s.wordpress.com alt etki alanında, bir ekran görüntüsü oluşturucusu meydana getirdiği sırrı açığa çıktı. Ve duyumlara göre, onu kötüye kullanmadığınız sürece, serbestçe yararlanılabilecek. WordPress.com bunu, çeşitli etkinlikler için ekran görüntüleri oluşturmak amacıyla kullanır.

Örneğin, buradaki URL, wp.tutsplus'ın 400 piksel genişliğinde bir ekran görüntüsünü göstermek içindir:

http://s.wordpress.com/mshots/v1/http://wp.tutsplus.com?w=400

Dönüştürücünün görüntüyü ön belleğe çekmesi biraz zaman aldığından, bağlantıya tekrar tıklamanız gerekebilir.

Ne yapıyor olacağız:

  • Bir ekran görüntüsü görüntülemek için bir kısa kod işlevi yazmak
  • URL için bir özel alan kullanarak, yazı döngüsünün bir parçası olarak bir ekran görüntüsünü gösterecek kısa kod kullanmak

Adım 1 Kısa Kod İşlevi

Kısa kodumuzun kullanımı şuna benzer olacak:

Kodu, tema dizininizdeki functions.php dosyasına ekleyebilirsiniz. Tam koda, yukarıdaki kaynak (source) bağlantısından ulaşılabilir.

Bu kod ne yapar:

  • add_shortcode işlevi ile ss_screenshot olarak adlandırılmış bir kısa kod tanımlar.
  • kısa kod işlevinin parametre olarak kabul ettiği $atts dizisi iki kısa kod özelliği içerir: Genişlik ve site
  • genişlik özeliği bir tam sayıya dönüştürülür ve belirlenen aralığa uygun -bu durumda 100 ile 300 piksel arasında- olduğundan emin olmak için kontrol edilir. Not: Biz, verilen genişlik bizim aralığın dışında ise 200 varsayılan genişliğini atamak için PHP ternary operatörünü kullanırız. Bu aynı zamanda genişlik özelliğinin eksik olması durumunu da dikkate alır.
  • site özelliği, yanlışlıkla oluşan sağ ve sol boşlukları kaldırmak için düzeltilir
  • URL kodlaması yapılmış bir site özelliği ile genişlik özelliği ekleyerek bir URL sorgusu oluştururuz
  • son olarak, kullanıcıların ekran görüntüsüne tıklayabilmesi ve bu sayede siteye yönlenebilmesi için, URL sorgusunu, bir görüntü ve bir link etiketi arasına yerleştiririz

Adım 2 Kısa Kod Testi

Bir yazı veya sayfaya, bu kısa kodu ekleyin:

Yazı veya sayfayı görüntülediğinizde, Amazon'un 300 piksel genişliğinde bir ekran görüntüsünü görmeniz gerekir. Unutmayın, önbelleğe alınan ekran görüntüsünü görmek için sayfayı bir kaç saniye sonra yenilemeniz gerekebilir. Genişliği ile oynayın ve aralık dışında gittiğinde neler olduğunu gözleyin. Bu arada, istediğiniz herhangi bir genişlik aralığı ayarlayabilirsiniz. Ayrıca, bozuk bir URL testi: bir ekran görüntüsü yerine uyarı iletisi görmeniz gerekir.

Şimdi bir kısa kod çalışmamız var, bunu wordpress döngümüz içerisine nasıl dahil edebileceğimize bakalım.


Adım 3 Özel Alan Ayarlaması

Her yazının yanında, bir sitenin ekran görüntüsünü göstermek istediğimiz bir senaryo varsayalım. Kullanım ve biçimlendirme avantajları nedeniyle, yazı düzenleme ekranımıza özel bir alan ekleyerek bu işlemi otomatikleştirmek en iyisidir. Bu alana, daha sonra yazı döngüsünde yeni kısa kodumuz aracılığıyla bir ekran görüntüsü göstermek için kullanabileceğimiz bir site URL'si girebiliriz.

Özel alan kutusu, yazı düzenleme ekranda gösterilmiyorsa, o zaman ekranın sağ üst köşesine baktığınızda Ekran Tercihleri sekmesini görmelisiniz. Bunu tıklayın ve Özel Alanlar seçeneğini işaretleyin. Şimdi ekranın alt kısmında buna benzer bir şeyler görüyor olmalısınız:

"Yeni girin" bağlantısını tıklatın ve screenshot_url adında yeni bir özel alan oluşturun. Gördüğünüz bu olmalı:

Artık bir yazı oluşturduğunuz veya düzenlediğiniz zaman (özel alan tüm yazılar için görünür olacaktır) yazı ile ilgili ekran görüntüsü oluşturmak için bir URL girebilirsiniz.


Adım 4 Döngüye Ekran Görüntüsü Gösterimi Ekleme

İşte, ekran görüntüsü gösteren kodumuzu da içeren, standart wordpress yazı döngüsünün (bir tema şablon dosyasında bulunduğu gibi) oldukça kısaltılmış bir sürümü:

Bu kod ne yapar:

  • bir yazımız olup olmadığını kontrol eder, eğer varsa döngüyü başlatır ve yazı başlığını görüntüler
  • get_post_meta işlevine, o anki yazının ID numarasını ve özel alan adını ileterek, screenshot_url özel alanının içeriğini alır
  • Çünkü biz bir şablon dosyasında, bu yazının hangi ekran görüntüsü URL'sinin içerdiğini bulmak amacıyla kısa kodumuzu ayrıştırmak için do_shortcode işlevini kullandık
  • sonra yazı içeriğini görüntüledik ve döngüyü sonlandırdık

Adım 5 Döngü Testi

Ekran görüntüsü için özel alana http://www.honda.com url'sini girerek, Honda Accord başlıklı bir yazı oluşturduğunuzda, yeni döngü yapınızı kullandığınızda, buna benzer bir şey görmelisiniz:


Sonuç

Eğer bir yazının, ekran görüntüsü için URL değeri yoksa, sert bir uyarı iletisi yerine, varsayılan olarak ayarlanmış bir görüntüyü gösterebilirsiniz.

Ekran görüntüsü oluşturucusu olarak WordPress kullanmak istemiyorsanız veya daha fazlasına ihtiyacınız varsa, http://www.shrinktheweb.com benzeri bir ekran görüntüsü servisinin ücretsiz seçeneğini kullanabilirsiniz. Herhangi bir ekran görüntüsü hizmeti için, bu eğitimde kullanılan teknikleri uygulayabilirsiniz.

Hatırlanması gerekenler:

  • oluşturulmuş ekran görüntülerini almak (genellikle) birkaç saniye sürer, bu yüzden sayfayı yenileyin
  • kodlanmış URL'yi ekran görüntüsü servisine gönderin
  • URL'lerinizi http:// ile başlatın
  • eğer ekran görüntüleri için daha fazla beklentiniz varsa, ticari bir servis kullanın
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.