Zaufane samouczki WordPress, kiedy ich najbardziej potrzebujesz.
Przewodnik dla początkujących po WordPressie
Puchar WPB
25 milionów+
Witryny korzystające z naszych wtyczek
16+
Lata doświadczenia z WordPressem
3000+
Samouczki WordPress od ekspertów

Jak tworzyć zautomatyzowane zrzuty ekranu stron internetowych w WordPress

Ręczne aktualizowanie zrzutów ekranu witryny marnuje dużo czasu. Niezależnie od tego, czy tworzysz portfolio, katalog, czy recenzujesz oprogramowanie, ciągłe przechwytywanie, kadrowanie i przesyłanie może znacznie spowolnić tworzenie treści.

Odkryłem, że chociaż szczegółowe zrzuty ekranu z samouczków nadal wymagają osobistego podejścia, automatyzacja jest ogromną oszczędnością czasu w przypadku szybkich podglądów witryn. To klucz do utrzymania świeżości Twojej witryny bez niekończącego się ręcznego wysiłku.

W tym przewodniku pokażę Ci trzy niezawodne metody łatwego robienia automatycznych zrzutów ekranu witryn w WordPress.

Niezależnie od tego, czy chcesz wyświetlić zrzut ekranu dowolnej witryny, czy automatycznie generować miniatury dla swojego portfolio, te metody pomogą Ci utrzymać profesjonalną, zaktualizowaną witrynę.

Jak tworzyć zautomatyzowane zrzuty ekranu stron internetowych w WordPress

SKRÓT: Ten przewodnik pokazuje trzy sposoby automatyzacji zrzutów ekranu witryn w WordPress. Możesz użyć wtyczki Capture do profesjonalnych, natychmiastowych obrazów z elastycznymi opcjami dostosowywania lub użyć WPCode z darmowym API mShots dla bezpłatnego, podstawowego rozwiązania. Aby uzyskać pełną automatyzację i integrację z biblioteką multimediów, połącz Browse AI i Zapier, aby zapisywać zrzuty ekranu bezpośrednio w swojej witrynie.

Dlaczego tworzyć zautomatyzowane zrzuty ekranu stron internetowych w WordPress?

Jeśli masz witrynę WordPress, dodanie zrzutów ekranu do swoich postów daje czytelnikom szybki wizualny sposób na zobaczenie, o czym jest Twoja treść. Jednak ręczne robienie i kadrowanie tych obrazów dla kilkudziesięciu linków może zająć dużo czasu.

Zautomatyzowane zrzuty ekranu są idealnym rozwiązaniem dla:

  • Tworzenia portfolio projektowania stron internetowych
  • Tworzenia katalogu motywów
  • Pisania recenzji oprogramowania
  • Wykonywania testów wizualnych na własnych witrynach

Automatyzacja oszczędza czas i gwarantuje, że rozmiary obrazów pozostają idealnie spójne. Ponadto wiele z tych narzędzi pozwala łatwo automatycznie przechwycić zrzut ekranu całej strony, zamiast składać ręczne przechwyty.

Ta profesjonalna spójność zwiększa zaangażowanie użytkowników i przyczynia się do SEO Twojej witryny. Istotne, wysokiej jakości obrazy zatrzymują odwiedzających na Twojej stronie dłużej, co wysyła pozytywne sygnały do wyszukiwarek.

Podobnie, możesz użyć zautomatyzowanych zrzutów ekranu witryn, aby utworzyć wizualną kopię zapasową swojej witryny przed aktualizacją motywu lub wprowadzeniem znaczących zmian w projekcie. Ułatwia to porównanie nowych i starych stylów Twojej witryny obok siebie.

Korzyści z automatycznych zrzutów ekranu witryn
Kiedy trzymać się ręcznych zrzutów ekranu

Teraz ważne jest, aby wiedzieć, kiedy nie używać automatyzacji. Jeśli tworzysz instruktażowy samouczek krok po kroku, powinieneś trzymać się ręcznego robienia zrzutów ekranu.

Zautomatyzowane narzędzia nie mogą logować się do panelu administracyjnego WordPress, otwierać ukrytych menu rozwijanych ani dodawać precyzyjnych czerwonych ramek i strzałek, aby pokazać użytkownikowi dokładnie, gdzie kliknąć.

