[WordPress] 開發你的第一個插件－工程的日子每天都很師

找了很多的相關的插件開發框架，一直在尋找一個適合 laravel 開發者的框架，最後找到了一個挺適合的框架，開發文件也還算完整 (文件)，下方是文件針對此框架的描述：

This framework solution offers WordPress templates to improve the development of custom themes and plugins by integrating them with Composer and Lightweight MVC.

接下來的內容會透過四個步驟，讓大家輕鬆且快速地開發你第一個插件，之後就可以大聲地說：「我會開發插件了! 」。

STEP1. 下載 github 上的專案 (github)

開啟 github 專案頁面

下載專案 zip 檔

解壓縮 zip 檔案並將插件框架資料夾放在 “wordpress專案/wp-content/plugins 目錄下"。

將資料夾名稱改成 myFirstPlugin (也可以改成自己喜歡的名稱)。

STEP2. 安裝插件

為了防止與使用此框架的其他項目發生衝突，建議設置名稱並更改其 namespace，透過下面指令可以一次性的更改專案中的所有名稱：

php ayuco setname MyFirstPlugin

透過下方指令來安裝並更新框架依賴的相關套件：

composer update

開啟 WordPress 後台外掛安裝頁面，可以看到多了一個 [MY PLUGIN] 的插件。

點擊啟用插件後就完成安裝的步驟囉!

STEP3. 配置插件相關資料

插件的檔案架構如下：

[WORDPRESS ROOT]
 |---> [wp-content]
        |---> [plugins]
               |---> "your-plugin-name"
                     |---> [boot]
                           |---> bootstrap.php
                     |---> [config]
                           |---> plugin.php
                     |---> [controllers]
                     |---> [css]
                     |---> [js]
                     |---> [plugin]
                           |---> [Models]
                           |---> Main.php
                     |---> [views]
                     |---> ayuco
                     |---> composer.json
                     |---> LICENSE
                     |---> plugin.php
                     |---> README

打開 plugin.php ，可以修改成你自己的資訊：

/*

Plugin Name: MyFirstPlugin

Plugin URI: 

Description: 這是我的第一個插件

Version: 1.0

Author: Shian

Author URI: 

*/

修改完可以刷新插件頁面，你就會發現這已經是屬於你的插件了!

STEP4. 新增選單與頁面

首先開起 “[你的插件]/plugin/Main.php"，會看到有兩個 function，第一個是 init()，主要是在新增插件 public 的相關功能，也就是在前台可以使用該功能，function 中已經有提供ㄧ些範例程式，這篇文章暫時不會使用到這個 function，之後會在詳談。

/**
 * Declares public HOOKS.
 * - Can be removed if not used.
 * @since 1.0
 */
public function init()
{
	// i.e.
	// add_action( 'save_post', [ &$this, 'save_post' ] );
	//
	// $this->add_action( 'save_post', 'PostController@save' );
	//
	// $this->add_shortcode( 'hello_world', 'view@shout', [ 'message' => 'Hello World!' ] );
}

第二個是 on_admin()，主要是在後台使用的相關功能，function 中一樣有提供ㄧ些範例的程式，這邊先示範如何添加選單，先在 function 中新增 wordpress 內建的 hook ‘admin_menu’。

/**
 * Declares admin dashboard HOOKS.
 * - Can be removed if not used.
 * @since 1.0
 */
public function on_admin()
{
	// i.e.
	// add_action( 'admin_init', [ &$this, 'admin_init' ] );
	//
	// $this->add_action( 'admin_init', 'AdminController@init' );

	add_action('admin_menu', [ &$this, 'admin_menu' ]);
}

剛剛已經新增一個 ‘admin_menu’ 的 action，這邊就要將這個功能進行實做，wordpress 一樣有提供新增選單的功能 add_menu_page()，只要依照你的需求填入相關參數，就可以新增選單在管理者介面中。

/**
 * 後台選單設定
 * @date   2018-04-09T10:07:30+0800
 */
public function admin_menu()
{
	add_menu_page(
		"頁面標題",		　　　　 // page_title (頁面標題)
		"選單標題",			// menu_title (選單標題)
		'manage_categories',		// capability (最低權限需求)
		'firstplugin',			// menu_slug  (選單連結參數)
		function(){ echo "Hello World!"; }, // function
		'dashicons-format-aside'	// icon_url   (圖示)
	);
}

效果如下：