我是 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 ); }
如果您嘗試了這種塊樣式，請在評論中告訴我。 如果您真的想採用老式的寶麗來風格，請嘗試使用自定義手寫字體作為標題。 此外，如果您有任何與圖像相關的自定義設計，請分享它們。
類別： 用積木建造