重新創建 Onia:使用 WordPress 塊構建筆觸背景

當我本周查看 WordPress 主題目錄中的最新版本時,我遇到了一個引起我注意的版本。 奧尼亞 乾淨且極簡,同時保留了華麗的效果,以將注意力集中在頁面上的幾個元素上。

這可能是我一直在免費主題目錄中尋找的那些未加工的鑽石之一嗎?

它有潛力,但它失敗了。 當我探索這個主題時,感覺作者花了 90% 的時間來設計一個引人注目的首頁。 深入內頁並沒有注意到排版,因為每行的字元數達到了 150 甚至更多,是舒適閱讀的兩倍多。

這是很容易解決的問題。 我更失望的是 Onia 不是塊主題。 所有的元素都在那裡。 它沒有做任何特別複雜的事情,也沒有明顯的理由讓它成為經典主題。

昨天晚上,我坐下來將 Onia 重新創建為塊主題。 從技術上講,我是在我手頭已有的基本主題項目之上直接從編輯器構建它的主頁。 有幾個挑戰,但我在大約一個小時內完成了大部分工作。 當我瀏覽可能的解決方案時,其他部分花了一點時間。

以下是兩個頭版的對比(先是奧尼亞,後是我的娛樂):

重新創建 onia-building-brushstroke-backgrounds-with-wordpress-blocks 重新創建 Onia:使用 WordPress 塊構建筆觸背景recreating-onia-building-brushstroke-backgrounds-with-wordpress-blocks-1 重新創建 Onia:使用 WordPress 塊構建筆觸背景

顯然,我在間距、尺寸和顏色方面採取了一些自由。 我沒有嘗試精確的複製品。 取而代之的是,在原版上進行了幾次旋轉,有點重新啟動。

一些快速筆記

主題經常讓我感到沮喪的一件事是,它們在演示中展示了這些漂亮的徽標,但無法讓用戶使用相同的字體。 我不確定徽標中使用的原始字體系列,但我添加了 薩克拉門托 作為草書手寫選項:

recreating-onia-building-brushstroke-backgrounds-with-wordpress-blocks-2 重新創建 Onia:使用 WordPress 塊構建筆觸背景用戶可以自定義的漂亮字體。

這些功能可以對普通用戶產生影響。 不是每個人都可以載入 Photoshop 並創建自己的專業徽標。 但是,他們可以鍵入其站點的名稱並為純文本版本選擇字體選項。

從技術上講,Gutenberg 目前有兩個功能,但我使用的 WordPress 5.9 中沒有。 第一個是 閱讀更多塊. Onia 在它的帖子網格中有這個。 作為主題作者,如果它是一個劫持,我會簡單地等待這個功能。 考慮到特色圖片和帖子標題都鏈接到單個帖子頁面,它不是一個成敗的元素。

第二個缺失的功能是 「顯示標籤」選項 對於社交圖標塊。 原始設計的解決方法是使用導航塊,因為鏈接只是純文本。 另一種選擇是社交圖標的自定義塊樣式。 無論哪種方式,這都不是這個主題作為塊主題發布的障礙。

主題的所有其他設計元素都可以通過塊系統實現。

筆觸塊樣式

我說有挑戰,但我用這個詞來表示「有趣的東西」。 這些是設計師和開發人員可以深入研究問題並嘗試創新的部分,它們是我想分享的解決方案。

我最喜歡的主題設計元素之一是它使用 SVG 在介紹標題後面創建筆觸:

recreating-onia-building-brushstroke-backgrounds-with-wordpress-blocks-3 重新創建 Onia:使用 WordPress 塊構建筆觸背景Onia 主頁介紹。

該主題使用了一種將 元素包裝在

中的老式方法。 這會將畫筆背景應用於文本的最後幾個單詞。 然而,這種實現對於較小的設備是有問題的,不能跟上屏幕變化時文本中斷的自然流動。 用戶也無法控制筆觸或文本的顏色。

