Slik forbedrer du bilder i WordPress

Slik forbedrer du bilder i WordPress


Det er lenge siden bilder var noe for stort å laste over Internett. I dag kan nettsteder ikke eksistere uten dem. Selv om Internett-hastighetene har økt dramatisk med årene, er det viktig at du tar vare på bilder på bloggen din.

Bare fordi det er enkelt å laste opp bilder til nettstedet ditt, betyr det ikke at du bør gjøre det uten noen forberedelser. Uoptimerte bilder kan faktisk skade nettstedet ditt på mange måter; fra å påvirke måten besøkende tenker på deg til hastigheten på nettstedet ditt og SEO rangeringer. Hvis du fremdeles ikke har tenkt på det, er vi her for å vise deg flere måter å forbedre bilder i WordPress.

I denne guiden skal vi vise deg:

  • Hvordan optimalisere bilder for WordPress for å få fart på nettstedet ditt og forbedre SEO
  • Endre måten WordPress komprimerer JPEG-bilder
  • De mest populære innstillinger for bildeoptimalisering for WordPress
  • Legg til lat lasting for videoene og bildene dine
  • Vis før og etter bilder på en attraktiv måte
  • Hvordan lage interaktive bilder – tegne, legg til beskrivelser og lenker
  • Slik regenererer du flere bildestørrelser
  • Fjern bildeattributter for bredde og høyde med jQuery
  • Hvordan lage egendefinerte bildestørrelser i Media Uploader
  • Lag automatisk skjermbilde av et hvilket som helst nettsted og publiser det som bilde i innlegget ditt

Contents

Hvordan optimalisere bilder for WordPress slik at du får fart på nettstedet ditt og forbedrer SEO

Hvorfor skal du optimalisere bilder for WordPress? Hvis du gjør en innsats, kan du forvente følgende:

  • Raskere side
  • Bedre SEO
  • Mindre sikkerhetskopier
  • Mindre båndbreddebruk
  • Lykkeligere brukere

Du bør også vite at det er forskjellige stadier der du kan optimalisere bildene. Du kan ta vare på bildene også før du laster dem opp til en blogg, eller du kan gjøre det etter opplastingen.

Test bilder raskt på nettstedet ditt

Før du begynner å jobbe med optimaliseringen, kan du raskt sjekke nettstedet ditt for hastighet og ytelse. Ved å bruke noen av verktøyene fra listen, vil du raskt bli kjent med hvilken form som er bildene på nettstedet ditt.

Vi liker å bruke GTmetrix som til og med viser deg de nøyaktige bildene som får nettstedet ditt til å lastes tregere.

Optimaliser bilder for WordPress før opplasting

Mens de blogger, tar de fleste ikke alle nødvendige skritt for å optimalisere bildene sine. Vanligvis vil folk bare ta et bilde fra kameraet eller smarttelefonen, laste ned et fra Internett eller lage et ved å bruke dataprogramvare.

De tenker ikke på formater, bildedimensjoner eller filnavnene. Hvis bildet ser bra ut, antar de bare at det er klart for Internett. Hvis du ikke sjekker bildene dine, bygger du mot en katastrofe.

Endre størrelse på bilder

Endre størrelse på bilder

Ikke last opp bilder til WordPress-nettstedet ditt før du sjekker bredden og høyden på hvert bilde. Hvis du for eksempel viser maksimalt 700 bilder, er det virkelig ikke behov for å laste opp et bredere bilde. Hvis du gjør det, vil du ha en større fil som vil gjøre nettstedet ditt tregere, mens resultatet blir det samme. WordPress vil opprette en ekstra størrelse, men det er ikke unnskyldningen for ikke å forberede bildene før opplasting.

Endre størrelse på bilder er raskt og enkelt. Det er mange gratis verktøy som Microsoft Paint som vil hjelpe deg med det. Du kan til og med finne gratis online verktøy for å endre størrelse på bilder som Enkel størrelse.

Bildedimensjoner vil variere fra tema til tema. Hvis du ikke er sikker på hvilken du skal bruke, kan du se nærmere på WordPress-temaet ditt og inspisere bilder, søke etter dokumentasjon eller be support om hjelp.

Endre kvaliteten

Etter å ha endret dimensjoner, bør du vurdere å endre kvaliteten på bilder. Avhengig av programvaren er det forskjellige måter å endre kvaliteten på bilder på. For eksempel lar du alltid populære Photoshop lagre bilder på nettet. Dette alternativet lar deg lagre bilder til en lavere kvalitet, men de vil være optimalisert for nettstedet ditt.

Hvis du velger å lagre et bilde som JPEG, ber Photoshop deg velge kvalitetsnivå. I dette tilfellet vil å senke kvaliteten fra 12 til bare 8 dramatisk redusere størrelsen på et bilde, mens forskjellen i kvalitet ikke vil være så stor.

Hvis du fremdeles ikke bruker noen programvare for å endre kvaliteten på bildene dine, kan du prøve gratis online Liten PNG verktøy. Bare last opp et bilde og se hvilken forskjell det kan gjøre.

Velg riktig format

Selv etter endringene i størrelse og kvalitet, bør du vurdere å endre format. For det første, bare ved å velge riktig format, kan du ta noen kilobyte fra et bilde, om ikke mer.

Bildeformater

