首頁  >  文章  >  CMS教程  >  如何在WordPress區塊編輯器中只顯示自己需要的區塊

如何在WordPress區塊編輯器中只顯示自己需要的區塊

藏色散人
藏色散人轉載
2020-02-11 13:38:514021瀏覽

下面由WordPress教學專欄跟大家介紹在WordPress 區塊(Gutenberg)編輯器中只顯示自己需要的區塊的方法,希望對需要的朋友有所幫助!

如何在WordPress區塊編輯器中只顯示自己需要的區塊

WordPress 新的區塊(Gutenberg)編輯器,已推出一年有餘,好用與否,只能見仁見智了。從Gutenberg外掛只有2顆星的評分可以看出,大部分人還是無法適應,其中也包括我。

對於折騰多年WordPress的用戶,上手新編輯器沒什麼難度,區塊編輯器還是有很多優點的,例如,區塊編輯器可以將一個添加到文章中並編輯好的區塊,新增儲存到可重複使用區塊中,下次使用時直接點一下就可以插入文章中,非常方便。再如,區塊編輯器可以利用WP已整合的前端樣式和script,在文章中編排成較複雜的響應式佈局等。

如果文章是用經典編輯器寫的,當轉到區塊編輯器中編輯,在編輯框上面會提示“經典”字樣,點開會直接在區塊編輯器中顯示經典編輯器的工具欄,還可以點擊添加區塊在“格式”中找到“經典”區塊並插入到文章中,同樣可使用之前的經典編輯器,混合雙打,如下圖,也可以將之前的文章轉換為區塊等。

如何在WordPress區塊編輯器中只顯示自己需要的區塊

優勢說完,再說說劣勢,從WP升級後的宣傳文字:

從WordPress 5.0開始帶來的區塊編輯器,為您帶來全新的區塊、更直覺的互動和改良的無障礙存取。新功能提升了編輯器的設計自由度,為您帶來更多佈局選項和樣式變化,讓設計師能夠全面控制網站的外觀。這次發布也為您帶來了二〇二〇主題,為用戶帶來更多的設計彈性,並與區塊編輯器完美整合。現在要建立美觀的網頁及進階頁面佈局,是再也簡單不過的事了。

可以看出,這個編輯器是為網頁設計師準備的,而大部分網站編輯人員只是簡單的敲些文字,頂多再加個圖片而已,不是什麼設計師,所以你的網站如有文字輸入人員,讓一個非專業人員學習新的東西,可不是一件簡單的事,與之類似的編輯器從未在其它網站程序上應用過,其“先進的理念”(其實N年前就有類似的視覺化外掛了),會讓剛接觸WP的用戶一頭霧水,這也是一些人極力反對的原因,因為許多主題設計者認為改變原有的使用習慣會讓用戶難以接受。

既然WP開發者力排眾議強推新編輯器,做為一個主題開發者,還是要與時俱進,近期開始研究將之前主題的短代碼轉換為區塊並整合到區塊編輯器中,新的區塊需要大量的JS控制才能實現,原來短代碼簡單幾行代碼實現的功能,改成區塊代碼量成倍增加,對於像我這種折騰WP近10年的老鳥,也要看官網教學一步步的學習,上手難度不小。

個人認為WP程式開發方向有些迷失,可能開發者除了修補漏洞,也不知道再升級什麼了,弄個新編輯器給大家一個「驚喜「 ,我還是認為這個區塊編輯器以插件形式存在更好,因為這玩意本來就是別人開發的插件,整合在程式中而已。

上面只是個​​人對新編輯器的看法,本文記錄一下在WordPress 區塊(Gutenberg)編輯器中只顯示自己需要的區塊。

預設新編輯器區塊眾多,讓人眼花繚亂,大部分可能都用不到,可以在編輯頁點右上角三個小點,工具→ 區塊管理器中,取消某個分類的區塊或單獨取消某個區塊顯示,還可以透過下面的程式碼,直接屏蔽掉不想顯示的區塊。

將下面的程式碼加入目前主題函數模板functions.php中:

add_filter( 'allowed_block_types', 'zm_allowed_block_types', 10, 2 );
function zm_allowed_block_types( $allowed_blocks, $post ) {
$allowed_blocks = array(
'core/image',
'core/paragraph',
'core/heading',
'core/list',
);
// 在页面编辑中单独显示的区块
if( $post->post_type === 'page' ) {
$allowed_blocks[] = 'core/shortcode';
}
return $allowed_blocks;
}

把想顯示的區塊名稱加進去即可。

更多的區塊名稱:

core/shortcode

#core/image

core/gallery

##core /heading

core/quote

core/embed

#core/list

core/separator

core/more

#core/button

core/pullquote

core/table

#core/preformatted

##core/code

core/ html

core/freeform

core/latest-posts

#core/categories

core/cover (previouslycore/cover-image)

core/text-columns

core/verse

core/video

core/audio

core/block

core /paragraph

core-embed/twitter

core-embed/youtube

core-embed/facebook

core-embed/instagram

core-embed/wordpress

core-embed/soundcloud

core-embed/spotify

core-embed/flickr

core-embed/ vimeo

core-embed/animoto

core-embed/cloudup

core-embed/collegehumor

core-embed/dailymotion

core-embed/funnyordie

##core-embed/hulu

core-embed /imgur

core-embed/issuu

core-embed/kickstarter

core-embed/meetup-com

#core-embed/mixcloud

core-embed/photobucket

core-embed/polldaddy

core-embed/reddit

core-embed/reverbnation

#core-嵌入/截圖

核心嵌入/scribd

#核心嵌入/slideshare

核心嵌入/smugmug

核心嵌入/揚聲器

#core -embed/ted

core-embed/tumblr

core-embed/videopress

core-embed/wordpress-tv

#

以上是如何在WordPress區塊編輯器中只顯示自己需要的區塊的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:zmingcx.com。如有侵權,請聯絡admin@php.cn刪除