WordPress PHP 教學 網頁修改及網站設定

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – WordPress PHP 教學網頁修改 及 網站設定，在上一篇教學：安裝 WordPress 網站 最佳化 設定 網站安全 必學自定義網站技巧 ! 中提到了一些自定義WordPress網站的技巧，這些小方法都是可以讓網站能夠運作的更順暢，而且也能避免掉一些潛在的威脅，相當的實用。而今天這一篇教學文章想要教大家的，是如何透過編輯佈景主題中的 funtion.php ，來更 換WordPress 後台中的標誌以及文字內容，使用筆者所提供的 PHP 程式語言片段，就可以輕鬆的完成客製化網站後台。
那什麼是 PHP 呢？簡單而言，PHP是一種開源式( Open Source )的程式語言，透過在不同的函數中定義變數，給予伺服器端啟用(Action)具有邏輯性的迴圈指令，來呈現網頁內容的一種執行HTML、CSS、JAVAScrip的方式。其複雜的程度對於新手站長而言是相當高的，因此在嘗試修改時一定要特別注意不要去更動到原始的PHP指令，不然是非常容易導致網站出現問題。當然在本篇教學中是不需要各位自行撰寫 PHP 程式語言，鵠學苑已經提供給各位只需要在正確的位置放入就能夠生效的程式碼，因此本篇教學並不會太難，按照步驟去做，很容易就能夠完成想要網站想要修改的部分。如果說想再多了解一些 WordPress 網站中 PHP 語法的其它應用，可以參考這篇文章：網站登入帳戶密碼強度修改，加快會員註冊流程- 電商網站必學技巧。
那麼自定義WordPress後台內容，在什麼樣的情況下才用得到呢？如果說你的網站有所謂會員制，會開啟訪客權限讓會員登入網站後台，那麼客製化網站後台就有其必要，因為與前台同步的Logo、文字內容等是建立明確品牌形象的小細節，可以讓使用者對於網站所屬的企業印象更加深刻，也充分地反映出企業對於網站的用心管理，無形中會增加品牌的信任度。如果說是有在接網站製作的案子，那客制網站後台就更加有必要了，畢竟客戶在操作網站時遇到問題，就能透過後台中的資訊第一時間聯絡網站公司，而放置圖片也是一種無形的企業行銷，也許作用不大，但畢竟只要是能曝光的機會，就不要錯過。那麼接下來跟著鵠學苑的腳步，讓我們開始學習吧！
(小提醒：鵠學苑的所有教學均是以Apple Mac OS X系統 做步驟示範！)

WordPress.org PHP 學習資訊
https://codex.wordpress.org/Know_Your_Sources#Learning_PHP
WordPress.org 支援與論壇
https://tw.wordpress.org/support/

修改 WordPress 控制台 Logo

第一步：可以看到網站後台左上角預設的是 WordPress 商標，透過加入 PHP 語法，可以將其替換。

第二步：在後台中點擊外觀→主題編輯器，可以進入到編輯主題 PHP 語法的位置。

第三步：如下圖所示，在紅色方框中的位置要選取當前所使用的佈景主題名稱，如果說有安裝子主題，那麼就要切換到主要的佈景主題才能夠找到 funtion.php 這個檔案位置。

第四步：切換到當前主題後要點選佈景主題函式庫，也就是 funtion.php，每一個佈景主題的名稱都不一樣，如果是使用付費主題，在沒有中文化的狀況下都會是 funtion.php。

第五步：在更換圖片之前，必須要將所使用的Logo上傳到主題目錄下image的資料夾中，下圖為路徑示意圖，如果說網站已經在虛擬主機上完成架設，那麼就必須透過FTP上傳檔案的方式來增加圖片檔案，其路徑為public_html/wp-content/theme/當前啟用的佈景主題/新建放置圖片的檔案夾/圖片名稱＋副檔名。

第六步：在 funtion.php 中使用畫面捲軸拉到最下方，將以下語法放置到內容方框中：

function custom_dashboard_logo() {
echo '<style type="text/css">
         #header-logo { background-image: url('.get_bloginfo('template_directory').'/image/favicon-3.png) !important; }
        </style>';
}
add_action('admin_head', 'custom_dashboard_logo');

第七步：在下圖中紅色方框處的的字段就是必須自行替換的內容，注意斜線標示，不要更改到其結構。修改完成後記得要更新檔案。

