Jak tworzyć zautomatyzowane zrzuty ekranu stron internetowych w WordPress

Robienie zrzutów ekranu do samouczka może być niekończącym się zadaniem. Musisz przechwycić, przyciąć, opisać i przesłać każdy obraz, powtarzając proces w kółko.

Znamy tę walkę aż za dobrze z tworzenia własnych przewodników tutaj na WPBeginner. To ogromny pożeracz czasu, który może naprawdę spowolnić Twój przepływ pracy przy tworzeniu treści.

Dobra wiadomość jest taka, że możesz zautomatyzować cały ten proces. Nie tylko oszczędza to cenny czas, ale także pomaga utrzymać profesjonalny i spójny wygląd Twojej witryny.

W tym artykule pokażemy Ci, jak łatwo tworzyć zautomatyzowane zrzuty ekranu witryn w WordPress.

Dlaczego tworzyć zautomatyzowane zrzuty ekranu stron internetowych w WordPress?

Jeśli masz witrynę WordPress, możesz tworzyć i dodawać zautomatyzowane zrzuty ekranu witryny do swoich postów, aby dać potencjalnym czytelnikom szybki sposób na zobaczenie, o czym jest Twoja treść.

Może to zwiększyć zaangażowanie użytkowników i przyczynić się do SEO Twojej witryny. Istotne, wysokiej jakości obrazy pomagają wyszukiwarkom lepiej zrozumieć Twoje treści i mogą poprawić sygnały zaangażowania odwiedzających, takie jak czas spędzony na stronie.

Podobnie możesz użyć zautomatyzowanych zrzutów ekranu stron internetowych do stworzenia wizualnej kopii zapasowej swojej witryny przed aktualizacją motywu lub wprowadzeniem innych zmian. Może to pomóc w porównaniu i zobaczeniu różnicy między nowymi i starymi stylami Twojej witryny.

Zautomatyzowane zrzuty ekranu mogą również porównywać różne usługi lub strony internetowe, prowadzić czytelnika przez samouczek krok po kroku i śledzić postępy witryny w czasie.

Mając to na uwadze, przyjrzyjmy się, jak łatwo tworzyć zautomatyzowane zrzuty ekranu stron internetowych w WordPress:

• Metoda 1: Twórz automatyczne zrzuty ekranu witryn internetowych w WordPress za pomocą wtyczki
• Metoda 2: Twórz zautomatyzowane zrzuty ekranu, dodając kod do WordPressa
• Bonus: Rób zrzuty ekranu ręcznie dla swojej witryny
• Najczęściej zadawane pytania
• Dodatkowe zasoby

Metoda 1: Twórz automatyczne zrzuty ekranu witryn internetowych w WordPress za pomocą wtyczki

Ta metoda jest łatwiejsza i dlatego zalecana dla początkujących i użytkowników, którzy nie chcą zajmować się kodem.

Najpierw musisz zainstalować i aktywować wtyczkę Browser Screenshots. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku jak zainstalować wtyczkę WordPress.

Ważne: Należy pamiętać, że w momencie pisania tej recenzji wtyczka ta nie była aktualizowana od dłuższego czasu. Chociaż może nadal działać, może stanowić ryzyko związane z kompatybilnością lub bezpieczeństwem. Zalecamy przetestowanie jej najpierw na stronie stagingowej i zawsze upewnij się, że masz pełną kopia zapasową WordPressa przed jej zainstalowaniem.

Po aktywacji wtyczka będzie działać od razu i nie ma żadnych ustawień do skonfigurowania.

Teraz po prostu odwiedź stronę lub wpis, do którego chcesz dodać zautomatyzowany zrzut ekranu strony internetowej, z paska bocznego administracji WordPress.

Tutaj kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu, aby otworzyć menu bloków. Następnie dodaj blok „Zrzuty przeglądarki” w edytorze.

Po wykonaniu tej czynności dodaj adres URL strony internetowej, dla której chcesz uzyskać zautomatyzowany zrzut ekranu, i kliknij przycisk „Załaduj obraz”.

