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
330
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
250
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
350
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
ucheng
0
950
基本網站安全防護
ucheng
1
110
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
450
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
170
Other Decks in Programming
See All in Programming
AIともっと楽するE2Eテスト
myohei
7
2.9k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
190
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
150
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
NPOでのDevinの活用
codeforeveryone
0
870
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
21
8.7k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
840
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Typedesign – Prime Four
hannesfritz
42
2.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Done Done
chrislema
184
16k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
We Have a Design System, Now What?
morganepeng
53
7.7k
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