So erstellen Sie automatisierte Website-Screenshots in WordPress

Das Erstellen von Screenshots für ein Tutorial kann sich wie eine endlose Aufgabe anfühlen. Sie müssen jedes Bild aufnehmen, zuschneiden, kommentieren und hochladen und den Vorgang immer wieder wiederholen.

Wir kennen diesen Kampf nur zu gut, da wir hier bei WPBeginner unsere eigenen Anleitungen erstellen. Es ist ein enormer Zeitfresser, der Ihren Workflow bei der Inhaltserstellung wirklich verlangsamen kann.

Die gute Nachricht ist, dass Sie diesen gesamten Prozess automatisieren können. Dies spart nicht nur wertvolle Zeit, sondern hilft auch dabei, Ihre Website professionell und konsistent aussehen zu lassen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach automatisierte Website-Screenshots in WordPress erstellen können.

Warum automatisierte Website-Screenshots in WordPress erstellen?

Wenn Sie eine WordPress-Website haben, möchten Sie vielleicht automatisierte Website-Screenshots erstellen und zu Ihren Beiträgen hinzufügen, um potenziellen Lesern eine schnelle Möglichkeit zu geben, zu sehen, worum es in Ihren Inhalten geht.

Dies kann das Benutzerengagement steigern und zu Ihrer Website-SEO beitragen. Relevante, qualitativ hochwertige Bilder helfen Suchmaschinen, Ihre Inhalte besser zu verstehen, und sie können Besuchersignale wie die Verweildauer auf der Seite verbessern.

Ähnlich können Sie automatisierte Website-Screenshots verwenden, um ein visuelles Backup Ihrer Website zu erstellen, bevor Sie ein Theme aktualisieren oder andere Änderungen vornehmen. Dies kann Ihnen helfen, die Unterschiede zwischen den neuen und alten Stilen Ihrer Website zu vergleichen und zu sehen.

Automatisierte Screenshots können auch verschiedene Dienste oder Websites vergleichen, Ihre Leser durch ein Schritt-für-Schritt-Tutorial führen und den Fortschritt einer Website im Laufe der Zeit verfolgen.

Lassen Sie uns nun sehen, wie Sie ganz einfach automatisierte Website-Screenshots in WordPress erstellen können:

• Methode 1: Automatische Website-Screenshots in WordPress mit einem Plugin erstellen
• Methode 2: Automatisierte Screenshots erstellen durch Hinzufügen von Code zu WordPress
• Bonus: Manuelles Erstellen von Screenshots für Ihre Website
• Häufig gestellte Fragen
• Zusätzliche Ressourcen

Methode 1: Automatische Website-Screenshots in WordPress mit einem Plugin erstellen

Diese Methode ist einfacher und wird daher für Anfänger und Benutzer empfohlen, die sich nicht mit Code beschäftigen möchten.

Zuerst müssen Sie das Plugin Browser Screenshots installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Wichtig: Bitte beachten Sie, dass dieses Plugin zum Zeitpunkt der Erstellung lange Zeit nicht aktualisiert wurde. Obwohl es möglicherweise noch funktioniert, könnte es ein Kompatibilitäts- oder Sicherheitsrisiko darstellen. Wir empfehlen, es zuerst auf einer Staging-Site zu testen und immer sicherzustellen, dass Sie ein vollständiges WordPress-Backup haben, bevor Sie es installieren.

Nach der Aktivierung funktioniert das Plugin sofort, und es gibt keine Einstellungen zu konfigurieren.

Besuchen Sie nun einfach eine Seite oder einen Beitrag, auf dem Sie einen automatisierten Website-Screenshot aus der WordPress-Seitenleiste hinzufügen möchten.

Klicken Sie hier auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms, um das Blockmenü zu öffnen. Fügen Sie dann den Block „Browser Shots“ im Editor hinzu.

Sobald Sie dies getan haben, fügen Sie die URL der Website hinzu, für die Sie einen automatisierten Screenshot erhalten möchten, und klicken Sie auf die Schaltfläche „Bild laden“.

Das Plugin fügt nun automatisch einen Screenshot für die von Ihnen ausgewählte Website hinzu. Sie können nun einen Alternativtext für das Bild hinzufügen und dessen Breite und Höhe im Block-Panel auf der rechten Seite ändern.

Durch Umschalten des Schalters „Link verwenden“ im Panel können Sie einen Link zum Screenshot hinzufügen, der Sie zur Website führt.

