สวัสดีครับ ในบทความนี้ผมจะชวนมารู้จักกับวิธีการเขียนปลั้กอินสำหรับ WordPress ซึ่งในบทความแรกนี้ผมจะพาไปทำความรู้จักกับการเก็บข้อมูลการตั้งค่าต่าง ๆ บน WordPress โดยที่เราไม่ต้องสร้าง Table ใหม่ โดยข้อมูลการตั้งค่า ก็คือ พวกค่าคงที่ต่าง ๆ ที่เราจะนำไปใช้สร้างเงื่อนไขต่าง ๆ สำหรับปลั้กอินของเรา

งานแรกที่ผมได้คือการเข้าไปเขียนปลั้กอิน WordPress สำหรับรองรับระบบ Membership และโปโมชั่นต่าง ๆ ให้บริษัทแห่งหนึ่ง ผมไม่เคยเขียนปลั้กอินสำหรับ WordPress มาก่อน แต่มีประสบการณ์ การเขียน PHP และ MySQL พอสมควร พอได้มาจับบอกเลยว่ามันง่ายมาก

ปฏิเสธไม่ได้เลยว่าผู้ประกอบการรายเล็กหลายรายเลือกใช้ WordPress จริง ๆ เนื่องจากมันเป็นระบบ CMS (Content Management System) ที่โคตรจะใช้งานง่ายสำหรับ มี Web Interface ให้ มีระบบ Posts ระบบจัดการผู้ใช้งาน และมีปลั้กอินหลาย ๆ เจ้าให้ใช้งาน สามารถเปลี่ยนเป็นเว็บขายของ E-Commerce พร้อมใช้งานเพียงไม่กี่คลิก

โครงสร้างของไฟล์ปลั้กอิน

ไฟล์ปลั้กอินของ WordPress จะอยู่ในลักษณะที่ไฟล์ .php ชื่อใด ๆ อยู่ใน Folder ใด Folder หนึ่ง WordPress จะนับไฟล์ .php นั้นเป็นไฟล์หลักของปลั้กอิน

<?php
/**
 * Plugin Name: My Custom WordPress Plugin
 * Description: This is my custom wordpress plugin.
 * Author: Jirakit Pawnsakungrungrot
 * Author URI: https://www.linkedin.com/in/sunny-jirakit
 * Plugin URI: https://...
 * License: GPL2
*/

ในไฟล์นั้นเราจะเปิด <?php ทิ้งไว้แล้วเราสามารถคอมเม้น แล้วใส่ข้อมูลปลั้กอินลงไปได้เลย ซึ่งตรงนี้จะไปแสดงอยู่ในหน้า /wp-admin/plugins.php 

เพิ่มของปลั้กอินลงในเมนูของ WordPress Admin


add_action( 'admin_menu', 'my_plugin_admin_menu' );
function my_plugin_admin_menu() {
    add_menu_page(
        'ชื่อที่จะแสดงใน Title', 
        'ชื่อที่จะแสดงใน Menu', 
        'manage_options', //สิทธิ์ของ User ที่ใช้งานได้
        'my_plugin_setting', //Page slug
        'my_plugin_setting_page', //Render Function
        'dashicons-XXX', 
        20 
    );
}

ก่อนอื่นเพื่อความปลอดภัย เราจะใส่เงื่อนใส่ !definded('ABSPATH') เข้าไปก่อน เพื่อให้หน้านี้ไม่สามารถถูกเข้าถึงตรง ๆ ผ่านชื่อไฟล์ได้ (ตามพฤติกรรมปกติ ของ PHP)

แล้วเราจะใช้สิ่งที่เรียกว่า "hooks" ก็คือ methods ที่ WordPress เตรียมไว้ให้เราใช้นั่นเอง โดย add_action('admin_menu', ชื่อฟังก์ชั่น) ก็คือการที่เรานำฟังก์ชั่นสร้างเมที่ชื่อ my_plugin_admin_menu() เข้าไปทำงานใน admin_menu นั่นเอง ทำให้เมื่อเราเรียก method add_menu_page() เราจึงสามารถสร้างเมนูขึ้นมาใน WordPress backoffice ได้

สร้างหน้าใหม่

จาก Hook สร้างเมนู เราได้ใส่ค่า my_plugin_setting_page เข้าไป ซึ่งตัวนี้จะเป็น Function ที่จะถูกเรียกขึ้นมายังจากที่เมนูถูกกด โดยในบทความนี้เราจะสร้างเป็นหน้า Setting แบบนี้

function my_plugin_setting_page() {
?>
<h1>ยินดีตอนรับสู่ปลั้กอิน WordPress ของฉัน</h1>
<?php
}

เก็บข้อมูลด้วย register_setting() และ get_option()

สมมุติว่าผมจะเก็บข้อมูลจาก <select> อันหนึ่ง โดยเก็บสถานะ "1" และ "0"

ผมสามารถ Register Setting โดยกำหนด Setting Group ไว้ชื่อว่า my_plugin_setting_group ซึ่งตัว Setting Group จะต้องถูกกำหนดให้ฟอร์มใดฟอร์มหนึ่งเท่านั้น ไม่สามารถเก็บข้อมูลร่วมกับฟอร์มอื่น ๆ ได้ หมายถึง ถ้าเรา Register ค่าไปอีกหนึ่งค่า แล้วในฟอร์มที่ถูกเรียก settings_fields() ไป ไม่มี input สำหรับชื่อค่านั้น ก็จะทำให้ค่านั้นที่แม้ว่าจะถูกบันทึกค่าใดค่าหนึ่งไปก่อนแล้ว จะหายไปหลังจากกด submit ฟอร์มที่ไม่มี input มันอยู่

add_action('admin_init', 'my_plugin_setting_init');
function my_plugin_setting_init() {
    register_setting('my_plugin_setting_group', 'my_plugin_enable');
}
function my_plugin_setting_page() {
?>
<h1>ยินดีตอนรับสู่ปลั้กอิน WordPress ของฉัน</h1>
<form action='options.php' method="POST">
<?php
    settings_fields('my_plugin_settings_group');
?>
    <select name="my_plugin_enable">
    <option value="1" <?php selected(get_option('my_plugin_enable'),'1')<?php>เปิดใช้งาน</option">
    <option value="0" <?php selected(get_option('my_plugin_enable'),'0')<?php>ปิดใช้งาน</option">
    </select">
</form>
</h1>
<?php
}

โดยที่ get_option คือการที่เราเรียกค่านั้น ๆ ออกมาจาก Register Group ซึ่งสามารถใช้ได้ทั่วทั้งไฟล์ เราจะเอาค่านี้ไปสร้าง Condition if else ก็ได้ คือเป็นค่าที่ใช้เก็บข้อมูล string ต่าง ๆ ที่จะเอาไปแสดงในหน้าต่าง ๆ เช่น

<p>
<?=get_option('welcome_message')?>
</p>

แบบนี้เป็นต้นโดยเวลาเรียกหาค่านี้ ถ้าไม่มีข้อมูลถูกเก็บไว้มาก่อน เราก็สามารถตั้ง ค่าเริ่มต้น หรือ ค่า Default สำหรับค่านี้ได้

<p>
<?= get_option('welcome_message') ? "สวัสดี! นี่คือข้อความต้อนรับเริ่มต้น โปรดตั้งค่าข้อความต้นรับ" ?>
</p>