ตอนนี้ใครเป็น wordpress developer อยู่บ้างคร้าบ ผมอยากชนแก้วกับเพื่อนๆมากเลย เพราะรู้สึกว่าได้สกินทอง จากสกิวการสร้าง wordpres plugin ขึ้นมาใช้เองได้แล้ว
บทความนี้ผมตั้งใจจะมาแชร์สิ่งที่ผมได้เรียนรู้เกี่ยวกับ wordpress plugin ครับ ซึ่งผมวนเวียนกับมันมาสักพักผมก็รู้สึกว่า มันว้าวมากเลย
คำแนะนำก่อนจะเริ่ม
สำหรับการเขียน plugin ขึ้นมาสักตัวนั้นจะต้องพอมีพื้นฐานการใช้งานพวก HTML, Javascript, Css, Mysql มาบ้างนะครับไม่งั้นจะตามผมทันยากมากเลย แต่หากใครอยากอ่านเพลินๆ ก็เชิญชวนนะคร้าบ
มาเริ่มกันเลยดีกว่าครับพี่น้อง
เริ่มต้นด้วยการแปะโค้ดให้ก่อนเลยครับแล้วเดี๋ยวผมจะเล่าให้ฟังว่าส่วนไหนมันทำงานยังไงบ้าง ซึ่งนามสกุลไฟล์ จะเป็น .php นะครับ
<?php
/**
* Plugin Name: Publisher Map
* Description: Gen map for the publisher.
* Version: 1.0
* Author: Kok Jarukit
* Author URI: https://kokdev.com
*/
การจะสร้าง wordpress plugin จะต้องมีสิ่งพวกนี้ในการเริ่มต้นครับ เพราะว่ามันจะเอาไปใช้แสดงในคำอธิบายที่เราเห็นกันในตอนที่ติดตั้งไฟล์ โดยผมจะแสดงให้ดูไว้ตามรูปนี้เลยครับ
หลังจากเขียนส่วนข้อมูลพื้นฐานในการสร้าง Plugin กันมาแล้วเราจะมาทำการสร้าง Database ของเราขึ้นมาครับ ทีนี้ผมจะมาอธิบายว่า มี keyword อะไรบ้างใน code ที่สำคัญๆ
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
include_once("wp-config.php");
include_once("wp-includes/wp-db.php");
function pbmap_install() {
global $wpdb;
$wpdb->set_charset($wpdb->dbh, 'utf8');
global $pbmap_db_version;
$pbmap_table_name_first = $wpdb->prefix . 'pbmap_maps';
$charset_collate = $wpdb->get_charset_collate();
$sqlForMaps = "CREATE TABLE IF NOT EXISTS $pbmap_table_name_first (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) NOT NULL,
`wpgmza_id` int(11) NOT NULL,
PRIMARY KEY (`id`)
) $charset_collate;";
dbDelta( $sqlForMaps );
}
register_activation_hook( __FILE__, 'pbmap_install' );
- ฟังก์ชัน register_activation_hook เป็นส่วนสำคัญในการเรียกใช้ฟังก์ชันที่เราเขียนขึ้นมาครับ ซึ่งจะต้องเรียก require_once(ABSPATH . ‘wp-admin/includes/upgrade.php’) มาด้วยเพราะว่าเดี๋ยวมันจะหาฟังก์ชัน register_activation_hook ไม่เจอ ซึ่งจะเห็นว่ามันไปเรียก pbmap_install ที่ผมเขียนไว้มาครับ
2. global $wpdb; เป็นการไปเรียกใช้ฟังก์ชันที่สามารถเชื่อมต่อกับ Database ได้ครับซึ่งเค้า connect ไว้ให้เราเรียกใช้ได้เลย
3. $wpdb->prefix คือเป็นอักษรที่ถูกสุ่มขึ้นมาเพื่อไม่ให้ชื่อของ ตารางใน Database ซ้ำกันครับเพื่อนๆจะเห็นว่าผมจะเอามาต่อกับชื่อของ ตารางที่ผมสร้างขึ้นชื่อ pbmap_maps นั่นเอง
4. dbDelta( $sqlForMaps ); ทุกครั้งที่เราเขียน sql script เสร็จจะต้องใช้ฟังก์ชันนี้เพื่อสั่งให้ script ทำงานครับ แล้วก็ต้อง เพิ่ม include_once(“wp-config.php”); กับ include_once(“wp-includes/wp-db.php”); มาด้วยนะครับไม่งั้นมันจะไม่เจอฟังก์ชัน dbDelta
พอเรามี Database เรียบร้อยแล้วผมก็ไปสร้าง HTML ที่เป็นรูปแบบของตารางเพื่อนำมาแสดงข้อมูลที่เราบันทึกลงไปครับ แต่ยังมีบางฟังก์ชันที่เราต้องเรียนรู้กันเพิ่มเติมหน่อยตามไปอ่านกันต่อเลยครับ
add_shortcode( 'list_publisher_db', 'render_list_publisher_db');
function render_list_publisher_db(){
try {
$user = wp_get_current_user();
$user_id=null;
if(isset($user->ID)){
$user_id = $user->ID;
}
global $wpdb;
$sql = "SELECT pb.id, pb.user_id, pb.wpgmza_id, gm.title, gm.description, gm.address, gm.lat, gm.lng FROM V0pAl_pbmap_maps AS pb LEFT JOIN V0pAl_wpgmza AS gm ON pb.wpgmza_id = gm.id WHERE pb.user_id = $user_id";
$row = $wpdb->get_results( $sql );
$results = json_decode(json_encode($row));
$size = count($results);
?>
<div class="content pb-0">
<div class="orders">
<div class="row">
<div class="col medium-12 small-12 large-12">
<div class="card">
<div class="card-body">
<h2 class="box-title">ตำแหน่งสำนักพิมพ์ของคุณ </h2>
<h5 style="text-align:end;"><a href="/add-maps-form">เพิ่มตำแหน่งสำนักพิมพ์</a> </h5>
</div>
<?php if($size > 0) {?>
<div class="card-body--">
<div class="table-stats order-table ov-h">
<table class="table ">
<thead>
<tr>
<th class="serial">#</th>
<th>ID</th>
<th>title</th>
<th>description</th>
<th>address</th>
<th>Lattitude</th>
<th>Longtitude</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
foreach ($results as $result) {
?>
<tr>
<td class="serial"><?php echo $i?></td>
<td><?php echo $result->id ?></td>
<td><?php echo $result->title ?></td>
<td><?php echo $result->description ?></td>
<td><?php echo $result->address ?></td>
<td><?php echo $result->lat ?></td>
<td><?php echo $result->lng ?></td>
<td>
<?php
echo "<button type='button'><span class='badge badge-delete'><a href='?type=delete&id=". $result->wpgmza_id ."'>ลบ</a></span></button>";
?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
<?php
} catch (Exception $e) {
return $e->getMessage();
}
}
- $user = wp_get_current_user(); เป็นฟังก์ที่ดึงข้อมูลผู้ใช้งานมาได้เลยครับ แต่ต้อง login เข้ามาก่อนนะครับถึงจะได้ข้อมูลมา
2. $row = $wpdb->get_results( $sql ); $results = json_decode(json_encode($row)); คือการแปลงข้อมูลเพื่อเอามาใช้งานครับเนื่องจากผมติดปัญหานี้อยู่สักพักใหญ่เลยเพราะว่าผมเจอภาษาต่างด้าวเข้าไป ผมจึงคิดว่าส่วนนี้เป็นสิ่งที่ผมอยากเน้นไว้ให้กับเพื่อนๆทุกคนครับ
3. add_shortcode( ‘list_publisher_db’, ‘render_list_publisher_db’); เป็นฟังก์ชันสร้าง shortcode ที่เราสามารถเอาไปใช้ที่ wordpress page หรือ post ได้เลยครับวิธีการใช้ก็ง่ายมากเลย ยกตัวอย่างจากอันนี้คือ [list_publisher_db] แบบนี้ไปแปะได้เลยครับ
ผมจะมารวมโค้ดทั้งหมดให้ในนี้นะครับ
<?php
/**
* Plugin Name: Publisher Map
* Description: Gen map for the publisher.
* Version: 1.0
* Author: Kok Jarukit
* Author URI: https://kokdev.com
*/
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
include_once("wp-config.php");
include_once("wp-includes/wp-db.php");
$user_id = null;
function pbmap_install() {
global $wpdb;
$wpdb->set_charset($wpdb->dbh, 'utf8');
global $pbmap_db_version;
$pbmap_table_name_first = $wpdb->prefix . 'pbmap_maps';
$charset_collate = $wpdb->get_charset_collate();
$sqlForMaps = "CREATE TABLE IF NOT EXISTS $pbmap_table_name_first (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) NOT NULL,
`wpgmza_id` int(11) NOT NULL,
PRIMARY KEY (`id`)
) $charset_collate;";
dbDelta( $sqlForMaps );
}
register_activation_hook( __FILE__, 'pbmap_install' );
add_shortcode( 'list_publisher_db', 'render_list_publisher_db');
function render_list_publisher_db(){
try {
$user = wp_get_current_user();
$user_id=null;
if(isset($user->ID)){
$user_id = $user->ID;
}
global $wpdb;
$sql = "SELECT pb.id, pb.user_id, pb.wpgmza_id, gm.title, gm.description, gm.address, gm.lat, gm.lng FROM V0pAl_pbmap_maps AS pb LEFT JOIN V0pAl_wpgmza AS gm ON pb.wpgmza_id = gm.id WHERE pb.user_id = $user_id";
$row = $wpdb->get_results( $sql );
$results = json_decode(json_encode($row));
$size = count($results);
?>
<div class="content pb-0">
<div class="orders">
<div class="row">
<div class="col medium-12 small-12 large-12">
<div class="card">
<div class="card-body">
<h2 class="box-title">ตำแหน่งสำนักพิมพ์ของคุณ </h2>
<h5 style="text-align:end;"><a href="/add-maps-form">เพิ่มตำแหน่งสำนักพิมพ์</a> </h5>
</div>
<?php if($size > 0) {?>
<div class="card-body--">
<div class="table-stats order-table ov-h">
<table class="table ">
<thead>
<tr>
<th class="serial">#</th>
<th>ID</th>
<th>title</th>
<th>description</th>
<th>address</th>
<th>Lattitude</th>
<th>Longtitude</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
foreach ($results as $result) {
?>
<tr>
<td class="serial"><?php echo $i?></td>
<td><?php echo $result->id ?></td>
<td><?php echo $result->title ?></td>
<td><?php echo $result->description ?></td>
<td><?php echo $result->address ?></td>
<td><?php echo $result->lat ?></td>
<td><?php echo $result->lng ?></td>
<td>
<?php
echo "<button type='button'><span class='badge badge-delete'><a href='?type=delete&id=". $result->wpgmza_id ."'>ลบ</a></span></button>";
?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
<?php
} catch (Exception $e) {
return $e->getMessage();
}
}
?>
เกือบลืมที่อยู่ของไฟล์ไปแล้ววว
ที่อยู่ที่ต้อง Upload ขึ้นไปจะอยู่ที่ wp-content/plugins/<ชื่อของ plugin> ผมจะลงรูปตัวอย่างไว้ให้ดูนะครับ อ้อ!!! แล้วหลังจากติดตั้งแล้วอย่าลืม Active มันด้วยนะคร้าบเดี๋ยวจะงงว่าทำไมใช้ shortcode ไม่ได้
บอกลาท้ายบทความ
เป็นยังไงกันบ้างครับงง กันรึเปล่า? สิ่งที่ผมเอามาเขียนเล่าให้ทุกคนฟังนี้ เป็นทักษะที่ผมได้มาแล้วรู้สึกประทับใจมากครับ เพราะผมไม่คิดเหมือนกันว่าผมจะสามารถเขียน plugin ขึ้นมาเองได้ ผมเคยมีความคิดที่ว่าการ custom wordpress เป็นอะไรที่ยากมาก แต่พองานมันรัดตัว ผมต้องทำมันให้ได้จริงๆ
ป.ล. ผมอาจจะไม่ได้อธิบายโค้ดครบทุกบรรทัดนะครับ ขออภัยไว้ ณ ที่นี้ด้วย หากใครสงสัยอะไรสามารถ Comment ถามผมได้เลยนะคร้าบ
*สำหรับใครที่อยากได้ประสบการณ์แบบผม ลองไปหารับงานอะไรยากๆ ดูครับ ออกจากเซฟโซนของคุณ แล้วคุณจะรู้ว่าโลกการเรียนรู้ของอาชีพนี้มันช่างกว้างใหญ่ จริงๆ
สำหรับวันนี้สวัสดีครับ