Na przykład, w WPBeginner, wszystkie nasze zrzuty ekranu samouczków backendowych robimy ręcznie. Następnie używamy dedykowanych aplikacji graficznych, takich jak Adobe Photoshop lub Affinity Studio, aby oczyścić obrazy, rozmyć poufne dane i dodać nasze charakterystyczne adnotacje.

Jednak w przypadku podglądów publicznych stron internetowych automatyzacja jest absolutnie najlepszym rozwiązaniem.

Teraz przyjrzyjmy się, jak łatwo tworzyć zautomatyzowane zrzuty ekranu stron internetowych w WordPress:


Metoda 1: Użyj wtyczki Capture do zrzutów ekranu i plików PDF

Jeśli chcesz pokazywać dynamicznie aktualizowane podglądy stron internetowych bez konieczności pisania własnego kodu, jest to najłatwiejsza metoda.

Dzięki dedykowanej wtyczce, takiej jak Capture, zrzuty ekranu są generowane automatycznie w tle. Jeśli docelowa strona internetowa zmieni swój wygląd, zrzut ekranu sam się zaktualizuje, aby dopasować się do nowego wyglądu.

Dodatkowo, ponieważ wtyczka zarządza plikami obrazów, nie zajmują one miejsca na Twoim własnym serwerze WordPress.

Chociaż istnieje wiele starszych wtyczek do zrzutów ekranu, większość z nich została porzucona. Z tego powodu gorąco polecam używanie aktywnie utrzymywanej wtyczki Capture do niezawodnego generowania tych profesjonalnych podglądów za pomocą prostego shortcode'u.

Krok 1. Zainstaluj i skonfiguruj wtyczkę Capture

Najpierw musisz zainstalować i aktywować wtyczkę Capture. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki musisz przejść do Ustawienia » Capture. Tutaj musisz kliknąć link „Konsola przechwytywania”, aby utworzyć bezpłatne konto i uzyskać klucz API.

Chociaż wymaga to dodatkowego kroku rejestracji, zapewnia to stabilność i niezawodność usługi w porównaniu do starszych, porzuconych wtyczek.

Wskazówka eksperta: Chociaż początkowa konfiguracja Capture jest bezpłatna, pamiętaj, że jej API często zawiera ograniczoną liczbę bezpłatnych kredytów. W przypadku intensywnego użytkowania, profesjonalnych stron portfolio lub przeglądów o dużej objętości, prawdopodobnie będziesz musiał przejść na płatny plan.

Strona ustawień wtyczki Capture

Poniżej znajdziesz sekcję Ustawienia domyślne . Domyślna szerokość i wysokość widoku (1200 × 800) doskonale nadają się do standardowych zrzutów ekranu na komputerach stacjonarnych.

Sugeruję jednak zmianę Domyślnego opóźnienia (sekundy) na 2 lub 3 sekundy. Wiele nowoczesnych stron internetowych ma ekrany ładowania, niestandardowe czcionki lub animacje. Dodanie niewielkiego opóźnienia daje docelowej stronie wystarczająco dużo czasu na pełne załadowanie przed zrobieniem zdjęcia przez wtyczkę.

Jak robić automatyczne zrzuty ekranu w WordPress za pomocą wtyczki Capture

Gdy będziesz zadowolony z konfiguracji, upewnij się, że kliknąłeś przycisk „Zapisz zmiany” .

Następnie gorąco polecam kliknięcie przycisku „Testuj połączenia” . Szybko sprawdza to, czy Twój klucz działa poprawnie, dzięki czemu unikniesz błędów w przyszłości.

Zapisywanie i testowanie ustawień wtyczki Capture
Krok 2. Utwórz zrzut ekranu za pomocą shortcode'u

Teraz możesz łatwo dodać zrzut ekranu do dowolnego wpisu lub strony za pomocą prostego shortcode'u. Po prostu wyszukaj blok Shortcode w edytorze bloków i wklej kod podobny do tego:

[capture_screenshot url="https://wpbeginner.com" vw=1200 vh=800 full=true]

Jak robić automatyczne zrzuty ekranu w WordPress za pomocą krótkiego kodu

Uwaga: Jeśli chcesz, aby zrzut ekranu miał określoną wysokość (vh), usuń parametr full=true. Użycie full=true nakazuje narzędziu przechwycenie całej długości strony internetowej, co spowoduje nadpisanie ustawień wysokości.

Jak pojawia się zrzut ekranu?

