close

wordpress-3446166_960_720.jpg

(圖片來源)

找了很多的相關的插件開發框架,一直在尋找一個適合 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   (圖示)
	);
}

 

效果如下:

 

arrow
arrow
    創作者介紹
    創作者 Mayuge 的頭像
    Mayuge

    工程的日子每天都很師

    Mayuge 發表在 痞客邦 留言(0) 人氣()