An easy guide to Plugin Development
•
17 j'aime•50,630 vues
This is a slide I used at WordPress Meet-up in Bagnkok. It explains how WordPress and Plugins work together.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (10)
Similaire à An easy guide to Plugin Development
Similaire à An easy guide to Plugin Development (20)
Plus de Shinichi Nishikawa
Plus de Shinichi Nishikawa (20)
Dernier
Dernier (20)
An easy guide to Plugin Development
- 1. an easy start guide for Plugin Development WordPress Meet-up! on 2014/05/29! in Bangkok, Thailand! by Shinichi Nishikawa
- 2. about Me ❖ ผมชื่อชิน (Shinichi Nishikawa)! ❖ อยู่ที่กรุงเทพฯปีครึ่ง Lived in Bangkok for half a year! ❖ สร้าง themes และ plugin ให้ลูกค้า Building themes and plugins for customers! ❖ ผมชอบเขียนบล็อก เขียนหนังสือเกี่ยวกับ WordPress และจัด WordPress Events ที่ญี่ปุ่นด้วย. I write blogs with WP, I write books of WP, I ran WP events
- 3. Challenge ❖ ผมจะสอนวิธีทำpluginอย่างง่าย I will try to explain how to make plugins as easy as possible.! ❖ หากคุณมีคำถาม คุณถามได้ทุกเวลา Don’t hesitate to ask questions any time!! ❖ คุณสามารถดาวน์โหลด presentation และ codesนี้ได้ Presentation and codes online will be uploaded.
- 4. Menu ❖ plugin ขั้นพื้นฐาน Plugin basic! ❖ WordPress ทำงานอย่างไร How WordPress works! ❖ plugin ทำงานกับ WordPress อย่างไร How plugins work together with WordPress! ❖ ผมมีตัวอย่างpluginง่ายๆ3แบบ ที่จะทำให้คุณเข้าใจ You will see 3 example plugins and understand them
- 5. After session ❖ คุณสามารถจะทำpluginอย่างง่ายได้ You can make a simple plugin! ❖ คุณจะรู้ว่าpluginทำหน้าที่อะไร You will know what plugins do! ❖ คุณจะชอบWordPressมากขึ้น You will be more interested in WordPress core
- 6. Enquete ❖ ใครทำWordPress Themeได้บ้าง Anyone who can make WP Theme?! ❖ ใครทำPluginได้บ้าง Anyone who can make WP Plugin?! ❖ ใครรู้จักphpบ้าง Who knows php?
- 7. plugin คือ อะไร What is a plugin?
- 8. What is a plugin? ❖ Tool to extend WordPress functionality! ❖ Without changing Core codes! ❖ Over 30,000 plugins at WordPress.org/plugins/
- 9. ต้องมีอะไรบ้าง What do we need?
- 10. What do we need? a WordPress Get a clean install of a WordPress.
- 11. What do we need? php, html, css, js Plugins are written in php.! ! Many plugins have html & css.! ! Some plugins have Javascript.
- 12. php / basics ❖ variables! ✓ $a! ✓ $hubba! ✓ $posts ❖ functions! function my_func() { do_something(); } ❖ others! ✓ if! ✓ foreach! ✓ array
- 13. php / template tags ❖ the_title()! ❖ the_permalink()! ❖ the_date()! ❖ the_content() ❖ wp_title()! ❖ body_class()! ❖ get_post_thumbnail_id()! ❖ wp_nav_menu()
- 14. basic
- 15. wp-content/plugins/easy-plugin.php WPจะรู้ว่านี่เป็นplugin. WP knows it’s a plugin. This comment is called plugin header.
- 17. wp-admin/plugins.php WP shows the plugin “Plugin Name: ” comes here.
- 18. More Plugin Header <?php! /*! Plugin Name: Plugin ง่าย มาก!! Plugin URI: http://nskw-style.com/my-plugin! Description: plugin แรกของผม! Version: 0.1! Author: Shinichi Nishikawa! Author URI: http://nskw-style.com! License: GPLv2 or later! Text Domain: easiest! */
- 19. wp-admin/plugins.php WP shows the plugin Those are required if you want your plugin to be in wordpress.org site.
- 22. ผมทำตัวอย่าง plugin 3 แบบ! I made 3 plugins for tonight.
- 23. คุณจะเข้าใจใน 30 นาที! ! It may seem difficult but! you’ll understand in 30 minutes.
- 24. 1 ใจเย็นๆ <?php! /*! Plugin Name: ใจเย็นๆ! Description: Tell people to take it easy.! */
- 26. 1 ใจเย็นๆ
- 27. 2 สุภาพ <?php! /*! Plugin Name: สุภาพ! Description: This plugin make all content polite.! */
- 29. 2 สุภาพ
- 30. 3 สบายใจ login <?php! /*! Plugin Name: สบายใจ login! Description: This plugin make login screen happy.! */
- 32. 3 สบายใจ login
- 33. Plugins have codes like,! ! add_action( ‘location’, ‘function’ );! or! add_filter( ‘location’, ‘function’ );!
- 34. Let’s see how 3 plugins work.
- 35. I will explain the concept of plugin! and! we come back to these examples.
- 37. We need to know how! WordPress works.
- 40. WordPress Process request: example.com/category/food User sees the page. WordPress process
- 41. WordPress Process request: example.com/category/food User sees the page. Get DB info from wp-config.php connect to DB
- 42. WordPress Process request: example.com/category/food User sees the page. Get DB info from wp-config.php connect to DB load core functions load plugins load functions.php
- 43. WordPress Process request: example.com/category/food User sees the page. Get DB info from wp-config.php connect to DB load core functions load plugins load functions.php query from URL get post(s) data from DB
- 44. WordPress Process request: example.com/category/food User sees the page. Get DB info from wp-config.php connect to DB load core functions load plugins load functions.php template file decided. (category.php) query from URL get post(s) data from DB category.php! header.php loop sidebar.php footer.php
- 45. WordPress Process request: example.com/category/food User sees the page. WordPress process
- 46. WordPress Process request: example.com/wp-admin/post-new.php User sees the page. WordPress process WordPress Processes can be … ! ✓ displaying home page ✓ displaying admin page ✓ displaying login page ✓ or any other things WordPress does
- 47. WordPress Process request: example.com/wp-login.php User sees the page. WordPress process WordPress Processes can be … ! ✓ displaying home page ✓ displaying admin page ✓ displaying login page ✓ or any other things WordPress does
- 48. That’s how WordPress works.
- 49. Now, the question is! ! “how can plugins work! with the process of WordPress?”
- 50. I need to talk about “Hooks”,! the Secret Key of WordPress.
- 53. Hooks? ❖ Plugins access to hooks to put extra functions to WordPress! ❖ There are 2 types of hooks.! ✓ Filter Hooks! ✓ Action Hooks
- 56. action ❖ Action is to do something.! ✓ to echo something! ✓ to save something! ✓ to redirect somewhere
- 57. filter ❖ Filter is to change something! ✓ change original text to your text! ✓ change original html to your html! ✓ change original php values to your values.
- 58. How hooks look like apply_filters( ‘location1’, $value ); do_action( ‘location2’ ); filter hook action hook
- 59. How hooks look like ❖ apply_filters( ‘location_name’, $value );! ❖ do_action( ‘location_name’ );
- 60. case: in Templates apply_filters( ‘the_content’, $value ); do_action( ‘wp_footer’ ); ex ) example.com/about filter hook action hook
- 61. case: login screen apply_filters( ‘login_message’, $value ); do_action( ‘login_footer’ ); ex ) example.com/wp-login.php filter hook action hook
- 62. case: admin pages apply_filters( ‘admin_body_class’, $value ); do_action( ‘admin_head’ ); ex ) example.com/wp-admin/ filter hook action hook
- 63. There are many hooks name1 name2 name3 name5 name6 name7name4 there are 1,000+ filter hooks & 500+ action hooks in WordPress
- 64. How to hook
- 65. How to register apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
- 66. Hooking Filters & Actions ❖ add_filter( ‘location’, ‘your_func_name’ );! ❖ add_action( ‘location’, ‘your_func_name’ );
- 67. Hooking Filters & Actions ❖ add_filter( ‘location’, ‘your_func_name’ ); function your_func_name( $default ) { // do something return $new; }
- 68. Hooking Filters & Actions ❖ add_action( ‘location’, ‘your_func_name’ ); function your_func_name(){ // do something }
- 69. Register filter add_filter( ‘location1’, ‘func1’ ); function func1($value){ // make a filter here return $value } apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
- 70. Register action add_action( ‘location2’, ‘func2’ ); function func2(){ // do something } apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
- 71. Plugin Hook Concept add_filter( ‘location1’, ‘func1’ ); function func1($value){ // make a filter here return $value } add_action( ‘location2’, ‘func2’ ); function func2(){ // do something } apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
- 72. Plugin Hook Concept Plugin is a set of add_action() & add_filter() add_filter( ‘location1’, ‘func1’ ); function func1($value){ // make a filter here return $value } add_action( ‘location2’, ‘func2’ ); function func2(){ // do something } apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
- 73. Plugin Hook Concept Large plugins have many functions in them. apply_filters( ‘location1’, $value ); do_action( ‘location2’ );
- 74. we go back to example plugins
- 75. ใจเย็นๆ
- 77. ใจเย็นๆ request: example.com/category/food User sees the page. Get DB info from wp-config.php connect to DB load core functions load plugins load functions.php template file decided. (category.php) query from URL get post(s) data from DB category.php! header.php loop sidebar.php footer.php wp_head(); wp_footer();
- 80. สุภาพ
- 81. สุภาพ
- 82. สุภาพ request: example.com/category/food User sees the page. Get DB info from wp-config.php connect to DB load core functions load plugins load functions.php template file decided. (category.php) query from URL get post(s) data from DB category.php! header.php loop sidebar.php footer.php apply_filters( ‘the_content’, $content );
- 84. สุภาพ
- 86. This is also possible.
- 87. สบายใจ login
- 88. สบายใจ login
- 89. สบายใจ login request: example.com/wp-login.php User sees the page. check cookies see ssl condition check errors show logo & message<html> </head> show <form> do_action(‘login_footer’); ! in plugin: echo <video> display login footer do_action(‘login_head’); ! in plugin: echo <style>
- 90. สบายใจ login
- 91. More things you can do with plugins.
- 92. add favicon to admin pages
- 94. Hide admin notice of upgrades
- 95. shortcode
- 96. Resources
- 97. Resources ❖ Codex! ✓ http://codex.wordpress.org/Writing_a_Plugin! ✓ http://codex.wordpress.org/Plugin_API! ✓ http://codex.wordpress.org/Plugin_Resources! ❖ wordpress.org! ✓ http://developer.wordpress.org/reference/
- 98. Next meet-up! ! “How to build theme properly”! and! “How to sell it on WordPress.com”
- 99. แนะนำหัวข้อที่น่าสนใจได้นะครับ! Any suggestions for coming meet-up?