WordPress 默認的 Gallery 樣式不理想,所以萌生了想要修改一下默認 Gallery CSS 的想法,所以就動手了。
下圖就是修改后的 Gallery CSS 樣式(你也可以點擊 這里 體驗效果)
在修改默認 Gallery 樣式之前,先對 WordPress 的多媒體進行一下設置:后臺 > 設置 > 多媒體
對縮略圖的尺寸進行調整,我這邊的縮略圖大小為 284×178 。因為中等大小和大尺寸的圖像我都不需要,所以參數全部是0。
關閉默認的 Gallery CSS
將代碼加入到 Lingonberry 父主題的 functions.php
中,即可關閉:
// 關閉 wordpress 默認 Gallery 樣式
add_filter( 'use_default_gallery_style', '__return_false' );
然后就是修改 Gallery 的 CSS 了,在 Lingonberry 子主題的 style.css
文件內添加如下代碼:
/*相冊樣式開始*/
.gallery { margin: auto;}
.gallery .gallery-item {
float: left;
margin-top: 0;
text-align: center;
width: 100%;
}
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery img {
padding: 6px; /*這里是圖片邊框大小,可根據風格調整參數或者刪除。*/
background: #f2f2f2; /*這里是鼠標未經過時圖片時邊框顏色,可根據風格調整參數或者刪除。*/
border-radius: 6px; /*這里是圓角設置,可根據風格調整參數或者刪除。*/
}
.gallery img:hover {
background: #555; /*這里是鼠標經過圖片時邊框顏色,可根據風格調整參數或者刪除。*/
}
.gallery .gallery-caption {
color: #888; /*這里是圖片標題文字顏色*/
margin: 0 0 12px; /*這里是圖片標題文字位置*/
}
/*相冊樣式結束*/
在發文時,如果你要添加相冊,請在 相冊設置 > 欄目
那里選擇2。
以上,便是 Gallery CSS 修改。