Wordpress建站教程：给图片添加CSS样式

作者：悦然wordpress建站(悦然建站）

继续分享wordpress建站教程。今天给大家分享一下为图片添加CSS样式的方法。

相信现在很多使用wordpress建站的用户都已经习惯了使用古腾堡编辑器，但是不知道大家注意到没有，古腾堡编辑器的图像区块只提供的默认、圆角、尺寸大小等设置，没有办法给图片添加一些更显眼的效果。

下面悦然网络工作室就给大家分享一下给古腾堡图像区块添加CSS样式的方法，可以让你的内容更加出彩。

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

/* 添加阴影和边框 */

.wp-block-image img {

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

border: 1px solid #d6d6d6;

}

把上面的CSS样式代码添加到网站的CSS文件中即可。如果你使用的主题的提供CSS设置选项，那么添加会更方便，进入外观-自定义-额外CSS，把上面的代码添加进去就可以了。

方法二：为不同的图片添加不同的CSS样式

我们同样可以使用上面的方法来实现，只不过需要先在主题模板的CSS表中预设好样式，然后在图像区块的高级-额外的CSS类中添加对应的CSS类即可。不过这样相对麻烦一下，这里我们介绍使用插件的方法来实现。

其实悦然网络工作室之前的文章就已经给大家分享过类似的方法的，使用的插件名为blocks-css

​插件安装好后可以直接在古腾堡编辑器页面给对应的图片添加不同的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;

实心边框

border-top: 10px solid #445e79;

上下边框

以上CSS效果大家可以随意修改里面的数值。

关于blocks-css插件的具体使用方法大家可以查看下面这篇文章。

WordPress自动为文章设置特色图像

WordPress特色图像实际就是文章缩略图，主要用于主题前台展示用。现在已经越来越多的主题做的功能强大而美观了，要美观就得有图显示才行，特色图像就起到这个作用。但是，默认下WordPress文章发布需为每篇文章手动设置一个特色图像，是不是觉得很麻烦呢？懒人手法就得自动为文章设置特色图像，节省一些时间。

今天介绍的自动为WordPress文章设置特色图像方法的原理是自动提取文章内第一张图片作为特色图像。这个方法还有个优点，如果你手动选择设置了特色图像，就可以覆盖这段代码功能，即使用你手动设置的特色图像。具体方法是将以下代码插入你的function.php文件中：

自动为WordPress文章设置特色图像代码

/*
自动为文章设置特色图像
代码来源: www.wpzxbj.com
*/
function autoset_featured() {
global $post;
$already_has_thumb = has_post_thumbnail($post->ID);
if (!$already_has_thumb)  {
$attached_image = get_children( \"post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1\" );
if ($attached_image) {
foreach ($attached_image as $attachment_id => $attachment) {
set_post_thumbnail($post->ID, $attachment_id);
}
}
}
}  //end function
add_action(\'the_post\', \'autoset_featured\');
add_action(\'save_post\', \'autoset_featured\');
add_action(\'draft_to_publish\', \'autoset_featured\');
add_action(\'new_to_publish\', \'autoset_featured\');
add_action(\'pending_to_publish\', \'autoset_featured\');
add_action(\'future_to_publish\', \'autoset_featured\');

WordPress自动为文章设置特色图像就这么简单，现在你就可以化繁为简，可以不用再手动设置特色图像了！