你自己添加，或者使用本工作室提供的 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 代碼即可實現。