Arbeta med WordPress Bildblock: Så här lägger du till bilder i WordPress [+hemligt tips]

Arbeta med WordPress Bildblock: Så här lägger du till bilder i WordPress [+hemligt tips]

För många användare kan det vara riktigt frustrerande att arbeta med bilder. Det är inte alltid lätt att välja rätt bildförhållande eller att ändra storlek på bilderna så att de ser bra ut i hela layouten.

  1. Varför använda bildblocket i WordPress
  2. Så här lägger du till bilder med WordPress bildblock
  3. Ytterligare formatering av bildprocessen
  4. Extra tips från oss i artikeln

Äldre WordPress-versioner (upp till v5.0) lägger till bilder med hjälp av +Add Media-knappen. Problemet var att även med minimal ändring av bildstorleken skulle du behöva ladda upp den igen. Det innebär slöseri med tid och överflödiga klick.

Den nya blockbaserade redigeraren Gutenberg ändrar hur man lägger till bilder i WordPress för att göra processen enklare för slutanvändarna. I den här artikeln kommer vi att visa dig en praktisk guide om hur du lägger till och redigerar WordPress Bildblock. Dessutom kommer vi att förklara ytterligare ett alternativ för att klistra in bilder - hur man kopierar och klistrar in en bild i innehållsområdet med bara några få klick. Vi kommer också att presentera de nya funktioner som tillkommit i WP 5.3.

Men låt oss först tala om varför du bör använda bilder i inlägg och sidor.

Varför är WordPress bildblock ett måste för din webbplats?

Dra till dig uppmärksamhet

Bilder drar till sig webbplatsbesökarnas uppmärksamhet. De måste vara intressanta för att besökarna ska stanna kvar längre på din webbplats. Tänk på ett blogginlägg utan bilder. Det är bara en massa text. Vid första anblicken är det inte särskilt intressant, även om det kan vara värdefullt och fullt av information. Dessutom kan bilder hjälpa dig att föreställa dig och beskriva ditt ämne bättre.

Av den anledningen måste vi använda WordPress Image-block för att fokusera uppmärksamheten på viktiga saker.

Exempel på 2 bloggar med eller utan bilder
Exempel på 2 bloggar med eller utan bilder

Illustrativ text och sammanhang

Bilder är också en viktig del för att förstå innehållet eftersom de gör det möjligt för besökare att bättre förstå vad artikeln handlar om. Tack vare infografik kan du förklara komplicerade samband och berätta saker på ett enkelt sätt. Det hjälper besökarna att bättre orientera sig i det problem som du pratar om.

Exempel på infografik
Infografik för bättre textförklaring

Gör webbplatsen trevligare

Dessutom sätter bilder snyggt pricken över i:et på hela webbplatsens design. Det handlar inte bara om webbplatsens layout, utan också om användbarhet. En korrekt vald och placerad bild kan göra det lättare för besökaren att surfa på din webbplats.

Så här lägger du till bilder i WordPress blockredigerare

För att infoga en bild i inlägg eller sida måste du lägga till kärnblock - Bildblock. Det finns flera sätt att göra det:

- Använda "+" i det övre fältet eller var som helst i redigeringsverktyget

Lägg till bildblock genom att klicka på "+"
Lägga till WordPress Image-block genom att klicka på "+"

- Använda snedstreck "/" och skriva ordet "image" efteråt

Lägg till bildblock med hjälp av snedstreck
Lägga till bildblock med hjälp av snedstreck "/"

Ett nytt block kommer att skapas där du kan lägga till faktiska bilder.

Ladda upp bilder till WordPress

Hur placerar man bilder där man vill ha dem?

  • Använd Upload och välj en bild från din hårddisk
  • Använd Media Library, där du kan välja bilder som redan har laddats upp på din webbplats
  • Använd musen och dra och släpp bilden
  • Infoga URL-adress för bild
Alternativ för att ladda upp bilder
Tillgängliga alternativ för uppladdning av bilder - ett av dem är dra och släpp bilden från mappen

Mindre känd metod för att lägga till WordPress-bilder

Förutom att ladda upp bilder via uppladdningsfönstret som nämnts tidigare, finns det ett annat sätt att infoga bilder (och det är ett så snabbt sätt!). Med den förbättrade WordPress-redigeraren kan du göra följande:

  • Kopiera bilden från valfritt innehåll, eller
  • Bara "dra" bilden med en muspekare

Sedan infogar eller flyttar (släpper) du den valda bilden till den plats i innehållsytan som du vill ha.

Dra och släpp bild från publicerat inlägg till innehållsyta
Dra den valda bilden och släpp den där du behöver den (direkt till WordPress-redigeraren)

Samma teknik kan du också använda om du vill klistra in en bild som tagits från din skärm. Endast tre enkla steg behövs. För det första, du måste ta en skärmdump med hjälp av funktionen för utskriftsskärm. Windows 10 har till exempel ett standardverktyg som heter Snip & Sketch, som också är tillgängligt via en genväg - tryck bara på Win+Shift+S samtidigt på tangentbordet. Välj sedan det bildområde som du vill fånga. Det sista steget är att klistra in den kopierade bilden (eller en del av den) i innehållsområdet med hjälp av den grundläggande genvägen Ctrl+V.