W przeciwieństwie do standardowego obrazu, który przesyłasz do swojej biblioteki mediów, te zautomatyzowane zrzuty ekranu są generowane natychmiast, gdy odwiedzający ładuje Twoją stronę.

Ponieważ działają jak „żywe okno” do docelowej strony internetowej, takie podejście jest niezwykle przydatne, jeśli prowadzisz katalog motywów, portfolio projektowania stron internetowych lub blog z recenzjami oprogramowania.

Możesz zagwarantować, że Twoi czytelnicy zawsze widzą najnowszą wersję docelowej strony internetowej, bez konieczności wymiany starych obrazów.

Dostosowywanie zrzutów ekranu

Wtyczka Capture jest niezwykle elastyczna. Możesz dodać dodatkowe parametry do shortcode, aby zmienić wygląd zrzutu ekranu:

  • Pełna strona: Użyj full=true, aby przechwycić całą długość strony.
  • Tryb ciemny: Użyj darkMode=true, aby przechwycić ciemną wersję strony internetowej.
  • Blokuj reklamy: Użyj blockAds=true, aby ukryć irytujące reklamy ze zrzutu ekranu.
  • Format obrazu: Użyj type="webp", aby upewnić się, że Twoje obrazy są w lekkim, nowoczesnym formacie dla szybszego ładowania.

Na przykład, jeśli chcesz uzyskać zrzut ekranu w trybie ciemnym, pełnej strony, w formacie WebP, Twój shortcode będzie wyglądał tak:

[capture_screenshot url="https://example.com" full=true darkMode=true type="webp"]

Ta metoda daje znacznie większą kontrolę niż podstawowe darmowe narzędzia. Jest idealna dla profesjonalnych stron z recenzjami i portfolio.

Wskazówka Pro dotycząca wyrównania obrazu: U niektórych użytkowników zautomatyzowany zrzut ekranu może być przesunięty do lewej krawędzi ekranu, ignorując normalne marginesy motywu. Najpierw dodaj blok Grupa do swojej strony, a następnie umieść w nim swój shortcode. Spowoduje to wymuszenie, aby obraz respektował standardowy układ motywu.


Metoda 2: Użyj WPCode + mShots (Darmowa opcja)

Jeśli chcesz uzyskać dokładnie te same dynamiczne, oszczędzające miejsce korzyści, co w Metodzie 1, ale wolisz całkowicie darmowe rozwiązanie bez tworzenia dodatkowych kont, ta metoda jest dla Ciebie.

Dodając niestandardowy shortcode do swojej witryny, możesz skorzystać z WordPress.com mShots API. Podobnie jak wtyczka Capture, mShots generuje obrazy na żywo natychmiast po załadowaniu strony i hostuje je zewnętrznie, oszczędzając miejsce na serwerze.

Krok 1: Dodaj fragment kodu za pomocą WPCode

Aby bezpiecznie dodać ten kod, gorąco polecam użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu WordPress na rynku. Pozwala ona na dodawanie niestandardowego kodu bez bezpośredniej edycji pliku functions.php Twojego motywu.

Najpierw zainstaluj i aktywuj darmową wtyczkę WPCode. Następnie przejdź do Fragmenty kodu » + Dodaj fragment w swoim panelu WordPress.

Dodawanie niestandardowego fragmentu kodu w WPCode

Wybierz „Dodaj własny kod (nowy fragment)”. Nadaj fragmentowi nazwę, na przykład „Zautomatyzowane zrzuty ekranu”, i upewnij się, że typ kodu jest ustawiony na „Fragment PHP”.

Następnie skopiuj i wklej poniższy bezpieczny kod do pola Podgląd kodu:

function wpb_automated_screenshots($atts) {
    $a = shortcode_atts( array(
        'url' => 'https://www.wpbeginner.com',
        'alt' => 'Website screenshot',
        'w'   => '600',
        'h'   => '450'
    ), $atts );

    $mshots_api = 'https://s.wordpress.com/mshots/v1/';
    $target_url = urlencode( $a['url'] );
    $width      = intval( $a['w'] );
    $height     = intval( $a['h'] );
    $alt_text   = esc_attr( $a['alt'] );

    $img_src = $mshots_api . $target_url . '?w=' . $width . '&h=' . $height;

    return '<img src="' . esc_url( $img_src ) . '" alt="' . $alt_text . '" />';
}
add_shortcode('automated_shot', 'wpb_automated_screenshots');
Jak robić automatyczne zrzuty ekranu w WordPress za pomocą WPCode