Wtyczka automatycznie doda teraz zrzut ekranu wybranej przez Ciebie strony internetowej. Możesz teraz dodać tekst alternatywny dla obrazu i zmienić jego szerokość i wysokość z panelu bloku po prawej stronie.

Przełączenie przełącznika „Użyj linku” w panelu pozwala dodać link do zrzutu ekranu, który kieruje do strony internetowej.

Możesz również przełączyć przełącznik „Link do bieżącego posta”, jeśli chcesz dodać link do posta do zrzutu ekranu.

Na koniec kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać swoje ustawienia.

Możesz teraz odwiedzić swoją witrynę WordPress, aby zobaczyć zautomatyzowany zrzut ekranu.

Uwaga: Wtyczka Browser Shots używa API mshots WordPress.com do generowania zrzutów ekranu w locie. Te obrazy 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 a WordPress.org.

Metoda 2: Twórz zautomatyzowane zrzuty ekranu, dodając kod do WordPressa

Ta metoda wymaga dodania kodu do plików WordPress. Aby tworzyć zautomatyzowane zrzuty ekranu, musisz dodać niestandardowy kod do pliku functions.php swojego motywu.

Pamiętaj jednak, że najmniejszy błąd w kodzie może zepsuć Twoją witrynę i uczynić ją niedostępną.

Dlatego polecamy używanie WPCode. Jest to najlepsza wtyczka fragmentów kodu WordPress na rynku, która sprawia, że dodawanie niestandardowego kodu jest bardzo bezpieczne i łatwe.

Wskazówka eksperta: W WPBeginner używamy WPCode do zarządzania wszystkimi niestandardowymi fragmentami kodu w naszym portfolio stron internetowych. Pozwala to naszemu zespołowi programistów bezpiecznie dodawać i organizować kod bez konieczności bezpośredniej edycji pliku functions.php motywu.

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź na stronę Fragmenty kodu » + Dodaj fragment z panelu administracyjnego WordPress.

Gdy już tam będziesz, kliknij przycisk „Użyj fragmentu” w opcji „Dodaj własny kod (nowy fragment)”.

Zostaniesz teraz przeniesiony na stronę „Utwórz niestandardowy fragment”, gdzie możesz zacząć od wpisania nazwy swojego fragmentu. Nazwa może być dowolna, która pomoże Ci zidentyfikować kod.

Następnie wybierz „Fragment PHP” jako typ kodu z menu rozwijanego po prawej stronie.

Następnie po prostu skopiuj i wklej poniższy kod do pola „Podgląd kodu”:

function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://014.leahstevensyj.workers.dev',
"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 Mshots WordPress.com do generowania zrzutów ekranu w locie.

Teraz możesz dodać adres URL witryny, której zautomatyzowane zrzuty ekranu chcesz zrobić, obok linii "url" =$gt; w kodzie.

Możesz również dodać preferowaną szerokość i wysokość 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 aktywacji.

Na koniec przewiń stronę z powrotem do góry i przełącz przełącznik „Nieaktywny” na „Aktywny”.

Następnie kliknij przycisk „Zapisz fragment”, aby zapisać ustawienia i aktywować fragment.

Teraz, aby wyświetlić zrzut ekranu witryny w swoich postach i stronach WordPress, musisz wprowadzić krótki kod w następujący sposób:

[screen url="http://wpbeginner.com" alt="WPBeginner"]

Możesz zastąpić pola URL i Alt własnymi wartościami.

Najpierw otwórz stronę/wpis w edytorze bloków z panelu administracyjnego WordPress i kliknij przycisk „Dodaj blok” (+).

Stąd dodaj blok „Krótki kod” do strony/wpisu. Następnie dodaj powyższy krótki kod i zastąp go własnymi wartościami.

Na koniec kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby zapisać swoje ustawienia.

Teraz odwiedź swoją witrynę WordPress, aby zobaczyć zautomatyzowany zrzut ekranu w akcji.

Bonus: Rób zrzuty ekranu ręcznie dla swojej witryny

Jeśli nie chcesz używać zautomatyzowanych zrzutów ekranu, możesz robić zrzuty ekranu ręcznie za pomocą różnych narzędzi, takich jak Droplr.

