Det er en enestående viktig og ikke-fornybar ressurs som folk ofte har en tendens til å overse: tid. Du kan ikke gjøre mer ut av det, kan du? Det du kan gjøre er å lagre det. Og en av måtene å gjøre det på er å bruke verktøyene som er tilgjengelige for deg til å gjøre for deg det du ellers ville måtte gjøre manuelt.
Denne opplæringen handler om ta automatiske skjermbilder i WordPress. Det er to måter å gjøre det på, som vi begge viser deg. Men før vi setter tennene ned i muttere og bolter i hvordan, for å blande en metafor, la oss ta litt tid til å diskutere situasjonene der du kanskje vil bruke denne funksjonen. Her er hva vi skal snakke om.
Som det er veldig ofte, innebærer det å lage et WordPress-innlegg mye forskjellig slags arbeid. Fra forskning og datainnsamling til selve skrivingen, kan mange av prosessene innebære kjedelige eller repeterende oppgaver. Så mye er uunngåelig. Noen av dem kan imidlertid automatiseres, strømlinjeforme prosessen og spare deg for tid og arbeid, og skjermbilder av nettsider er blant disse oppgavene.
Et skjermbilde er i praksis et vindu til et annet nettsted som du kan bygge inn i innlegget eller siden din. Denne funksjonaliteten er nyttig i de tilfellene du ønsker det gi eksempler på webdesign eller oppsett som en del av dine innlegg eller sider, eller i tilfelle du vil at de besøkende skal kunne se en side som ofte oppdateres, for eksempel en liste over priser som kan være gjenstand for rabatter. I tilfelle et nettsted er utilgjengelig fra din plassering, et skjermbilde kan omgå eventuelle begrensninger, slik at de besøkende kan få tilgang til innhold de ellers ikke kunne. Til slutt et skjermbilde kan brukes til navigering, som en lenke til et målnettsted som erterer målnettstedets nåværende innhold.
En ting du må være oppmerksom på når du bruker en av metodene vi skal diskutere, er at skjermbilder oppdateres automatisk når kildenettstedet er oppdatert. Nyttig når du bygger inn et ofte oppdatert nyhetsnettsted, mindre for innhold med begrenset langsiktig verdi.
Du kan automatisere skjermbilder i WordPress ved å bruke en plugin, som vi anbefaler hvis du ikke føler deg trygg på å endre koden til nettstedet ditt. Programtillegget vi skal bruke er Nettleserskjermbilder – en brukervennlig og gratis plugin for skjermbilder. Du kan bruke den til å sette inn et skjermbilde av et hvilket som helst nettsted på sidene eller innleggene dine. Skjermbildet oppdateres automatisk hver gang målnettstedet også oppdateres.
Når du har installert og aktivert denne plugin, har du mer eller mindre gjort det du skal gjøre. Du vil ha fått bruken av en kortkode – [browser-shot] – som du kan bruke til å ta skjermbilder av alle nettsteder du velger, forutsatt at du oppgir kortkoden med passende kortkodeparametere.
For å vise deg hvordan det fungerer, vil vi bruke det som en del av et innlegg, men du kan bruke kortkoden på en hvilken som helst widget-klar plass på nettstedet ditt.
Vi starter med et innlegg som vi har levert med litt plassholdertekst. For å legge til et automatisk skjermbilde, trenger vi en kortkodeblokk. Klikk på Plus skiltikon og velg a kortkodeblokk fra menyen.
Vi vil legge til den nødvendige kortkoden, men det krever to andre parametere for å fungere: nettadressen og skjermbildets bredde. La oss si at vi vil bruke kortkoden til å lage et skjermbilde av vår egen nettside 700 piksler bred. Dette er den nøyaktige kortkoden vi skal bruke: [browser-shot url=”https://qodeinteractive.com/magazine/” width=”700“].
Og skjermbildet vårt er nå en del av innlegget.
Det er også en haug med andre parametere du kan bruke for å supplere skjermbildet ditt. Her er noen av de mest nyttige, med resten å finne på pluginens wordpress.org-side.
Selvfølgelig, hvis du bruker Elementor visuell editor, må du bruke shortcode-elementet, mens, for Klassisk editor, kan du bare ploppe kortkoden din hvor du vil ha den mens du er i HTML-redigeringsmodus.
Programtillegget beskrevet ovenfor bruker en funksjon utviklet av WordPress selv, og du kan også gjøre det. Du må imidlertid endre nettstedet ditt funksjoner.php fil. Vi anbefaler på det sterkeste at du bruker plugin-metoden ovenfor hvis du ikke føler deg trygg på å endre nettstedets kode.
For å få tilgang til den, naviger til Utseende/temaredaktør ved å bruke WordPress-dashbordet.
Finn funksjoner.php på menyen til høyre på din Temaredaktør skjermen og bla helt til bunnen av filen.
Dette er koden du må lime inn i din funksjoner.php fil. Gjør det, men vær veldig forsiktig så du ikke forstyrrer noen annen 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'] ) . '"/>';
} );
Klikk Oppdater fil når ferdig.
Dette fungerer omtrent på samme måte som plugin-metoden beskrevet ovenfor. Kortkoden kalles nå [snapshot] og bruker noen av de samme parameterne: url, width, height, og alt. Når vi jobber med samme innlegg som brukt ovenfor, kommer vi inn [snapshot width=’700′ height=’500′ url=’https://qodeinteractive.com/magazine/’] inn i kortkodeblokken vår for et skjermbilde på 700 x 500 piksler av nettstedet vårt.
Som du kan se, er skjermbildet der. Dette er bare et bilde, og lenker ikke til nettsiden skjermbildet er fra.
For å konkludere
Der har du det, så enkelt er det. Enten du er avhengig av en plugin eller på din egen evne til å endre kode, kan du nå spare mye tid, penger og krefter ved å automatisere skjermbilder. Som så ofte er tilfellet med WordPress, kan du legge til en funksjonalitet, som denne, til nettstedet ditt med bare noen få museklikk eller en enkel kopiere/lim inn-kommando, og det trenger ikke koste deg en krone.
Støtt vårt arbeid ❤️
Hvis du likte denne artikkelen, vurder å gi en tips for å hjelpe oss med å fortsette å publisere kvalitetsinnhold.
