I am hero from Zero หลังจากที่ผมเข็น wordpress ขึ้นภูเขามาตั้งนาน ตอนนี้มันกลายมาวิ่งเล่นบนฝ่ามือของผมเป็นที่เรียบร้อยแล้วครับทุกคนน

ตอนนี้ใครเป็น 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' );
  1. ฟังก์ชัน 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();
	}
}
  1. $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 ถามผมได้เลยนะคร้าบ

*สำหรับใครที่อยากได้ประสบการณ์แบบผม ลองไปหารับงานอะไรยากๆ ดูครับ ออกจากเซฟโซนของคุณ แล้วคุณจะรู้ว่าโลกการเรียนรู้ของอาชีพนี้มันช่างกว้างใหญ่ จริงๆ

สำหรับวันนี้สวัสดีครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *