การสร้างเมนูปลั๊กอิน

ในการสร้างเมนูหน้า dashboard หรือเมนูที่แสดงที่หน้าหลังบ้านนั้นสามารถแบ่งออกเป็น 2 ระดับ คือ Top-Level Menus และ Sub-Menus

  • Top-Level Menus คือ เมนูหลักของปลั๊กอินหรือเมนูเริ่มต้นของปลั๊กอินของเรานั่นเอง
  • Sub-Menus คือเมนูย่อยของปลั๊กอิน

Top-Level Menus (เมนูหลักของปลั๊กอิน)

เมนูหลักของปลั๊กอินสามารถสร้างได้ด้วยฟังก์ชัน add_menu_page()

ไวยากรณ์

add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', string $icon_url = '', int $position = null )

 

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

  • $page_title กำหนดข้อความที่ต้องการให้แสดงผลในส่วน Title เมื่อมีการคลิกที่เมนู
  • $menu_title กำหนดข้อความของปุ่มเมนู
  • $capability กำหนดการแสดงผลต่อผู้ใช้งาน
  • $menu_slug กำหนดชื่อที่อ้างถึงเมนู ซึ่งจะต้องไม่ซ้ำกัน ตัวอักษรเป็นตัวพิมพ์เล็กและสามารถมีเครื่องหมายขีดกลาง – ได้
  • $function ใช้ในการเรียกฟังก์ชั่นที่จะแสดงผลในหน้าเว็บเมื่อคลิกที่เมนู
  • $icon_url กำหนดรูปแบบไอค่อนเมนู (คลาส Dashicons) โดยสามารถเรียกได้ 3 รูปแบบหลักดังนี้
    • เรียก SVG ที่เข้ารหัส base64 โดยใช้ URI ข้อมูลซึ่งจะมีสีให้เข้ากับโทนสี สิ่งนี้ควรเริ่มต้นด้วย “data: image/svg+xml; base64,”
    • เรียกชื่อคลาส Dashicons เพื่อใช้ไอค่อนแบบอักษร เช่น ‘dashicons-chart-pie’.
    • กำหนดเป็น none เพื่อให้สามารถใช้งานไอค่อนผ่าน CSS ได้
  • $position ค่าของตำแหน่งรายการเมนู

 

ตัวอย่างการสร้างเมนูหลักของปลั๊กอิน

<?php
/**
 * Plugin Name:       My First Plugin
 * Description:       ปลั๊กอินนี้เป็นเพียงพื้นฐานการสร้างปลั๊กอิน ที่สามารถนำความรู้ไปต่อยอดในการสร้างและพัฒนาปลั๊กอินที่สมบูรณ์
 * Version:           1.0
 * Requires PHP:      7.2
 * Author:            Pawin Khenphukhiaw
 * Author URI:        https://github.com/pawinhon1
**/

add_action('admin_menu', 'all_menu');

function all_menu(){
          add_menu_page('My First Plugin' , 'My First Plugin', 'manage_options', 'myfirstplugin', 'main_function_plugin', 'dashicons-star-filled ');
}

 

Sub-Menus

          Sub-Menus คือเมนูย่อยของปลั๊กอินซึ่งสามารถสร้างเมนูย่อยด้วยฟังก์ชัน add_submenu_page() และมีไวยากรณ์ดังนี้

          ไวยากรณ์

add_submenu_page( string $parent_slug, string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', int $position = null )

การสร้างเมนูย่อยมีพารามิเตอร์แตกต่างกับเมนูหลักเพียงแค่เพิ่ม $parent_slug ไว้ที่พารามิเตอร์ตัวแรก

  • $parent_slug ได้มาจาก $menu_slug ของเมนูหลัก

ตัวอย่างการสร้างเมนูย่อยของปลั๊กอิน

<?php
/**
 * Plugin Name:       My First Plugin
 * Description:       ปลั๊กอินนี้เป็นเพียงพื้นฐานการสร้างปลั๊กอิน ที่สามารถนำความรู้ไปต่อยอดในการสร้างและพัฒนาปลั๊กอินที่สมบูรณ์
 * Version:           1.0
 * Requires PHP:      7.2
 * Author:            Pawin Khenphukhiaw
 * Author URI:        https://github.com/pawinhon1
**/

add_action('admin_menu', 'all_menu');

function all_menu(){

          add_menu_page('My First Plugin' , 'My First Plugin', 'manage_options', 'myfirstplugin', 'main_function_plugin', 'dashicons-star-filled');

          add_submenu_page('myfirstplugin','Add data' , 'Add data', 'manage_options', 'add-data', 'add_data_function');
          add_submenu_page('myfirstplugin','View data' , 'View data', 'manage_options', 'view-data', 'view_data_function');
}

 

ซึ่งเมนูทั้งหมดนี้ยังไม่สามารถใช้งานได้ เนื่องจาก ยังไม่ได้สร้างฟังก์ชันรองรับเมื่อมีการคลิกเมนูนั่นเอง ซึ่งจะทำการยกตัวอย่างในบทถัดไป

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: