你自己新增，或者使用本工作室提供的 WordPress 後臺框架都可以給文章、頁面等等新增自定義欄位面板。不過這樣新增的自定義面板都只能顯示在內容編輯器的後面，怎樣才能在標題的後面、文章編輯器的前面新增一個自定義欄位面板呢？
WordPress 本身是沒有提供任何鉤子讓我們在編輯器前面新增自定義欄位面板的，但是我們可以用 js 操作，將自定義面板移動到前面去。
以我們工作室釋出的 WordPress 後臺框架應用為例，應用例項為：每個單頁面前面需要加一個 banner 圖片，具體效果為：
方法：首先在後臺單頁面的編輯頁面新增一個自定義欄位面板，然後在後臺引入 js，用 js 將此自定義面板移動到前面。
步驟一、新增自定義欄位面板。
使用阿樹工作室提供的框架，只需要在 config.php 檔案裡面新增以下配置程式碼即可新增完成：(關於框架的使用方法，請參考下載頁面)
- /****page-banner*****/
- //面板 id 為 pagebannerbox
- $page_boxinfo = array('title' => '頁面頂部圖片', 'id'=>'pagebannerbox', 'page'=>array('page'), 'context'=>'normal', 'priority'=>'high', 'callback'=>'');
- $page_options[] = array(
- "name" => '頁面頂部 banner 圖片',
- "desc" => "請插入完整尺寸",
- "size"=>60,
- "std"=>'',
- "id" => "pagebanner", //欄位的 id 也為 pagebanner
- "type" => "upload"
- );
- $page_box = new ashu_meta_box($page_options,$page_boxinfo);
步驟二：新增 js，本框架中已經引入了一個 js 檔案，js 資料夾中名為 metabox_fields.js 的檔案，將 js 程式碼增加到此檔案中即可：
- jQuery('#postdivrich').before(jQuery('#pagebannerbox')); //前面的 postdivrich 指的是預設文字編輯處的 id 不能改
jquery 的 before 方法可以將 id 為 pagebannerbox 的 div 插入到 id 為 postdivrich 的前面，很簡單的一句 jquery 程式碼即可實現。