Hur man lägger till GIF-filer från Giphy i WordPress (2 enkla metoder)

Att lägga till animerade GIF-filer är ett roligt sätt att visa personlighet i dina blogginlägg. På WPBeginner använder vi dem ofta för att göra våra handledningar mer relaterbara.

Att ladda upp stora GIF-filer kan dock sakta ner din webbplats avsevärt. En långsam webbplats skadar din användarupplevelse och dina SEO-rankningar.

Lyckligtvis kan du bädda in GIF-filer direkt från Giphy för att lösa detta problem. Detta sparar bandbredd och håller dina sidor snabba att ladda.

I den här guiden kommer vi att dela två enkla sätt att lägga till GIF-filer från Giphy i WordPress.

För- och nackdelar med att använda animerade GIF-bilder i WordPress

Att använda animerade GIF-filer (Graphics Interchange Format) kan vara ett roligt och engagerande sätt att förbättra ditt innehåll.

De är perfekta för att lägga till animerade reaktioner, memes och popkulturreferenser på din WordPress-webbplats. Detta kan hjälpa till att öka sidvisningar och minska din blogs avvisningsfrekvens.

Det finns dock vissa nackdelar. GIF-filer är stora. De kan ta upp mycket utrymme i WordPress mediebibliotek, sakta ner din webbplats och förbruka din bandbredd. Detta är dåliga nyheter för användarupplevelsen och kan också påverka dina sökmotorrankningar och trafik.

Det är där Giphy kommer in. Genom att servera dina animerade GIF-bilder via Giphy sparar du bandbredden på din webbhotellsplan. Det kommer också att ha mindre påverkan på din WordPress laddningstid och prestanda.

Dessutom har Giphy en stor samling roliga och relaterbara GIF-filer, vilket gör det utmärkt för att lägga till en touch av humor och personlighet till ditt innehåll.

Med det sagt, låt oss titta på 2 nybörjarvänliga sätt att använda GIF-ar från Giphy i WordPress. Klicka helt enkelt på länkarna nedan för att hoppa till den metod du föredrar:

Metod 1: Hur man lägger till GIF-ar från Giphy med en inbäddningskod (Inget plugin)

Ett alternativ är att lägga till GIF:en på en sida eller ett inlägg med dess Giphy-inbäddningskod. 

Eftersom du använder en inbäddningskod behöver du inga speciella WordPress-plugins. Att hämta inbäddningskoden tar dock några extra steg. 

Om du bara vill lägga till ett litet antal GIF:ar på din webbplats, kanske dessa extra steg inte är ett problem. Men om du planerar att använda många GIF:ar kan det vara värt att installera ett plugin som gör processen enklare. 

För att lägga till en GIF med dess inbäddningskod, gå till Giphy.com. Hitta sedan GIF:en du vill använda.

Du kan nu klicka på knappen 'Bädda in'.

Giphy kommer nu att visa inbäddningskoden för denna GIF.

Vid det här laget kan du välja mellan 'Responsiv av' och 'Responsiv på'.

Vi rekommenderar att du väljer 'Responsiv På'. Detta säkerställer att din animerade GIF skalar korrekt och ser bra ut på mobila enheter såväl som datorskärmar.

Till exempel, responsiva WordPress-teman anpassar sig automatiskt till användarens skärmstorlek. 

Med det i åtanke är det en bra idé att välja 'Responsiv På'.

Efter att du har fattat ditt beslut, kopiera inbäddningskoden genom att klicka på knappen 'Kopiera kod'.

Nu är det dags att byta till ditt WordPress-administrationsområde. Här öppnar du helt enkelt Gutenberg-redigeraren för sidan eller inlägget där du vill bädda in din GIF.

Din nästa uppgift är att skapa ett nytt block för anpassad HTML. För att komma igång, klicka på '+'-ikonen. 

Sedan, i popup-fönstret som visas, skriv in 'Custom HTML' för att hitta rätt block. När du klickar på Custom HTML-blocket lägger WordPress till detta block på din sida.

Nu kan du helt enkelt klistra in din GIF:s inbäddningskod i blocket för anpassad HTML. 

Det bör se ut så här.

Innan du publicerar denna GIF kanske du vill kontrollera hur den kommer att se ut för dina besökare. För att göra detta, klicka helt enkelt på knappen 'Förhandsgranska' högst upp på skärmen. WordPress kommer nu att visa din sida i en ny flik.

Om du är nöjd med din GIF kan du publicera detta WordPress-inlägg eller sida. Klicka bara på knappen 'Uppdatera' eller 'Publicera' i blockredigeraren.

