An easy guide to Plugin Development
•
17 gefällt mir•50,602 views
This is a slide I used at WordPress Meet-up in Bagnkok. It explains how WordPress and Plugins work together.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (10)
Ähnlich wie An easy guide to Plugin Development
Ähnlich wie An easy guide to Plugin Development (20)
Mehr von Shinichi Nishikawa
Mehr von Shinichi Nishikawa (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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?