Share
In diesem Lernprogramm erfahren Sie ein offenes Geheimnis: So erstellen Sie Screenshots von Websites, die Sie in Ihren WordPress-Posts verwenden können, indem Sie einen von WordPress.com bereitgestellten Dienst verwenden. Wir machen daraus sogar einen benutzerfreundlichen Kurzcode, um die Screenshots anzuzeigen. Los geht's!
Es ist ein offenes Geheimnis und seit einigen Jahren stellt WordPress einen Screenshot-Generator in seiner Subdomain s.wordpress.com bereit. Und der Scuttlebutt ist, solange Sie ihn nicht missbrauchen, ist er kostenlos. WordPress.com verwendet es zum Erstellen von Screenshots für die verschiedenen Aktivitäten.
Hier ist zum Beispiel die URL, um einen Screenshot von wp.tutsplus mit einer Breite von 400 Pixel zu zeigen:
http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp.tutsplus.com?w=400
Möglicherweise müssen Sie erneut auf den Link klicken, da der Generator etwas Zeit benötigt, um das Bild zwischenzuspeichern.
Was wir machen werden:
Unser Kurzcode wird wie folgt verwendet:
[ss_screenshot site = "http://wp.tutsplus.com"]
Sie können den Code zur Datei functions.php in Ihrem Designverzeichnis hinzufügen. Den vollständigen Code finden Sie im Quelllink oben.
Accentsconagua
add_shortcode ('ss_screenshot', 'ss_screenshot_shortcode'); Funktion ss_screenshot_shortcode ($ atts) $ width = intval ($ atts ['width']); $ width = (100 <= $width && $width <= 300) ? $width : 200; $site = trim($atts['site']); if ($site !=") $query_url = 'http://s.wordpress.com/mshots/v1/' . urlencode($site) . '?w=' . $width; $image_tag = '
'; Echo ''. $ image_tag. ''; else echo 'Ungültiger Screenshot-URL!'; Fügen Sie in einem Beitrag oder auf dieser Seite diesen Kurzcode ein:
[ss_screenshot site = "http://amazon.com"]
Wenn Sie den Beitrag oder die Seite anzeigen, sollten Sie einen 300 Pixel breiten Screenshot von Amazon sehen. Denken Sie daran, dass Sie die Seite nach einigen Sekunden möglicherweise aktualisieren müssen, um den zwischengespeicherten Screenshot anzuzeigen. Spielen Sie mit der Breite herum und beobachten Sie, was passiert, wenn Sie den Bereich verlassen. Sie können übrigens einen beliebigen Breitenbereich einstellen. Testen Sie auch eine ungültige URL: Sie sollten die Warnmeldung anstelle eines Screenshots sehen.
Nun, da wir einen funktionierenden Shortcode haben, wollen wir sehen, wie wir das in unsere WordPress-Schleife integrieren können.
Stellen wir uns ein Szenario vor, bei dem wir neben jedem Beitrag einen Screenshot einer Website anzeigen möchten. Aus Gründen der Formatierung und der Benutzerfreundlichkeit empfiehlt es sich, diesen Prozess zu automatisieren, indem ein benutzerdefiniertes Feld zu unserem Post-Edit-Bildschirm hinzugefügt wird. In dieses Feld können wir eine Site-URL eingeben, die dann in der Nachschleife verwendet werden kann, um einen Screenshot mit unserem neuen Shortcode anzuzeigen.
Wenn das Feld für benutzerdefinierte Felder nicht auf Ihrem Post-Bearbeitungsbildschirm angezeigt wird, sehen Sie oben rechts auf dem Bildschirm und Sie sollten die Registerkarte Bildschirmoptionen sehen. Klicken Sie darauf und aktivieren Sie das Kontrollkästchen Benutzerdefinierte Felder. Jetzt sollten Sie etwas ähnliches am unteren Bildschirmrand sehen:
Klicken Sie auf den Link Enter New und erstellen Sie ein neues benutzerdefiniertes Feld namens screenshot_url. Das sollten Sie sehen:
Wenn Sie jetzt einen Beitrag erstellen / bearbeiten (das benutzerdefinierte Feld wird für alle Beiträge angezeigt), können Sie eine URL zum Erstellen eines Screenshots eingeben, der sich auf den Beitrag bezieht.
Hier ist eine ernsthaft reduzierte Version der Standard-WordPress-Nachschleife (wie in einer Designvorlagendatei), die unseren Screenshot-Anzeigecode enthält:
if (have_posts ()) while (have_posts ()): the_post (); der Titel(); $ url = get_post_meta ($ post-> ID, 'screenshot_url', true); do_shortcode ('[ss_screenshot site = "'. $ url. '"]'); der Inhalt(); endif; endtime; Wenn Sie einen Beitrag mit dem Titel Honda Accord erstellt und ihm eine Screenshot-URL von http://www.honda.com gegeben haben, sollten Sie in Ihrem neuen Loop-Setup Folgendes anzeigen:
Anstatt eine scharfe Warnmeldung anzuzeigen, wenn einem Beitrag keine Screenshot-URL angehängt ist, können Sie ein Standardbild anzeigen.
Wenn Sie den Screenshot-Generator von WordPress nicht verwenden möchten oder wenn Sie größere Anforderungen haben, können Sie die kostenlose Option bei einem Screenshot-Dienst wie http://www.shrinktheweb.com verwenden. Sie können die in diesem Lernprogramm verwendeten Techniken auf jeden Screenshot-Service anwenden.
