當我本周查看 WordPress 主題目錄中的最新版本時,我遇到了一個引起我注意的版本。 奧尼亞 乾淨且極簡,同時保留了華麗的效果,以將注意力集中在頁面上的幾個元素上。
這可能是我一直在免費主題目錄中尋找的那些未加工的鑽石之一嗎?
它有潛力,但它失敗了。 當我探索這個主題時,感覺作者花了 90% 的時間來設計一個引人注目的首頁。 深入內頁並沒有注意到排版,因為每行的字元數達到了 150 甚至更多,是舒適閱讀的兩倍多。
這是很容易解決的問題。 我更失望的是 Onia 不是塊主題。 所有的元素都在那裡。 它沒有做任何特別複雜的事情,也沒有明顯的理由讓它成為經典主題。
昨天晚上,我坐下來將 Onia 重新創建為塊主題。 從技術上講,我是在我手頭已有的基本主題項目之上直接從編輯器構建它的主頁。 有幾個挑戰,但我在大約一個小時內完成了大部分工作。 當我瀏覽可能的解決方案時,其他部分花了一點時間。
以下是兩個頭版的對比(先是奧尼亞,後是我的娛樂):
顯然,我在間距、尺寸和顏色方面採取了一些自由。 我沒有嘗試精確的複製品。 取而代之的是,在原版上進行了幾次旋轉,有點重新啟動。
一些快速筆記
主題經常讓我感到沮喪的一件事是,它們在演示中展示了這些漂亮的徽標,但無法讓用戶使用相同的字體。 我不確定徽標中使用的原始字體系列,但我添加了 薩克拉門托 作為草書手寫選項:
用戶可以自定義的漂亮字體。
這些功能可以對普通用戶產生影響。 不是每個人都可以載入 Photoshop 並創建自己的專業徽標。 但是,他們可以鍵入其站點的名稱並為純文本版本選擇字體選項。
從技術上講,Gutenberg 目前有兩個功能,但我使用的 WordPress 5.9 中沒有。 第一個是 閱讀更多塊. Onia 在它的帖子網格中有這個。 作為主題作者,如果它是一個劫持,我會簡單地等待這個功能。 考慮到特色圖片和帖子標題都鏈接到單個帖子頁面,它不是一個成敗的元素。
第二個缺失的功能是 「顯示標籤」選項 對於社交圖標塊。 原始設計的解決方法是使用導航塊,因為鏈接只是純文本。 另一種選擇是社交圖標的自定義塊樣式。 無論哪種方式,這都不是這個主題作為塊主題發布的障礙。
主題的所有其他設計元素都可以通過塊系統實現。
筆觸塊樣式
我說有挑戰,但我用這個詞來表示「有趣的東西」。 這些是設計師和開發人員可以深入研究問題並嘗試創新的部分,它們是我想分享的解決方案。
我最喜歡的主題設計元素之一是它使用 SVG 在介紹標題後面創建筆觸:
Onia 主頁介紹。
該主題使用了一種將 元素包裝在
中的老式方法。 這會將畫筆背景應用於文本的最後幾個單詞。 然而,這種實現對於較小的設備是有問題的,不能跟上屏幕變化時文本中斷的自然流動。 用戶也無法控制筆觸或文本的顏色。
我想知道是否有更好的方法來做到這一點,同時為用戶提供最大的靈活性。
幸運的是, WordPress 新聞最近重新啟動 採用全新的設計,嚴重依賴筆觸。 另外,主題是 根據 GPL 許可,所以它的資產是免費的。
老實說,我希望在閱讀各種 CSS 幫助和支持網站之前查看它的源代碼。 我們社區的設計師已經解決了我遇到的問題。 我所要做的就是調整他們的解決方案以滿足我的需求。
經過一番爭論,我設法為標題創建了一個可自定義的筆觸背景:
筆觸適用於任何顏色。
用戶可以像往常一樣調整文本顏色。 但是,修改背景顏色會更改筆觸顏色。 筆劃始終與最後一行文本對齊,因此無論屏幕大小如何,它都可以工作。 這可能並不總是可取的。 但是,對於用例,例如突出顯示特定文本,存在其他解決方案。
以下屏幕截圖是我更改顏色時的編輯器視圖:
自定義筆觸背景顏色。
要為標題塊創建筆觸背景,我將以下代碼添加到主題的 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 兼容,我沒有使用主題中的資產。
類別: 用積木建造
像這樣
載入中…