Den generelle regelen er veldig enkel. Hvis du har et fotografi, gjør det til JPEG. Hvis du har en logo, vektorbilde eller en veldig enkel datamaskingenerert grafikk, kan du gå med PNG. Hvis du har et veldig lite bilde uten graderinger, eller du vil vise en enkel animasjon som den som er vist over, kan du bruke GIF. Generelt vil PNG-bilder være ganske større enn JPEG-bildene, og du kan dra nytte av å endre format.

I mange tilfeller vil ikke reformering av bilder gjøre betydelige kvalitetsforskjeller, mens du kan forvente forskjellen i størrelse. Neste gang du laster opp et PNG-fotografi, kan du ta det og prøve å lagre det som JPEG for å se forskjellen. For mer detaljert forklaring, vennligst sjekk ut forskjell mellom PNG, JPEG, GIF og SVG.

Ta vare på filnavn

Selv om filnavn kan høres uviktig ut, er det faktisk noe du bør være veldig klar over. Navnet på bildefilen din inneholder en verdifull info for SEO. Hvis du vil at andre skal kunne finne bildet ditt på Google og andre søkemotorer, bør du gi det et riktig navn.

Vi foreslår at du navngir bilder uten å bruke mellomrom. Ikke glem å ta med nøkkelord hvis du vil at siden og bildet skal rangere. Hvis du for eksempel laster opp et bilde av Ferrari California, skal filnavnet være “ferrari-california.jpg.” Hvis du bruker en SEO-plugin for WordPress, vet du allerede at den sjekker alt-taggene for nøkkelord. Ja, det er virkelig så viktig å ha et riktig bilde navn.

Optimaliser bilder for WordPress etter opplasting

Etter å ha klargjort bilder på datamaskinen din, kan du fortsette med opplastingen. Forhåpentligvis har bildene akkurat riktig størrelse og kvalitet. Du sørget for at formatet og filnavnet stemmer. Etter opplastningen vil WordPress be deg om mer informasjon. Ikke hopp over metainformasjonen. fyll ut detaljene om bildene dine slik at du enkelt kan organisere dem og forberede deg på SEO.

Tittel, beskrivelse, alt tekst og bildetekst

Mens du tar vare på det tekniske, bør du ikke glemme SEO. Legg alltid tittelen og beskrivelsen til mediene. Dette vil hjelpe deg med WordPress media management, og det vil også jobbe mot bedre SEO. Ikke glem alt-taggen som vises for besøkende som ikke kan se bildet ditt ordentlig. Ikke bare dette vil være nyttig for brukerne dine, men det vil også hjelpe deg med SEO. Siden din rangeres bedre, og brukerne vil kunne finne de nye bildene dine enklere.

Selv om du ikke trenger bildetekster hele tiden, må du sørge for å legge til bilder for bilder som trenger flere forklaringer (for eksempel skjermbilder).

Rediger bilder med WordPress

Hvis du innser at et bilde fortsatt trenger ytterligere redigering, bør du vite at WordPress lar deg gjøre det også etter at du har lastet opp filen. Endre bilder for rotasjon, beskjæring og skalering du allerede lastet opp. Du kan til og med redigere bare et miniatyrbilde eller alle de andre størrelsene. WordPress ‘native editor er veldig enkel, men det kan du spare fra tid til annen.

Regenerere alle miniatyrbilder

De fleste av de tidligere teknikkene vil hjelpe deg med nye bildefiler som du fremdeles skal laste opp. Men hva hvis du har hundrevis, om ikke tusenvis av filer som allerede er lastet opp til WordPress-nettstedet ditt? Ikke bekymre deg; Du kan fortsatt optimalisere bildene og endre størrelsen.

For en rask løsning kan det hende du er interessert i et gratis Regenerate Thumbnails-plugin som er brukt av mer enn en million brukere. Hvis du vil ha mer kontroll over bilder, bør du sjekke ut noen av de beste WordPress-pluginene for bildeoptimalisering som vi skal vise deg i de følgende linjene i denne artikkelen..

Slik regenererer du flere bildestørrelser

Bruk WordPress-plugins

Selvfølgelig er det dusinvis av WordPress-plugins som kan hjelpe deg med å optimalisere bilder på nettstedet ditt. Bla nedover for å se de beste WordPress-pluginsene for å optimalisere bilder.

Lazy Legg bilder når det er nødvendig

Noen ganger vil kvaliteten på bildene være mye viktigere enn størrelsen. Dette er mest sant for fotografer som ønsker at bildene deres skal være helt topp. De kan ikke risikere å redusere størrelsen eller kvaliteten på filer. Likevel betyr det ikke at du bør glemme optimalisering. For å optimalisere bilder for WordPress i dette tilfellet, bør du vurdere lat lasting.

Lazy load er en teknikk som bare laster bilder når brukere trenger dem (bla til dem). Hvis du for eksempel lastet opp tjue bilder av høy kvalitet i en artikkel, ville de redusere nettstedet ditt enormt. Men hvis du lat laster bildene, ville artikkelen bli lynrask og bilder lastes bare når det er nødvendig – i øyeblikket når en bruker kommer til dem.

Har lydhøre bilder

