wordpress建站教程：給圖片添加CSS樣式

繼續(xù)分享wordpress建站教程。今天給大家分享一下為圖片添加CSS樣式的方法。

相信現(xiàn)在很多使用wordpress建站的用戶都已經(jīng)習(xí)慣了使用古騰堡編輯器，但是不知道大家注意到?jīng)]有，古騰堡編輯器的圖像區(qū)塊只提供的默認(rèn)、圓角、尺寸大小等設(shè)置，沒(méi)有辦法給圖片添加一些更顯眼的效果。

下面悅?cè)痪W(wǎng)絡(luò)工作室就給大家分享一下給古騰堡圖像區(qū)塊添加CSS樣式的方法，可以讓你的內(nèi)容更加出彩。

方法一：直接全局添加CSS樣式

/* 添加陰影和邊框 */
.wp-block-image img {
box-shadow: 15px 15px 0px #d6d6d6;
border: 1px solid #d6d6d6;
}

把上面的CSS樣式代碼添加到網(wǎng)站的CSS文件中即可。如果你使用的主題的提供CSS設(shè)置選項(xiàng)，那么添加會(huì)更方便，進(jìn)入外觀-自定義-額外CSS，把上面的代碼添加進(jìn)去就可以了。

方法二：為不同的圖片添加不同的CSS樣式

我們同樣可以使用上面的方法來(lái)實(shí)現(xiàn)，只不過(guò)需要先在主題模板的CSS表中預(yù)設(shè)好樣式，然后在圖像區(qū)塊的高級(jí)-額外的CSS類中添加對(duì)應(yīng)的CSS類即可。不過(guò)這樣相對(duì)麻煩一下，這里我們介紹使用插件的方法來(lái)實(shí)現(xiàn)。

其實(shí)悅?cè)痪W(wǎng)絡(luò)工作室之前的文章就已經(jīng)給大家分享過(guò)類似的方法的，使用的插件名為blocks-css

blocks-css插件下載地址

https://downloads.wordpress.org/plugin/blocks-css.zip

插件安裝好后可以直接在古騰堡編輯器頁(yè)面給對(duì)應(yīng)的圖片添加不同的CSS樣式效果，如上圖所示。

box-shadow: 15px 15px 0px #d3dce5;

陰影效果

box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);

半透明陰影

border: 1px solid #445e79;
border-radius: 10px;

實(shí)心邊框

border-top: 10px solid #445e79;
border-bottom: 10px solid #445e79;

上下邊框

以上CSS效果大家可以隨意修改里面的數(shù)值。

關(guān)于blocks-css插件的具體使用方法大家可以查看下面這篇文章。

給WP古騰堡區(qū)塊添加CSS效果