Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
深入淺出 WordPress 插件開發
Yucheng Wang
August 05, 2017
Programming
2
440
深入淺出 WordPress 插件開發
Yucheng Wang
August 05, 2017
Tweet
Share
More Decks by Yucheng Wang
See All by Yucheng Wang
不會寫程式也可以 - 使用 Elementor + ACF 來客製化網站
ucheng
0
200
使用 Gutenberg 和 ACF Block 重新建置網站
ucheng
0
46
使用 ManageWP 來管理網站
ucheng
0
180
提升你的古騰堡編輯體驗 - EditorsKit 介紹
ucheng
0
140
使用 ProjectHuddle 來管理客戶需求和回饋
ucheng
3
240
網站客製化、除錯的好幫手 - Chrome Developer Tools 基本介紹
ucheng
0
830
基本網站安全防護
ucheng
1
59
使用 ACF Pro 打造客製化古騰堡區塊
ucheng
1
260
使用 Admin Menu Editor 打造簡單易用的後台
ucheng
0
94
Other Decks in Programming
See All in Programming
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
5
550
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
160
オブジェクト指向で挫折する初学者へ
deepoil
0
170
VisualProgramming_GoogleHome_LINE
nearmugi
1
230
Angular-basierte Micro Frontends mit Module Federation @API Summit
manfredsteyer
PRO
0
110
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
190
[월간 데이터리안 세미나 6월] 스스로 성장하는 분석가 커리어 이야기
datarian
0
240
大規模プロダクトにLinterを導入し運用している話
hirokiotsuka
0
220
GDG Seoul IO Extended 2022 - Android Compose
taehwandev
0
320
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
atamaplus
1
920
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
numeroanddev
0
250
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.8k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
BBQ
matthewcrist
74
7.9k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Facilitating Awesome Meetings
lara
29
4k
Six Lessons from altMBA
skipperchong
14
1.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Docker and Python
trallard
27
1.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Designing Experiences People Love
moore
130
22k
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(' admin@example.com! '); echo $sanitized_email; //
will output: 'admin@example.com' ?>
安全性 過濾輸出的資料 • 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