Selv om de fleste WordPress-temaene er lydhøre, betyr det ikke nødvendigvis at bildene dine er lydhøre også. Siden du ikke vil at et stort bilde skal lastes inn på en liten skjerm, må du registrere flere bildestørrelser for nettstedet ditt. Hvis temaet ditt ikke bruker lydhøre bilder, kan du vurdere å ansette en profesjonell til jobben – det er ikke så enkelt som det kan høres ut.

Optimaliser bilder for sosiale medier

Hvis du vil være sikker på at bildene dine ser bra ut på sosiale medier, må du ta et ekstra skritt og optimalisere metakoder og skjemaoppmerking.

Hvis du bruker en SEO-plugin som Yoast, ikke glem å sjekke innstillingene. For eksempel vil Yoast la deg sette opp noen få ting relatert til sosiale medier. Så naviger til SEO -> Sosialt og skriv inn informasjonen på Facebook, Twitter, Google+ og Pinterest.

Hvis du vil ha mer, og vil optimalisere bilder for flere nettsteder for sosiale medier, kan du sjekke ut WPSSO – Nøyaktige metatagger + skjemaoppslag for sosial delingsoptimalisering og SEO-plugin.

Endre måten WordPress komprimerer JPEG-bilder

Hvis du laster opp en haug med JPEG-bilder på WordPress-nettstedet ditt, har du kanskje lagt merke til at de taper på sin opprinnelige kvalitet. Hvis du har lurt på om WordPress har skylden, vil du nå ha svaret – ja, det er det!

Når du har lastet opp et bilde i JPEG-format, WordPress endrer komprimering automatisk og bestemmer at du vil at bildet skal tape på kvaliteten. For å være mer spesifikk bruker WP 90% komprimering på JPGE-ene dine. Det er flott hvis bildene bare er der for å brukes som miniatyrbilder eller for å bli vist i et innlegg, men hvis du laster opp bildene dine, vil du at de skal være best mulig, riktig?

Heldigvis trenger du bare en linje med kode for å endre dette.

Stopp komprimering av JPEG-bilder:

Hvis du ikke vil at JPEG-bildene dine skal komprimeres, kopierer du og limer inn følgende kode i funksjonsfilen:

add_filter ('jpeg_quality', funksjon ($ arg) {return 100;});

Ikke glem å lagre endringene, og du er klar til å laste opp nye bilder.

På den annen side kan det hende at bilder ikke er så store ting for deg. Så du vil kanskje at de skal bli enda mer komprimerte og spare deg for tid på lasting av nettstedet ditt. Hvis du endrer det siste nummeret i den kodelinjen, endrer du kvaliteten på nyopplastede bilder.

Komprimere JPEG-bilder enda mer:

Jo lavere antall, jo flere bilder komprimeres. For å komprimere disse JPEG-ene enda mer, trenger du denne koden:

add_filter ('jpeg_quality', funksjon ($ arg) {return 80;});

Ikke glem; standard komprimeringsnivå er 90.

Viktig: Dette vil bare påvirke bilder du laster opp etter at du limte inn koden ifunksjonene.php. For å endre størrelsen og kvaliteten på bildene du allerede har i biblioteket, trenger du en plugin. Se hvordan du regenererer flere bildestørrelser.

De mest populære innstillinger for bildeoptimalisering for WordPress

I begynnelsen av denne artikkelen snakket vi om hvordan du optimaliserer bilder for WordPress slik at du får fart på nettstedet ditt og forbedrer SEO. Som du kunne ha sett, er det noen få forskjellige metoder du kan bruke. Det er viktig å ta vare på bilder selv før du laster dem opp til bloggen din. Men når bilder allerede er oppe på nettstedet, kan det bli umulig å gjenoptimere hvert eneste bilde separat og deretter laste dem opp igjen.

Ikke bekymre deg; ingen forventer at du gjør det i utgangspunktet. Hold deg hos oss i løpet av de følgende minuttene, da vi skal vise deg de mest populære plugin-er for bildeoptimalisering for WordPress.

For å optimalisere bilder, må du bare velge plugin fra listen. Du må konfigurere den og velge ting pluginen vil gjøre for deg. Etter det vil du kunne slappe av og delegere arbeidet til pluginen du velger, mens du kan begynne å organisere mediefilene.

Følgende plugins hjelper deg med å komprimere bildene på ethvert WordPress-nettsted du har. De vil gjøre at nettstedet lastes raskere og til slutt hjelpe deg med å forbedre SEO.

WP Smush

PRIS: Gratis

Med mer enn 700 000 aktive installasjoner, må WP Smush være et av de beste bildeoptimaliseringsprogramtilleggene for WordPress. Det kan raskt optimalisere bilder ved å bruke forskjellige komprimeringsteknikker. Det fine med komprimering av bilder med WP Smush er at bilder ikke taper på kvalitet. Tror du ikke på oss? Test plugin-modulen.

Da vi snakket om å forberede bilder for WordPress, nevnte vi at endring av størrelse er en avgjørende del av optimaliseringsprosessen. Med denne pluginen trenger du ikke å bekymre deg for det siden WP Smush lar deg stille inn maksimale dimensjoner. Etter å ha gjort det, skaleres alle større bilder automatisk før du legger dem til i biblioteket.

Denne fantastiske plugin kan fungere med JPEG-, GIF- og PNG-filer. Den fungerer med alle katalogene dine, tar seg automatisk av vedleggene, og fungerer til og med på multisite. Du kan operere på hvert bilde manuelt eller redigere femti av dem i bulk. Hvis du vil ha enda bedre resultater og flere alternativer, sjekk ut WP Smush PRO.

