Så här lägger du till en kant runt en bild i WordPress

Vill du lägga till en ram runt dina bilder i WordPress? Nyligen bad en av våra användare oss om ett enkelt sätt att lägga till gränsen runt en bild i WordPress. Medan du kan använda CSS är det förvirrande för nybörjare. I den här artikeln visar vi dig ett enkelt sätt att lägga till bildgräns i WordPress utan att redigera någon HTML- eller CSS-kod.

Video Tutorial

Om du inte gillar videon eller behöver mer instruktioner, fortsätt läsa.

Metod 1: Använda ett plugin för att lägga till bildgräns i WordPress

Den här metoden är för nybörjare som inte vill redigera någon HTML eller CSS. Det första du behöver göra är att installera och aktivera WP Image Borders-plugin. Vid aktivering måste du besöka Inställningar »WP Image Borders för att konfigurera plugin-inställningarna.

Den första delen i plugin-inställningarna gör att du kan rikta in bilder. Du kan lägga till gränser för alla bilder i dina WordPress-inlägg genom att markera rutan bredvid "Lägg till gränser för alla bilder i blogginlägg" alternativ.

Alternativt kan du rikta in specifika CSS-klasser för att få gränser. Vi visar hur du lägger till en CSS-klass i en viss bild senare i den här artikeln. Just nu kan du lägga något i CSS-klassen som .border-image.

Den andra delen i plugin-inställningarna gör att du kan anpassa gränsvärden. Du kan välja en kantstil, bredd, radie och färg.

I det sista avsnittet på inställningssidan kan du lägga till droppskuggor till dina bilder. Du kan ange ett horisontellt och vertikalt avstånd, oskärpa och sprida radie samt boxskuggfärg. Om du inte vill lägga till droppskuggor i dina bilder kan du helt enkelt lämna dessa fält tomma.

Glöm inte att klicka på knappen Spara ändringar för att spara dina insticksinställningar.

Om du valde det första alternativet "Lägg till gränser för alla bilder i blogginlägg", då behöver du inte göra något annat.

Du borde se bildgränser på alla dina blogginlägg.

Men om du valde det andra alternativet för att bara visa gränsen för specifika bilder, måste du följa nästa steg.

Lägga till CSS-klass i en bild i WordPress

Om du bara vill lägga till gränser runt valda bilder måste du berätta för WordPress vilka bilder som ska ha gränser. Du kan göra detta genom att lägga till en CSS-klass till bilder som behöver gränser.

Ladda upp din bild och lägg till den i ditt inlägg. När du har lagt till bilden klickar du på den i den visuella redigeraren och klickar sedan på redigeringsknappen i verktygsfältet.

Detta kommer att ge upp bildredigerings popup som visar dina bilduppgifter. Du måste klicka på Avancerade alternativ för att expandera det och ange sedan bildens css-klass.

Hint: detta är .border-image eftersom vi valde det i våra insticksinställningar.

Klicka sedan på uppdateringsknappen för att spara och uppdatera bildinställningar. Det är allt, din bild kommer nu att ha en extra klass. Eftersom du använder WP Image Borders-plugin visas en gräns på den här bilden.

Metod 2: Använd HTML och CSS för att lägga till bildgränser i WordPress

Lägga till bildgränser med hjälp av CSS / HTML är ett snabbare och snabbare sätt att få gränser runt dina bilder i WordPress. Det finns många sätt att göra det här, och vi kommer att visa er alla. Du kan välja vad som är bäst för dig.

Lägga till gränser som använder inline-stilar i WordPress

När du har laddat upp och sätter in din bild i ett WordPress-inlägg, växla till textredigeraren. Du kommer att se HTML-kod för din bild. Det kommer att se ut så här:

Du kan enkelt lägga till CSS-stil i HTML-koden så här:

Gärna ändra gränsvidd, färg, vaddering och marginal till dina egna behov.

Lägga till bildgräns i ditt WordPress-tema eller barntema

Om du vill permanent lägga till gränser för alla bilder i dina WordPress-blogginlägg och sidor kan du lägga till CSS direkt i ditt WordPress-tema eller barntema.

De flesta WordPress-teman har redan dessa stilregler definierade i temat stilark som vanligtvis är style.css-fil. Du kan ändra den befintliga CSS, eller du kan lägga till din egen CSS i ett barntema.

WordPress lägger till standard bildklasser för alla bilder. För att se till att bilder i dina inlägg / sidor har en bildgräns, måste du rikta in alla dessa klasser. Här är ett enkelt CSS-kod för att komma igång:

 img.alignright float: right; marginal: 0 0 1em 1em; gräns: 3px solid #EEEEEE;  img.alignleft float: left; marginal: 0 1em 1em 0; gräns: 3px solid #EEEEEE;  img.aligncenter display: block; marginal-vänster: auto; marginal-höger: auto; gräns: 3px solid #EEEEEE;  img.alignnone border: 3px solid #EEE;  

Om du bara vill använda bildgränser när du behöver dem, kan du lägga till CSS-klassen till dina bilder (se ovan). Lägg till stilregler för denna CSS-klass i ditt tema eller barntema.

 img.border-image border: 3px solid #eee; padding: 3px; marginal: 3px;  

Vi hoppas att den här artikeln hjälper dig att lägga till bildgränsen kring dina WordPress-bloggbilder. Du kanske också vill se vår guide om hur du sparar bilder optimerade för webben för att påskynda din WordPress-webbplats.

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