GIF:en kommer nu att visas på din WordPress-blogg.

Metod 2: Hur man lägger till GIF-ar från Giphy med EmbedPress

Om du planerar att lägga till många GIF-filer på din webbplats kan inbäddningskoder bli för tidskrävande.

Ett annat alternativ är att använda EmbedPress-pluginet. Denna freemium-plugin låter dig bädda in GIF-filer med bara deras Giphy-URL:er.

EmbedPress låter dig också bädda in innehåll från över 100 andra webbplatser. Dessa inkluderar inbäddning av YouTube-videor, PDF:er, ljudfiler, och mer.

Först måste du installera och aktivera EmbedPress-pluginet. Vi kommer att använda den kostnadsfria versionen eftersom den har vad vi behöver för den här handledningen.

Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan eller inlägget där du vill lägga till din GIF. Du kan sedan klicka på '+' ikonen.

I popup-fönstret som visas, skriv 'EmbedPress' för att hitta rätt block. 

Klicka helt enkelt på det här blocket, så lägger WordPress till ett EmbedPress-block på din sida.

Öppna Giphy-webbplatsen i en ny flik. Du kan sedan hitta den GIF du vill använda. 

Kopiera sedan helt enkelt denna GIF:ens URL. 

Nu är det dags att byta tillbaka till din WordPress-instrumentpanel. 

Klistra här helt enkelt in GIF:ens URL i EmbedPress-rutan. Klicka slutligen på 'Bädda in'.

Nu, om du tittar på din webbplats, kommer du att se din nya GIF.

Om du inte är nöjd med din GIF, har EmbedPress några inställningar som du kanske vill utforska. Dessa inkluderar att ändra höjden och bredden på alla GIF-filer du lägger till via EmbedPress.

För att titta på dessa inställningar, klicka på 'EmbedPress' i sidofältet i WordPress.

Om det inte redan är valt, klicka på fliken 'Allmänt'. Du kan nu använda dessa inställningar för att anpassa dina EmbedPress-inbäddningar. 

Kom bara ihåg att alla ändringar du gör i den här menyn kommer att påverka allt ditt EmbedPress-innehåll.

Vanliga frågor om att använda GIF:ar i WordPress

Här är svaren på några av de vanligaste frågorna vi får om att lägga till GIF-filer på en WordPress-webbplats.

Kommer inbäddning av GIF-ar från Giphy att sakta ner min webbplats?

Att använda Giphy är generellt mycket bättre för prestanda än att ladda upp stora GIF-filer direkt till WordPress. Eftersom filen serveras från Giphys servrar sparar det din bandbredd och lagringsutrymme. Det laddar dock fortfarande ett externt skript, så vi rekommenderar att du bara använder några få GIF-filer per sida för att hålla din webbplats snabb att ladda.

Kan jag skapa egna GIF-filer och ladda upp dem till WordPress?

Ja, du kan absolut ladda upp dina egna GIF:ar till WordPress mediebibliotek. Tänk bara på att GIF-filer ofta är stora och kan förbruka lagringsutrymme och sakta ner din webbplats om de inte optimeras. Vi beskriver det bästa sättet att göra detta i vår guide om hur man lägger till animerade GIF:ar i WordPress.

Är det bättre att använda ett plugin för att bädda in GIF:ar eller göra det manuellt?

Detta beror på ditt arbetsflöde. Metoden med manuell inbäddningskod är perfekt om du bara planerar att lägga till en GIF då och då, eftersom den inte kräver några extra plugins. Men om du använder GIF-filer ofta i ditt innehåll sparar en dedikerad plugin som EmbedPress tid genom att låta dig bädda in dem med en enkel URL.

Vilka är bästa praxis för att använda GIF-filer på en webbplats?

För bästa resultat, använd GIF-ar som är relevanta för ditt innehåll och tillför värde, antingen genom humor eller illustration. Försök att inte överanvända dem, eftersom en eller två välplacerade GIF-ar är mer effektiva än en rörig sida. Slutligen, välj alltid det responsiva inbäddningsalternativet för att säkerställa att dina GIF-ar ser bra ut på alla enheter.

Vidare läsning

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till GIF-filer från Giphy i WordPress. Du kanske också vill se våra andra guider relaterade till WordPress-media och prestanda:

• Hur man optimerar bilder för webbprestanda utan att förlora kvalitet
• Bästa filuppladdningsplugins för WordPress (gratis & betalda)
• Hur man enkelt lägger till interaktiva 360-gradersbilder i WordPress
• Hur du åtgärdar vanliga bildproblem i WordPress

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.