Innehållsförteckning
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.
- Varför använda bildblocket i WordPress
- Så här lägger du till bilder med WordPress bildblock
- Ytterligare formatering av bildprocessen
- 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.
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.
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
- Använda snedstreck "/" och skriva ordet "image" efteråt
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
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.
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.
Ä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.
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.
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:
- Återuppta uppladdning - Om du laddar upp högupplösta foton och internetanslutningen misslyckas fortsätter uppladdningsprocessen automatiskt från den avbrutna punkten
- 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.
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
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.
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.
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.
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.
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
Kommer City Guide-temat också att uppdateras?
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
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.
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)
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