Przewiń w dół do sekcji Wstawianie i upewnij się, że jest ustawiona na „Automatyczne wstawianie”.

Następnie przełącz przełącznik u góry ekranu z „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment”.

Tworzenie fragmentu kodu do automatycznego zrzutu ekranu w WPCode
Krok 2. Utwórz zrzut ekranu za pomocą shortcode'u

Teraz, aby wyświetlić zautomatyzowany zrzut ekranu w swoich postach lub stronach WordPress, po prostu dodaj blok Krótki kod do edytora treści i wklej poniższy krótki kod:

[automated_shot url="https://example.com" alt="Przykładowa strona internetowa" w="800" h="600"]

Pamiętaj, aby zastąpić https://example.com rzeczywistym adresem URL witryny, którą chcesz przechwycić. Możesz również łatwo zmienić tekst alternatywny, szerokość i wysokość bezpośrednio w krótkim kodzie.

Dodawanie krótkiego kodu do dodania automatycznego zrzutu ekranu do wpisu

Jeśli docelowa witryna internetowa zaktualizuje swój wygląd, ale Twój zrzut ekranu nadal pokazuje starą wersję, interfejs API mShots może buforować obraz. Możesz łatwo wymusić wykonanie nowego zrzutu ekranu, dodając losową liczbę na końcu adresu URL, w następujący sposób: url="https://example.com/?v=1".

Wskazówka dotycząca wyrównania obrazu: Podobnie jak w Metodzie 1, jeśli zrzut ekranu ignoruje marginesy motywu i przesuwa się do lewej krawędzi ekranu, po prostu umieść krótki kod w bloku Grupa, aby naprawić układ.


Metoda 3: Użyj Browse AI + Zapier do automatyzacji bez obsługi

W przeciwieństwie do pierwszych dwóch metod, które wyświetlają podglądy na żywo hostowane zewnętrznie, ta metoda zapewnia prawdziwą automatyzację bez obsługi, fizycznie zapisując pliki bezpośrednio na Twojej stronie WordPress.

Użyjemy Browse AI do automatycznego przechwytywania zrzutów ekranu i Zapier do wysyłania ich bezpośrednio do Twojej Biblioteki Mediów. Daje to pełną kontrolę nad Twoimi obrazami.

Ponieważ zrzuty ekranu są zapisywane na Twoim własnym serwerze, będą ładować się natychmiast i pozostaną na Twojej stronie na stałe, nawet jeśli docelowa witryna internetowa zostanie wyłączona lub całkowicie zmieni swój wygląd.

Wskazówka: Zarówno Browse AI, jak i Zapier oferują darmowe plany. To świetna opcja do wypróbowania. Pamiętaj tylko, że te darmowe plany mają miesięczne limity zadań (Browse AI oferuje 50 miesięcznych kredytów, a Zapier 100 zadań miesięcznie), więc jeśli wykonujesz setki zrzutów ekranu miesięcznie, być może będziesz musiał przejść na płatny plan.

Krok 1: Utwórz robota do zrzutów ekranu w Browse AI

Najpierw przejdź do Browse AI i utwórz bezpłatne konto.

Po zalogowaniu kliknij przycisk „Zbuduj nowego robota” i wybierz opcję „Monitoruj zmiany na stronie”.

W Browse AI wybierz Monitoruj zmiany na stronie

Zostaniesz poproszony o podanie adresu URL witryny, którą chcesz przechwycić.

Po wprowadzeniu linku będziesz musiał kliknąć przycisk „Rozpocznij szkolenie robota”.

Tworzenie nowego robota monitorującego w Browse AI

Browse AI otworzy następnie nowe okno pokazujące tę witrynę na żywo.

Po prostu kliknij ikonę robota na ekranie, aby otworzyć menu i wybierz „Przechwyć zrzut ekranu”.

Zrób zrzut ekranu za pomocą Browse AI

Pojawi się małe menu z pytaniem, którą część strony chcesz przechwycić. Możesz wybrać „Cała strona”, jeśli chcesz zrzut ekranu od góry do dołu, lub „Widoczna część”, jeśli chcesz tylko górną sekcję witryny.