Daje to większą swobodę wyboru konkretnego obszaru dla obrazu w porównaniu do zautomatyzowanych zrzutów ekranu. Ponadto możesz edytować te obrazy w Adobe Photoshop i dodawać do nich inne elementy, takie jak strzałki lub czerwone ramki.

Ta funkcja nie jest dostępna dla zautomatyzowanych zrzutów ekranu, gdzie wtyczki lub kod automatycznie pobierają obraz.

Aby zrobić zrzut ekranu za pomocą Droplr, musisz najpierw zainstalować aplikację na swoim komputerze. Po zainstalowaniu kliknij ikonę Droplr na pasku zadań Windows lub Mac i wybierz opcję „Zrzut ekranu”.

Następnie możesz wybrać obszar, z którego chcesz zrobić zrzut ekranu.

Droplr otworzy następnie ten obraz w przeglądarce, gdzie możesz go pobrać lub udostępnić link innym. Więcej informacji znajdziesz w naszym poradniku jak zrobić zrzut ekranu w WordPressie.

Najczęściej zadawane pytania

Oto niektóre z najczęściej zadawanych pytań dotyczących tworzenia zautomatyzowanych zrzutów ekranu w WordPress.

Czy zautomatyzowane zrzuty ekranu są tak dobre jak ręczne?

To zależy od Twoich potrzeb. Automatyczne zrzuty ekranu są doskonałe pod względem szybkości i spójności, ale ręczne zrzuty ekranu dają większą kontrolę. W przypadku ręcznych przechwytywań możesz wybrać konkretne obszary, dodać adnotacje, takie jak strzałki lub tekst, i zoptymalizować obraz przed przesłaniem.

Czy automatyczne zrzuty ekranu spowolnią moją stronę internetową?

Nie, nie powinny wpływać na wydajność Twojej witryny. Metody opisane w tym artykule wykorzystują zewnętrzną usługę z WordPress.com do generowania obrazów. Oznacza to, że obrazy są ładowane z ich serwerów, a nie Twoich, co zapobiega dodatkowemu obciążeniu hostingu.

Czy mogę dostosować wygląd automatycznych zrzutów ekranu?

Personalizacja jest ograniczona. Zazwyczaj można zdefiniować szerokość i wysokość zrzutu ekranu. Nie można jednak dodawać adnotacji, efektów ani przycinać konkretnej części strony, tak jak w przypadku ręcznego narzędzia do edycji zrzutów ekranu.

Czy zrzuty ekranu są zapisywane w mojej Bibliotece Mediów WordPress?

Nie, zrzuty ekranu są generowane na bieżąco i nie są przechowywane w Twojej Bibliotece Mediów. Pomaga to zaoszczędzić miejsce na koncie hostingowym, ponieważ obrazy są serwowane bezpośrednio z serwerów WordPress.com.

Dlaczego mój zautomatyzowany zrzut ekranu się nie pojawia?

Usługa WordPress.com, która generuje te zrzuty ekranu, świetnie działa dla stron internetowych na żywo i publicznych. Jednak może nie być w stanie przechwycić zrzutów ekranu stron internetowych znajdujących się na lokalnym komputerze (localhost), chronionych hasłem lub za pewnymi zaporami sieciowymi. Może również nie renderować idealnie stron, które używają złożonych animacji lub wymagają interakcji użytkownika do wyświetlania treści.

Dodatkowe zasoby

Teraz, gdy wiesz, jak automatyzować zrzuty ekranu witryn internetowych, możesz również zapoznać się z innymi pomocnymi przewodnikami:

• Przewodnik dla początkujących po SEO obrazów – Dowiedz się, jak prawidłowo optymalizować obrazy dla wyszukiwarek, aby uzyskać więcej ruchu na swojej stronie.
• Narzędzia do tworzenia lepszych obrazów dla Twoich postów na blogu – Sprawdź nasze eksperckie propozycje najlepszych narzędzi do tworzenia bardziej angażujących obrazów dla Twoich artykułów.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.