File : test-plugin.php. ID : 9152
Skin : Default | Sons-of-obsidian | Sunburst | Highlighter | Frame
<?php
/**
 * Plugin Name: BMI Calculator
 * Description: BMI Calculator To Content
 */ 
/**
การสร้าง plugin สำหรับ wordpress
อ่านจาก https://www.borntodev.com/2020/04/19/%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-plug-in-%E0%B8%9A%E0%B8%99-wordpress/ 
โปรแกรม plugin นี้มีชื่อว่า BMI Calculator เพื่อคำนวณดัชนีมวลกายจากน้ำหนัก และส่วนสูง
1. ติดตั้ง xampp บน localhost 
2. ติดตั้ง wordpress 
3. ทดสอบใช้งาน http://localhost/wordpress
4. สร้าง folder ชื่อ test-plugin ใน htdocs/wordpress/wp-content/plugins
5. สร้างแฟ้ม test-plugin.php ใน folder ที่สร้างขึ้น โดยกำหนดให้เป็น utf8
6. เข้า http://localhost/wordpress/wp-admin เพื่อจัดการ
7. เข้า Plugins จาก left menu พบ BMI Calculator ตามแฟ้มและโฟรเดอร์ที่สร้างขึ้น
8. คลิ๊ก Activate
9. เรียกใช้ด้วยการสร้าง Post ใหม่
10. สร้าง Block และ Search หา Object ที่จะใช้ ให้พิมพ์ Shortcut [/]
11. ในช่อง Write shortcode here... ให้พิมพ์ [GenBmiCal]
12. คลิ๊ก Preview หรือ Publish
13. พบ textbox ตามที่กำหนดใน php code และประมวลผลได้ปกติ
*/
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>
    ';
}
add_shortcode('GenBmiCal', 'BmiCalculator');
?>