WordPress yazılarınıza veya sayfalarınıza sık sık web sitesi ekran görüntüleri ekliyorsanız, işlemi otomatikleştirmek ekran görüntülerini manuel olarak yakalamak için harcadığınız zamandan tasarruf etmenizi sağlayacaktır.
WPBeginner’da, okuyucularımıza etkili bir şekilde rehberlik etmek için düzenli olarak ekran görüntüleri oluşturuyor ve makalelerimize dahil ediyoruz. Ekran görüntüleri oluşturma, düzenleme ve otomatikleştirme konusunda 16 yılı aşkın deneyimimizle, net görüntüler oluşturmaya yönelik en iyi uygulamalar konusunda güçlü bir anlayış geliştirdik.
Bu deneyim bize, iyi hazırlanmış ekran görüntülerinin okuyucunun içeriğimizi anlaması ve içeriğimizle etkileşimini geliştirmede ne kadar önemli olduğunu öğretti.
Bu makalede, WordPress’te otomatik web sitesi ekran görüntülerini nasıl kolayca oluşturacağınızı göstereceğiz.
Neden WordPress’te Otomatik Web Sitesi Ekran Görüntüleri Oluşturmalısınız?
Bir WordPress web siteniz varsa, potansiyel okuyuculara içeriğinizin ne hakkında olduğunu hızlı bir şekilde görmelerini sağlamak için otomatik site ekran görüntüleri oluşturmak ve yayınlarınıza eklemek isteyebilirsiniz.
Arama motorları içeriğinizi anlamak ve dizine eklemek için genellikle görselleri ve ekran görüntülerini kullandığından, bu etkileşimi artırabilir ve hatta web sitesi SEO’sunu iyileştirmeye yardımcı olabilir.
Benzer şekilde, bir temayı güncellemeden veya başka bir değişiklik yapmadan önce sitenizin görsel bir yedeğini oluşturmak için otomatik web sitesi ekran görüntülerini kullanabilirsiniz. Bu, web sitenizin yeni ve eski stilleri arasındaki farkı karşılaştırmanıza ve görmenize yardımcı olabilir.
Otomatik ekran görüntüleri ayrıca farklı hizmetleri veya web sitelerini karşılaştırabilir, okuyucunuza adım adım öğretici bir rehberlik edebilir ve web sitesinin zaman içindeki ilerlemesini izleyebilir.
Bununla birlikte, WordPress’te otomatik web sitesi ekran görüntülerinin nasıl kolayca oluşturulacağına bir göz atalım:
Yöntem 1: Bir Eklenti Kullanarak WordPress’te Otomatik Web Sitesi Ekran Görüntüleri Oluşturun
Bu yöntem daha kolaydır ve bu nedenle yeni başlayanlar ve kodla uğraşmak istemeyen kullanıcılar için önerilir.
İlk olarak, Browser Screenshots eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından, eklenti kutudan çıkar çıkmaz çalışacaktır ve yapılandırılması gereken herhangi bir ayar yoktur.
Şimdi, WordPress yönetici kenar çubuğundan otomatik bir web sitesi ekran görüntüsü eklemek istediğiniz bir sayfayı veya yazıyı ziyaret edin.
Burada, blok menüsünü açmak için ekranın sol üst köşesindeki ‘Blok Ekle’ (+) düğmesine tıklayın. Ardından, düzenleyiciye ‘Tarayıcı Çekimleri’ bloğunu ekleyin.
Bunu yaptıktan sonra, otomatik ekran görüntüsü almak istediğiniz web sitesinin URL’sini ekleyin ve ‘Görüntü Yükle’ düğmesine tıklayın.
Eklenti artık seçtiğiniz web sitesi için otomatik olarak bir ekran görüntüsü ekleyecektir. Artık görüntü için bir alt metin ekleyebilir ve sağdaki blok panelinden görüntünün genişliğini ve yüksekliğini değiştirebilirsiniz.
Paneldeki ‘Bağlantı kullan’ anahtarını değiştirmek, ekran görüntüsüne sizi web sitesine yönlendiren bir bağlantı eklemenize olanak tanır.
Ekran görüntüsüne gönderi bağlantısını eklemek istiyorsanız ‘Geçerli gönderiye bağlantı ver’ anahtarını da değiştirebilirsiniz.
Son olarak, ayarlarınızı kaydetmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.
Artık otomatik ekran görüntüsünü görüntülemek için WordPress sitenizi ziyaret edebilirsiniz.
Not: Browser Shots eklentisi, anında ekran görüntüleri oluşturmak için WordPress.com’un mshots API’sini kullanır. Bu görüntüler WordPress medya kitaplığınızda depolanmaz. Doğrudan WordPress.com sunucularından sunulurlar. WordPress.com ve WordPress.org arasındaki farkla ilgili kılavuzumuza bakın.
Yöntem 2: WordPress’e Kod Ekleyerek Otomatik Ekran Görüntüleri Oluşturun
Bu yöntem WordPress dosyalarınıza kod eklemenizi gerektirir. Otomatik ekran görüntüleri oluşturmak için temanızın functions.php dosyasına özel kod eklemeniz gerekir.
Ancak, koddaki en küçük hatanın sitenizi bozabileceğini ve erişilemez hale getirebileceğini unutmayın.
Bu yüzden WPCode kullanmanızı öneriyoruz. Özel kod eklemeyi süper güvenli ve kolay hale getiren piyasadaki en iyi WordPress kod parçacıkları eklentisidir.
İlk olarak, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından WordPress kontrol panelinden Kod Parçacıkları ” + Parçacık Ekle sayfasını ziyaret edin.
Buraya geldiğinizde, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘Snippet Kullan’ düğmesine tıklayın.
Şimdi ‘Özel Snippet Oluştur’ sayfasına yönlendirileceksiniz ve burada snippet’iniz için bir ad yazarak başlayabilirsiniz. İsim, kodu tanımlamanıza yardımcı olacak herhangi bir şey olabilir.
Ardından, sağdaki açılır menüden kod türü olarak ‘PHP Snippet’i seçin.
Bundan sonra, aşağıdaki kodu kopyalayıp ‘Kod Önizleme’ kutusuna yapıştırmanız yeterlidir:
function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://www.wpbeginner.com',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wpb_screenshots");
Daha önce bahsettiğimiz eklentiye benzer şekilde, bu kod da anında ekran görüntüleri oluşturmak için WordPress.com Mshots API’sini kullanır.
Şimdi, koddaki "url" =$gt; satırının yanına otomatik ekran görüntülerini almak istediğiniz web sitesinin URL’sini ekleyebilirsiniz.
Koddaki "w" => ve "h"=> satırlarının yanına ekran görüntüleri için tercih ettiğiniz genişlik ve yüksekliği de ekleyebilirsiniz.
Ardından, ‘Ekleme’ bölümüne gidin ve ‘Otomatik Ekleme’ modunu seçin.
Kod artık etkinleştirildiğinde otomatik olarak yürütülecektir.
Son olarak, sayfanın en üstüne geri gidin ve ‘Etkin Değil’ anahtarını ‘Etkin’ olarak değiştirin.
Ardından, ayarlarınızı kaydetmek ve snippet’i etkinleştirmek için ‘Snippet’i Kaydet’ düğmesine tıklayın.
Şimdi, WordPress yazılarınızda ve sayfalarınızda bir web sitesi ekran görüntüsü görüntülemek için kısa kodu aşağıdaki gibi girmeniz gerekecektir:
[screen url="http://wpbeginner.com" alt="WPBeginner"]
URL ve Alt alanlarını kendi değerlerinizle değiştirebilirsiniz.
İlk olarak, WordPress panosundan blok editöründe sayfayı / yazıyı açın ve ‘Blok Ekle’ (+) düğmesine tıklayın.
Buradan, ‘Kısa Kod’ bloğunu sayfaya / gönderiye ekleyin. Ardından yukarıdaki kısa kodu ekleyin ve kendi değerlerinizle değiştirin.
Son olarak, ayarlarınızı kaydetmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.
Şimdi, otomatik ekran görüntüsünü çalışırken görmek için WordPress sitenizi ziyaret edin.
Bonus: Web Siteniz İçin Manuel Olarak Ekran Görüntüleri Alın
Otomatik ekran görüntülerini kullanmak istemiyorsanız, Droplr gibi farklı araçlarla ekran görüntülerini manuel olarak alabilirsiniz.
Bu, otomatik ekran görüntülerine kıyasla görüntü için belirli bir alanı seçme konusunda size daha fazla özgürlük sağlar. Ayrıca, bu görüntüleri Adobe Photoshop ‘ta düzenleyebilir ve bunlara oklar veya kırmızı kutular gibi başka öğeler ekleyebilirsiniz.
Bu özellik, eklentilerin veya kodun görüntüyü sizin için otomatik olarak aldığı otomatik ekran görüntüleri için kullanılamaz.
Droplr ile ekran görüntüsü almak için öncelikle uygulamayı bilgisayarınıza yüklemeniz gerekir. Bunu yaptıktan sonra, Windows veya Mac görev çubuğundaki Droplr simgesine tıklayın ve ‘Ekran Görüntüsü’ seçeneğini seçin.
Ardından, ekran görüntüsünü almak istediğiniz alanı seçebilirsiniz.
Droplr daha sonra bu görüntüyü indirebileceğiniz veya bağlantıyı başkalarıyla paylaşabileceğiniz bir tarayıcıda açacaktır. Daha fazla bilgi için WordPress’te nasıl ekran görüntüsü alınacağına ilişkin eğitimimize bakın.
Bu makalenin WordPress’te otomatik web sitesi ekran görüntülerinin nasıl oluşturulacağını öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca yeni başlayanlar için görsel SEO kılavuzumuza ve blog yazılarınız için daha iyi görseller oluşturmaya yönelik en iyi araçlar için uzman 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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Samuel Kaffy
Pls, how can I make the screenshots downloadable as an image file?
WPBeginner Support
You would need to reach out to the plugin’s support for adding that functionality
Yönetici
Nigel Billam
I’ve used this plugin but it stops on the third use of the short code and reports ‘too many requests’ – i was hoping to display 45 URLs. Do you have any suggestions to avoid this?
WPBeginner Support
You would want to reach out to the plugin’s support if you haven’t already for what options they have available for avoiding that issue.
Yönetici
Cory Goodwin
Does this browser shot plugin check for updates to the site, or do you have to manually redo to get the latest look of the target website? Thanks:)
WPBeginner Support
You would want to reach out to the plugin’s support for the current refresh rate
Yönetici
Karin
Your code is just what I was looking for. The only thing is that I want the url not prefilled in the code but generated from a custom field ‘wpcf_websitelink’.
How can I add the code to get the content from the field.
So this line
“url” => ‘https://www.wpbeginner.com’,
should have something to get the content of the field wpcf_websitelink in stead of the wpbeginner.com link
WPBeginner Support
If you are using a plugin to create that custom field then you would want to reach out to the support for that plugin for how to access that information and replace the url value with what they tell you.
Yönetici
Tien Le
Thank you so much <3
Now i can make more image from capture screen image
Steve Renow
This is a wonderfully simple plugin to use. Great job! Is there any way to crop the images? Some sites show with the cookie warning t the top or bottom and it would be good to be able to crop that off.
Daniel
Where do the screenshot get saved too?
WPBeginner Support
These images are not stored in your WordPress media library. They are served directly from WordPress.com servers.
Yönetici
Bernd
Is it possible to get screenshots with https ?
Dumitru Brinzan
Helpful tutorial and information, but it feels a little incomplete.
If it contained info on how to save the images to the library then it would be perfect
Annapurna
Did you get how to do this?
Damith
It is possible to save screenshot in media library and make that as featured image. Thanks.
Obeng blankson
Great info. I will surely test the plugin on my website to actually have a feel of it.
Ankit Agarwal
With any of these methods, what will be the side effect on the speed of the website? As a plugin, there will be some addition to load time. If the images are not stored on the media library, there will again be some addition to website load times.
So from the methods given, which one is recommended considering website load speed?