EWWW Image Optimizer

PRIS: Gratis

Bak det morsomme navnet, er det en av de mest populære innstillinger for bildeoptimalisering for WordPress. Akkurat som den tidligere nevnte, kan EWWW Image Optimizer komprimere bildene dine uten å påvirke kvaliteten. Når du tenker på at plugin-enheten kan få fart på nettstedet ditt på sekunder, er du allerede på vei til å laste ned det. Når du har gjort det, får du optimalisert bilder i bulk, og gallerier som GRAND FlaGallery, NextCellent og NextGEN vil til og med få sine egne Bulk Optimize-sider.

Alle bilder som bruker klassen WP_Image_Editor i WordPress vil være automatisk optimalisert, mens du manuelt kan utføre magien på alle de andre. Vi liker at du får velge mapper som du vil optimalisere. For mer informasjon om dette, og hvilke plugins som bruker klassen, vennligst åpne tjenestemannen EWWW Image Optimizer-siden på WordPress-depot.

Komprimere JPEG- og PNG-bilder

PRIS: Gratis

Liten komprimering av bilder

Hvis søt liten panda som holder WordPress-logo ikke får deg til å ønske å lære mer om denne pluginen, vet vi ikke hva som vil gjøre det. Og hvis pandaen ser kjent ut, er det fordi den er den samme som hjelper deg med å komprimere bilder på TinyPNG-nettstedet. Ja, det virker som om dyret er mer allsidig enn vi opprinnelig trodde. Men la oss fokusere på plugin-modulen.

Hvis du følger med denne pluginen, vil Panda automatisk optimalisere bildene dine. Hver gang du laster opp en ny, vil pluginen overta og gjøre jobben sin. Likevel kan du optimalisere individuelle bilder eller gjøre det i bulk bare ved å gå til mediebiblioteket.

Komprimere JPEG- og PNG-bilder støtter til og med animerte PNG-er, fungerer perfekt på en flerside, det er WooComerce-kompatibelt og vil ikke ha problemer med WP Offload S3.

Det flotte med plugin-en er at den lar deg stille maksimal bredde- og høydeattributter for alle bildene. Hvis du har vært bekymret for hva det vil gjøre metadataene, ikke bekymre deg; pandaen vil holde all informasjonen intakt.

Det er ingen filstørrelsesgrenser, du får angi en dashbord-widget, og den fungerer til og med med WordPress mobilapp. Fordi alt dette, komprimerer JPEG- og PNG-bilder mer enn 100 000 aktive installasjoner og fortjener et sted på listen over beste pluginprogrammer for optimalisering av bilder for WordPress.

Imsanity

PRIS: Gratis

Imsanity

Selv om omslagsbildet for denne plugin-en kan skremme deg bort, kan du ta et øyeblikk og se på alle funksjonene til Imsanity. Å, til og med navnet på pluginen høres sinnssykt ut, ikke sant? Når du har det bra med navnet på programtillegget, ser du at det har mye å tilby.

Imsanity kan automatisk skalere bilder, lar deg angi maksimale dimensjoner, og den har til og med et stort størrelse på alternativet. Dette er viktig hvis du allerede har hundrevis av bilder på bloggen din som trenger optimalisering.

Denne gratis plugin-en er et flott alternativ hvis du ikke vil slite med plugin-innstillingene mye. Alt som trengs er å installere og aktivere Imsanity, angi noen få alternativer, og du kan glemme det; den vil styre sin egen vei mot optimalisering av bilder.

Vi elsket alternativet som lar deg konvertere BMP-bilder til JPG. I tilfelle du har mange BMP-filer som du feil lastet opp for en tid tilbake, vil dette være en livredder.

ShortPixel Image Optimizer

PRIS: Gratis

ShortPixel Image Optimizer

Med mer enn 30 000 aktive installasjoner er ShortPixel Image fremdeles et av de mest populære bildepotiseringsprogrammene for WordPress. Plugin-en er full av funksjoner, og det vil være et must for nettstedene som har mange bilder å optimalisere.

ShortPixel Image Optimizer vil ikke bare optimalisere JPG-, PNG-, GIF- og PDF-dokumenter for deg, men det vil også la deg konvertere alle JPEG-, PNG- eller GIF-bilder til WebP. Plugin fungerer bra med andre galleriplugins, og det bryr seg ikke om nettstedet ditt bruker HTTP eller HTTPS. Det lar deg fjerne EXIF-data fra bilder (noe fotografer vil elske å ha).

Plugin gjenkjenner bilder som allerede er optimalisert, så den vil hoppe over dem når det trengs. Du får tillate eller avvise autooptimalisering, og gjøre mye, mye mer med denne fantastiske plugin. Sjekk ut den offisielle siden i depotet for å se alle funksjonene.

Optimus – WordPress Image Optimizer

PRIS: Gratis

Optimus

Akkurat som den tidligere nevnte plugin, vil Optimus optimalisere bildene dine for WordPress, og det vil gjøre det uten å påvirke bildekvaliteten. Du kan la plugin-en fungere automatisk, eller du kan slå av alternativet og bare optimalisere bilder når det er nødvendig.

