Chcesz tworzyć automatyczne zrzuty ekranu witryny internetowej na twojej witrynie WordPress?
Jeśli często dodajesz zrzuty ekranu witryny internetowej do swoich wpisów lub stron WordPress, automatyzacja procesu pozwoli Ci zaoszczędzić czas poświęcony na ręczne przechwytywanie zrzutów ekranu.
W tym artykule pokażemy, jak łatwo tworzyć automatyczne zrzuty ekranu witryny internetowej w WordPress.
Dlaczego warto tworzyć automatyczne zrzuty ekranu witryny internetowej w WordPress?
Jeśli posiadasz witrynę internetową WordPress, możesz utworzyć i dodać automatyczne zrzuty ekranu witryny do swoich wpisów, aby dać potencjalnym czytelnikom szybki sposób na sprawdzenie, czego dotyczy twoja treść.
Może to zwiększyć zaangażowanie, a nawet pomóc poprawić SEO witryny internetowej, ponieważ wyszukiwarki zazwyczaj używają obrazków i zrzutów ekranu, aby zrozumieć i zindeksować twoją treść.
Podobnie, możesz użyć automatycznych zrzutów ekranu witryny internetowej, aby utworzyć wizualną kopię zapasową twojej witryny przed aktualizacją motywu lub wprowadzeniem jakichkolwiek innych zmian. Może to pomóc w porównaniu i zobaczeniu różnicy między nowym i starym stylem twojej witryny internetowej.
Zautomatyzowane zrzuty ekranu mogą również porównywać różne usługi lub witryny internetowe, prowadzić twojego czytelnika przez poradnik krok po kroku i śledzić postępy witryny w czasie.
Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo tworzyć automatyczne zrzuty ekranu witryny internetowej w WordPress:
Metoda 1: Automatyczne tworzenie zrzutów ekranu witryny internetowej w WordPressie za pomocą wtyczki
Ta metoda jest łatwiejsza, a zatem zalecana dla początkujących i użytkowników, którzy nie chcą mieć do czynienia z kodem.
Najpierw należy zainstalować i włączyć wtyczkę Browser Screenshots. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu wtyczka będzie działać po wyjęciu z pudełka i nie ma żadnych ustawień do skonfigurowania.
Teraz wystarczy przejść na stronę lub wpis, w którym chcesz dodać automatyczny zrzut ekranu witryny z panelu bocznego administratora WordPress.
Kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu, aby otworzyć menu bloków. Następnie dodaj blok „Browser Shots” w edytorze.
Gdy już to zrobisz, dodaj adres URL witryny internetowej, dla której chcesz uzyskać automatyczny zrzut ekranu i kliknij przycisk „Wczytywanie obrazka”.
Wtyczka automatycznie doda teraz zrzut ekranu dla wybranej witryny internetowej. Możesz teraz dodać tekst alternatywny dla obrazka i zmienić jego szerokość i wysokość z panelu bloków po prawej stronie.
Przełączenie przełącznika” Użyj odnośnika” w panelu umożliwia dodanie odnośnika do zrzutu ekranu, który kieruje do witryny internetowej.
Możesz także przełączyć przełącznik „Link do obecnego, aktualnego wpisu”, jeśli chcesz dodać odnośnik do wpisu do zrzutu ekranu.
Na koniec kliknij przycisk „Aktualizuj” lub „Publikuj”, aby zapisać twoje ustawienia.
Możesz teraz przejść na twoją witrynę WordPress, aby zobaczyć automatyczny zrzut ekranu.
Uwaga: Wtyczka Browser Shots wykorzystuje interfejs API mshots WordPress.com do generowania zrzutów ekranu w locie. Te obrazki nie są przechowywane w twojej bibliotece multimediów WordPress. Są one serwowane bezpośrednio z serwerów WordPress.com. Zobacz nasz przewodnik na temat różnicy między WordPress.com i WordPress.org.
Metoda 2: Tworzenie automatycznych zrzutów ekranu poprzez dodanie kodu do WordPressa
Ta metoda wymaga dodania kodu do twoich plików WordPress. Aby tworzyć automatyczne zrzuty ekranu, musisz dodać własny kod do pliku functions. php twojego motywu.
Pamiętaj jednak, że najmniejszy błąd w kodzie może zepsuć twoją witrynę i uczynić ją niedostępną.
Dlatego zalecamy korzystanie z WPCode. Jest to najlepsza wtyczka do fragmentów kodu WordPress na rynku, która sprawia, że dodawanie własnego kodu jest bardzo bezpieczne i łatwe.
Najpierw należy zainstalować i włączyć wtyczkę WPCode. Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu, przejdź na stronę Fragmenty kodu ” + Dodaj fragment z kokpitu WordPress.
Gdy już się tam znajdziesz, kliknij przycisk „Use Snippet” pod opcją „Add Your Custom Code (New Snippet)”.
Zostaniesz przeniesiony na stronę „Create Custom Snippet”, gdzie możesz zacząć od wpisania rodzaju nazwy dla twojego fragmentu kodu. Nazwa może być dowolna, co pomoże zidentyfikować kod.
Następnie wybierz „Fragment kodu PHP” jako rodzaj kodu z rozwijanego menu po prawej stronie.
Następnie wystarczy skopiować i wkleić poniższy kod w polu „Podgląd kodu”:
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");
Podobnie jak wtyczka, o której wspomnieliśmy wcześniej, ten kod również wykorzystuje API WordPress.com Mshots do generowania zrzutów ekranu w locie.
Teraz możesz dodać adres URL witryny internetowej, której automatyczne zrzuty ekranu chcesz wykonać obok linii "url"=$gt; w kodzie.
Możesz również dodać twoją preferowaną szerokość i wysokość dla zrzutów ekranu obok linii " w" => i "h"=> w kodzie.
Następnie przewiń w dół do sekcji „Wstawianie” i wybierz tryb „Automatyczne wstawianie”.
Kod zostanie teraz automatycznie wykonany po włączaniu.
Na koniec przewiń z powrotem do góry strony i przełącz przełącznik „Nieaktywny” na „Aktywny”.
Następnie kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje ustawienia i włączyć fragment kodu.
Teraz, aby wyświetlić zrzut ekranu witryny internetowej w twoich wpisach i stronach WordPress, będziesz musiał wpisz krótki kod w następujący sposób:
[screen url="http://wpbeginner.com" alt="WPBeginner"]
Możesz zastąpić pola Adres URL i Alt twoimi własnymi wartościami.
Najpierw otwórz stronę/post w edytorze bloków z kokpitu WordPress i kliknij przycisk „Dodaj blok” (+).
Z tego miejsca dodaj blok „Krótki kod” do strony / wpisu. Następnie dodaj powyższy krótki kod i zastąp go twoimi wartościami.
Na koniec kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać twoje ustawienia.
Teraz przejdź na twoją witrynę WordPress, aby zobaczyć automatyczny zrzut ekranu w działaniu.
Bonus: Ręczne wykonywanie zrzutów ekranu dla twojej witryny internetowej
Jeśli nie chcesz korzystać z automatycznych zrzutów ekranu, możesz robić je ręcznie za pomocą różnych narzędzi, takich jak Droplr.
Daje to większą swobodę wyboru konkretnego obszaru dla obrazka w porównaniu do automatycznych zrzutów ekranu. Ponadto obrazy te można edytować w programie Adobe Photoshop i dodawać do nich inne elementy, takie jak strzałki lub czerwone ramki.
Funkcja ta nie jest dostępna dla automatycznych zrzutów ekranu, w przypadku których wtyczki lub kod automatycznie pobierają obrazek.
Aby wykonać zrzut ekranu za pomocą Droplr, musisz najpierw zainstalować aplikację na twoim komputerze. Gdy to zrobisz, po prostu kliknij ikonkę Droplr na pasku zadań Windows lub Mac i wybierz opcję „Zrzut ekranu”.
Następnie możesz wybrać obszar, w którym chcesz wykonać zrzut ekranu.
Droplr otworzy następnie ten obrazek w przeglądarce, skąd można go pobrać lub udostępnić odnośnik innym. Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem na temat robienia zrzutów ekranu w WordPress.
Mamy nadzieję, że ten artykuł pomógł ci nauczyć się tworzyć automatyczne zrzuty ekranu witryny internetowej w WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących na temat SEO obrazków i naszymi typami ekspertów dotyczącymi najlepszych narzędzi do tworzenia lepszych obrazków do twoich wpisów na blogu.
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 says
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 says
Pls, how can I make the screenshots downloadable as an image file?
WPBeginner Support says
You would need to reach out to the plugin’s support for adding that functionality
Administrator
Nigel Billam says
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 says
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.
Administrator
Cory Goodwin says
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 says
You would want to reach out to the plugin’s support for the current refresh rate
Administrator
Karin says
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 says
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.
Administrator
Tien Le says
Thank you so much <3
Now i can make more image from capture screen image
Steve Renow says
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 says
Where do the screenshot get saved too?
WPBeginner Support says
These images are not stored in your WordPress media library. They are served directly from WordPress.com servers.
Administrator
Bernd says
Is it possible to get screenshots with https ?
Dumitru Brinzan says
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 says
Did you get how to do this?
Damith says
It is possible to save screenshot in media library and make that as featured image. Thanks.
Obeng blankson says
Great info. I will surely test the plugin on my website to actually have a feel of it.
Ankit Agarwal says
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?