Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
深入淺出 WordPress 外掛開發
Search
Yucheng Wang
August 05, 2017
Programming
2
490
深入淺出 WordPress 外掛開發
Yucheng Wang
August 05, 2017
Tweet
Share
More Decks by Yucheng Wang
See All by Yucheng Wang
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
ucheng
0
370
使用 Gutenberg 和 ACF Block 重新建置網站
ucheng
0
180
使用 ManageWP 來管理網站
ucheng
0
350
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
250
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
360
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
ucheng
0
960
基本網站安全防護
ucheng
1
120
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
470
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
180
Other Decks in Programming
See All in Programming
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
AI時代のUIはどこへ行く?
yusukebe
18
9k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
Cache Me If You Can
ryunen344
2
3k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.3k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Agile that works and the tools we love
rasmusluckow
330
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Side Projects
sachag
455
43k
Code Reviewing Like a Champion
maltzj
525
40k
Scaling GitHub
holman
463
140k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Language of Interfaces
destraynor
161
25k
Transcript
深入淺出 WordPress插件開發 王昱程 Stanley @uchengwang coscup2017
你應該知道什麼? • 網站的運作原理 • WordPress 基本概念 • 基本的 PHP /
HTML / CSS / JS 概念 • 物件導向程式設計概念
你能得到什麼? • 如何規劃你的插件檔案結構 • 如何新增和擴展你需要的功能 • 開發插件時要注意的事項
3 Major Components core themes plugins 不要修改核心!
What is a PLUGIN? • 插件為一組程式碼的集合,用來擴充WordPress 的核心功能。包含 PHP 檔案、 HTML、CSS、JavaScripts和圖檔。
plugins PHP HTML CSS JavaScripts Images
None
None
Plugin Header
你能透過插件做什麼? • 新增 shortcode • 註冊新的 post type • 新增
payment gateway • 建立客服系統 • ...ANYTHING!
Functions.php v.s. Plugins
plugin 結構 • 單一檔案,包含 functions • 單一檔案,包含 class 、初始化物件和部分 function
• 主要插件檔案,及一個或多個 class 檔案
START small GET BIG
WordPress Plugin Boilerplate
WordPress Plugin Boilerplate Generator
客製化
如何透過插件進行客製化 • Hooks ◦ Actions:Event-Driven, 在某個時間點執行,例如儲存文章 ◦ Filters:變更資料顯示的方式 • 常見的
hooks ◦ actions: ▪ wp_head ▪ wp_footer ▪ save_post ◦ filters ▪ the_content ▪ the_title ▪ body_class
save_post
body_class
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
Design Pattern in WordPress •
Design Pattern in WordPress •
我怎麼知道要用哪個 hook? • https://tw.wordpress.org/plugins/simply-show-hooks/
安全性 • 確認使用者有執行某項動作的權限 https://codex.wordpress.org/Roles_and_Capabilities
安全性 驗證和過濾輸入的資料 • 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() • …
sanitize_email <?php $sanitized_email = sanitize_email('
[email protected]
! '); echo $sanitized_email; //
will output: '
[email protected]
' ?>
安全性 過濾輸出的資料 • esc_html() • esc_url() • esc_js() • esc_attr()
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
nonce (numbers used once) cont. • *Nonces are User-Specific
擴展性 • 提供其他開發者修改或擴充的彈性 ◦ do_action ◦ apply_filters
擴展性 cont. • do_action
擴展性 cont. • apply_filters
讓插件可被翻譯
資料儲存 • wp_options • wp_postmeta • 客製化資料表
資料儲存 (wp_option) • add_option($name, $value, $deprecated, $autoload); • get_option($name); •
update_option($option_name, $newvalue);
資料儲存 (wp_postmeta) • add_post_meta( 68, 'my_key', 47 ); • update_post_meta(
68, 'my_key', 50 ); • get_post_meta( 68, ‘my_key’, true)
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
開啟除錯模式 • 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
Debug Bar • https://wordpress.org/plugins/debug-bar/
Query Monitor • https://wordpress.org/plugins/query-monitor/
總結 • 開發插件比你想像中的簡單! ( 但也沒那麼簡單 ...) • 安全第一 • 遵循
codex 規範 • 讓插件易於被客製化、擴展和翻譯 • 開啟除錯模式 ( 開發環境 )
Thank you! @uchengwang