Cara Mengambil Screenshot Browser Secara Otomatis dan Menampilkannya di WordPress

Gambar dan tangkapan layar adalah elemen kunci di blog WordPress mana pun. Secara khusus, tangkapan layar memungkinkan Anda untuk menyoroti aspek-aspek kunci dari halaman lain. Namun, bisa jadi merepotkan untuk mengambil tangkapan layar peramban yang sempurna dan menambahkannya ke pos Anda. Meskipun Anda dapat menyelesaikan pekerjaan tergantung pada Sistem Operasi (OS) Anda, mengambil tangkapan layar secara konsisten adalah sebuah tantangan.

Masukkan plugin Tangkapan Layar Browser. Ini memungkinkan Anda mengambil tangkapan layar situs web apa pun, bahkan tanpa meninggalkan editor WordPress. Jika telinga Anda tertarik pada hal ini, Anda mungkin ingin terus membaca.

Mari kita periksa cara kerjanya!

Berlangganan Saluran Youtube Kami

Pengantar Plugin Tangkapan Layar Browser

Tangkapan Layar Browser bisa dibilang merupakan plugin khusus yang layak mendapat tempat di situs web Anda. Ini memungkinkan Anda untuk mengambil tangkapan layar browser dinamis dari halaman mana pun tanpa meninggalkan editor WordPress. Ini berlaku untuk Editor Klasik dan Blok, tergantung pada opsi pilihan Anda. Ini berbeda dengan solusi asli OS, yang mengharuskan Anda membuka jendela browser baru dan mengoptimalkan gambar Anda lebih jauh, di luar platform.

Jika Anda menggunakan Editor Klasik, Screenshot Browser memungkinkan Anda menggunakan kode pendek khusus untuk menghasilkan bidikan yang Anda inginkan. Anda dapat menambahkan beberapa tangkapan layar di halaman atau pos mana pun, dan hal yang sama berlaku untuk Editor Blok.

Karena plugin menghasilkan tangkapan layar secara dinamis, plugin ini sempurna untuk situasi di mana Anda tidak ingin menggunakan foto usang untuk konten Anda. Jika Anda memiliki halaman atau postingan yang menyertakan kode pendek atau blok Tangkapan Layar Browser, pengunjung akan melihat tangkapan layar waktu nyata. Ini adalah proposisi yang menggiurkan untuk jenis konten tertentu.

Terlepas dari pendekatan mana yang Anda gunakan, plugin juga memungkinkan Anda untuk menyesuaikan resolusi tangkapan layar browser yang diambil. Anda juga dapat menambahkan teks alternatif dan teks ke gambar Anda, serta kelas CSS khusus.

Namun, penting untuk dipahami bahwa plugin ini hanya mengambil tangkapan layar browser 'paruh atas'. Ini berarti area di mana Anda perlu menggulir tidak akan ditampilkan. Seberapa besar area ini akan bergantung pada parameter yang Anda konfigurasikan untuk setiap tangkapan layar browser, dan Anda akan mempelajari cara melakukannya nanti.

Fitur Utama:

• Gunakan kode pendek atau blok untuk mengambil bidikan khusus dari situs web apa pun yang ada di jendela browser Anda.
• Tambahkan tangkapan layar browser dalam konten Anda tanpa harus mengambil atau mengunggahnya secara manual.
• Sesuaikan resolusi tangkapan layar browser Anda.
• Tambahkan kelas CSS khusus ke gambar yang dihasilkan plugin.
• Tambahkan tautan dan teks alternatif ke gambar Anda.

Harga: Gratis | Informasi Lebih Lanjut

Cara Menggunakan Plugin Screenshot Browser (2 Pendekatan)

Sekarang, Anda sudah tahu cara kerja plugin Screenshot Browser, jadi mari kita bahas cara menggunakannya. Kode pendek adalah bagian mendasar dari plugin, jadi mari kita lihat ini dulu.

1. Gunakan Kode Pendek untuk Menghasilkan Tangkapan Layar Peramban Dinamis

Plugin Browser Screenshots memungkinkan Anda menggunakan kode pendek khusus berikut untuk menghasilkan bidikan browser dinamis:

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

