Products
GG网络技术分享 2025-03-18 16:14 0
作者：悦然wordpress建站(悦然建站）
继续分享wordpress建站教程。今天给大家分享一下为图片添加CSS样式的方法。
相信现在很多使用wordpress建站的用户都已经习惯了使用古腾堡编辑器，但是不知道大家注意到没有，古腾堡编辑器的图像区块只提供的默认、圆角、尺寸大小等设置，没有办法给图片添加一些更显眼的效果。
下面悦然网络工作室就给大家分享一下给古腾堡图像区块添加CSS样式的方法，可以让你的内容更加出彩。
/* 添加阴影和边框 */
.wp-block-image img {
box-shadow: 15px 15px 0px #d6d6d6;
border: 1px solid #d6d6d6;
}
把上面的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的特色图像是一个很实用的功能，可以在文章列表中为每篇文章添加一张缩略图。但特色图像需要在编辑文章时手动添加很不方便，下面的代码可自动将文章中的第一张图片设置为特色图像。
将下面的代码添加到当前主题的functions.php中：
| function wpforce_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\', \'wpforce_featured\'); add_action(\'save_post\', \'wpforce_featured\'); add_action(\'draft_to_publish\', \'wpforce_featured\'); add_action(\'new_to_publish\', \'wpforce_featured\'); add_action(\'pending_to_publish\', \'wpforce_featured\'); add_action(\'future_to_publish\', \'wpforce_featured\'); |
如果当前文章中没有图片，但又想显示一张默认的缩略图该怎么办，可以将上面的代码修改一下，调用媒体库中某个图片作为默认的缩略图：
| function wpforce_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); } } else { set_post_thumbnail($post->ID, \'414\'); } } } //end function add_action(\'the_post\', \'wpforce_featured\'); add_action(\'save_post\', \'wpforce_featured\'); add_action(\'draft_to_publish\', \'wpforce_featured\'); add_action(\'new_to_publish\', \'wpforce_featured\'); add_action(\'pending_to_publish\', \'wpforce_featured\'); add_action(\'future_to_publish\', \'wpforce_featured\'); |
其中的数字414，是媒体库中某个图片附件的ID号。
提示
上面的代码只是一篇技术文章，可能会影响到之前添加的特色图像，所以不要轻易在自己的网站上做试验。
特色图像只适合不在乎空间流量和大小的用户使用，因为每张图片都会裁剪成多张大小不同的缩略图方便在不同的位置调用，最主要的是不支持外链，很浪费空间....
以上就是如何自动为WordPress文章添加特色图像的详细内容，更多请关注网站的其它相关文章！
Demand feedback