Optimus fungerer på flerside, det er ikke fremmed for WordPress e-handelsnettsteder, og den er fullstendig optimalisert for WordPress Mobile Apps og Windows Live Writer. Det vil øke hastigheten på nettstedet ditt uten at du trenger å berøre en kodelinje. Plugin-en tilbyr mye mer, men du må melde deg på premium-versjonen. Hvis du vil se mer, kan du gå til den offisielle siden i WordPress-plugins-depotet.

Legg til lat lasting for videoene og bildene dine i WordPress

Når du begynner å legge til mye video- og bildemateriale på nettstedet ditt, er det åpenbart at det vil begynne å lastes tregere. Uansett hvor de kommer fra, vil videoer og store bilder fungere som en tung vekt på nettstedet ditt og vil få de besøkende til å vente mye lenger enn nødvendig for å laste inn alt innholdet. Med WordPress skulle ikke det være en stor sak, og her er hvordan du enkelt kan fikse situasjonen.

Hvis du kjenner deg til PHP, er det en flott artikkel om å legge til lat lasting for bilder og den uendelige rulle skrevet av kollegene våre på Elegante temaer.

Hvis ikke, vil vi i løpet av de neste linjene nevne noen av de mest populære late lading-plugins som vil få nettstedet ditt til å laste raskere. Og du trenger ikke engang å gjøre mye annet enn å installere en plugin og konfigurere den i noen få raske trinn.

Lazy Load for Videos

PRIS: gratis

Lat Load for Videos

Hvis du har mange Youtube- og Vimeo-videoer, bør du vurdere å installere denne pluginen. Når du har konfigurert den, vil pluginen plassere et bilde på videoen din, og på grunn av dette vil nettstedet ditt lastes mye raskere. Når en besøkende bla til en video, vil dette bildet vises med en “play” -knapp over seg. Etter et klikk vil videoen begynne å laste og spille av. En enkel demo kan sees på utviklerens nettsted.

WP YouTube Lyte

PRIS: Gratis

WP YouTube Lyte

Denne pluginen vil gjøre jobben sin på en rask og enkel måte. Etter å ha installert den, bare legg til en lenke til Youtube-videoen din eller bruk en kortkode for å legge til en. Du kan velge mellom å legge til en vanlig video, spilleliste eller bare lyd fra valgt video. Etter det vil Youtube-videoene dine få et bilde over seg som vil gjøre det mulig å laste inn. Bare klikk på bildet for å starte din video eller lyd.
Se en demonstrasjon på utviklerens nettsted.

a3 Lazy Load

PRIS: Gratis
DEMO 1
DEMO 2

a3 Lazy Load

Denne er dedikert til ditt mobilnettsted. Hvis du har mange bilder og / eller videoer som du vil vise til de besøkende på mobile enheter, bør du ta en titt på a3 Lazy Load. Det vil tillate deg å legge til lat lasting til bildene og videoene dine, og pluginen vil til og med la deg velge overgangseffekter som vil vises for brukere mens de blar gjennom innholdet som lastes inn.

I admin-området kan du enkelt slå av og på innholdet du vil late. For de som er slått på, vil innhold lastes bare når en besøkende bla til den delen av innholdet.
Det er en pent vist demo som har 1000 bilder – hver blir lastet bare når du blar til den. Ettersom denne plugin-late videoene også er, er det en video-demo du kan se ved å klikke på lenken over.

BJ Lazy Load

PRIS: Gratis

BJ Lazy Load

Hvis du ikke trenger støtte for videoer og bare vil at bildene dine skal la seg laste, bør du sjekke ut denne WP-pluginen. Når den er installert og satt opp, vil den erstatte bilder, miniatyrbilder, Gravatar-bilder og til og med iframes med en plassholder. I likhet med et tidligere nevnt plugin, vil det laste innhold bare når en bruker kommer til det.

Enten det er bilder eller videoer du vil la deg laste, vil en av de ovennevnte plugins hjelpe deg i løpet av et sekund. Alle av dem er gratis, så det er ingen unnskyldning for ikke å prøve minst et av pluginene og se hvor mye vekt på skuldrene det vil ta. Selvfølgelig er det mange andre plugins med samme funksjon, og du står fritt til å bla gjennom og prøve dem alle.

Vis før og etter bilder på en attraktiv måte

Vi er sikre på at du allerede har sett mange eksempler på før / etter bilder. Vet ikke om deg, men det første vi har i tankene når vi ser frasen “før og etter” er kondisjonstreningsprogram der folk viser kroppene sine før og etter et treningsprogram.

Hvis du tenker på det, bruker de fleste nettsteder en enkel tilnærming for å vise frem forskjellene – de tar begge bilder og plasserer dem ved siden av hverandre eller til og med den ene over den andre. Hvis du vil ha samme resultat, vil du ikke lese denne artikkelen fordi du allerede vet hvordan du gjør det.

Hva om vi fortalte deg at det er en visuelt fantastisk måte å løse dette før / etter problemet, og det bare i rekkevidde av hånden din? Det er vel, og etter et oppsett, vil du berømme utviklerne fordi det endelige resultatet er virkelig, veldig kult.

Tjue tjue

PRIS: gratis

Tjue tjue

Twenty Twenty er navnet på denne fantastiske plugin som du kan laste ned gratis i WordPress plugin repository.

