我是 80 年代末和 90 年代末的孩子。 在我们所有人的手机都内置了相机之前——嗯，在手机起飞之前，真的——家人会带着宝丽来相机来捕捉那些特殊的时刻。 尽管我讨厌和兄弟姐妹摆出尴尬的照片，但我仍然怀念过去时代电影的魔力。
现在，我已经长大了，可以看到主要由 Fujifilm Instax 引发的物理打印的回归。 它们至少在我潜伏的日记组中很受欢迎。 我还没有掏出购买富士的迷你相机或智能手机打印机的钱，但我确实很受诱惑。 也许这是一种时尚，但我仍然渴望重温那段青春。
不管我是否拥有实体设备，我总能在网络上重现宝丽来风格的照片。 WordPress 块系统使它变得简单。
这 用积木建造 帖子将主要迎合主题作者。 但是，DIY用户也可以尝试一下。 本教程将介绍创建宝丽来风格图像框架作为自定义块样式的步骤。
对于本教程，我使用了 Twenty Twenty-2 和 WordPress 6.0 Beta 2。它也应该适用于 WordPress 5.9。 对于其他主题，您可能需要调整颜色。
构建块样式
我在使用块系统时获得的大部分乐趣都在于创建自定义样式。 他们通常只需要几行代码就可以将块转换为完全不同的东西。 宝丽来风格也是一样。
第一步是使用 register_block_style() 通过主题的functions.php注册自定义样式的函数：
add_action(‘init’, ‘tavern_register_block_styles’); 功能 tavern_register_block_styles() { register_block_style( ‘核心/图像’, [ ‘name’ => ‘polaroid’, ‘label’ => __( ‘Polaroid’, ‘tavern’ ) ] ); }
注册后，它将在编辑器中显示为图像块的可选样式。 但是，它仍然需要定制设计。 为此，您只需要一点 CSS。
将以下内容添加到主题的样式表中，或者最好是 通过 wp_enqueue_block_style() 注册它：
.wp-block-image[class*=is-style-polaroid] { 框尺寸：边框框； 填充：1rem； 背景颜色：#fff； box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ), 0 0 4rem rgba( 255, 255, 235, 0.5 ) 插图； .wp 块图像[class*=is-style-polaroid] figcaption { margin-top: 1rem; 边距底部：0； }
这就是字面意思。 自定义块样式是如此容易获胜，我不明白为什么更多的主题作者不包括它们。 在我的上一个主题项目中，我有 70 多个，我一直在退缩——好吧，所以我可能有点过火了。
如果你想改变照片的“年龄”，你可以在上面的 CSS 中将嵌入的阴影变暗。 默认情况下这是一个微妙的效果，但可以随意修改它。
眼尖的读者可能已经注意到我的目标是 [class*=is-style-polaroid] 而不是 .is-style-polaroid。 这是有原因的。 它减少了基于相同概念构建的其他样式的代码。
奖励：倾斜样式
宝丽来风格的框架是一种有趣的效果，但我们可以更进一步，并为左右倾斜图像添加变化。 将以下内容添加到上一节中创建的现有 tavern_register_block_styles() 函数中：
register_block_style(‘核心/图像’, [ ‘name’ => ‘polaroid-tilt-left’, ‘label’ => __( ‘Polaroid: Tilt Left’, ‘tavern’ )
] ); register_block_style(‘核心/图像’, [ ‘name’ => ‘polaroid-tilt-right’, ‘label’ => __( ‘Polaroid: Tilt Right’, ‘tavern’ )
] );
对于每个“倾斜”样式，您可以使用 transform CSS 属性以及 scale() 和 rotate() 函数。 我选择了 2 度和 -2 度的轻微旋转，但您可以将其推到尽可能远的位置，以获得您喜欢的设计。
.wp-block-image.is-style-polaroid-tilt-right { transform: scale( 0.99, 0.99 ) rotate( 2deg ); } .wp-block-image.is-style-polaroid-tilt-left { transform: scale( 0.99, 0.99 ) rotate( -2deg ); }
一个有趣的效果是当访问者将鼠标悬停在图像上时移除倾斜变换。 为此使用以下 CSS：
.wp-block-image[class*=is-style-polaroid-tilt] { transition: all 0.5s ease-in-out; .wp 块图像[class*=is-style-polaroid-tilt]:hover { 变换: scale( 1, 1 ) 旋转( 0 ); }
如果您尝试了这种块样式，请在评论中告诉我。 如果您真的想采用老式的宝丽来风格，请尝试使用自定义手写字体作为标题。 此外，如果您有任何与图像相关的自定义设计，请分享它们。
类别： 用积木建造