Sie können auch den Schalter „Link zum aktuellen Beitrag“ umschalten, wenn Sie den Beitragslink zum Screenshot hinzufügen möchten.

Klicken Sie abschließend auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.

Sie können nun Ihre WordPress-Website besuchen, um den automatisierten Screenshot anzuzeigen.

Hinweis: Das Browser Shots Plugin verwendet die mshots API von WordPress.com, um Screenshots on the fly zu generieren. Diese Bilder werden nicht in Ihrer WordPress-Mediathek gespeichert. Sie werden direkt von den Servern von WordPress.com geliefert. Sehen Sie sich unseren Leitfaden zum Unterschied zwischen WordPress.com und WordPress.org an.

Methode 2: Automatisierte Screenshots erstellen durch Hinzufügen von Code zu WordPress

Diese Methode erfordert, dass Sie Code zu Ihren WordPress-Dateien hinzufügen. Um automatisierte Screenshots zu erstellen, müssen Sie benutzerdefinierten Code zur functions.php-Datei Ihres Themes hinzufügen.

Denken Sie jedoch daran, dass der kleinste Fehler im Code Ihre Website beschädigen und sie unzugänglich machen kann.

Deshalb empfehlen wir die Verwendung von WPCode. Es ist das beste WordPress-Code-Snippet-Plugin auf dem Markt, das das Hinzufügen von benutzerdefiniertem Code super einfach und sicher macht.

Experten-Tipp: Bei WPBeginner verwenden wir WPCode, um alle benutzerdefinierten Code-Snippets auf unserem Portfolio von Websites zu verwalten. Es ermöglicht unserem Entwicklungsteam, Code sicher hinzuzufügen und zu organisieren, ohne jemals die functions.php-Datei des Themes direkt bearbeiten zu müssen.

Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Nach der Aktivierung besuchen Sie die Seite Code-Schnipsel » + Schnipsel hinzufügen im WordPress-Dashboard.

Sobald Sie dort sind, klicken Sie unter der Option „Benutzerdefinierten Code hinzufügen (Neuer Snippet)“ auf die Schaltfläche „Snippet verwenden“.

Sie werden nun zur Seite „Benutzerdefiniertes Snippet erstellen“ weitergeleitet, wo Sie mit der Eingabe eines Namens für Ihr Snippet beginnen können. Der Name kann alles sein, was Ihnen hilft, den Code zu identifizieren.

Wählen Sie als Nächstes im Dropdown-Menü auf der rechten Seite „PHP-Snippet“ als Code-Typ aus.

Kopieren und fügen Sie danach einfach den folgenden Code in das Feld 'Code-Vorschau' ein:

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");

Ähnlich wie das zuvor erwähnte Plugin verwendet dieser Code auch die WordPress.com Mshots API, um Screenshots on the fly zu generieren.

Nun können Sie die URL der Website, von der Sie automatisierte Screenshots erstellen möchten, neben die Zeile "url" =$gt; im Code einfügen.

Sie können auch Ihre bevorzugte Breite und Höhe für die Screenshots neben den Zeilen "w" => und "h"=> im Code hinzufügen.

Scrollen Sie als Nächstes zum Abschnitt „Einfügen“ und wählen Sie den Modus „Automatisch einfügen“.

Der Code wird nun nach der Aktivierung automatisch ausgeführt.

Scrollen Sie schließlich zurück zum Seitenanfang und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“.

Klicken Sie anschließend auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern und das Snippet zu aktivieren.

Um nun einen Website-Screenshot in Ihren WordPress-Beiträgen und -Seiten anzuzeigen, müssen Sie den Shortcode wie folgt eingeben:

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

Sie können die Felder URL und Alt durch Ihre eigenen Werte ersetzen.

Öffnen Sie zuerst die Seite/den Beitrag im Block-Editor über das WordPress-Dashboard und klicken Sie auf die Schaltfläche 'Block hinzufügen' (+).

Fügen Sie von hier aus den 'Shortcode'-Block zur Seite/zum Beitrag hinzu. Fügen Sie dann den obigen Shortcode ein und ersetzen Sie ihn durch Ihre eigenen Werte.

Klicken Sie abschließend auf die Schaltfläche 'Aktualisieren' oder 'Veröffentlichen', um Ihre Einstellungen zu speichern.