Plugin-enheten lar deg plassere det ene bildet over det andre og lar deg spille med en glidebryter slik at du kan skjule / avsløre bildet. Vær så snill, se demoen, så ser du hva vi snakker om.

OK, nå når du er hektet på denne lille pluginen, la oss se hvordan du lager denne fantastiske effekten. Selv om det er relativt enkelt å gjenskape demoeffekten, vil du fremdeles trenge å kjenne deg rundt grunnleggende HTML. La oss gå:

  1. Opprett nytt innlegg eller åpne det eksisterende
  2. Sett inn to bilder i innlegget. Hvis du jobber i en Visual Editor, bør du se bildet over det andre. Hvis du jobber i en tekstredigerer, bør du se en kode som ligner på denne:
  3. 
    
    
    
  4. Skriv inn [twentytenty] -kode før det første bildet
  5. Etter den andre skriver du inn [/ twentytwenty] -koden
  6. Du bør ende opp med noe slikt i teksteditoren:

    [Twentytwenty]
    
    
    
    [/ Twentytwenty]
    
  7. Forsikre deg om at bildene dine har samme størrelse for å oppnå best mulig resultat
  8. Forhåndsvis eller publiser innlegget ditt, og nyt det visuelt fantastiske før og etter bilder

Hvordan lage interaktive bilder – tegne, legg til beskrivelser og lenker

I dag er det vanskelig å drive et nettsted uten multimedia. Bilder, videoer og musikk er en del av praktisk talt alle nettsteder. En gjennomsnittlig Internett-bruker er sterkt avhengig av visuelle stimuli, så du må ta vare på det visuelle og de interaktive delene av nettstedet ditt. Artikler med bilder får 94% flere visninger enn de uten en. Det er allerede et kjent faktum at multimedia på nettsteder kan øke avkastningen på innholdsmarkedsføring.

Vi håper det ikke er behov for å overtale deg til å ta vare på bilder på nettstedet ditt. Selv om du ikke bruker bilder i artikler (som du bør), bruker du kjente bilder, ikke sant? Det er ganske mange gallery plugins som kan hjelpe deg med å administrere bilder på WordPress-nettstedet ditt, du kan ha fotograferingsrelaterte temaer, koble Instagram til WordPress-nettstedet ditt og gjøre så mye mer. Men hva om du ville lage mer interaktivt innhold?

Til å begynne med, kan det hende du er interessert i å legge til bildeeffekt før brukere som brukerne vil elske. Ikke glem Virtual Reality i WordPress som blir mer populært etter at Automattic introduserte VR på WordPress.com. Likevel mangler det noe. Er det mulig å lage interaktive bilder med klikkbare deler? Ja, det er mulig, og vi skal vise deg hvor morsomt og enkelt det er.

Trekke oppmerksomhet

PRIS: Gratis
DEMO

Det første med denne plugin-en du vil like er at den er helt gratis! Akkurat som med alle andre plugin-filer fra WordPress-depotet, kan du laste ned, installere og aktivere det i løpet av få minutter. Den gratis versjonen lar deg jobbe med ett interaktivt bilde. Hvis du vil ha mer, må du melde deg på PRO-versjonen, men vi vil snakke om det senere.

Plugin-enheten er responsiv, og du trenger ikke å bekymre deg for at de interaktive bildene vises riktig på noen enheter. Ikke bare at bildet skaleres etter skjermstørrelse, men det vil fungere i de fleste moderne og eldre nettlesere (stasjonær og mobil). Draw Attention bruker lerretselementer når de vises i nye nettlesere mens det vil falle tilbake til bildekart hvis du laster det inn i en eldre.

Funksjoner

Før du kommer til et eksempel som viser deg hvor kraftig denne enkle plugin er, la oss se hva du kan forvente av Draw Attention:

  • Tegne – Etter at du har lastet opp et bilde, vil du få en sjanse til å tegne figurer på det. Velg hvilken som helst del av bildet ditt som vil bli valgbart / klikkbart
  • Farger – Tilpass farger slik at du kan få hotspots til å passe til design av nettstedet ditt
  • Uthev på svevet – Vis en annen del av bildet hvis en bruker svever over den valgte delen
  • Vis mer info – Vis mer informasjon om den valgte delen av bildet
  • Gå til URL – Viderekoble brukere til hvilken som helst URL hvis de klikker på utvalget

Tegn oppmerksomhetsinnstillinger

Eksempel – Interaktivt kart over Hawaii

Vi vil bruke eksemplet fra demosiden for å vise deg hva du kan gjøre med Draw Attention. Så la oss se hvordan et interaktivt kart over Hawaii ser ut når det opprettes med pluginen.

Det første du må gjøre er å finne et bilde av Hawaii-øyene. Etter at du navigerer til Trekk oppmerksomhet -> Rediger bilde, bør du laste opp bildet til området på høyre sidefelt. Når bildet er lastet inn, kan moroa begynne.

Her får du velge farger for høydepunkter (farge, kant, opacitet osv.), Style “mer infoboks” (bilde, tittel, tekstfarge, etc.). Hvis du ikke vil velge hver eneste farge for bildet manuelt, kan du raskt velge et fargevalg fra høyre sidefelt.

Ta oppmerksomhet - hvordan lage interaktive bilder i WordPress

