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

2020-12-11 技術宅

古騰堡(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 種顏色,原來是這樣做出來的
    在主題顏色和標準色調色板之間,多了一個名為自定義顏色的調色板。這個調色板固定了一些可供選擇的顏色,這樣一方面可以在模板中提供更多的顏色來方便用戶選擇,另外也為善於把控顏色的設計師帶來便利。自定義顏色不同於主題顏色,修改自定義顏色並不會相應地改變幻燈片中各對象的顏色。
  • WordPress 4.9.2 發布 - WordPress - cnBeta.COM
    自定義面板中增加了設計草稿,定期發布,以及鎖定,預覽等功能,讓內容創建者可以更好地進行協同工作。此外,代碼語法高亮顯示和錯誤檢查功能,會給你一個簡潔、流暢的建站體驗。最後,該版本還增加了一個很贊的相冊小工具,並改進了主題的瀏覽和切換體驗。自定義工作流程改進
  • 25個支持自定義的免費和付費主流wordpress主題
    25個支持自定義的免費和付費主流wordpress主題 如 果你使用wordpress的話,肯定知道對於wordpress來說主題框架和設計的重要性。
  • Creo 6.0入門:系統顏色的設置
    】【黑底白色】【自定義】這幾個選項,介紹如下。(3)【深色】:背景顏色為深褐色。(4)【白底黑色】:背景顏色為白色,模型的主體為黑色。(5)【黑底白色】:背景顏色為黑色,模型的主體為白色。(6)【自定義】:以上是系統自帶的顏色配置。
  • 《cf手遊》武器工坊作用是什麼 武器工坊自定義皮膚介紹
    武器工坊在CF手遊中是很多人都期待的一個功能,我們在遊戲中即使是買了皮膚也不能夠凸顯我們的獨一無二䦹,因為很多人都買了,但是如果是自己diy的,那麼絕對是世界上獨一無二的,下面就是具體的cf手遊武器工坊自定義皮膚介紹,看看都有著什麼樣的功能,該怎麼進行使用才是正確的吧。
  • Excel自定義格式代碼-顏色及大小寫類代碼符號及其作用
    [顏色]顯示相應的字體顏色,共有[黑色]、[白色]、[紅色]、[青色]、[藍色]、[黃色]、[洋紅]、[綠色]等8種顏色。示例:原始輸入:123自定義格式代碼:[洋紅]結果顯示為:123(洋紅色)2.[顏色n]n在1~56之間,分別對應著56種顏色,如下圖。
  • 如何在WordPress中製作聯繫表單(2種方法)
    本篇教程提供兩個在wordpress種創建聯繫表單並記錄詢盤的方法:插件Contact Form 7 + Flamingo,兩者都免費插件Elementor Pro+Elementor Contact Form DB,前者付費,是網頁可視化編輯器
  • 如何在WordPress中製作聯繫表單(3種方法)
    本篇教程提供3個在wordpress中創建聯繫表單並記錄詢盤的方法:插件Contact Form 7 + Flamingo,兩者都免費插件+Elementor Contact Form DB,前者付費,是網頁可視化編輯器,後者免費
  • 支持文章、頁面、自定義文章的WordPress目錄插件:Easy Table of Contents
    如果想要建議安裝一個文章目錄插件,如 Easy Table of Contents 插件,安裝之後簡單設置後即可讓 WordPress 站點的文章、頁面和自定義類型文章都擁有文章目錄功能你。2.1 「啟動支持」和「自動插入」選項根據自己站點的實際情況選擇,因為老古演示站沒有自定義類型文章,所以這裡就沒有可選的。
  • 開源矢量圖形編輯器 Inkscape 1.0 發布
    Inkscape(自油自畫) 是一款開源的矢量圖形編輯軟體,與 Illustrator、Freehand、CorelDraw、Xara X 等軟體很相似,它使用 W3C 標準的 Scalable Vector Graphics (SVG) 文件格式,支持包括形狀、路徑、文本、標記、
  • 最全最佳wordpress插件匯總推薦
    只要某個詞之前已經定義在資料庫裡面,以後就可以方便地引用了。53、AWSOM:這個插件能讓製作一篇「置頂」文章或留言。非常有用。54、Order Posts:厭倦了文章按日期排列的方式?這個讓你自定義舊文章的展示方式,有時你不想瀏覽者看到某篇文章…55、Pagebar:顯示頁碼的插件。
  • 最常用最齊全wordpress插件大全推薦
    這個讓你自定義舊文章的展示方式,有時你不想瀏覽者看到某篇文章…55、Pagebar:顯示頁碼的插件。56、WP-PageNavi:同樣是顯示頁碼的插件,與PageBar相比能自定義的項目更多。57、NAVT:一個能讓你輕鬆設置導航欄的插件。
  • 生活就像一塊調色板,選擇你喜歡的顏色,那這個顏色就愈發美麗!
    生活就像一塊調色板,選擇你喜歡的顏色,那這個顏色就愈發美麗!生活就像一塊調色板,選擇你喜歡的顏色,那這個顏色就愈發美麗!生活就像一塊調色板,選擇你喜歡的顏色,那這個顏色就愈發美麗!生活就像一塊調色板,選擇你喜歡的顏色,那這個顏色就愈發美麗!
  • R語言中的色彩和調色板簡述
    但是,適當的選擇顏色不僅僅能使數據圖的閱讀者賞心悅目,而且有助於圖中數據關係的呈現,使得整個圖表更有說服力。這篇文章將簡單介紹R語言中的色彩和調色板相關package和函數。一、R語言中的顏色與調色板1. R語言中的顏色R中可以通過定義col參數自定義顏色。
  • WordPress Hestia主題的定製和優化
    WordPress優秀的免費企業主題不多,國外網站themeisle提供了一套免費的wordpress企業主題Hestia,Hestia設計非常簡介大方美觀,能夠支持響應式,可以在手機上面正常訪問,各方面的優化都不錯。
  • GIF自定義、圖片批量存,「視頻自動轉GIF圖文」的編輯器更新啦!
    自媒體編輯們的新寵,「剪刀兔:視頻自動轉GIF圖文」編輯器更新啦!剪刀兔0.2版本新增主要功能GIF可自定義參數、圖片翻頁預覽、支持原圖畫質、一鍵複製至外網、圖片批量保存至本地。作為一款能夠,「自動截取視頻重點圖片」的編輯器,剪刀兔的截圖均為原視頻畫質,畫質無壓縮,尺寸無縮放,享受極致視覺舒適感。02 大圖預覽模式點擊主圖可全屏預覽,方便隨時查看細節。
  • LabVIEW中自定義控制項(.ctl控制項)的方法
    ,在打開的新建對話框中選擇「自定義控制項」項即可新建一個空白的.ctl文件並打開了控制項編輯器,如下圖所示:2.在控制項編輯器中點擊右鍵彈出控制項選板,選擇「經典」-->「布爾」-->「方形按鈕」,將方形按鈕控制項放置到自定義控制項的編輯界面上,該控制項只有2個部件,分別為「名稱標籤」和「布爾按鈕」,可通過菜單中「窗口」-->「部件窗口」查看當前控制項的所有部件;3.
  • 135圖片編輯器,在線圖片編輯工具
    微信推文中的圖片,簡單的處理如何使用在線圖片編輯器來實現。今天以135編輯器為例,介紹在線圖片編輯器的使用方法。135編輯器的在線圖片編輯工具,可以實現圖片的任意剪裁,還能添加形狀、實現填充,添加不同顏色濾鏡,調節圖片曝光度等一系列基礎圖片調整功能。第一步,登錄135編輯器官網。
  • Stata 中 dofile 編輯器的配置 —— 來個漂亮的編輯器
    在 Stata 中 dofile 編輯器的使用 一文中,我們對如何使用 dofile 編輯器做了初步介紹。有不少同學好奇於如何讓自己的編輯器看起來很漂亮 (五顏六色那種),或者晚上工作的時候採用深色背景 (很炫酷的程式設計師風格)。這些設置其實都不困難。
  • Neuron|唐世明課題組與合作者揭示大腦中顏色感知的調色板機制
    該研究利用內源性信號光學成像、雙光子成像和電生理記錄等手段,詳細描繪了等級化的不同視覺腦區的色調圖結構,揭示了認知顏色空間形成的神經機制。英國科學家牛頓早在18世紀就意識到,光波是電磁波,它本身並不具有顏色。我們能感知數千種不同的色調,是因為大腦中存在編碼不同波段可見光的神經元(選擇性反應)。