<em id="nnbzp"><span id="nnbzp"><track id="nnbzp"></track></span></em>

    <form id="nnbzp"><span id="nnbzp"><track id="nnbzp"></track></span></form>

    <form id="nnbzp"><form id="nnbzp"><th id="nnbzp"></th></form></form>

      <em id="nnbzp"><span id="nnbzp"><th id="nnbzp"></th></span></em><form id="nnbzp"><span id="nnbzp"><track id="nnbzp"></track></span></form>

      <form id="nnbzp"></form>

          立即注冊 找回密碼

          QQ登錄

          只需一步,快速開始

          查看: 833|回復: 0
          打印 上一主題 下一主題

          [Wordpress 通用教程] Gutenberg Sidebar邊欄開發心得的案例

          [復制鏈接]

          1016

          主題

          2171

          帖子

          1萬

          積分

          管理員

          Rank: 9Rank: 9Rank: 9

          積分
          17039

          推廣達人宣傳達人突出貢獻榮譽管理論壇元老

          QQ
          跳轉到指定樓層
          樓主
          發表于 2020-1-9 16:57:22 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
          道勤網-數據www.jsvalue.com

          親注冊登錄道勤網-可以查看更多帖子內容哦。ò蕡D片、文字詳情等)請您及時注冊登錄-www.jsvalue.com

          您需要 登錄 才可以下載或查看,沒有帳號?立即注冊

          x
          文章目錄[隱藏]
          • 安裝Node
          • 準備開發環境
          • PHP引入腳本
          • 開始編寫Gutenberg邊欄
            • 注冊Meta元數據
            • 其他優化
            • 總結
          • 關于本文的其它說明
          • 參考文獻

          這是一篇手把手教你開發wordpress Gutenberg Sidebar的文章。雖然之前也寫了很多關于Gutenberg的開發心得,不過都直接忽略了環境的安裝和配置,以至于很多新手對于ES Next的編譯仍然無法下手。因此本文在寫Gutenberg Sidebar開發心得的時候,加上了環境配置的部分。
          安裝Node
          Node官方網站下載符合你系統版本的Node進行安裝,過程就是下一步下一步完成一類的。App安裝過程省略。
          準備開發環境
          1、在主題內新建一個文件夾,這個文件夾可以放置到任何位置,例如我在pandastudio_plugins目錄下新建了一個sample_gutenberg_sidebar
          2、打開這個文件夾,按住Shift右鍵單擊空百處,選擇打開Powershell(Win10以前的系統應該是命令行)。Mac系統手動打開系統自帶Shell,輸入cd空格,將文件夾拖入到Shell窗口回車即可
          3、輸入npm init來創建一個項目,回車后,會讓你輸入包名稱、項目名稱、版本號等,全部按回車即可。大致效果如下:
          1. PS D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar> npm init
          2. This utility will walk you through creating a package.json file.
          3. It only covers the most common items, and tries to guess sensible defaults.


          4. See `npm help json` for definitive documentation on these fields
          5. and exactly what they do.


          6. Use `npm install <pkg>` afterwards to install a package and
          7. save it as a dependency in the package.json file.


          8. Press ^C at any time to quit.
          9. package name: (sample_gutenberg_sidebar)
          10. version: (1.0.0)
          11. description:
          12. entry point: (index.js)
          13. test command:
          14. git repository:
          15. keywords:
          16. author:
          17. license: (ISC)
          18. About to write to D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar\package.json:


          19. {
          20.   "name": "sample_gutenberg_sidebar",
          21.   "version": "1.0.0",
          22.   "description": "",
          23.   "main": "index.js",
          24.   "scripts": {
          25.     "test": "echo \"Error: no test specified\" && exit 1"
          26.   },
          27.   "author": "",
          28.   "license": "ISC"
          29. }




          30. Is this OK? (yes)
          31. PS D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar>
          復制代碼
          4、可以看到,目錄下已經出現了一個package.json文件,F在先不管它,我們繼續在這個目錄安裝開發需要的 @wordpress/scripts 依賴,繼續在剛才的命令行中輸入
          1. npm install @wordpress/scripts -D
          復制代碼
          5、根據網絡情況,可能需要下載一段時間,然后自動安裝。此過程中可以看到一個進度條以及下載的包名稱,效果如下
          1. [  ................] \ fetchMetadata: sill XXXXXXX
          復制代碼
          如果安裝一次等了很久屏幕都沒有動靜,可以連續按下幾次Ctrl+C來終止,然后繼續輸入前面的命令來重新安裝
          6、安裝完依賴之后,在剛才的文件夾下新建src文件夾,然后在里面新建index.js文件作為未編譯的原始文件
          7、打開package.json,將scripts里面的內容修改為下面的內容, 保存后關閉
          1. "scripts": {
          2.     "dev": "wp-scripts start",
          3.     "build": "wp-scripts build"
          4.   },
          復制代碼
          8、在剛才的PowerShell命令行中輸入下面的命令來開始開發:
          1. npm run dev
          復制代碼
          9、命令運行后,將監聽src/index.js文件的變化來自動編譯,大致效果如下:
          1. PS D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar> npm run dev


          2. > sample_gutenberg_sidebar@1.0.0 dev D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar
          3. > wp-scripts start




          4. webpack is watching the files…


          5. Live Reload listening on port 35729


          6. Hash: f06cbcda0a4aad106cd6
          7. Version: webpack 4.8.3
          8. Time: 1495ms
          9. Built at: 2019-08-16 09:41:56
          10.           Asset      Size  Chunks             Chunk Names
          11.        index.js  2.79 KiB   index  [emitted]  index
          12.    index.js.map  2.52 KiB   index  [emitted]  index
          13. index.deps.json  15 bytes   index  [emitted]  index
          14. Entrypoint index = index.js index.js.map index.deps.json
          15. [./src/index.js] 0 bytes {index} [built]
          復制代碼
          10、此時可以看到在原來的文件夾下生成了一個build的文件夾,里面的index.js就是編譯后的腳本了。這樣,一個Gutenberg的腳本開發環境就搭建好了。
          PHP引入腳本
          1、PHP引入腳本的方法都是一樣的:使用鉤子來進行引入。在主題的function.php文件中添加一個enqueue_block_editor_assets的動作,然后在執行此動作的時候注冊和引入腳本即可
          1. <?php
          2. add_action( 'enqueue_block_editor_assets', function(){
          3.     wp_register_script(
          4.         'sample_gutenberg_sidebar',
          5.         get_stylesheet_directory_uri()."https://static.wpdaxue.com/pandastudio_plugins/sample_gutenberg_sidebar/build/index.js",
          6.         array( 'wp-plugins', 'wp-edit-post', 'wp-element' )
          7.     );
          8.     wp_enqueue_script( 'sample_gutenberg_sidebar' );
          9. });
          復制代碼
          2、要驗證是否成功引入了,可以在src/index.js里面輸入下面的內容來測試(保證在開發狀態,已經運行了npm run dev)
          1. alert('已成功引入!');
          復制代碼
          3、接下來在開發環境中用瀏覽器打開Gutenberg編輯器,刷新后即可看到“已成功引入”的彈窗。下面就可以開始正式編寫Gutenberg的邊欄腳本了。
          開始編寫Gutenberg邊欄注冊Meta元數據
          1、我們的邊欄數據都是存儲在Post的Meta里面的,因此需要先注冊Meta然后才可以使用,假設現在需要注冊一個叫做sample_meta1的字符串數據,我們在function.php里面這樣寫
          1. register_post_meta( 'post', 'sample_meta1', array(
          2.     'show_in_rest' => true,
          3.     'single' => true,
          4.     'type' => 'string'
          5. ));
          復制代碼
          2、在src/index.js里面編寫邊欄的前端部分
          1. //引入需要的模塊const {    registerPlugin} = wp.plugins;const {    PluginSidebar,    PluginSidebarMoreMenuItem} = wp.editPost;const {    withSelect,    withDispatch} = wp.data;const {    Fragment} = wp.element;const {    TextControl,} = wp.components; //注冊邊欄registerPlugin( 'sample-gutenberg-sidebar', {    render() {        return (            <Fragment>                <PluginSidebar                name="sample-gutenberg-sidebar"                icon="admin-post"                title="邊欄示例"                >                示例內容                </PluginSidebar>            </Fragment>        )    },} );
          復制代碼


          打開編輯器,看到效果如下


          3、剛才注冊的邊欄直接取消固定并關閉(取消星星的填充,然后點擊右側的叉叉)后,就再也無法打開了,因此需要在Gutenberg的選項中增加一個邊欄的打開菜單,我們在<Fragment>里面增加一個<PluginSidebarMoreMenuItem>并通過target屬性指向到邊欄
          1. <PluginSidebarMoreMenuItem target="sample-gutenberg-sidebar">
          2. 邊欄菜單
          3. </PluginSidebarMoreMenuItem>
          復制代碼
          這樣,哪怕邊欄被取消固定并關閉后,也可以有再次打開的方法:

          4、現在,邊欄的內容都是完全空的,我們來增加一個Input輸入框來編輯剛才注冊的sample_meta1數據。這一部分的原理在Gutenberg開發手冊上有詳細的描述我就不再多說了,主要使用了withSelect和withDispatch來實現數據的讀取和更新?紤]到如果注冊的meta字段比較多,這一部分就會重復寫很多次而且比較繁瑣,因此我將它封裝成了一個構建meta模塊的函數,后面的新增meta模塊都用這個方法來進行:
          1. const createMetaBlock = (metaBlockField,metaName) => {
          2.     const MetaBlockFieldWithDataAndActions = withDispatch((dispatch) => {
          3.             return {
          4.                 setMetaFieldValue(value) {
          5.                     let meta = {};
          6.                     meta[metaName] = value;
          7.                     dispatch('core/editor').editPost({meta});
          8.                 }
          9.             }
          10.         })(withSelect((select) => {
          11.             return {
          12.                 metaFieldValue: select('core/editor').getEditedPostAttribute('meta')[metaName]
          13.             }
          14.         })(metaBlockField));
          15.     return (<MetaBlockFieldWithDataAndActions />);
          16. }
          復制代碼


          我上面封裝的構建模塊方法第一個參數是Function類型:它接收一個參數(參數中包含meta數據和設置meta數據的方法),返回需要傳入的組件;第二個參數是String類型,內容是meta字段的名稱。將上面的代碼加入到我們的腳本中后,現在我們用我剛才封裝的方法來添加sample_meta1的編輯框
          1. <PluginSidebar
          2. name="sample-gutenberg-sidebar"
          3. icon="admin-post"
          4. title="邊欄示例"
          5. >
          6. {
          7.     createMetaBlock(({metaFieldValue,setMetaFieldValue})=>{return (
          8.         <TextControl
          9.         label="示例數據1"
          10.         value={metaFieldValue}
          11.         onChange={ (content) => {setMetaFieldValue(content)} }
          12.         />
          13.     )},'sample_meta1')
          14. }
          15. </PluginSidebar>
          復制代碼
          如果有更多的數據字段如sample_meta2,只需要在PluginSidebar中添加更多的metaBolck方法即可。編輯器中效果如下

          5、至此,Gutenberg邊欄的編寫就完成了。發布時,先刪除build文件夾,然后在PowerShell中使用下面的命令來進行代碼打包和代碼壓縮
          1. npm run build
          復制代碼


          開發文件夾下的package.json、src、node_modules、package-lock.json都不需要發布到正式環境中,只有build文件夾才需要
          其他優化
          • 我們可以看到,上面的樣式不算太好看。因此可以用類似引入腳本的方法,一樣用鉤子去引入樣式。這里我就不再做示例了。發揮自己的想象去完成它吧
          • 根據實際的需求,可能不止input輸入框一種,因此還可以根據需要增加更多的組件進去
          • 如果不想使用邊欄,也可以將PluginSidebar換成PluginDocumentSettingPanel(具體用法參考Gutenberg開發文檔),就可以將設置選項直接集成到文章設置頁里面了
          • 最終,我完成了一個包含“圖片上傳”、“色彩選擇”、“多圖上傳”、“單選”、“下拉”等功能為一體的主題文章設置工具,如下所示:
          • 總結
            Gutenberg Sidebar 邊欄開發時都是使用基礎的PluginSidebar組件進行開發,只需掌握使用方法即可。唯一需要注意不要被坑的是要記得添加邊欄菜單的另一個入口,防止被關閉后無法再次打開。
            Meta數據的讀取和寫入本身是一個難點,不過在本文中我已經將它封裝成一個方便重用的方法了,若需了解詳情,建議參考本文末尾的官方教程學習原理即可。
            關于本文的其它說明
            本文特色圖在設計時考慮了Node的Logo外形和Gutenberg的G進行融合,文章頭圖也致敬了Node的顏色和風格。頭圖使用了“多邊形”生成工具輔助進行設計。




          道勤主機提供365天*24小時全年全天無休、實時在線、零等待的售后技術支持。竭力為您免費處理您在使用道勤主機過程中所遇到的一切問題! 如果您是道勤主機用戶,那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、18513761280免費電話、后臺提交工單這些方式聯系道勤主機客服! 如果您不是我們的客戶也沒問題,點擊頁面最右邊的企業QQ在線咨詢圖標聯系我們并購買后,我們為您免費進行無縫搬家服務,讓您享受網站零訪問延遲的遷移到道勤主機的服務!
          本內容系 道勤團隊 www.jsvalue.com 客服與技術人員研究整理的智慧結晶,轉載勿用于商業用途,并保留本文鏈接,侵權必究!


          分享到:  QQ好友和群QQ好友和群 QQ空間QQ空間 騰訊微博騰訊微博 騰訊朋友騰訊朋友
          收藏收藏 轉播轉播 分享分享 分享淘帖 支持支持 反對反對 贊助我們
          copy_link 

          【道勤網】- www.jsvalue.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網站設計教程!【道勤網】 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與本論壇立場無關
          2、本站所有主題由該帖子作者發表,該帖子作者與【道勤網】- www.jsvalue.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網站設計教程!【道勤網】享有帖子相關版權
          3、其他單位或個人使用、轉載或引用本文時必須同時征得該帖子作者和【道勤網】- www.jsvalue.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網站設計教程!【道勤網】的同意
          4、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
          5、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
          6、如本帖侵犯到任何版權問題,請立即告知本站,本站將及時予與刪除并致以最深的歉意
          7、【道勤網】- www.jsvalue.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網站設計教程!【道勤網】管理員和版主有權不事先通知發貼者而刪除本文

          加入道勤網VIP-www.jsvalue.com-享受建站指導服務!
          您需要登錄后才可以回帖 登錄 | 立即注冊

          本版積分規則

          關閉

          道勤網- 推薦內容!上一條 /2 下一條


           
           
          技術支持
          在線客服
          點擊這里給我發消息
          點擊這里給我發消息
          道勤建站群:
          3群建站-美工交流-道勤
          道勤美工群:
          3群建站-美工交流-道勤
          工作時間:
          8:00-18:00
          客服熱線:
          15056962695
          官方微信掃一掃
          !jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回復 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

          關于我們|手機版|小黑屋|地圖|【道勤網】-www.jsvalue.com 軟件視頻自學教程|免費教程|自學電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設計教程|網站設計教程【道勤網】 ( 皖ICP備15000319號|贊助我們  

          GMT+8, 2021-4-18 06:47

          Powered by DaoQin! X3.2 © 2016-2063 Dao Qin & 道勤科技

          快速回復 返回頂部 返回列表
          国产精品AV免费观看,成年女人毛片免费观看中文,女生和男生污污的视频,亚洲成在人线无码免费视频