Och vad händer med WordPress-bilden som du har klistrat in i din editor? Jo, den läggs automatiskt till i mediebiblioteket där du kan redigera den här bilden.

Begränsade alternativ för bildmetadata

Inom bildredigering kan du ställa in dess titel, bildtext, beskrivning och alternativa text. Tyvärr kan du inte ändra bildens filnamn - den behåller sitt autogenererade namn, t.ex. bild-1.png och så vidare. Denna typ av filnamn kan vara en liten nackdel när det gäller SEO-optimering på grund av konflikt med rekommendationer för filnamn. Därför måste du ta hänsyn till denna aspekt innan du flyttar WordPress-bilder till innehållsområdet.

Justering av bilder

Bildjustering är en av de viktigaste funktionerna. Oavsett om du lägger till WordPress Image-block i inlägg eller sida bör du alltid överväga placering beroende på webbplatsens design. Baserat på det kan bildjustering väljas i verktygsfältet ovanför den. Som standard kan du justera bilden till vänster, höger eller centrera den. Vissa WordPress-teman tillåter att bilder centreras som breda eller fulla. Det beror verkligen på temafunktioner eftersom inte alla teman stöder det.

Inställningar för bildjustering
Alternativ för bildjustering

Ändra storlek på bilder

Den revolutionerande funktionen i Image-blocket i WordPress Editor är den praktiska storleksändringen. Dra helt enkelt i sidan av bilden för att göra den mindre eller större. På så sätt kan du justera bildstorleken beroende på texten i innehållet. Editorn behåller automatiskt bildens proportioner, vilket innebär att du inte behöver oroa dig för deformationer.

Ändra storlek på bilder
Smidig storleksändring av bilden genom att fånga dess handtag

Ny blockstil som omvandlar en bild till en cirkelform

Om du använder den senaste tillgängliga versionen av WordPress kanske du har lagt märke till en ny circle-crop-stil som du kan använda för din bild. Bildens form kan ändras via det övre verktygsfältet genom att klicka på den första ikonen "Ändra blocktyp eller stil". Standardformen (rektangel) kommer att klippas till en cirkelform.

Cirkelform på bilden
Den nya cirkelformade designen för dina bilder

Nya funktioner i WordPress Images-blocket (tillagt i WP 5.3)

Stöd för högupplösta bilder

En av de största höjdpunkterna i WP 5.3 är den förbättrade bildhanteringen på WordPress-plattformen. Att arbeta med bilder har nu två huvudfunktioner:

  1. Återuppta uppladdning - Om du laddar upp högupplösta foton och internetanslutningen misslyckas fortsätter uppladdningsprocessen automatiskt från den avbrutna punkten
  2. Automatisk bildrotation - den senast lanserade WP-versionen säkerställer att felaktigt roterade bilder automatiskt roteras till rätt position när de laddas upp

Inställningar i Inspector

För att konfigurera de exakta dimensionerna kan du använda inspektören i det högra sidofältet i redigeringsverktyget. Inställningar för bildstorlek erbjuder färdiga format som t.ex. miniatyrbild, medium, stor eller full storlek. Du kan naturligtvis ange bredd och höjd i pixlar eller procent.

Tillgängliga inställningar för bildstorlek
Inställningar för bildstorlek

Det är mycket snabbt och praktiskt eftersom du kan göra alla ändringar av bildstorleken direkt i WordPress Images-blocket och allt på ett ställe i blockredigeraren.

Andra bilder blockinställningar

Så här lägger du till URL-adress

Bilder kan användas som statiska bilder eller också kan de vara klickbara och länkas till:

  •   Mediefil
  •   Bifogad sida
  •   Anpassad URL
Inställningar för bildlänkar
Tillgängliga inställningar för bildlänkar

Så här redigerar du bilden i WordPress bildblock

Varje bild kan redigeras genom att klicka på pennikonen. Ett modalt fönster med Mediabibliotek öppnas där du kan skriva alt-text, titel, bildtext och beskrivning. På samma sätt som du redan är van vid att göra det i äldre WordPress-versioner med klassisk redigerare.

Bildinformation för SEO-ändamål
Bildinformation som du bör fylla i för att förbättra din webbplats SEO

Varför är det viktigt att dessa texter är ifyllda?

Om besökare klickar på bilden för att se den större, ser de bildtiteln (till exempel Citadela hemsida) och inte bildens filnamn. Om det uppstår problem med att ladda bilden visas dessutom alternativ text på din webbplats.

Extra tips

Förutom alla dessa anledningar och inställningar för WordPress Bildblock finns det en sak som är mycket viktig. Med hjälp av bilder kan du få fler besökare på din webbplats. Så hur får man tag på dem?

