WordPress自定義古騰堡編輯器的顏色調色板

2020-12-10 技術宅

古騰堡(Gutenberg)編輯器可以為段落等區塊設置文本顏色和背景色等,而且調色板中提供了12種默認顏色:

但是這些顏色可能不一定適配我們的主題,雖然也支持自定義設置,但是如果我們將這些默認顏色選項統一修改了,用戶只需直接點擊即可應用,對用戶來說那就極為便利了。

自定義古騰堡顏色調色板

要實現上圖右邊的自定義配色方案,可以使用下面的代碼:

<?php/*** change_gutenberg_color_palette.** Add theme support for editor-color-palette,* and set colours for the gutenberg colour pallete.** @see https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/** @uses add_theme_support() https://developer.wordpress.org/reference/functions/add_theme_support/* @uses __() https://developer.wordpress.org/reference/functions/__/* @uses array() https://www.php.net/manual/en/function.array.php** @return void*/function change_gutenberg_color_palette() {add_theme_support( 'editor-color-palette', array(array('name' => __('Blackish', 'your-textdomain'),'slug' => 'blackish','color' => '#323232',),array('name' => __('Whiteish', 'your-textdomain'),'slug' => 'white','color' => '#eeeeee',),array('name' => __('White', 'your-textdomain'),'slug' => 'white','color' => '#ffffff',),array('name' => __('Dark blue', 'your-textdomain'),'slug' => 'dark-blue','color' => '#1d2735',),array('name' => __('Blue', 'your-textdomain'),'slug' => 'blue','color' => '#00659b',),array('name' => __('Light blue', 'your-textdomain'),'slug' => 'light-blue','color' => '#4999ca',),));}/*** Hook: after_setup_theme.** @uses add_action() https://developer.wordpress.org/reference/functions/add_action/* @uses after_setup_theme https://developer.wordpress.org/reference/hooks/after_setup_theme/*/add_action( 'after_setup_theme' , 'change_gutenberg_color_palette' );使用上面的代碼,我們將一個操作添加到after_setup_theme鉤子中,並註冊一個名為change_gutenberg_color_palette的回調函數。

在change_gutenberg_color_palette函數中,我們使用add_theme_support函數來啟用editor-color-palette主題支持。然後在第二個參數,傳遞一個包含定義自定義顏色的數組的數組。

每個子數組包含三個鍵/值對。即:

$name: 我們要在編輯器中顯示的名稱。請注意,我們使用__()函數使這些名稱可翻譯。$slug: 一個唯一的 slug 別名,我們可以在CSS中使用它來更改實際顏色。$color: 十六進位顏色值。添加自定義CSS樣式代碼

為了使顏色真正在我們的主題中起作用,我們必須為每種顏色添加一些CSS,如下所示:

// Blackish.has-blackish-background-color { background-color: #323232;} .has-blackish-color { color: #323232;}// Whiteish.has-whiteish-background-color { background-color: #eeeeee;} .has-whiteish-color { color: #eeeeee;}// 等等...禁用自定義顏色選擇器

上面的代碼可以使我們的用戶能夠使用自定義顏色選擇器製作自己的顏色。如果你希望用戶只能從上面的默認顏色中選擇,不可以自定義顏色,可以通過下面的代碼實現:

<?php/*** disable_custom_color_picler.** Disable the custom color selector of the gutenberg color palette,** @see https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/** @uses add_theme_support https://developer.wordpress.org/reference/functions/add_theme_support/*/function disable_custom_color_picker(){add_theme_support('disable-custom-colors');}/*** Hook: after_setup_theme.** @uses add_action() https://developer.wordpress.org/reference/functions/add_action/* @uses after_setup_theme https://developer.wordpress.org/reference/hooks/after_setup_theme/*/add_action('after_setup_theme', 'disable_custom_color_picker');使用上面的代碼,我們向after_setup_theme鉤子添加了另一個操作,並註冊了一個名為disable_custom_color_picker的回調函數。

在disable_custom_color_picker函數內部,我們再次使用add_theme_support函數,但這一次我們添加了對disable-custom-colors的支持。

如下圖所示,這會從面板上刪除「自定義顏色」連結。

內容參考:https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/

