Sådan tager du automatiske skærmbilleder i WordPress

Der er en særdeles vigtig og ikke-fornyelig ressource, som folk ofte har en tendens til at overse: tid. Du kan ikke gøre mere ud af det, vel? Det du kan gøre er at gemme det. Og en af ​​måderne at gøre det på er at bruge de værktøjer, du har til rådighed, til at gøre for dig, hvad du ellers skulle gøre manuelt.

Denne tutorial handler om tage automatiske skærmbilleder i WordPress. Der er to måder at gøre det på, som vi begge viser dig. Men før vi sætter tænderne i møtrikker og bolte i hvordan, for at blande en metafor, lad os tage lidt tid til at diskutere de situationer, hvor du måske vil bruge denne funktion. Her er hvad vi skal tale om.

Hvorfor tage skærmbilleder automatisk

Som det meget ofte er tilfældet, involverer oprettelsen af ​​et WordPress-indlæg en masse forskellige former for arbejde. Fra forskning og dataindsamling til selve skrivningen kan mange af processerne involvere kedelige eller gentagne opgaver. Så meget er uundgåeligt. Nogle af dem kan dog automatiseres, hvilket strømliner din proces og sparer dig for tid og arbejde, og skærmbilleder af hjemmesiden er blandt disse opgaver.

Et skærmbillede er i virkeligheden et vindue til en anden hjemmeside, som du kan indbygge i dit indlæg eller din side. Denne funktionalitet er nyttig i de tilfælde, hvor du ønsker det give eksempler på webdesign eller layout som en del af dine opslag eller sider, eller hvis du ønsker, at dine besøgende skal kunne se en side, som ofte opdateres, såsom en liste over priser, der kan være omfattet af rabatter. Også, hvis et websted er utilgængeligt fra din placering, et skærmbillede kan omgå eventuelle begrænsninger, så dine besøgende kan få adgang til indhold, de ellers ikke kunne. Til sidst et skærmbillede kan bruges til navigation, som et link til et målwebsted, der pirrer målwebstedets aktuelle indhold.

En ting du skal være opmærksom på, når du bruger en af ​​de metoder, vi vil diskutere, er, at skærmbilleder opdateres automatisk når kildehjemmesiden er opdateret. Nyttigt ved indlejring af et ofte opdateret nyhedswebsted, mindre for indhold med begrænset langsigtet værdi.

Sådan tager du automatiske skærmbilleder ved hjælp af et plugin

Du kan automatisere skærmbilleder i WordPress ved hjælp af et plugin, som vi anbefaler, hvis du ikke føler dig sikker på at ændre din hjemmesides kode. Det plugin vi skal bruge er Browser skærmbilleder – et brugervenligt og gratis screenshot-plugin. Du kan bruge det til at indsætte et skærmbillede af enhver hjemmeside på dine sider eller indlæg. Skærmbilledet opdateres automatisk, hver gang målwebstedet også opdateres.

Når du har installeret og aktiveret dette plugin, har du mere eller mindre gjort, hvad du skal gøre. Du vil have fået brugen af ​​en kortkode – [browser-shot] – som du kan bruge til at tage skærmbilleder af alle websteder, du vælger, forudsat at du leverer kortkoden med de passende shortcode-parametre.

For at vise dig, hvordan det fungerer, vil vi bruge det som en del af et indlæg, men du kan bruge kortkoden på et hvilket som helst widget-klar plads på din hjemmeside.

Vi starter med et indlæg, som vi har forsynet med lidt pladsholdertekst. For at tilføje et automatisk skærmbillede skal vi bruge en kortkodeblok. Klik på plus underskriv ikon og vælg en kortkodeblok fra menuen.

