深入淺出 WordPress 插件開發

Transcript

1. 深入淺出 WordPress插件開發 王昱程 Stanley @uchengwang coscup2017

2. 你應該知道什麼？ • 網站的運作原理 • WordPress 基本概念 • 基本的 PHP /

   HTML / CSS / JS 概念 • 物件導向程式設計概念

3. 你能得到什麼？ • 如何規劃你的插件檔案結構 • 如何新增和擴展你需要的功能 • 開發插件時要注意的事項

4. 3 Major Components core themes plugins 不要修改核心！

5. What is a PLUGIN? • 插件為一組程式碼的集合，用來擴充WordPress 的核心功能。包含 PHP 檔案、 HTML、CSS、JavaScripts和圖檔。

   plugins PHP HTML CSS JavaScripts Images
6. None
7. None

8. Plugin Header

9. 你能透過插件做什麼？ • 新增 shortcode • 註冊新的 post type • 新增

   payment gateway • 建立客服系統 • ...ANYTHING!

10. Functions.php v.s. Plugins

11. plugin 結構 • 單一檔案，包含 functions • 單一檔案，包含 class 、初始化物件和部分 function

    • 主要插件檔案，及一個或多個 class 檔案

12. START small GET BIG

13. WordPress Plugin Boilerplate

14. WordPress Plugin Boilerplate Generator

15. 客製化

16. 如何透過插件進行客製化 • Hooks ◦ Actions：Event-Driven, 在某個時間點執行，例如儲存文章 ◦ Filters：變更資料顯示的方式 • 常見的

    hooks ◦ actions: ▪ wp_head ▪ wp_footer ▪ save_post ◦ filters ▪ the_content ▪ the_title ▪ body_class

17. save_post

18. body_class

19. Design Pattern in WordPress • Singleton Pattern : In software

    engineering, the singleton pattern is a software design pattern that restricts the instantiation of a class to one object. - wikipedia

20. Design Pattern in WordPress •

21. Design Pattern in WordPress •

22. 我怎麼知道要用哪個 hook? • https://tw.wordpress.org/plugins/simply-show-hooks/

23. 安全性 • 確認使用者有執行某項動作的權限 https://codex.wordpress.org/Roles_and_Capabilities

24. 安全性 驗證和過濾輸入的資料 • sanitize_email() • sanitize_file_name() • sanitize_html_class() • sanitize_key()

    • sanitize_meta() • sanitize_mime_type() • sanitize_option() • sanitize_sql_orderby() • sanitize_text_field() • sanitize_title() • …

25. sanitize_email <?php $sanitized_email = sanitize_email(' admin@example.com! '); echo $sanitized_email; //

    will output: 'admin@example.com' ?>

26. 安全性 過濾輸出的資料 • esc_html() • esc_url() • esc_js() • esc_attr()

27. nonce (numbers used once) • 一個 hash 字串，用來保護某個 url 和表單，避免遭受到攻擊

    http://example.com/wp-admin/post.php?post=123&action=trash http://example.com/wp-admin/post.php?post=123&action=trash&_wpnonce=b192fc4204 • wp_nonce_url • wp_nonce_field • wp_create_nonce • wp_verify_nonce

28. nonce (numbers used once) cont. • *Nonces are User-Specific

29. 擴展性 • 提供其他開發者修改或擴充的彈性 ◦ do_action ◦ apply_filters

30. 擴展性 cont. • do_action

31. 擴展性 cont. • apply_filters

32. 讓插件可被翻譯

33. 資料儲存 • wp_options • wp_postmeta • 客製化資料表

34. 資料儲存 （wp_option） • add_option($name, $value, $deprecated, $autoload); • get_option($name); •

    update_option($option_name, $newvalue);

35. 資料儲存 （wp_postmeta） • add_post_meta( 68, 'my_key', 47 ); • update_post_meta(

    68, 'my_key', 50 ); • get_post_meta( 68, ‘my_key’, true)

36. Coding Standard • https://make.wordpress.org/core/handbook/best-p ractices/coding-standards/ ◦ Single and Double Quotes

    ◦ Indentation ◦ Brace Style ◦ ... • https://github.com/WordPress-Coding-Standards/WordPress-Codi ng-Standards

37. 開啟除錯模式 • define( 'WP_DEBUG', true ); • define( 'WP_DEBUG_LOG', true

    ); • define( 'WP_DEBUG_DISPLAY', false ); • @ini_set( 'display_errors', 0 ); • define( 'SCRIPT_DEBUG', true ); • https://codex.wordpress.org/Debugging_in_WordPress

38. Debug Bar • https://wordpress.org/plugins/debug-bar/

39. Query Monitor • https://wordpress.org/plugins/query-monitor/

40. 總結 • 開發插件比你想像中的簡單！ ( 但也沒那麼簡單 ...) • 安全第一 • 遵循

    codex 規範 • 讓插件易於被客製化、擴展和翻譯 • 開啟除錯模式 ( 開發環境 )

41. Thank you! ＠uchengwang