相關焦點

  • PPT 中添加自定義調色板,包含 50 種顏色,原來是這樣做出來的
    在主題顏色和標準色調色板之間,多了一個名為自定義顏色的調色板。這個調色板固定了一些可供選擇的顏色,這樣一方面可以在模板中提供更多的顏色來方便用戶選擇,另外也為善於把控顏色的設計師帶來便利。自定義顏色不同於主題顏色,修改自定義顏色並不會相應地改變幻燈片中各對象的顏色。
  • 網頁在線文字編輯器 CKEditor 4.15 發布
    CKEditor 4.15 已發布,這個重要的版本對文本調色板進行了改進,用戶可以更有效地處理文本和背景顏色。另外,還增加了新的編輯器佔位符(Editor Placeholder)插件。CKEditor 是全球優秀的網頁在線文字編輯器之一,因其驚人的性能與可擴展性而廣泛的被運用於各大網站。歷史顏色(Color History)此版本為文本和背景顏色編輯工具引入了「歷史顏色」功能,在文檔中使用過的顏色將直接存儲在兩個「顏色按鈕」的調色板中,並且可以輕鬆地重複使用。
  • WordPress標籤插件 Cool Tag Cloud
    今天wordpress迷(微信公眾號:wordpressmi)要給大家推薦一個標籤插件Cool Tag Cloud。
  • Excel自定義格式代碼-顏色及大小寫類代碼符號及其作用
    [顏色]顯示相應的字體顏色,共有[黑色]、[白色]、[紅色]、[青色]、[藍色]、[黃色]、[洋紅]、[綠色]等8種顏色。示例:原始輸入:123自定義格式代碼:[洋紅]結果顯示為:123(洋紅色)2.[顏色n]n在1~56之間,分別對應著56種顏色,如下圖。
  • wordpress子主題是什麼?有啥用?
    當你使用wordpress主題的時候,你可能想增添一些個性化的東西,例如一些引導卡片或者武漢加油魔方等等,如果你按照教程將代碼添加到主題裡,很好,功能的確實現了,但是,如果哪一天你的主題發布了新版本,你一旦升級到新版本,這些自定義修改的內容就全沒了。
  • GIF自定義、圖片批量存,「視頻自動轉GIF圖文」的編輯器更新啦!
    自媒體編輯們的新寵,「剪刀兔:視頻自動轉GIF圖文」編輯器更新啦!剪刀兔0.2版本新增主要功能GIF可自定義參數、圖片翻頁預覽、支持原圖畫質、一鍵複製至外網、圖片批量保存至本地。作為一款能夠,「自動截取視頻重點圖片」的編輯器,剪刀兔的截圖均為原視頻畫質,畫質無壓縮,尺寸無縮放,享受極致視覺舒適感。02 大圖預覽模式點擊主圖可全屏預覽,方便隨時查看細節。
  • WordPress 5.4正式發布:加入新區塊 界面更簡潔
    據悉,WordPress 5. 4 通過添加新功能和擴展現有塊來對古騰堡編輯器(Gutenberg)進行了升級,新版提供更多讓頁面更生動的方式,速度也大幅度的提升,對於開發人員也有一些重要的變化。編輯器載入時間提升了14%,可供輸入時間加速51%。在視覺方面,用戶可以立即看出目前處在區塊的編輯模式或導航模式。WordPress 5. 4 對隱私方面功能進行了提升。現在個人資料導出結果會包含用戶會話信息以及來自社群活動收集的用戶位置數據。此外亦會顯示目錄。用戶可通過隱私工具查看處理導出及抹除數據要求的進度。
  • 135圖片編輯器,在線圖片編輯工具
    微信推文中的圖片,簡單的處理如何使用在線圖片編輯器來實現。今天以135編輯器為例,介紹在線圖片編輯器的使用方法。135編輯器的在線圖片編輯工具,可以實現圖片的任意剪裁,還能添加形狀、實現填充,添加不同顏色濾鏡,調節圖片曝光度等一系列基礎圖片調整功能。第一步,登錄135編輯器官網。
  • 互動設計心理學之古騰堡原則
    接下來帶著這些疑問,開始我們今天所要介紹的內容:交互心理學之古騰堡原則 經過研究最終得出被後人所熟知的結論:古騰堡原則,並附上了一張圖,名為「古騰堡圖」。古騰堡揭示了一個實用的視覺軌跡規律:閱讀引力是從上到下,從左到右。 遵循古騰堡原則把關鍵信息放在左上角、中間和右下角,能夠更好的體現元素的重要性。例如:我們平時所看到的頁面彈窗、各種證明文件和合同文件等等。
  • 古騰堡原則在產品設計中的應用
    本篇文章為大家介紹了在設計中具有普適性意義的一個原則:古騰堡原則,作者從它的概念出發,結合案例介紹了其在設計領域中的應用,與大家分享。經過多方研究,他最終得出了被後人熟知的「古騰堡原則」,並附上了一張圖,名為「古騰堡圖」。
  • WP菜鳥建站16:什麼是wordpress頁面?如何發表wordpress頁面?
    在我們登錄進入到wordpress後臺界面時,我們會發現左側導航菜單中有「文章」和「頁面」2個菜單。再進入到發表文章頁面和發表頁面的頁面,我們會發現,它們的發表界面非常的相似。我們知道,發表文章就是在發表網站的日誌。那麼,wordpress頁面是什麼東東?
  • 讓medit 成為你的下一個 Linux 代碼編輯器
    讓 medit 成為你的下一個 Linux 代碼編輯器 這款經典的文本編輯器提供了所有的基本功能和一些讓你自定義你的體驗的令人興奮的功能。這款經典的文本編輯器提供了所有的基本功能和一些讓你自定義你的體驗的令人興奮的功能。有了 XEDIT、jEdit、NEdit、gedit,最後還有 medit。
  • Win10系統 自定義窗口背景顏色的方法
    #電腦爆料#Win10 自定義窗口背景顏色方法(親測,絕對有效,自定義 Word、Excel 等背景顏色,護眼色)Win10 系統中,系統優勢明顯優於 Win8,但部分設置不如 Win7,比如刺眼的白色窗口背景絕對是逼死強迫症的節奏,這裡就教大家一個自定義窗口背景顏色方法,適用於 Word、Excel 等背景顏色,資源管理器背景無效哦 ~~~ 原理:註冊表修改
  • Github工具分享之易使用可擴展的MarkDown編輯器Markdown Monster
    我們的目標是為Windows提供最佳的Markdown特定編輯器,並儘可能輕鬆地創建Markdown文檔。我們提供了一個核心編輯器和預覽器,以及許多非侵入式幫助器,以幫助您輕鬆地將圖像,連結,表格,代碼等內容嵌入文檔中。
  • iPhone自定義模板拼圖應用:InFrame Cut
    iPhone自定義模板拼圖應用:InFrame Cut 喜歡將好看的圖片做成拼圖麼?
  • 五款 Linux 文本編輯器測評
    評分:Gedit:3/5Kate:5/5Sublime:5/5UltraEdit:3/5jEdit:1/5鍵盤控制高級文本編輯器的用戶希望能完全通過鍵盤控制和操作,一些應用程式甚至支持用戶自定義快捷方式的鍵盤綁定。
  • 實用微信編輯器推薦
    今天小編介紹3款實用的微信編輯器,96微信編輯器、易點微信編輯器、135微信編輯器。96微信編輯器96微信編輯器(http://bj.96weixin.com/)是一款專業強大的微信公眾平臺在線編輯排版工具,提供手機預覽功能,讓用戶在微信圖文 、文章、內容排版、文本編輯、素材編輯上更加方便。
  • 富文本編輯器 TinyMCE 的基礎用法
    工具欄支持換行工具欄上的按鈕可以按自己的意願擺放為多行, 每行的按鈕以及數量都可以自定義。實現方式很簡單,將 toolbar 改用數組方式定義即可。自定義菜單欄使用 menubar 參數自定義配置菜單欄。
  • 如何創建更好用的UI調色板?
    今天為大家帶來的文章是「調色板」。顏色的搭配和選擇影響著產品最後呈現出來的視覺效果,合理的顏色配比能加深用戶對品牌的印象。 色彩無處不在。因此對於設計師來說,選擇和使用合理的顏色來實現業務目標是一項挑戰。
  • 推薦10個免費的HTML編輯器
    如果你想開發一個網站,你肯定想要一個很棒的HTML編輯器,一個好的編輯器可以讓代碼更加整齊格式化,前端顯示也會更好,從而提升你的工作效率。下面就為開發者推薦10個免費的HTML編輯器,你可以嘗試使用。