Besuchen Sie nun Ihre WordPress-Website, um den automatisierten Screenshot in Aktion zu sehen.

Bonus: Manuelles Erstellen von Screenshots für Ihre Website

Wenn Sie keine automatisierten Screenshots verwenden möchten, können Sie Screenshots manuell mit verschiedenen Tools wie Droplr erstellen.

Dies gibt Ihnen mehr Freiheit, einen bestimmten Bereich für ein Bild auszuwählen, verglichen mit automatisierten Screenshots. Außerdem können Sie diese Bilder in Adobe Photoshop bearbeiten und Pfeile oder rote Kästen hinzufügen.

Diese Funktion ist nicht für automatisierte Screenshots verfügbar, bei denen Plugins oder Code das Bild automatisch abrufen.

Um mit Droplr einen Screenshot zu machen, müssen Sie zuerst die App auf Ihrem Computer installieren. Sobald Sie dies getan haben, klicken Sie auf das Droplr-Symbol in der Taskleiste von Windows oder Mac und wählen Sie die Option 'Screenshot'.

Als Nächstes können Sie den Bereich auswählen, in dem Sie den Screenshot aufnehmen möchten.

Droplr öffnet dann dieses Bild in einem Browser, wo Sie es herunterladen oder den Link mit anderen teilen können. Weitere Informationen finden Sie in unserem Tutorial unter So erstellen Sie einen Screenshot in WordPress.

Häufig gestellte Fragen

Hier sind einige der häufigsten Fragen, die uns zur Erstellung von automatisierten Screenshots in WordPress gestellt werden.

Sind automatische Screenshots genauso gut wie manuelle Screenshots?

Das hängt von Ihren Bedürfnissen ab. Automatisierte Screenshots sind hervorragend für Geschwindigkeit und Konsistenz, aber manuelle Screenshots geben Ihnen mehr Kontrolle. Mit manuellen Aufnahmen können Sie bestimmte Bereiche auswählen, Anmerkungen wie Pfeile oder Text hinzufügen und das Bild vor dem Hochladen optimieren.

Verlangsamen automatisierte Screenshots meine Website?

Nein, sie sollten die Leistung Ihrer Website nicht beeinträchtigen. Die in diesem Artikel beschriebenen Methoden verwenden einen externen Dienst von WordPress.com, um die Bilder zu generieren. Das bedeutet, dass die Bilder von deren Servern geladen werden, nicht von Ihren, was eine zusätzliche Belastung Ihres Hostings verhindert.

Kann ich anpassen, wie die automatisierten Screenshots aussehen?

Die Anpassungsmöglichkeiten sind begrenzt. Sie können normalerweise die Breite und Höhe des Screenshots definieren. Sie können jedoch keine Anmerkungen, Effekte hinzufügen oder einen bestimmten Teil der Seite zuschneiden, wie Sie es mit einem manuellen Screenshot-Bearbeitungstool tun könnten.

Werden die Screenshots in meiner WordPress-Mediathek gespeichert?

Nein, die Screenshots werden dynamisch generiert und nicht in Ihrer Mediathek gespeichert. Dies spart Speicherplatz auf Ihrem Hosting-Konto, da die Bilder direkt von den Servern von WordPress.com geliefert werden.

Warum wird mein automatischer Screenshot nicht angezeigt?

Der WordPress.com-Dienst, der diese Screenshots generiert, funktioniert hervorragend für Live-Websites, die öffentlich zugänglich sind. Er kann jedoch möglicherweise keine Screenshots von Websites erfassen, die sich auf einem lokalen Computer (localhost) befinden, passwortgeschützt sind oder sich hinter bestimmten Firewalls befinden. Möglicherweise werden auch Seiten, die komplexe Animationen verwenden oder Benutzerinteraktionen erfordern, um Inhalte anzuzeigen, nicht perfekt gerendert.

Zusätzliche Ressourcen

Jetzt, da Sie wissen, wie Sie Website-Screenshots automatisieren können, möchten Sie vielleicht auch diese anderen hilfreichen Anleitungen lesen:

• Anfängerleitfaden für Image-SEO – Erfahren Sie, wie Sie Ihre Bilder für Suchmaschinen optimieren, um mehr Traffic auf Ihre Website zu lenken.
• Tools to Create Better Images for Your Blog Posts – Schauen Sie sich unsere Expertenauswahl der besten Tools an, um ansprechendere Bilder für Ihre Artikel zu erstellen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.