分類: wordpress

建議如果還沒看過這篇的可以先去看一下還有載一下範例程式碼

wordpress外掛開發 簡易框架教學

本篇主要是介紹用結合外掛的方式撰寫配合外掛的設定頁面，變數的儲存機制則使用wp本身提供的方式，不需要再額外建立資料表

首先先附上程式碼：
只要把框架那篇提供的同名程式碼換掉即可

https://drive.google.com/file/d/1hKarpGikxe3EdYH8pEFqN9Xwh5JChqTa/view?usp=sharing

接下來進入正題：

<?php
add_action('admin_menu', 'add_setting_menu');

function add_setting_menu() {
	add_submenu_page('my-plugin_main', __('設定'), __('設定'), __('manage_options'), 'pm-extend_setting','add_settings_page');
	add_action( 'admin_init', 'register_plugin_settings' );
}
//先加上設定的頁面

function register_plugin_settings() {
	register_setting( 'myplugin-group', 'plugin_date' );
	register_setting( 'myplugin-group', 'plugin_flag' );
}
//記得表格中有新的設定時要在這邊註冊變數名稱,否則變數不會記錄進options.php

function add_settings_page() {
?>
<!--以下是頁面的範例內容,可依據設定頁面需求自己做更改 -->
<div class="wrap">
	<h2>範例系統設定</h2>
	<br><br>
	<!-- option.php是固定的,wordpress會自動記錄所有設定值 -->
	<form method="post" action="options.php">
		<?php settings_fields('myplugin-group'); ?>
		<!-- 要先宣告這句下面才有辦法使用上面註冊的變數 -->
		<input type="checkbox" name="plugin_flag" value="1"
			   <?php if (get_option('plugin_flag')==1) echo "checked" ; ?> />
		測試勾選框<br/>
		<br>
		測試input框  :
		<input type="text" id="plugin_date" name="plugin_date" value="<?php echo get_option('plugin_date'); ?>"/>
		<p class="submit">
			<input type="submit" class="button-primary" value="儲存" />
			<!-- 這邊就submit表單所有欄位的值就會做紀錄了,不需要另外自己寫js處理,如果要debug就去wp後台首頁,去掉index.php改成options.php-->
			<!--  網址會變成類似 worpress根目錄網址/wp-admin/options.php 可在這個頁面查詢變數是否有被記錄-->
		</p>
	</form>
</div>
<?php
}
?>

設定頁面寫好之後，如果之後要在本外掛任意地方的程式碼or甚至別支外掛的程式碼(比較不建議)，使用設定值都輕鬆容易，只要在php代碼的地方寫上get_option(‘註冊的變數名稱’)就抓的到值囉！

當初自學wordpress外掛的時候遇到不少瓶頸，因為不熟悉wordpress的框架與運作模式，所以在外掛的開發上遇到不少問題，所以才有了撰寫這篇教學的想法，希望可以幫助到想撰寫wordpress外掛卻又不知從何下手的新手們 ，本篇教學是依據我本身開發經驗撰寫而成，觀念上可能有些許錯誤，還請各位多多包涵！

相信大家看教學最在意的就是範例程式碼，畢竟辛辛苦苦地跟著教學做了半天，如果最後弄出來無法執行，應該會很挫折吧！

下面的範例程式碼是經過實測過的，建議小夥伴們先下載下來配合著教學服用

範例程式碼:

https://drive.google.com/file/d/14Awz8BMIZdwPPRxUe1kUflViS6VSN2tL/view?usp=sharing

首先，建立一個外掛的根目錄下一定會有一個php檔，是用來載入這個外掛其他程式碼的切入點，以範例程式碼來說我將它取名為myplugin.php，讓我們先來看這支程式的內容

/*
 * Plugin Name: 外掛名稱
 * Description:外掛名稱 by 開發者名稱
 * Author: 開發者名稱
 * Plugin URI: 網址 不重要
 * Version: 版本(EX:1.0)
 */

//此區域是描述外掛的區域(必填)

//假設我的外掛名稱叫myplugin,我將其簡稱為MP(可依個人喜好)
if(!defined('MP_DIR')){
	define('MP_DIR', dirname(__FILE__));
}
//把MP_DIR定義為本外掛的根目錄,後面要呼叫相對路徑時會方便很多
define('MP_URL', plugin_dir_url(__FILE__));

//這邊要include主要是'後端處理'的php,我習慣將這些放在include資料夾內
function LoadMyplugin_Class(){
	include MP_DIR.'/includes/class_myplugin-main.php';
	include MP_DIR.'/includes/class_myplugin-cofunction.php';
	include MP_DIR.'/includes/class_myplugin-setting.php';
	$GLOBALS['MP']=MP();
}
//我自己會建議至少有這三支程式
//cofunction用來寫共用函式，setting則用來撰寫此外掛的設定頁面，會在之後的教學詳細說明
function MP(){
	return My_Plugin::instance();
}
add_action('plugins_loaded', 'LoadMyplugin_Class');
//綁定action讓wordpress載入本外掛