Kode pendek mencakup dua parameter dasar: lebar dan tinggi . Kedua parameter menggunakan nilai piksel, dan resolusi default yang digunakan plugin untuk mengambil bidikan adalah 600 x 400 . Tentu saja, Anda juga ingin menambahkan URL spesifik yang ingin Anda screenshot ke kode pendek juga.

Terlepas dari apakah Anda menggunakan Editor Blok atau Editor Klasik, kode pendek akan membuat tangkapan layar yang mirip dengan berikut ini:

Namun, Screenshot Browser juga memungkinkan Anda untuk mengatur beberapa parameter khusus. Selain lebar dan tinggi, itu termasuk yang berikut:

• Alt: Parameter ini memungkinkan Anda untuk mengatur teks alternatif untuk tangkapan layar Anda.
• Tautan: Anda dapat memilih tautan mana yang ditunjuk gambar menggunakan parameter ini (yang dapat berbeda dari tempat asal bidikan).
• Target: Parameter ini memungkinkan Anda untuk mengontrol apakah tautan gambar terbuka di jendela baru atau tidak.

Sebagai contoh, inilah tampilan kode pendek lengkap yang mencakup semua parameter:

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

Anda juga dapat menggunakan kode pendek untuk menambahkan teks secara manual:

[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]

Dalam kebanyakan kasus, dua parameter terpenting yang akan Anda gunakan adalah width dan height . Menggunakan nilai yang sama untuk semua tangkapan layar browser yang sering Anda ambil tidak akan memberikan hasil terbaik, jadi Anda perlu menyesuaikan parameter agar sesuai dengan konten.

2. Gunakan Blok untuk Menambahkan Tangkapan Layar ke Situs Web Anda

Jika Anda menggunakan Block Editor, plugin Browser Screenshots akan memberi Anda akses ke blok baru yang disebut Browser Shots :

Memilih Blokir akan meminta plugin untuk menanyakan situs web apa yang ingin Anda gunakan untuk menghasilkan tangkapan layar. Dalam contoh ini, kami menggunakan halaman beranda Amazon AS:

Setelah Anda mengklik Temukan Gambar , plugin akan 'mengambil' tangkapan layar dan menampilkannya di dalam Editor Blok:

Satu hal yang perlu diingat adalah bahwa plugin tidak dapat mengakses halaman pribadi atau masuk ke dalamnya untuk Anda. Untuk jenis tangkapan layar peramban itu, Anda harus melakukan pekerjaan kotor itu sendiri.

Pindah, di sebelah kanan tangkapan layar itu Anda dapat melihat tab Detail Blokir . Ini memungkinkan Anda untuk mengubah semua parameter yang telah kita bahas sebelumnya tanpa perlu menambahkan kode pendek khusus.

Memodifikasi lebar dan tinggi tangkapan layar browser Anda jauh lebih sederhana menggunakan Editor Blok. Ini karena editor memungkinkan Anda untuk memeriksa pratinjau dengan menekan tombol Segarkan Gambar di bawah parameter tinggi dan lebar:

Jika Anda membandingkan kedua contoh, Anda dapat melihat bagaimana perubahan resolusi memodifikasi area yang di-screenshot oleh plugin untuk Anda. Di luar ini, Anda juga dapat menambahkan tautan khusus ke tangkapan layar Anda, mengonfigurasi apakah tautan itu terbuka di tab baru atau tidak, dan mengatur kelas CSS khusus di sini.

Kesimpulan

Jika Anda secara teratur menyertakan tangkapan layar peramban dalam konten blog Anda, plugin Tangkapan Layar Peramban dapat menghemat banyak waktu Anda. Ini adalah plugin yang cukup khusus, tetapi jika Anda termasuk di antara kerumunan yang kami sebutkan, itu akan membuat pengeditan posting jauh lebih mudah.

Menggunakan Tangkapan Layar Browser, Anda dapat menambahkan tangkapan layar browser Anda menggunakan kode pendek sederhana atau Editor Blok. Untuk kode pendek, plugin menyertakan beberapa parameter yang memungkinkan Anda menyesuaikan tangkapan layar, seperti lebar, tinggi , dan bahkan alt (untuk teks alt).

Apakah Anda memiliki pertanyaan tentang cara menggunakan plugin Browser Screenshots? Mari kita bicara tentang mereka di bagian komentar di bawah!

Gambar thumbnail artikel oleh VectorMine / shutterstock.com