客製化WordPress後台,自訂Logo、模組與頁尾資訊

如果你是使用WordPress接案或者是共筆網站,那接下來要介紹的簡易後台面板調整應該是對你有幫助的。大家都知道WordPress前台的自訂性非常好,厲害的人可以將版面變得完全不像是WordPress部落格,讓它完完全全有專業公司官方網站的形象,只不過大多數使用者都是針對前台設計,後台就完全是部落格樣子了。

因為WordPress並沒有開放太多後台的變更function,所以不好改。但我們若堅持要改造後台當然OK,只是改完後可能讓他非常不像是原本的後台,但是遇到了WordPress版本升級,那根本是災難。所以後台要變動的話,基本上不建議大變動,我們可以從一些小地方小改,後台重點就是讓使用者用得順,找得到資訊就可以了!


事實上,WordPress後台已經是很完善而且是很成熟的介面了,只是現在如果要自訂一些東西,需要做一些小修改,這個修改我們可以透過目前使用的佈景主題中functions.php來自訂,完全不需要修改系統的原始檔案,一方面簡單安全,一方面也不必擔心系統更新,全部自訂的東西都要重改唷!

接下來會告訴大家該如何自訂後台介面Logo自訂後台首頁模組資訊以及如何修改後台底部的版權資訊,透過一些簡易的修改,可以讓使用者有不一樣的使用體驗,找資訊也可以比較好找。像其中的後台自訂模組,這就可以把它變成公告欄的感覺,只要使用者登入後台,就可以在首頁看到公告資訊囉!

客製化WordPress後台,自訂Logo、模組與頁尾資訊

〈▲ 原本的WordPress 後台首頁〉

修改WordPress後台Logo

在以前的版本,後台的Logo是很大的,掛在後台的左上角,不過自從升級到WordPress3.2版之後,後台的Logo就剩下一咪咪,幾乎可以說是看不見了,但如果堅持要改,也是可以透過functions.php進行修改的,因為很小,圖片直接拿網站的favicon.ico來用就好了。

※同場加映修改WordPress登入畫面的Logo

第1步  開啟當前使用的佈景主題中functions.php檔案,在適當的位置加入以下語法,記得修改圖片路徑以及檔名。

  • img:佈景主題下的資料夾。
  • favicon.ico:圖片名稱與檔名。
function custom_dashboard_logo() {
echo '<style type="text/css">
         #header-logo { background-image: url('.get_bloginfo('template_directory').'/img/favicon.ico) !important; }
        </style>';
}
add_action('admin_head', 'custom_dashboard_logo');

 第2步  改好後,網頁重新整理就會到左上角的網站名稱旁就有您設定的圖案囉!

客製化WordPress後台,自訂Logo、模組與頁尾資訊

 

自訂後台頁尾版權資訊

不知道為什麼,改網站大家最喜歡注意到網頁尾端的版權資訊,或許這是一個可以偷偷打廣告的地方吧?不過該留的資訊還是要留著。雖然說後台大家是管不著的,畢竟外人也無法看到你後台頁尾到底擺了什麼資訊,會看到這些資訊都是有你網站後台權限的人才可以看到。如果是接案者,這邊可以放上自己的公司資訊、主機代管或是網頁設計之等等的資訊。要修改這部分的區塊,一樣是透過加入function來修改後台頁尾的部分。

第1步  請開啟當前的佈景主題中functions.php檔案,加入以下資訊即可修改頁尾。

function custom_dashboard_footer () {
     echo '自訂文字,可使用HTML ';
  }
add_filter('admin_footer_text', 'custom_dashboard_footer');

第2步  改好後,請照下圖,就是這樣子囉!

客製化WordPress後台,自訂Logo、模組與頁尾資訊

自訂後台首頁資訊模組

WordPress後台並沒有設計公佈欄的地方,如果網站有多位使用者或者是這網站建置完成是給其他人用,那麼可以在後台首頁的地方加上一些資訊,讓使用者之後使用上若有問題,可以找得到地方協助,比方說放上聯絡信箱電話,或者是提供相關資訊的超連結,都是不錯的做法。

第1步  開啟佈景主題的functions.php檔案,加入以下語法即可。如果要加入兩個模組,那就將下方有「_1」全部改成「_2」即可,如果你看懂語法,名稱可自己定義。(官方資訊)

function custom_dashboard_help_1() {
  echo '模組內容'; }
function custom_dashboard_widgets_1() {
    global $wp_meta_boxes;
    wp_add_dashboard_widget('custom_help_widget_1', '模組標題 ', 'custom_dashboard_help_1');
}
add_action('wp_dashboard_setup', 'custom_dashboard_widgets_1'); 

第2步  修改後,後台就多出一個模組了,可以透過拖拉方式調整顯示位置。

客製化WordPress後台,自訂Logo、模組與頁尾資訊

第3步  點選右上角的【顯示選項】可以展開後台介面設定,您可以設定模組是否顯示以及版面配置等等,使用上很簡單、直覺。

客製化WordPress後台,自訂Logo、模組與頁尾資訊