Skip to main content

หลายครั้งที่เราทำเว็ปด้วย wordpress แล้วต้องการให้โพสหรือเพจของเรามีการทำงานที่มากกว่าที่ wordpress มีใ้ห้ตามปกติ เราก็จะต้องไปหา plugin ที่ตอบโจทย์การทำงานที่เราต้องการ แต่ก็จะเจอปัญหาอีกว่า plugin มันใกล้เคียงแล้วแต่มันยังไม่ได้ อยากได้อันนี้เพิ่มอีก หรือบางทีก็ดัดแปลงหรือ Customize อะไรได้น้อย อันที่ดีมากๆก็ราคาสูง ฯลฯ ถ้างั้นเรามาลองสร้าง plugin ใช้เองกันดีกว่า โดยจะมาลองทำ plugin สำหรับคำนวณค่า BMI ง่ายๆขึ้นมากัน

มาดูเครื่องมือ และ ความรู้ที่ต้องใช้กันหน่อย

  • ฝั่งความรู้
  1. php: เนื่องจาก wordpress พื้นฐานเป็น php จึงต้องใช้ภาษา php เป็น base ในการเขียน
  2. html: ส่วนของการแสดงผลบนหน้าเว็ป
  3. JavaScript: เพิ่มลูกเล่นให้กับหน้าเว็ป
  4. optional(ในที่นี้ไม่ได้ใช้):
    css: เพิ่มความสวยงาม
    SQL: ถ้าต้องการให้ plugin ติดต่อฐานข้อมูลได้
  • ฝั่งเครื่องมือ
  1. code editor อะไรก็ได้สำหรับเขียน PHP เช่น VScode (https://code.visualstudio.com/download)

มาเริ่มทำ plugin กันเลย

ก่อนอื่นให้เราสร้างไฟล์ php ขึ้นมา 1 ไฟล์ แล้วเขียนโครงสร้าง plugin ของ wordpress ขึ้นมาโดยมีรูปแบบดังนี้

<?php
/**
 * Plugin Name: BMI Calculator
 * Description: BMI Calculator To Content
 */
?>

โดยที่ Plugin Name คือ ชื่อ plugin
         Description คือ คำอธิบายของ plugin ของเรา

จากนั้นสร้าง function ขึ้นมา 1 ตัว ชื่อว่า BmiCalculator ที่จะ return String ออกมา โดยสิ่งที่ return ออกมาจะถูกนำไปแสดงผลในเพจ/โพสของเรา

function BmiCalculator()
{
    return 'BMI Calculator';
}

ต่อมาให้เราแนะนำฟังก์ชันของเราให้ shortcode ของ wordpress รู้จักด้วยคำสั่ง add_shortcode แบบนี้

add_shortcode('GenBmiCal', 'BmiCalculator');

โดยที่ parameter ตัวแรกคือ ชื่อที่จะให้ shortcode รู้จัก และชื่อ function ที่เราต้องการแนะนำ ตอนนี้ไฟล์ plugin เราก็พร้อมที่จะติดตั้งเป็น plugin ใน wordpress แล้ว

เมื่อถึงตอนนี้จะได้โค้ดรวมแบบนี้ 

<?php
/**
 * Plugin Name: BMI Calculator
 * Description: BMI Calculator To Content
 */
 
function BmiCalculator()
{
return 'BMI Calculator';
}
 
add_shortcode('GenBmiCal', 'BmiCalculator');
 
?>

มาลองติดตั้ง plugin กันเลย

ให้เราไปที่ folder ของ wordpress ที่เราติดตั้งไว้ แล้วไปต่อที่ wp-content >> plugins จากนั้นสร้าง folder ให้กับ plugin ของเราแล้วนำไฟล์ของเราใส่ลงไปโดยที่ไฟล์และโฟลเดอร์จะตั้งชื่ออะไรก็ได้ (ในที่นี้ใช้ชื่อว่า test-plugin) 
เมื่อเราไปดูในหน้ารวม plugin ของ wordpress ก็จะพบว่า plugin ของเราโผล่มาแล้ว!

ให้ทำการ Activate ให้เรียบร้อยแล้วลองสร้างโพสขึ้นมาสำหรับลอง plugin ขึ้นมาเลยโดยให้ชื่อว่า BMI Calculator แล้วสร้าง shortcode ขึ้นมาแล้วใส่ชื่อที่เราแนะนำ shortcode ในไฟล์ plugin ของเราลงไปแบบนี้

จากนั้นให้เราลองกด preview ของเรา ถ้าเห็นข้อความที่เราสั่งให้ return ใน plugin แสดงว่า plugin ของเราทำงานแล้ว !!

ตอนนี้โครง plugin ของเราพร้อมแล้วสำหรับแสดงผลใน wordpress เราก็จะมาทำตัวคำนวน BMI ขึ้นมาโดยให้เราแทนที่ String ที่เรา return ในฟังก์ชัน BmiCalculator() ให้เป็นโค้ด html สำหรับการสร้างตัวคำนวนค่า BMI ขึ้นมาแบบนี้

function BmiCalculator()
{
 
    return '
            <div>
            <label for="weight">น้ำหนัก:</label>
            <input type="text" id="weight" name="weight"><br><br>
            <label for="height">ส่วนสูง:</label>
            <input type="text" id="height" name="height"><br><br>
            <button onclick="bmi_cal()">Calculate</button>
            </div>
            <p id = "result"></p>
    
            <script>
                function bmi_cal(){
                    let weight = document.getElementById("weight").value
                    let height = document.getElementById("height").value/100
                    document.getElementById("result").innerHTML = weight/(height*height)
                }
            </script>
    ';
}

แล้วเซฟจากนั้นลองกลับมาดูที่โพสใหม่ก็จะพบว่าเราได้ตัวคำนวน BMI ที่เราสร้างเองบนโพสเรียบร้อยแล้ว !

ถึงตอนนี้แล้วเราก็สร้าง plugin ด้วยตัวเองได้แล้ว โดยเราสามารถที่จะเพิ่มฟังก์ชันการทำงานอะไรก็ได้ลงไปให้ตอบโจทย์กับสิ่งที่เราต้องการได้เลย

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?

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

Developer

Author Developer

More posts by Developer

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

ตั้งค่าความเป็นส่วนตัว

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

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า