Den mest magiske delen skjer i Hotspot-områder innstillingsskjerm. Her får du bildet lastet i full størrelse. Alt du trenger å gjøre nå er å begynne å tegne og lage en ny hotspot. Du kan legge til så mange punkter du vil, noe som betyr at du kan lage omfattende valg som du vil. Du får opprette så mange hotspots, og hver kan ha sine egne innstillinger.

Så i dette eksemplet bør du velge en av øyene. Velg en tittel på øya, legg til en beskrivelse og det ekstra bildet som vil vises når en bruker svever hotspot (høyre del av GIF-bildet vist ovenfor).

Du bør gjenta prosessen for hver av øyene du vil være interaktiv. Når du har hotspotene klare, bare kopier du kortkoden fra høyre side. Lim inn kortkoden i et innlegg, side, widget eller hvor du vil vise det nye interaktive kartet, og du er ferdig! Hvis du ønsket å omdirigere brukere til noen annen side når de klikket på valgene, trenger du bare å velge URL i stedet for beskrivelsen. Lett som det!

PRO-versjon

Mens gratisversjonen vil være perfekt hvis du bare trenger ett bilde, vil PRO-versjon lar deg ha så mange interaktive bilder på nettstedet ditt som du vil. Selv om dette vil være den viktigste tingen å vurdere, vil PRO-versjonen gi deg enda mer enn flere bilder.

Layout Options-funksjonen lar deg vise mer informasjon om valgte deler av bildet. For eksempel får du vise informasjon i en lysboks eller i en enkel verktøylinje som dukker opp etter at en bruker svirrer over den valgte delen av bildet.

Det er også tjue forhåndsdefinerte fargepaller, så du trenger ikke å tilpasse hver eneste farge manuelt. PRO-versjonen vil koste deg $ 74 for en enkelt lisens, men hvis du trenger mer enn ett interaktivt bilde, vil dette være en ikke-brainer.

Slik regenererer du flere bildestørrelser

Det er relativt enkelt å registrere nye bildestørrelser i ditt WordPress-tema. Etter at du har fortalt systemet ditt hvor store bildene skal være, navngitt dem og bestemt deg for hvordan du beskjærer dem, står du fritt til å distribuere bilder hvor som helst du vil. Men hva med de gamle bildene?

Hvis du har brukt en av teknikkene vi har vist deg, har du forberedt torva for nye bilder. Enten du bruker nylig registrerte bildestørrelser for innlegg-miniatyrbilder eller lar forfattere bruke dem i innlegg, nye regler gjelder bare for bildene som er lastet opp etter at du har gjort endringen i filen files.php. For å endre de eldre bildene foreslår vi at du bruker pluggen Regenerate Thumbnails.

Regenerere miniatyrbilder:

PRIS: Gratis
  1. Gå til Plugins-> Legg til nytt
  2. Søk etter “Regenerate Thumbnails”
  3. Installer og aktiver plugin-modulen
  4. Navigere til Verktøy-> Regen.Thumbnails

Hvis du vil endre størrelsen på alle bildene dine, klikker du bare på “Regenerere alle miniatyrbilder” -knappen og venter på at plugin-en gjør det harde arbeidet.

Slik regenererer du flere bildestørrelser

Hvis du vil se bildene som skal endres, eller hvis du bare vil endre størrelse på noen av bildene, kan du gå til mediebiblioteket, hvor du finner et nytt alternativ under “Bulk handlinger” og ett ved siden av hvert bilde i galleri.

Det gode med pluginen er at den ikke sletter de originale bildene dine. Det vil bare opprette nye bildestørrelser som du kan bruke i temaet ditt, mens de originale vil være igjen for deg å bruke dem senere eller slette manuelt hvis du bestemmer deg for at du ikke trenger dem.

Det er det. Kos deg med de nye miniatyrbildene eller sjekk ut Enkle bildestørrelser plugin som kan gjøre det samme.

Fjern bildeattributter for bredde og høyde med jQuery

Når du legger til bilder i et WordPress-innlegg, legger systemet automatisk høyden og breddeattributtene til bildet. Det er vanligvis en god ting, men det er tider hvor du ikke liker det faktum at hvert bilde får disse egenskapene.

Hvis du vil stripe attributtene rett ved opplastingspunktet, kan du gjøre det gjennom en enkel funksjon som vi viste deg sist.

Men hvis du har lest artikkelen eller prøvd funksjonen selv, har du lagt merke til at den bare påvirker bilder lastet opp etter at funksjonen ble installert i WP-systemet. Hvis du allerede har en database full av innlegg med innsatte bilder, vil ikke nevnte funksjon hjelpe deg mye med de gamle bildeattributtene dine.

Siden du sannsynligvis ikke kan gå gjennom hvert eneste bilde manuelt og slette bredde og høyde en etter en, har du sannsynligvis behov for en annen funksjon som vil stripe disse attributtene for alle eksisterende bilder som er innebygd i innleggene dine. I så fall er du på rett sted, fordi vi nå skal vise deg en enkel måte å automatisk fjerne attributter for bredde og høyde med få linjer med jQuery-kode. Ikke bli redd for forrige setning – du trenger ikke engang å vite hva jQuery er, bare følg de neste tre trinnene, så blir du ferdig med en jiffy.