Następnie Browse AI poprosi Cię o nadanie nazwy zrzutowi ekranu. Możesz wpisać coś łatwego do zapamiętania, na przykład „Zrzut ekranu strony głównej” lub „Ceny konkurencji” i nacisnąć Enter.

Po zakończeniu kliknij fioletowy przycisk „Zakończ” na dole lewego panelu, aby zakończyć nagrywanie.

Kliknij przycisk Zakończ w Browse AI

Następnie Browse AI poprosi Cię o nadanie nazwy swojemu nowemu robotowi.

Wpisz coś łatwego do rozpoznania i kliknij przycisk „Zapisz”.

Zapisywanie robota Browse AI

Po zapisaniu możesz ustawić harmonogram.

Możesz na przykład powiedzieć robotowi, aby automatycznie odwiedzał witrynę i robił nowy zrzut ekranu co tydzień lub co miesiąc.

Jak często robot Browse AI powinien działać

Po zakończeniu upewnij się, że kliknąłeś przycisk „Zapisz”.

Krok 2: Przygotuj swoją witrynę WordPress

Zanim zbudujemy automatyzację, musimy zapewnić Zapierowi bezpieczny sposób komunikacji z Biblioteką multimediów Twojej witryny.

W nowej karcie przejdź do swojego pulpitu WordPress i zainstaluj oraz aktywuj darmowy wtyczkę Zapier for WordPress. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Gdy wtyczka będzie aktywna w Twojej witrynie, będziesz gotowy do połączenia Zapier z Twoją witryną WordPress.

Krok 3: Utwórz Zap w Zapier

Następnie musisz połączyć swojego robota z WordPress za pomocą Zapier.

Najpierw musisz zalogować się na swoje konto Zapier. Z głównego pulpitu kliknij przycisk „+ Utwórz” w lewym górnym menu i wybierz „Zapy” z menu rozwijanego.

twórz zapy w zapier

Po otwarciu kreatora Zapier wyświetli pole tekstowe z prośbą o opisanie przepływu pracy, który chcesz zbudować za pomocą AI. Ponieważ chcemy to skonfigurować precyzyjnie, możesz zignorować to polecenie.

Zamiast tego, spójrz tuż pod separatorem „lub” i kliknij bezpośrednio w pole „Wyzwalacz”, aby ręcznie zbudować automatyzację.

Jak robić automatyczne zrzuty ekranu w WordPress za pomocą Zapier

Pojawi się menu.

Wyszukaj i wybierz Browse AI jako swoją aplikację.

Wybierz wyzwalacz Browse AI w Zapier

Znajdź sekcję „Konto” na pasku bocznym i kliknij przycisk „Zaloguj się”, aby bezpiecznie połączyć swoje konto Browse AI.

Po połączeniu konta kliknij pole „Zdarzenie wyzwalające”. Nie musisz nic wpisywać w pole wyszukiwania! Po prostu spójrz tuż pod paskiem wyszukiwania i kliknij opcję „Nowe zadanie – Natychmiastowe”.

Dodawanie nowego zdarzenia Browse AI jako zdarzenia wyzwalającego w Zapier

Spowoduje to automatyczne wypełnienie zdarzenia wyzwalającego. Następnie kliknij przycisk „Kontynuuj”, aby przejść do następnego ekranu konfiguracji, gdzie Zapier poprosi o kilka szczegółów.

Najpierw wybierz swoje konto z listy rozwijanej „Zespół”. Po wykonaniu tej czynności pojawi się nowe pole, w którym możesz wybrać konkretnego „Robota”, którego wcześniej utworzyłeś.

Na koniec ustaw „Typ zdarzenia” na „Zadanie zakończone pomyślnie”, aby Zapier działał tylko wtedy, gdy zostanie wykonany dobry zrzut ekranu.

Konfiguracja ustawień wyzwalacza dla Browse AI w Zapier

Upewnij się, że kliknąłeś „Kontynuuj”, a następnie kliknij przycisk „Testuj wyzwalacz”. Jest to konieczny krok, ponieważ pobiera Twój ostatni zrzut ekranu testowego do Zapier, aby WordPress mógł go później użyć.

Gdy Twój test zakończy się sukcesem, kliknij drugie pole w swoim przepływie pracy (krok Akcja) i wyszukaj „WordPress” jako swoją aplikację.

Wybór WordPress jako akcji w Zapier

Ponieważ zainstalowałeś już wtyczkę w Kroku 2, połączenie Twojej witryny z Zapier jest proste.

