[Event] WordPress meet up สร้าง Plugin ง่ายโครตๆ

วันนี้ไปงาน wordpress ที่จัดขึ้นที่ Hubba ( Hubba คืออะไรที่ไหนเชิญทางนี้ ) ครั้งนี้เป็นงานที่จัดแบบไม่ได้จัดมานานแล้วตั้งแต่ไปงาน WordPress dev night ครั้งนี้ดีตรงที่ว่าอยากไปเรียนรู้วิธีการเขียน Plugin เพราะเขาแจ้งมาว่าจะสอนเขียนแบบง่ายโครตๆ ให้ดูโดยมี speaker ชาวญี่ปุ่นมาพูดอังกฤษ ( อืม … อ่านไม่ผิดหรอกคนญ๊่ปุ่นพูดอังกฤษนั่นแหละ ) ซึ่งแกหาเลี้ยงชีพด้านทำ Plugin เลยก็เยี่ยวนาน เชี่ยวชาญพอตัว รอเวลา 18 นาฬิกาก็เริ่มงาน ในเพลาที่เหมาะสม …

เริ่มงาน

ก่อนอื่นทุกท่านคงจะมีข้อสงสัยอันแรงกล้าว่า ขาคนที่เป็น Speaker โดนอะไรมา เพราะตูก็สงสัยเหมือนกัน แต่ไม่ได้ถาม เขาคงรู้แหละมองกันทุกคนเลยเปิดประเด็นกันเรื่องนี้ก่อนเลย ( ฮา ) เขาเล่าว่าเขาดื่มเยอะไปหน่อย เมาแล้วล้ม ขาหัก ( เขาพยายามพูดไทยด้วยนะเออ ! ขา … หัก อารมณ์ประมาณนี้เลย ) เรียกว่าเปิดประเด็นได้ดีทุกคนหัวเราะแล้วเรื่องดำเนินต่อไหลลื่นเลยครับ

slide : http://www.slideshare.net/NSKW/an-easy-guide-to-plugin-development

Slide แรกๆเป็นการแนะนำตัว Speaker เองผมเอาข้อมูลมาคราวๆนะครับไม่เยอะดังนี้

  • ชื่อ Shin ( ชิน ) เหมือนในเพลงอ่ะ ชินๆๆๆๆๆๆๆ นะ วุดดดดดดดดดด
  • อยู่ไทยมา 1 ปีกับอีก 6 เดือนนะแจ๊ะ
  • เขียน Plugin แบบรับงานไม่ได้ขายแบบใน wordpress หรือตลาดกว้าง

แล้วก็บอกว่าวันนี้จะมาสอนเขียน Plugin อย่างง่ายให้พวกเราได้เรียนรู้กันนะ เดี๋ยวพวก Slide และก็ Link ต่างๆจะใส่ให้ตอนท้ายของบทความ โดยคุณชินเนี้ยแกก็บอกว่า จะอธิบายเกี่ยวหัวเรื่องที่เราต้องเรียนรู้ ว่าหัวข้อใหญ่ๆวันนี้ต้องรู้อะไรก่อนบ้าง อย่างไร ทำไม ที่ไหน เมื่อไร ( พอ !! ) เพื่อเป็นแนวทางสำหรับคนมาโดยผมเรียงเป็นหัวข้อไปเลยแล้วกัน

เป็นกำลังใจให้ผู้เขียนกด Like หน่อยคร้าบบบบบบบ

Basic wordpress

  • สิ่งที่ต้องรู้เลยว่า wordpress มันทำงานอย่างไร ก่อนเวลาที่เราๆท่านๆ พิมพ์ url เข้าเว็บแล้ว wordpress ตอบสนองอย่างไร
  • เมื่อรู้ wordpress คราวนี้ก็มาเรียนรู้ว่า plugin มันทำงานอย่างไร
  • และเอาสองอย่างข้างบนมาผสมกันว่าเวลาทำงานร่วมกันจะเป็นทำอย่างไร