Fjern bildeattributter for bredde og høyde:

  1. Åpne header.php-filen fra temamappen
  2. Kopier og lim inn denne koden hvor som helst mellom og tags:
  3.  
  4. Lagre endringer

Og du er ferdig! Koden gjør sin magi etter at du har åpnet et innlegg som inneholder et bilde og vil fjerne bredde- og høydemerker fra det.

Hvordan lage egendefinerte bildestørrelser i Media Uploader

Hvis du bruker Media Uploader for å håndtere bilder i WordPress, har du sannsynligvis sett mange alternativer for bilder. Mellom mange kan du velge en bildestørrelse du kan sende til artikkelen.

Det er alternativer for miniatyrbilder, mellomstore, store og i full størrelse å velge mellom, men alle disse alternativene har forhåndsdefinerte verdier. Så hvis du bruker et tilpasset tema, sitter du oftere enn ikke fast med å endre bredde og høyde for hvert bilde om og om igjen.

Egentlig trenger du ikke gjøre det. Det er en fin liten funksjon som heter add_image_size () som er et flott verktøy for utviklere. Og etter denne artikkelen, vil du finne den nyttig også.

La oss si at temaet ditt har en tilpasset bredde, og at du enkelt vil legge inn bilder for å passe perfekt der. La oss si at bredden er 666px (vi går ikke inn på hvorfor du har angitt bredden til dette tallet, det er ditt valg). For å gjøre det, må du legge til en ekstra alternativknapp til Media Uploader. Med koden nedenfor legger du til en størrelse til som er den halve størrelsen på den opprinnelige.

  1. Åpne funksjoner.php-filen
  2. Kopier og lim inn dette stykke koden:
  3. funksjon tilpassede_størrelser () {
    add_image_size ('one-size', 333, 333, true);
    add_image_size ('en annen størrelse', 666, 666, sant);
    }
    
    add_action ('init', 'custom_image_sizes');
    
    funksjon show_image_sizes ($ størrelser) {
    $ størrelser ['one-size'] = __ ('Custom Size 1', 'isitwp');
    $ størrelser ['another-size'] = __ ('Custom Size 2', 'isitwp');
    retur $ størrelser;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. Lagre endringer
  5. Prøv å legge til et bilde fra Media Uploader der du bør se de nye størrelsesalternativene under “Innstillinger for vedleggsskjerm”

Lag automatisk skjermbilde av et hvilket som helst nettsted og publiser det som bilde i innlegget ditt

Hvis du vil vise et miniatyrbilde av et nettsted, må du gå til nettstedet, skrive ut skjermbildet eller ta et skjermbilde med et program eller et nettlesertillegg. Da må du endre bildet, klippe det til riktig størrelse og laste det opp til WordPress slik at du kan bruke skjermdumpen i et innlegg.

Hvis du ikke trenger å ta det øyeblikksbildet nå og da, vil det ikke være noe problem, men hvis du bruker skjermbilder av forskjellige nettsteder oftere, vil du gjerne høre at det er en fantastisk funksjon som vil sparer deg for tid og nervene.

I denne delen av guiden, er vi i ferd med å vise deg hele funksjonen som lager en kortkode som du kan bruke til å ta øyeblikksbilder av en hvilken som helst webside du ønsker.

Lag automatisk skjermbilde:

  1. Åpne funksjoner.php
  2. Kopier og lim inn følgende kode:
  3. funksjon wp_webscreen ($ atts, $ content = NULL) {
    ekstrakt (shortcode_atts (-matrise (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // bredde
    "h" => '450' // høyde
    ), $ atts));
    
    $ img = ''. $ alt. '';
    returner $ img;
    }
    add_shortcode ("skjerm", "wp_webscreen");
  4. Endre standardvariabler i matrisen
  5. Lagre endringer

Denne funksjonen lager en kortkode som du enkelt kan bruke hvor som helst på WordPress-nettstedet ditt. Enten du vil bruke skjermdumpen til en webside i et innlegg, sidefeltwidget eller bunntekst, for eksempel bare å kopiere kortkoden på rett sted:

[skjerm url = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ h =” 450 ″]

Det som er flott med denne funksjonen er at den lagrer bildet som en dynamisk URL, noe som betyr at når du først har opprettet et øyeblikksbilde med kortkoden, vil den automatisk oppdatere seg i fremtiden og alltid vise det nåværende utseendet til nettstedet som er spesifisert i kortkoden..

Merk at du kan endre parametrene til kortkoden direkte fra den. Du trenger ikke å endre koden ifunksjonene.php-filen hvis du vil ta øyeblikksbilde av en annen URL eller ta stillbilde i en annen dimensjon.

Eksempel:

La oss si at du vil ta et skjermbilde av Google og gjøre det 200 × 400 piksler stort:

[skjerm url = ”http://www.google.com” alt = ”Google” w = ”200 ″ h =” 400 ″]

Du kan gjøre alt enda enklere ved å lagre kortkoden i en knapp slik at du kan sette den inn i et innlegg med et enkelt klikk på en knapp.

Konklusjon

Du trenger ikke å installere alle plugins og funksjoner vi nevnte for å forbedre bildene på ditt WordPress-nettsted. Men vi håper at du har funnet minst noen få tips som kan hjelpe deg med å optimalisere bilder eller gjøre dem bedre på noen måte.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map