第八步：外如下圖可以看到左上角的圖示已經更換為鵠崙設計的標誌，要注意圖檔的大小，如果超過20X20，就會只顯示部分圖片，在修改前必須要將圖片使用修圖軟體編輯。

修改WordPress控制台頁尾訊息

第一步：在登入後的控制台畫面中可以看到在頁尾的部分有版權宣告以及提示文字，一樣可以透過PHP語法做修改。

第二步：為了區分每一段語法修改內容，在加入語法前可以先以 // 註解內容 的方式來指示這一段語法所修改的是網站中哪個位置的內容，這也是方便以後當網站出問題需要偵錯修改時可以更快速的找到問題，對於網站維護而言是相當重要的一個動作。

第三步：同樣在 funtion.php 中加入以下語法：

function custom_dashboard_footer () {
     echo '歡迎來到鵠學苑！ ';
  }
add_filter('admin_footer_text', 'custom_dashboard_footer');

第四步：下圖中紅色方框圈選處就是可以修改成自己想要呈現的文字內容，如果說想要加入連結也可以使用<a herf=”網址“>文字內容</a> 的方式在該位置填入，可以連結到常見問題或者聯絡我們的頁面。

第五步：在完成後記得更新檔案，其更改才會生效。

第六步：如下圖回到控制台頁面重新整理，可以看到下方的文字已經變更。

增加WordPress控制台公布欄位

第一步：進入控制台後會有許多主題或外掛的更新資訊，如果說有安裝SEO之類的外掛也會在這裡顯示文章分數或者其它數據，那要如何利用這個區塊來新增網站想要公告給使用者或其他網站管理者的公告區塊呢？

第二步：在 funtion.php 中加入以下語法，新增一個元數據公告區塊在控制台位置：

function custom_dashboard_help_1() {
  echo 'WordPress架站教學公告'; }
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'); 

第三步：如下圖紅色方框位置是可以自定義文字的位置，鵠學苑最新消息是公告的標題，WordPress架站教學公告是公告的內容。

第四步：如下圖所示可以看到在網站控制台的畫面就會出現我們剛剛新增的公告區塊。

第五步：點選右上角的顯示選項可以在下拉清單中選擇想要顯示的公告內容，筆者為了方便教學已經先行隱藏其它WordPress、佈景主題、外掛的公告資訊，如果說你的網站控制台有太多資訊區塊看起來很雜亂，可以透過這個勾選功能來隱藏不必要的公告資訊。

修改登入網站後台畫面 Logo

第一步：在登入畫面一開始預設的是WordPress Logo，與更換控制台的標誌差不多的做法，同樣以加入 PHP 語法的方來做更換。

第二步：與修改 WordPress 控制台 Logo 的檔案目錄一樣的位置，將圖片上傳即可。

第三步：同樣在 funtion.php 中加入以下語法：

function custom_login_logo() {
  echo '<style type="text/css">
      .login h1 a {  background-image:url('.get_bloginfo('template_directory').'/image/designhu.png) !important;}
    </style>';  
}
add_action('login_head', 'custom_login_logo');

第四步：修改的位置與更換控制台標誌一樣。

第五步：回到登入畫面重新整理，就可以看到Logo已經更換成我們所指定的圖示。

結語：

自定義網站後台其實是複雜且有風險的一件事情，對於非IT從業人員來說，貿然的去加入或修改程式碼，都容易造成網站出錯，因此筆者一開始有提到在主題編輯器中加入PHP語法時要非常注意不要更動到其它的程式語言，如果說想要嘗試做更動，可以先在本機上利用MAMP或LAMP架設WordPress的網站，在上面做練習，如此才不會導致修改程式語言後網站出現問題，卻又不知如何排解的窘境。在之後WordPress客製網站系列會陸續的推出其它修改 PHP 的教學文章，無論是工作需要或者是想要自行架站，都歡迎透過右方的電子報系統訂閱我們，不定期都會發送最新的網站資訊及教學文章，如果有架站方面的問題也歡迎來信諮詢！今天的教學到這裡告一段落了，不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來 鵠學院 就對了！我們下次的教學見～

架站相關文章：

網站架設知識推薦閱讀：

如何使用 Elementor 建立 WooCommerce 單一商品頁？圖文步驟教學
Elementor 選單小工具 – 客製化 Menu Widget 功能與樣式操作教學
Site Kit For WordPress – 網站後台顯示 Google 分析數據外掛教學