หลังจากเรียนรู้ไอ้ 3 ข้อด้านบนแล้วเราจะมีตัวอย่างในวันนี้ 3 ตัวอย่างให้คนมาร่วมงานเห็นว่ามันทำงานอย่างไร ต่างกันไหมทำนองเนี้ยโอเคเริ่มจาก

What is plugin ?

  • มันคือส่วนต่อเติมจากตัว wordpress โดยเราจะไม่ยุ่งกับตัวหลักทำให้สามารถต่อเติมได้เรื่อยๆ เวลา wordpress update อะไรก็ไม่กระทบ
  • เราไม่ต้องแก้ไขอะไรเกี่ยวกับตัว core หลักๆ คือเรียนรู้น้อย ( เอาเข้าจริงถ้าเราจะทำแบบดีๆก็ต้องเรียนรู้นะ )

Goal

  • ทำ Plugin แบบง่ายๆ
  • รู้ว่า Plugin มันทำงานยังไง
  • คุณจะรักมันมากขึ้น

สิ่งที่ต้องมี

  • wordpress อ่ะก็แน่นอนแหละ
  • ความรู้ PHP, Html, Css, Js
  • Template tags ( ใครไม่รู้จักดูที่นี่ อธิบายแบบสั้นๆคือ ชื่อ tag ที่ทาง wordpress เตรียมให้เราสามารถเข้าถึงเนื้อหาได้ หรือส่วนต่างๆ

เริ่มทำ

เวลาเราสร้างไฟล์ถ้าหากเป็น Plugin ใส่แบบนี้มันจะแสดงในหน้าจัดการ Plugin ของ wordpress

<?php
/* 
 Plugin Name: the easiest plugin
*/

แล้วทำการเซฟไฟล์ โดยตัวไฟล์ต้องอยู่ใน Folder plugin นะ ( ดูใน Slide เอา ) มีภาพให้แล้ว ซึ่งอันที่จำเป็นต้องใส่เลยคือ Plugin name และมีส่วนอื่นๆสามารถใส่เพิ่มเติมเพื่อความสมบูรณ์ได้เช่นตัว

<?php
/*
Plugin name: social_commentor
Plugin Url: www.example.com
Description: management comment
.
.
.

ลองไปหาอ่านดูได้ใน Slide จ้า ซึ่งทุกอย่างจะถูกแสดงในหน้าจัดการ Plugin ไม่ว่าจะเป็นพวก version url ของคนเขียนอย่างที่เราเห็นกันบ่อยๆ นั่นแหละ คราวมาดูกับตัวอย่างที่ทางคุณชิน ทำไว้ 3 ตัวครับ ( จุดนี้ต้องชมเขาจริงๆนะเขียน Plugin ภาษา 3 ตัวดึงความสนใจได้เยอะจริงๆ ฮ่าๆ )

  1. Plugin ใจเย็น เป็นการแอดคำว่า “ใจเย็น” ใต้ตำแหน่ง footer ของเว็บเราครับ
  2. Plugin สุภาพ อันนี้เป็นการกรองคำในส่วน content ที่เราเขียนโดยจะลงท้ายด้วย “ค่ะ” หากเป็นคำถามจะลงท้ายด้วย “คะ”
  3. Plugin สบายใจ Login อันนี้เป็นการแสดง vdo ใน background หน้า Login

สิ่งที่เราต้องรู้เกี่ยวกับการสร้าง Plugin ครั้งนี้คือ

<?php

add_action('location' , function_name );

add_filter('location', function_name );

โดยตัว add_action นั้นใช้สำหรับการ echo ค่าต่างๆ แทรกได้ สั่งให้ save อะไรบ้างอย่าง หรือ redirect หน้าก็ได้ส่วน

add_filter เป็นเกี่ยวกับการเปลี่ยนแปลงค่าต่างๆ เปลี่ยนแปลง text , html , php value ก็ทำได้

ตัว location นั้นคือพวก template_tags ของตัว wordpress ที่จะบอกว่าจะให้แทรกตรงส่วนไหนอย่างไร

ค่าที่ต้องใส่ต่อมาคือ function_name ที่เราสร้างไว้ โดยถ้าเราใช้ add_filter เราต้องใส่ค่า argument ไว้ด้วย คือทำให้ function รับค่าด้วย

เข้าการทำงานของ wordpress

ในส่วนนี้เราจะได้เห็นว่าเกิดอะไรขึ้นเมื่อมีการ request เว็บเข้ามาแล้ว wordpress ทำงานเป็นขั้นตอนอย่างไร มีตรงไหนบ้าง เพื่อเราจะได้รู้ว่าเวลาเราจะเขียน plugin เข้าไปต่อเติมจะต้องแทรกเข้าไปตรงช่วงไหน อย่างไรครับ

wordpress-meet-up
wordpress-meet-up

สามารถดูภาพเป็นลำดับได้ใน slide นะครับตั้งแต่หน้าที่ 40 เป็นต้นไปแต่ผมจะอธิบายภาพเดียวในนี้เลยแล้วกัน โดยอย่างที่เห็นในภาพครับ เมื่อเราทำการ เรียก url เข้าไป wordpress จะทำตามขั้นตอนดังนี้เลย

  1. เรียกค่า config ต่างๆมา
  2. เชื่อมต่อฐานข้อมูล
  3. Load พวก function พื้นฐานของตัว wordpress
  4. Load Plugin
  5. Load function ทั่วไป
  6. เอาค่าที่รับมาจาก url ไปค้นหาใน ฐานข้อมูลว่ามีอะไรที่ตรงกับที่เรียกไหม
  7. รับค่าจาก ฐานข้อมูล
  8. เรียก template เพื่อเตรียมเอาข้อมูลมาใส่ใน template ที่เราเลือกไว้
  9. ใส่ค่าทั้งหมดลงใน template
  10. เอาค่าทั้งหมดให้ user ได้เห็น

เอาล่ะต่อไปก็คือพระเอกในส่วนนี้ครับนั่นคือ keyword ว่า “Hook” การ Hook นั้นเหมือนเราเอา Function ของเราไปแทรกการทำงานของแต่ละส่วน โดยอย่างที่กล่าวมาคือมี 2 ตัวที่เราใช้ในการทำงาน Hook คือ action hook และ filter hook ครับดังภาพ

hook wordpress
hook wordpress

ซึ่งพวก version ของ wordpress เองนั้นก็ Hook กันแหลกเหมือนกัน เพียงเราต้องเข้าใจคือ จะ Hook ด้วย function อะไรครับ เรามีดูตัวอย่างการใช้ทั้งสองแบบกันครับ

<?php

add_filter('location', 'test');

function test($default)
{
    $new = strlen($default);
    return $new;
}

add_action('location', 'test2');

function test2()
{
  echo 'yeah';
}

ส่วนตัวอย่างการเขียน Plugin ดูกันใน Slide ได้เลยจ้ามีทั้ง 3 ตัวเลย สุดท้ายมีคนถามคำถามว่า หากอยากเขียนให้สากลหรือเขียนให้ดีๆทำอย่างไร คุณชินก็บอกว่าให้ลองโหลดพวก Plugin ดังๆแล้วมาดุโค้ดที่เขาเขียนไว้ครับจะเข้าใจมากขึ้นเช่น contact form 7 อย่างนี้ครับ แล้วก็ครั้งต่อไปจะเป็นเรื่องเกี่ยวกับ การสร้าง Theme ขาย by พี่เม่นของเราคนนี้นี่เอง

Resource

slide : http://www.slideshare.net/NSKW/an-easy-guide-to-plugin-development

 

ถ้าคุณชอบบทความในเว็บนี้ และอยากสนับสนุนเรา เพียงแค่คุณสมัครรับข่าวสารด้านล่างจะได้รับสิทธิ์พิเศษก่อนใคร เราสัญญาว่าจะส่งบทความที่เป็นประโยชน์ต่อคุณอย่างแน่นอนครับ

Loading

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Message us

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ปฎิเสธทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้ที่จำเป็น

    คุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

บันทึก