Po prostu kliknij przycisk „Zaloguj się” w sekcji Konto i wprowadź swoje dane logowania do WordPressa, gdy pojawi się okno podręczne.

Połącz WordPress z Zapier, klikając przycisk Zaloguj się

Uwaga: Zapier wymaga aktywnej, publicznej witryny internetowej do połączenia. Jeśli tworzysz swoją witrynę WordPress na serwerze lokalnym (localhost), to połączenie nie powiedzie się, dopóki nie udostępnisz swojej witryny online.

Dodatkowo, jeśli używasz wtyczki zabezpieczającej WordPress, może być konieczne tymczasowe wyłączenie funkcji blokujących WordPress REST API lub hasła aplikacji, aby Zapier mógł się pomyślnie połączyć.

Po połączeniu Twojej witryny kliknij menu rozwijane „Zdarzenie akcji”.

Wyszukaj i wybierz opcję „Prześlij multimedia”, a następnie kliknij przycisk „Kontynuuj” na dole strony.

Wybór zdarzenia „Prześlij multimedia” dla akcji WordPress w Zapier

Teraz musisz poinformować WordPress, który plik przesłać. Kliknij przycisk „+” (Wstaw dane) po prawej stronie pola „Plik”. Spowoduje to otwarcie okna podręcznego z bardzo długą listą danych testowych, które Zapier właśnie pobrał z Browse AI.

Ponieważ lista jest tak długa, najłatwiejszym sposobem znalezienia odpowiedniego pliku jest użycie paska wyszukiwania u góry okna podręcznego. Wpisz „src”, aby przefiltrować opcje.

Poszukaj opcji kończącej się na „Screenshot Src” i wybierz ją. Może być konieczne kliknięcie linku „więcej”, aby zobaczyć pełną nazwę opcji.

Wybór adresu URL źródła zrzutu ekranu w akcji Zapier

Wskazówka: Jeśli spojrzysz na szary tekst obok nazwy pola, prawidłowa opcja pokaże bardzo długi link internetowy zawierający „amazonaws” w adresie URL.

Możesz również wypełnić pola Tytuł i Tekst alternatywny, jeśli chcesz, ale możesz bezpiecznie pozostawić wszystkie inne opcjonalne pola (takie jak Podpis czy Autor) puste.

Po zakończeniu kliknij „Kontynuuj”, a następnie kliknij przycisk „Testuj krok”.

Zapier magicznie pobierze zrzut ekranu z Browse AI i prześle go bezpośrednio do Twojej Biblioteki Mediów WordPress.

Jeśli test zakończy się sukcesem, nie zapomnij kliknąć przycisku Publikuj, aby Twój nowy Zap działał automatycznie w tle.

Publikowanie automatyzacji zrzutów ekranu w Zapier

Proces jest teraz całkowicie zautomatyzowany. Za każdym razem, gdy Browse AI przechwyci nowy obraz, automatycznie pojawi się on w Twojej Bibliotece » Multimedia w WordPress, gotowy do użycia w dowolnym poście lub stronie.

Wskazówka Pro: Ponieważ Metoda 3 zapisuje plik na Twoim własnym serwerze, gorąco polecam użycie wtyczki do kompresji obrazów WordPress, takiej jak Optimole lub EWWW Image Optimizer. Zapewnia to, że Twoje zautomatyzowane zrzuty ekranu nie zajmują zbyt dużo miejsca na dysku ani nie spowalniają Twojej witryny.

Bonus: Jak utrzymać spójne rozmiary zrzutów ekranu

Niezależnie od wybranej powyżej metody, będziesz musiał ustawić szerokość i wysokość dla swoich zautomatyzowanych obrazów. Aby Twój blog wyglądał schludnie i profesjonalnie, gorąco polecam użycie standardowego proporcji szerokoekranowej 16:9.

Większość motywów WordPress ma określoną maksymalną szerokość dla wpisów na blogu (na przykład 800 pikseli). Jeśli ustawisz wszystkie swoje zrzuty ekranu tak, aby pasowały do tej szerokości, stosując proporcje 16:9, wszystkie będą miały dokładnie tę samą wysokość.

Tworzy to pięknie jednolity wygląd, gdy użytkownicy przewijają Twój artykuł.

