我是80后90后的孩子。在我们所有人都在手机中内置相机之前——嗯，在手机起飞之前，真的——家庭会携带宝丽来相机来捕捉那些特殊的时刻。尽管我讨厌和兄弟姐妹合影留念，但我仍然怀念过去时代电影的魔力。
现在，我已经长大了，可以看到物理打印的回归，这主要是由 Fujifilm Instax 引起的。它们很受欢迎，至少在我的潜伏日记组中是这样。我还没有花钱购买富士的迷你相机或智能手机打印机，但我确实很感兴趣。也许是一时兴起，但我还是渴望重温那段青春。
无论我是否拥有实体设备，我总能在网络上重新制作宝丽来风格的照片。 WordPress 块系统使它变得简单。
这篇 Building with Blocks 帖子将主要迎合主题作者的需求。不过，DIYer们也可以尝试一下。本教程将逐步介绍创建宝丽来风格图像框架作为自定义块风格的步骤。
对于本教程，我使用了 Twenty Twenty-2 和 WordPress 6.0 Beta 2。它应该也适用于 WordPress 5.9。对于其他主题，您可能需要调整颜色。
积木风格
宝丽来图像积木风格。
我在块系统中获得的大部分乐趣都是创建自定义样式。他们通常只需要几行代码就可以将一个块转换成完全不同的东西。拍立得风格是一样的。
第一步是使用register_block_style()通过主题的functions.php注册自定义样式函数：
add_action('init', 'tavern_register_block_styles'); function tavern_register_block_styles() { register_block_style( 'core/image', [ 'name' => 'polaroid', 'label' => __( 'Polaroid', 'tavern' ) ] ); }
注册后，会在编辑器中显示为图像块的可选样式。但是，它仍然需要定制设计。为此，您只需要一点 CSS。
将以下内容添加到您的主题样式表中，或者最好通过 wp_enqueue_block_style() 进行注册：
.wp-block-image[class*=is-style- polaroid] { box-尺寸：边框框；填充：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。有一个原因。它减少了基于同一概念构建的其他样式的代码。
福利：倾斜样式
< br />
左右标题为拍立得图片风格。
宝丽来风格的框架是一个有趣的效果，但我们可以更进一步，为左右倾斜的图像添加变化。将以下内容添加到上一节中创建的现有 tavern_register_block_styles() 函数：
register_block_style('core/image', [ 'name' => 'polaroid-tilt-left', 'label ' => __( '宝丽来：向左倾斜', '酒馆')
]); register_block_style('core/image', [ '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 { 变换：比例（0.99，0.99）旋转（-2deg）;
一个有趣的效果是在访问者将鼠标悬停在图像上时移除倾斜变换。为此使用以下 CSS：
.wp-block-image[class*=is-style-polaroid-tilt] { transition: all 0.5s ease-in-out; .wp block-image[class* =is-style-polaroid-tilt]:hover { transform: scale( 1, 1 ) rotate( 0 );
如果您尝试这种块样式，请在评论中告诉我。如果你真的想采用老派的宝丽来风格，请尝试为你的标题使用自定义手写字体。此外，如果您有任何与图像相关的定制设计，请分享。
类别：积木搭建
来源
