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
360
使用 Gutenberg 和 ACF Block 重新建置網站
ucheng
0
170
使用 ManageWP 來管理網站
ucheng
0
340
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
250
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
350
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
ucheng
0
950
基本網站安全防護
ucheng
1
110
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
460
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
170
Other Decks in Programming
See All in Programming
MCPで実現できる、Webサービス利用体験について
syumai
7
2.5k
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
1.9k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
190
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
360
バイブコーディング × 設計思考
nogu66
0
110
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
810
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
710
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
400
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
130
Infer入門
riru
4
1.4k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
2
460
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Balancing Empowerment & Direction
lara
1
540
Why Our Code Smells
bkeepers
PRO
337
57k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
How GitHub (no longer) Works
holman
314
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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