Aby dowiedzieć się, jakie liczby wpisać w narzędziu do robienia zrzutów ekranu, możesz użyć tej prostej matematyki:

  • Jeśli znasz docelową szerokość: Po prostu pomnóż swoją szerokość przez 9, a następnie podziel przez 16, aby znaleźć idealną wysokość.
  • Jeśli znasz docelową wysokość: Po prostu pomnóż swoją wysokość przez 16, a następnie podziel przez 9, aby znaleźć pasującą szerokość.
Jak obliczyć wymiary obrazu dla określonego współczynnika proporcji

Na przykład, jeśli obszar treści Twojego bloga ma szerokość 800 pikseli, pomnożyłbyś 800 przez 9, a następnie podzielił przez 16. Daje to idealnie dopasowaną wysokość 450.

Zatem po prostu wpisałbyś nowe liczby w parametrach swojego kodu skrótu, na przykład w="800" h="450".

Najczęściej zadawane pytania

Odpowiedziałem na całkiem sporo pytań dotyczących automatyzacji obrazów w witrynach internetowych. Oto niektóre z najczęstszych pytań, jakie ludzie zadają na temat tworzenia zautomatyzowanych zrzutów ekranu witryn.

1. Jak automatycznie zrobić zrzut ekranu całej strony internetowej w WordPress?

Aby automatycznie zrobić zrzut ekranu w WordPress, możesz użyć dedykowanej wtyczki do zrzutów ekranu WordPress, takiej jak Capture, zintegrować bezpłatne API obrazów, takie jak mShots WordPress.com, lub zbudować przepływ pracy automatyzacji za pomocą narzędzi takich jak Browse AI i Zapier.

Narzędzia te automatycznie pobierają publiczny adres URL docelowej witryny. W zależności od wybranej metody, natychmiast wyświetlą podgląd na żywo lub prześlą rzeczywisty plik obrazu bezpośrednio do Twojej Biblioteki Mediów WordPress.

2. Czy muszę płacić za tworzenie zautomatyzowanych zrzutów ekranu witryn w WordPress?

Nie, nie musisz płacić za generowanie zautomatyzowanych zrzutów ekranu. Możesz korzystać z całkowicie bezpłatnych metod, takich jak dodanie niestandardowego fragmentu kodu PHP za pomocą bezpłatnej wtyczki WPCode, aby połączyć się z bezpłatnym API mShots WordPress.com.

Dodatkowo, zewnętrzne platformy automatyzacji, takie jak Browse AI i Zapier, oferują bezpłatne plany, które pozwalają właścicielom witryn na przechwytywanie ograniczonej liczby zrzutów ekranu miesięcznie bez żadnych kosztów.

3. Czy mogę używać zautomatyzowanych narzędzi do robienia zrzutów ekranu na lokalnych, stagingowych lub prywatnych witrynach WordPress?

Nie, API do automatycznych zrzutów ekranu, takie jak mShots lub wtyczka Capture, wymaga działającego, publicznie dostępnego adresu URL witryny, aby działać. Te zewnętrzne narzędzia do zrzutów ekranu nie mogą uzyskać dostępu do witryn hostowanych lokalnie na komputerze osobistym (localhost).

Ponadto, zautomatyzowane narzędzia do robienia zrzutów ekranu nie mogą uzyskać dostępu do środowisk stagingowych WordPress, które są ukryte za hasłem, wtyczką trybu konserwacji lub zaporą sieciową.

4. Czy bezpieczne jest używanie zewnętrznego API do automatyzacji zrzutów ekranu witryn?

Tak, korzystanie z renomowanych API do zrzutów ekranu, takich jak mShots WordPress.com lub wtyczka Capture, jest generalnie bezpieczne dla treści publicznych. Te zewnętrzne usługi po prostu odwiedzają publiczny adres URL witryny i robią zdjęcie tego, co jest publicznie widoczne w Internecie.

Jednak właściciele witryn nigdy nie powinni używać narzędzi do automatycznego tworzenia zrzutów ekranu stron trzecich do przechwytywania prywatnych, zalogowanych stron pulpitu WordPress ani stron internetowych zawierających poufne dane osobowe.

5. Dlaczego mój automatyczny zrzut ekranu mShots WordPress.com pokazuje pustą stronę?

Interfejs API mShots WordPress.com może czasami wyświetlać pustą przestrzeń za pierwszym razem, gdy żądany jest określony adres URL witryny.