Vi tilføjer den nødvendige kortkode, men det kræver to andre parametre for at virke: Webstedets URL og skærmbilledets bredde. Lad os sige, at vi vil bruge kortkoden til at lave et skærmbillede af vores egen hjemmeside 700 pixels bred. Dette er den nøjagtige kortkode, vi vil bruge: [browser-shot url=”https://qodeinteractive.com/magazine/” width=”700“].

Og vores skærmbillede er nu en del af indlægget.

Der er også en masse andre parametre, du kan bruge til at supplere dit skærmbillede. Her er et par af de mest nyttige, med resten at finde på pluginnets wordpress.org-side.

Selvfølgelig, hvis du bruger Elementor visuel editor, skal du bruge shortcode-elementet, mens du for Klassisk editor, kan du bare plop din kortkode, hvor du vil have den, mens du er i HTML-redigeringstilstand.

Sådan tager du automatiske skærmbilleder ved hjælp af kode

Det ovenstående plugin bruger en funktion udviklet af WordPress selv, og det kan du også gøre. Du bliver dog nødt til at ændre din hjemmeside funktioner.php fil. Vi anbefaler kraftigt, at du bruger plugin-metoden ovenfor, hvis du ikke føler dig sikker på at ændre din hjemmesides kode.

For at få adgang til den skal du navigere til Udseende/Tema Editor ved hjælp af dit WordPress-dashboard.

Find funktioner.php i menuen til højre på din Tema redaktør skærmen og rul helt ned til bunden af ​​filen.

Dette er koden, du skal indsætte i din funktioner.php fil. Gør det, men vær meget forsigtig med ikke at forstyrre nogen anden kode:

/**
* This shortcode will allow you to create a snapshot of a remote website and post it
* on your WordPress site.
*
* [snapshot url="http://www.wordpress.org" alt="WordPress.org" width="400" height="300"]
*/
add_shortcode( 'snapshot', function ( $atts ) {
$atts = shortcode_atts( array(
'alt' => '',
'url' => 'http://www.wordpress.org',
'width' => '400',
'height' => '300'
), $atts );
$params = array(
'w' => $atts['width'],
'h' => $atts['height'],
);
$url = urlencode( $atts['url'] );
$src="http://s.wordpress.com/mshots/v1/" . $url . '?' . http_build_query( $params, null, '&' );
$cache_key = 'snapshot_' . md5( $src );
$data_uri = get_transient( $cache_key );
if ( ! $data_uri ) {
$response = wp_remote_get( $src );
if ( 200 === wp_remote_retrieve_response_code( $response ) ) {
$image_data = wp_remote_retrieve_body( $response );
if ( $image_data && is_string( $image_data ) ) {
$src = $data_uri = 'data:image/jpeg;base64,' . base64_encode( $image_data );
set_transient( $cache_key, $data_uri, DAY_IN_SECONDS );
}
}
}
return '<img src="' . esc_attr( $src ) . '" alt="' . esc_attr( $atts['alt'] ) . '"/>';
} );

Klik Opdater fil når du er færdig.

Dette fungerer meget på samme måde som plugin-metoden beskrevet ovenfor. Kortkoden kaldes nu [snapshot] og bruger nogle af de samme parametre: url, bredde, højde, og alt. Arbejder vi med det samme indlæg som brugt ovenfor, kommer vi ind [snapshot width=’700′ height=’500′ url=’https://qodeinteractive.com/magazine/’] ind i vores kortkodeblok for at få et skærmbillede på 700 gange 500 pixel af vores hjemmeside.

Som du kan se, er skærmbilledet der. Dette er kun et billede og linker ikke til hjemmesiden, som skærmbilledet er fra.

Afslutningsvis

Der har du det, så nemt er det. Uanset om du er afhængig af et plugin eller din egen evne til at ændre kode, kan du nu spare masser af tid, penge og kræfter ved at automatisere skærmbilleder. Som det så ofte er tilfældet med WordPress, kan du tilføje en funktionalitet, som denne, til din hjemmeside med blot et par klik med musen eller en simpel kopi/indsæt-kommando, og det behøver ikke koste dig en krone.