到這邊外掛的切入點主要就已經完成了，接下來讓我們看include資料夾內主要的class_myplugin-main.php這支程式

if(!class_exists('My_Plugin')):

class My_Plugin{
	public static $_instance=NULL;

	//我的理解是建構子
	function __construct(){
		global $wpdb;//讓外掛可以呼叫wp資料庫函式

		//這邊是判斷當前頁面是不是wp的後台,所以後台所需的東西要在這裡引入
		if(is_admin()){
			add_action('admin_menu', array($this, 'AdminMenu'), 1);
			//在後台頁面的左側加上自己設定的頁面的函式,如果外掛不需要做後台頁面就不用加
		}
		else{
			add_shortcode('mp-extend', array($this, 'RenderShortCode'));
			add_action('wp_head', array($this, 'AddScripts'));
			add_action('wp_head', array($this, 'AddStyles'));
			//這邊我習慣預設這三個
			//RenderShortCode是用來產生短代碼,在用elementor建構頁面時可以把外掛的頁面嵌入在適當的地方
			//AddScripts是用來引入全域會用到的js
			//AddStyles用來引入全域會用到的css
		}

		add_action('wp_ajax_nopriv_MPexecAjax', array($this, 'MPexecAjax'));
		add_action('wp_ajax_MPexecAjax', array($this, 'MPexecAjax'));
		//這邊先簡單說明一下,這兩行是前端用到ajax時url設為 admin_url('admin-ajax.php') 這個位置然後傳送到後端的data內action設為A
		//後端的add_action('wp_ajax_nopriv_A', array($this, 'Afunction'));只要在Afunction內做好對ajax送來的資料的處理就好
		//有興趣的之後會再開文章詳細說明
		//wp_ajax_MPexecAjax跟wp_ajax_nopriv_MPexecAjax的差別是前者是操作者有登入wordpress的情況才有權限
		//後者是沒有登入wordpress的操作者才有權限
		//所以如果是自製的外掛沒有要結合wp的會員機制的話,建議兩個都加比較保險
	}

	function AddScripts(){
		wp_register_script('my-plugin_script', MP_URL.'/js/my-plugin.js');
		wp_enqueue_script('my-plugin_script');

		wp_localize_script(	
			'my-plugin_script', 
			'MP_vars',
			array(
				'imgroot'		=>MP_URL.'/images/', 
				'templateroot'		=>MP_URL.'/templates/', 
				'ajaxurl'		=>admin_url('admin-ajax.php'),
			));
		//這是wordpress傳php值供前端js使用的方式
		//js的呼叫方式是 EX:MP_vars.ajaxurl,MP_vars.imgroot
		//imgroot跟templateroot建議可以先預設好,js在呼叫圖片或是跳轉頁面的時候比較方便
	}

	function AddStyles(){
		wp_register_style('my-plugin_style', MP_URL.'/css/my-plugin.css');
		wp_enqueue_style('my-plugin_style');
	}
    
    //設定後端管理頁面的時候用
	function AdminMenu(){	
		add_menu_page('我的外掛', __('我的外掛'), __('manage_options'), 'my-plugin_main', create_function('', 'require_once \''.MP_DIR.'/templates/my-plugin_admin.php\';'), 'dashicons-nametag', 56);
		// Add to admin_menu
		//是選單旁邊的符號,可以自己更換
		add_submenu_page('my-plugin_main', __('我的外掛功能一'), __('我的外掛功能一'), __('manage_options'), 'my-plugin_func1', create_function('', 'require_once \''.MP_DIR.'/templates/my-plugin_admin_func1.php\';'));
		//若要在主選單下面加上子選單可以使用此語法
		//這邊不是重點先簡易帶過,有興趣可以google add_menu_page跟add_submenu_page會有更詳細的介紹
	}

	public function RenderShortCode($args){
		if(!is_array($args))return;
		switch($args['type']){
			case 'example_page':
				$this->ExamplePage();
				break;
		}
	}
	//[mp-extend type='example_page'] 可在elementor以shortcode的方式直接插入自製頁面或功能
	//這是我目前覺得最好結合elementor的開發方式

	function ExamplePage(){
		include MP_DIR.'/templates/example_page.php';
	}
        //引入該頁面
	//這邊有需求還可引入只有該功能或頁面需要的特定css跟js

	//讓myplugin.php呼叫用
	public static function instance(){
		if(is_null(self::$_instance))self::$_instance=new self();
		return self::$_instance;
	}
}

endif;

這邊其實我多加了很多一般外掛教學沒有的部分，當初開發的時候照著別的外掛教學做完，雖然外掛是可以執行的，但還有許多常用的功能不知道要如何結合，所以這邊就把一些外掛基本上都會使用到的功能結合進來，建議大家可以稍微做修改拿來當作自己開發外掛的基礎模板

細心的小夥伴應該會發現範例程式碼有幾支引用的程式我都先留空，那是因為要在這篇內全部說明完可能會過於複雜，有興趣的人可以關注一下，之後會不定時更新剩餘部分的範例，當然如果對php及前端語言原本就有些底子的人就可以開始用這個框架玩玩看啦!