Dzieje się tak, ponieważ interfejs API mShots potrzebuje kilku sekund na wygenerowanie początkowego obrazu. Jeśli automatyczny zrzut ekranu jest pusty, odświeżenie strony WordPress zazwyczaj rozwiązuje problem. 

Ponieważ mShots buforuje również obrazy, możesz wymusić na interfejsie API wykonanie nowego zrzutu ekranu witryny, dodając losowy ciąg wersji na końcu docelowego adresu URL w swoim krótkim kodzie WordPress.

Dodatkowe zasoby do ulepszania treści wizualnych

Mam nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo tworzyć automatyczne zrzuty ekranu witryn w WordPress. Jeśli chcesz przenieść wydajność obrazów i multimediów swojej witryny na wyższy poziom, możesz również zapoznać się z tymi dodatkowymi zasobami:

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak finansowany jest WPBeginner, dlaczego to ważne i jak możesz nas wesprzeć. Oto nasz proces redakcyjny.

Ostateczny zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi – kolekcji produktów i zasobów związanych z WordPress, które powinien mieć każdy profesjonalista!

Interakcje czytelników

18 CommentsLeave a Reply

  1. Proszę, jak mogę sprawić, aby zrzuty ekranu były dostępne do pobrania jako plik graficzny?

    • Będziesz musiał skontaktować się z pomocą techniczną wtyczki, aby dodać tę funkcjonalność

      Administrator

  2. Używałem tego wtyczki, ale zatrzymuje się po trzecim użyciu krótkiego kodu i zgłasza „zbyt wiele żądań” – miałem nadzieję wyświetlić 45 adresów URL. Czy masz jakieś sugestie, jak tego uniknąć?

    • Powinieneś skontaktować się z pomocą techniczną wtyczki, jeśli jeszcze tego nie zrobiłeś, aby dowiedzieć się, jakie opcje są dostępne, aby uniknąć tego problemu.

      Administrator

  3. Czy ta wtyczka do zrzutów ekranu przeglądarki sprawdza aktualizacje witryny, czy muszę ręcznie odświeżyć, aby uzyskać najnowszy wygląd docelowej witryny? Dzięki :)

    • Powinieneś skontaktować się z pomocą techniczną wtyczki w sprawie bieżącej częstotliwości odświeżania

      Administrator

  4. Twój kod jest dokładnie tym, czego szukałem. Jedyną rzeczą jest to, że chcę, aby adres URL nie był wstępnie wypełniony w kodzie, ale generowany z niestandardowego pola „wpcf_websitelink”.
    Jak mogę dodać kod, aby uzyskać zawartość z pola.
    Czyli ta linia
    „url” => „https://www.wpbeginner.com”,
    powinna zawierać coś, co pobierze zawartość pola wpcf_websitelink zamiast linku wpbeginner.com

    • Jeśli używasz wtyczki do tworzenia tego niestandardowego pola, powinieneś skontaktować się z pomocą techniczną tej wtyczki, aby dowiedzieć się, jak uzyskać dostęp do tych informacji i zastąpić wartość adresu URL tym, co Ci powiedzą.

      Administrator

  5. To jest cudownie prosty w użyciu plugin. Świetna robota! Czy jest jakiś sposób na przycinanie obrazów? Niektóre strony wyświetlają ostrzeżenie o ciasteczkach na górze lub na dole i dobrze byłoby móc je przyciąć.

  6. 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 :)

  7. Możliwe jest zapisanie zrzutu ekranu w bibliotece multimediów i ustawienie go jako obrazu wyróżniającego. Dzięki.

  8. Świetne informacje. Na pewno przetestuję wtyczkę na mojej stronie internetowej, aby ją wypróbować.

  9. Przy każdej z tych metod, jaki będzie efekt uboczny na szybkość strony internetowej? Jako wtyczka, nastąpi pewne dodatkowe obciążenie czasu ładowania. Jeśli obrazy nie są przechowywane w bibliotece multimediów, ponownie nastąpi pewne dodatkowe obciążenie czasu ładowania strony internetowej.
    Zatem spośród podanych metod, która jest zalecana, biorąc pod uwagę szybkość ładowania strony internetowej?

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszą polityką komentowania, a Twój adres e-mail NIE zostanie opublikowany. Proszę NIE używaj słów kluczowych w polu nazwy. Prowadźmy osobistą i znaczącą rozmowę.