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
480
深入淺出 WordPress 外掛開發
Yucheng Wang
August 05, 2017
Tweet
Share
More Decks by Yucheng Wang
See All by Yucheng Wang
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
ucheng
0
320
使用 Gutenberg 和 ACF Block 重新建置網站
ucheng
0
130
使用 ManageWP 來管理網站
ucheng
0
310
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
220
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
330
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
ucheng
0
920
基本網站安全防護
ucheng
1
92
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
410
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
140
Other Decks in Programming
See All in Programming
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1.1k
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
280
Online-Dokumentation, die hilft: Strukturen, Prozesse, Tools
ahus1
0
100
MCP with Cloudflare Workers
yusukebe
2
230
これでLambdaが不要に?!Step FunctionsのJSONata対応について
iwatatomoya
2
3.8k
Spatial Rendering for Apple Vision Pro
warrenm
0
150
Recoilを剥がしている話
kirik
5
7.2k
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
130
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
110
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
130
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
200
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
3
490
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Docker and Python
trallard
42
3.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Agile that works and the tools we love
rasmusluckow
328
21k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.6k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
GitHub's CSS Performance
jonrohan
1031
460k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
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