我想知道是否有更好的方法來做到這一點,同時為用戶提供最大的靈活性。

幸運的是, WordPress 新聞最近重新啟動 採用全新的設計,嚴重依賴筆觸。 另外,主題是 根據 GPL 許可,所以它的資產是免費的。

老實說,我希望在閱讀各種 CSS 幫助和支持網站之前查看它的源代碼。 我們社區的設計師已經解決了我遇到的問題。 我所要做的就是調整他們的解決方案以滿足我的需求。

經過一番爭論,我設法為標題創建了一個可自定義的筆觸背景:

recreating-onia-building-brushstroke-backgrounds-with-wordpress-blocks-4 重新創建 Onia:使用 WordPress 塊構建筆觸背景recreating-onia-building-brushstroke-backgrounds-with-wordpress-blocks-5 重新創建 Onia:使用 WordPress 塊構建筆觸背景筆觸適用於任何顏色。

用戶可以像往常一樣調整文本顏色。 但是,修改背景顏色會更改筆觸顏色。 筆劃始終與最後一行文本對齊,因此無論屏幕大小如何,它都可以工作。 這可能並不總是可取的。 但是,對於用例,例如突出顯示特定文本,存在其他解決方案。

以下屏幕截圖是我更改顏色時的編輯器視圖:

recreating-onia-building-brushstroke-backgrounds-with-wordpress-blocks-6 重新創建 Onia:使用 WordPress 塊構建筆觸背景自定義筆觸背景顏色。

要為標題塊創建筆觸背景,我將以下代碼添加到主題的 functions.php 文件中:

add_action(‘init’, ‘tavern_register_block_styles’); 功能 tavern_register_block_styles() { register_block_style( ‘核心/標題’, [ ‘name’ => ‘brush’, ‘label’ => __( ‘Brush’, ‘tavern’ ) ] ); }

然後,我從 WordPress 新聞回購 並將其添加到我主題中的 /assets/svg 文件夾中。

最後一步是將自定義 CSS 添加到我的主題樣式表中。 一世 覆蓋添加樣式 在我之前的 Building with Blocks 教程中更深入地了解那些需要複習的人。

/* 取消 WP 在帶有背景的標題上的填充。 */ :is( h1, h2, h3, h4, h5, h6 ).is-style-brush.has-background { padding: 0; } /* 為標題添加默認背景。 將其剪輯到文本中。 */ :where( h1, h2, h3, h4, h5, h6 ).is-style-brush { position: relative; z-index:1; 背景顏色:#b5b5b5; 背景剪輯:文本!重要; -webkit-background-clip:文本!重要; } /* 將筆觸添加到 ::before。 使用 ::after 可能會與編輯器發生衝突。 */ :where( h1, h2, h3, h4, h5, h6 ).is-style-brush::before { content: “”; 位置:絕對; z 指數:-1; 底部:-1rem; 左:-1rem; 高度:計算(1.25em + 1rem); 寬度:100%; 背景顏色:繼承; -webkit-mask-image: url(‘assets/svg/brush-stroke-big.svg’); mask-image: url(‘assets/svg/brush-stroke-big.svg’); -webkit-mask-position:左下角; 掩碼位置:左下角; -webkit-mask-repeat:不重複; 掩碼重複:不重複; -webkit 掩碼大小:100% 100%; 掩碼大小:100% 100%; }

這些規則中的大多數都可以根據具體情況進行調整。 根據主題的不同,有些人可能需要一些捏造。

該解決方案適用於其他塊。 我鼓勵主題作者嘗試並使用其他 SVG 來看看他們想出什麼。

注意:Onia 主題鏈接到其 SVG 背景圖像的 CDN,這在 WordPress.org 上是不允許的。 我也找不到任何許可信息。 由於不確定它是否與 GPL 兼容,我沒有使用主題中的資產。

類別: 用積木建造

像這樣

載入中…

資源

相關文章