So erstellen Sie automatisierte Website-Screenshots in WordPress

Möchten Sie automatisierte Website-Screenshots in Ihrer WordPress-Site erstellen? Wenn Sie häufig Website-Screenshots zu Ihren WordPress-Posts oder -Seiten hinzufügen, sparen Sie durch die Automatisierung des Prozesses Zeit, die für das manuelle Erfassen von Screenshots aufgewendet wird. In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress automatisierte Website-Screenshots erstellen.

Methode 1: Erstellen Sie mit dem Plugin automatische Website-Screenshots in WordPress

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 Browser Shots-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Das Plugin funktioniert sofort und es sind keine Einstellungen für Sie zu konfigurieren.

Bearbeiten Sie einfach einen Beitrag / eine Seite oder erstellen Sie einen neuen. Im visuellen Editor wird eine neue Schaltfläche angezeigt, um Website-Screenshots hinzuzufügen.

Wenn Sie darauf klicken, wird ein Popup-Fenster geöffnet, in dem Sie die Website-URL, alternativen Text, einen Link zu der URL und die Höhe / Breite des Screenshots eingeben können.

Klicken Sie auf OK, und das Plugin fügt Ihrem WordPress-Beitrag einen Kurzcode hinzu. Sie können jetzt eine Vorschau Ihres Posts anzeigen, um das Plugin in Aktion zu sehen.

Wenn Sie den Texteditor in WordPress verwenden oder die Schaltfläche nicht im visuellen Editor verwenden möchten, können Sie den Shortcode auch manuell hinzufügen.

[browser-shot url = "https://www.wpbeginner.com"]

Standardmäßig erstellt das Plugin einen Screenshot mit 600 x 600 Pixeln. Sie können dies ändern, indem Sie die Breiten- und Höhenattribute zum Kurzcode hinzufügen.

[browser-shot url = "https://www.wpbeginner.com" width = "400" height = "400"]

Es wird auch automatisch auf die Website verlinkt. Sie können dies ändern, indem Sie dem Shortcode ein Link-Attribut hinzufügen und einen beliebigen Link hinzufügen.

[browser-shot url = "https://www.wpbeginner.com" width = "400" height = "400" link = "http://example.com"]

Wenn Sie unterhalb des Screenshots eine Beschriftung hinzufügen möchten, können Sie dies tun, indem Sie den Untertiteltext um den Shortcode wickeln.

[browser-shot url = "https://www.wpbeginner.com"] WPBeginner - WordPress-Ressourcensite für Anfänger [/ browser-shot]

Die Beschriftung verwendet die Beschriftungsstile Ihres WordPress-Themes. So sah es auf unserer Demo-Website aus:

Das Browser Shots-Plugin verwendet die mshots-API von WordPress.com, um Bildschirmfotos schnell zu erstellen. Diese Bilder werden nicht in Ihrer WordPress-Medienbibliothek gespeichert. Sie werden direkt von WordPress.com-Servern bereitgestellt.

Lesen Sie unseren Leitfaden zum Unterschied zwischen WordPress.com und WordPress.org.

Methode 2: Erstellen Sie automatisierte Screenshots durch Hinzufügen von Code zu WordPress

Bei dieser Methode müssen Sie Code zu Ihren WordPress-Dateien hinzufügen. Es ist nicht für Anfänger empfohlen. Wenn Sie mit dem Einfügen von Ausschnitten aus dem Web in WordPress vertraut sind, können Sie diese Methode verwenden.

Fügen Sie diesen Code einfach in die Datei functions.php Ihres Themas oder in ein site-spezifisches Plugin ein.

 Funktion 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 ', // Breite "h" =>' 450 '// Höhe), $ atts)); $ img = ''; 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 schnell zu erzeugen.

Um einen Website-Screenshot in Ihren WordPress-Posts und -Seiten anzuzeigen, müssen Sie den Kurzcode wie folgt eingeben:

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

Ersetzen Sie URL- und Alt-Felder durch Ihre eigenen Werte.

Standardmäßig erzeugt dieser Code einen Screenshot mit 600 x 450 Pixeln. Sie können dies ändern, indem Sie dem Shortcode Ihre eigenen Höhen- und Breitenattribute hinzufügen.

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

Wir hoffen, dass Sie mit diesem Artikel erfahren haben, wie Sie in WordPress automatisierte Website-Screenshots erstellen. Vielleicht möchten Sie auch unseren Leitfaden zur Automatisierung von WordPress und Social Media mit IFTTT sehen.

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