Nuförtiden är folk lata som inte orkar läsa. De föredrar att bläddra ner i bilderna för att hitta svar. Hur kommer det sig att dina foton och bilder kan rankas? Texter är svaret. Mycket viktigt för SEO-optimering är den perfekta bildtiteln och beskrivningen. Glöm inte att fylla i Alternativ text. Då kan Google bättre förstå bilden. Så du skulle ha en större chans att ranka den i bildsökresultaten.

2 sätt hur man lägger till bildtext

Att lägga till bildtext är mycket enkelt med blockredigeraren. Precis under bilden finns det ett utrymme för att skriva text. Detta är det första sättet - Bildtexten skrivs till exakt denna bild på given undersida.

Bildtext
Bildtexten skrivs direkt under bilden

Det andra sättet är att skriva bildtexten med hjälp av pennikonen (Redigera bild) i Mediabiblioteket. På så sätt lägger du till bildtexten globalt på hela webbplatsen. Det betyder att om du använder samma bild på tre olika platser kommer den alltid att använda den här bildtexten.

Lägga till bildtext i mediebiblioteket
Bildtext tillagd via Media library

Gillar du hur enkelt det är att lägga till bilder i WordPress Image-block? Testa det själv!

Ta reda på mer om vårt helt nya Citadela WordPress-tema och dess skräddarsydda layoutpaket. De är specialdesignade och utvecklade för olika typer av företag och de stöder också det nya sättet att redigera innehåll via WordPress blockredigerare.

7 svar på ”Working with WordPress Image block: How to add images in WordPress [+Secret tip]

    1. Hallå?

      Tack för din kommentar. Ja, mallen kommer att vara kompatibel med alla WordPress-plugins som är skrivna enligt WordPress Codex and Standards.

      Skål!
      Zlatko

    1. Hallå där,

      Tack för att du frågar. Det är vår kärnverksamhet att hålla alla våra produkter uppdaterade på regelbunden basis.
      Om du är intresserad av möjligheten att uppgradera från City Guide till Citadela-tema som kommer att vara fullt kompatibelt med wordpress gutenberg editor är svaret: ja, vi är avsedda att släppa plugin tack vare vilket du kommer att kunna hantera migrering från City Guide-tema till Citadela-tema utökat med Citadela-katalogplugin (det första plugin bör släppas snart).

      Med vänlig hälsning!
      AIT-team

  1. Jag har märkt att det är möjligt att klistra in en bild direkt i Gutenberg-redigeraren. Detta kommer att resultera i en bild som läggs till i mediebiblioteket som heter bild-1, bild-2 etc ...

    En funktion som jag inte läste på den här sidan så kanske en trevlig en att lägga till.

    Detta är särskilt användbart när en bild har skärmdumpats med hjälp av Windows snippet tool (Win+shift+S). Den kan sedan klistras in direkt i artikeln precis där markören är placerad.

    Den största nackdelen med den här metoden är att jag inte har hittat ett sätt att redigera filnamnet under eller efter att ha klistrat in det. Så det kommer inte att vara särskilt SEO-vänligt.

  2. Hej
    Jag har problem med att lägga till bilder i temat "Multi Author Blog". Det verkar vara omöjligt att lägga till en 2:a eller 3:e bild till det roterande reglaget högst upp i varje blogginlägg. Detta innebär att skjutreglaget är tomt efter några sekunder, som om det förväntade sig den andra bilden.
    Snälla, kan du fixa det?
    Alternativt: en fråga - "Multi Author Blog" är viktigt för Archnetwork (vi har en partner i Slovakien) eftersom vi använder den som "Rapportering" plattform för deltagare i våra naturprojekt. Finns det ett alternativt tema i ditt bibliotek som vi skulle kunna använda på samma sätt?
    Blair Urquhart (livstidsabonnemang - IT-avdelning Archnetwork)

    1. Hallå där,

      Tack för att du skrev in. För det första, vänligen kolla in dina tema / plugin-versioner med de senaste om du kan: vi rekommenderar att du använder AIT Updater-plugin gratis -> https://www.ait-themes.club/wordpress-plugins/ait-updater/ , (eller dokumentationen hur du ställer in plugin: https://www.ait-themes.club/doc/updater-plugin-documentation/
      Instruktioner om produktaktivering hittar du på: https://www.ait-themes.club/doc/theme-activation/

      Om ditt problem kvarstår, vänligen skicka oss några bilder eller kontakta oss via supportforum med AIT SysInfo-rapport: https://www.ait-themes.club/wordpress-plugins/ait-sysinfo/. Våra tekniker är redo att hjälpa dig med alla temarelaterade problem: Kundsupport tillhandahålls under arbetsdagar från 8:00 till 17:00 Centraleuropeisk tid eftersom jag inte kunde replikera ditt problem. Revolution slider fungerar korrekt.

      För det andra,
      några intressanta funktioner har lagts till i produktpaketet Citadela, ta en titt på jämförelsetabellen: https://www.ait-themes.club/next-generation-directorypro/

      Om det är något annat vi kan hjälpa dig med, vänligen kontakta oss igen.

      Vänliga hälsningar!
      Zlatko
      AIT-team

Kommentarer är stängda.