如何在WordPress中的圖像周圍添加邊框


您是否要在WordPress中的圖像周圍添加邊框? 最近,我們的一位用戶要求我們提供一種簡單的方法來在WordPress中添加圖像周圍的邊框。 雖然可以使用CSS,但對於初學者來說卻很混亂。 在本文中,我們將向您展示一種無需編輯任何HTML或CSS代碼即可在WordPress中添加圖像邊框的簡便方法。

WordPress圖像邊框

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

方法1:使用插件在WordPress中添加圖像邊框

此方法適用於不想編輯任何HTML或CSS的初學者。 您需要做的第一件事是安裝並激活WP Image Borders插件。 激活後,您需要訪問 設置»WP圖像邊框 配置插件設置。

WP Image Borders插件的設置頁面

插件設置的第一部分允許您定位圖像。 您可以通過選中旁邊的框,為WordPress帖子中的所有圖像添加邊框 “為博客文章中的所有圖像添加邊框” 選項。

或者,您可以將特定CSS類定位為具有邊框。 本文後面將向您展示如何向特定圖像添加CSS類。 現在,您可以將任何內容放入CSS類中,例如 .border-image

插件設置的第二部分允許您自定義邊框設置。 您可以選擇邊框樣式,寬度,半徑和顏色。

設置頁面的最後一部分允許您向圖像添加陰影。 您可以輸入水平和垂直距離,模糊和散佈半徑以及框陰影顏色。 如果您不想在圖像中添加陰影,則只需將這些字段保留為空白即可。

不要忘記單擊“保存更改”按鈕來存儲您的插件設置。

如果選擇第一個選項 “為博客文章中的所有圖像添加邊框”,則您無需執行其他任何操作。

您應該在所有博客文章圖像上看到圖像邊框。

但是,如果選擇第二個選項僅顯示特定圖像的邊框,則需要執行下一步。

在WordPress中將CSS類添加到圖像

如果僅希望在所選圖像周圍添加邊框,則需要告訴WordPress哪些圖像應具有邊框。 您可以通過向需要邊框的圖像添加CSS類來實現。

只需上傳您的圖片並將其添加到您的帖子中即可。 添加圖像後,在視覺編輯器中單擊它,然後單擊工具欄中的編輯按鈕。

在WordPress中編輯圖像

這將彈出顯示圖像詳細信息的圖像編輯彈出窗口。 您需要單擊“高級選項”將其展開,然後輸入圖像的css類。

提示:這是 .border-image 因為我們是在插件設置中選擇的。

在WordPress中將CSS類添加到圖像

接下來,單擊更新按鈕以保存和更新圖像設置。 就是這樣,您的圖像現在將具有一個附加類。 由於您使用的是WP Image Borders插件,因此該圖像上會顯示一個邊框。

方法2:使用HTML和CSS在WordPress中添加圖像邊框

使用CSS / HTML添加圖像邊框是在WordPress中獲取圖像周圍邊框的一種越來越快的方法。 您可以通過多種方式執行此操作,我們將向您展示所有方法。 您可以選擇最適合自己的方法。

在WordPress中使用內嵌樣式添加邊框

將圖片上傳並插入WordPress帖子後,請切換至文本編輯器。 您將看到圖像的HTML代碼。 它看起來像這樣:

藍鳥

您可以像這樣在HTML代碼中輕鬆添加CSS樣式:

藍鳥

可以根據自己的需要隨意更改邊框的寬度,顏色,填充和邊距。

在WordPress主題或子主題中添加圖像邊框

如果要向WordPress博客文章和頁面中的所有圖像永久添加邊框,則可以直接在WordPress主題或子主題中添加CSS。

大多數WordPress主題已經在主題的樣式表(通常是style.css文件)中定義了這些樣式規則。 您可以修改現有的CSS,也可以在子主題中添加自己的CSS。

WordPress將默認圖像類添加到所有圖像。 為了確保帖子/頁面中的圖像具有圖像邊框,您需要定位所有這些類。 這是一個簡單的CSS片段,可以幫助您入門:

img.alignright {
float:right; 
margin:0 0 1em 1em;
border:3px solid #EEEEEE;
}
img.alignleft {
float:left; 
margin:0 1em 1em 0;
border:3px solid #EEEEEE;
}
img.aligncenter {
display: block; 
margin-left: auto; 
margin-right: auto;
border:3px solid #EEEEEE;
}
img.alignnone { 
border:3px solid #EEE; 
}

如果僅在需要時使用圖像邊框,則可以將CSS類添加到圖像中(請參見上文)。 在您的主題或子主題中為此CSS類添加樣式規則。

img.border-image { 
border: 3px solid #eee;
padding:3px; 
margin:3px;
}

我們希望本文能幫助您在WordPress博客圖像周圍添加圖像邊框。 您可能還想查看我們的指南,該指南如何保存針對網絡優化的圖像以加快WordPress網站的速度。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。