手動安裝

此文件說明如何透過將 PHP 程式碼新增至主題的 functions.php 檔案，自訂 WordPress。此文件旨在供進階 WordPress 使用者使用，這些使用者知道為什麼我們的外掛程式並非適合其狀況的最佳解決方案。

如果您只是想以最簡單的方式在 WordPress 中設定 Font Awesome，並已內建所有神奇功能，請改使用我們的 WordPress 外掛程式。

開始之前

若要使用這些程式碼片段，您需要能夠勾選所有這些方塊

• 我可以寫入 WordPress 主題的 functions.php 檔案。
• 我知道如何變更主題的 functions.php 檔案。
• 我願意變更程式碼，將 Font Awesome 新增至我的 WordPress 檔案。

設定套件

首先，我們將使用此函式奠定基礎，您將使用套件嵌入程式碼呼叫此函式。將此複製並貼到 functions.php

/**
 * Font Awesome Kit Setup
 *
 * This will add your Font Awesome Kit to the front-end, the admin back-end,
 * and the login screen area.
 */
if (! function_exists('fa_custom_setup_kit') ) {
  function fa_custom_setup_kit($kit_url = '') {
    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {
      add_action(
        $action,
        function () use ( $kit_url ) {
          wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );
        }
      );
    }
  }
}

接下來，您需要將以下程式碼也新增至 functions.php，並將 yourkitcode.js 取代為您的實際套件權杖，您可以在套件設定中找到此權杖。

fa_custom_setup_kit('https://kit.fontawesome.com/yourkitcode.js');

---

使用 Font Awesome CDN 設定

Font Awesome 6 Pro 在 Font Awesome CDN 中不可用！

Font Awesome 6 無法透過 Font Awesome CDN 取得。你可以使用套件或自行主機 Font Awesome 6來使用 v6 圖示。如果你仍然偏好使用 CDN，Font Awesome 5 仍然支援。

---

設定衝突解決

由於 Font Awesome 的受歡迎程度，在使用 WordPress 時，我們最常遇到的問題是 WordPress 網站具有某個佈景主題和任意數量的外掛程式，而每個外掛程式都安裝了自己的 Font Awesome 版本。這些版本最後會互相衝突，產生令人困惑的結果。

使用我們的衝突偵測器找出你的網站上有哪些衝突，然後使用其結果調整以下衝突解決程式碼，並將其新增到你的 functions.php 中。

奠定基礎

首先，我們將使用這個函式作為基礎，你會呼叫它，並提供一個雜湊清單，代表衝突偵測器在你的網站上找到的衝突。

如果你不是程式設計師，不用擔心。你所需要做的任何程式碼變更都僅限於調整該雜湊清單。你可能永遠不需要修改此函式中的程式碼。

/**
 * Font Awesome Conflict Resolution
 */
if (! function_exists('fa_custom_remove_conflicts') ) {
  function fa_custom_remove_conflicts($blacklist = array()) {
    foreach ( [ 'wp_print_styles', 'admin_print_styles', 'login_head' ] as $action ) {
      add_action(
        $action,
        function() use ( $blacklist ) {
          $collections = array(
            'style'  => wp_styles(),
            'script' => wp_scripts(),
          );

          foreach ( $collections as $key => $collection ) {
            foreach ( $collection->registered as $handle => $details ) {
              if ( FALSE !== array_search(md5($details->src), $blacklist) ) {
                $collection->dequeue([ $handle ]);
              } else {
                foreach ( [ 'before', 'after' ] as $position ) {
                  $data = $collection->get_data($handle, $position);
                  if( $data && is_array($data) &&
                    FALSE !== array_search(
                      md5("\n" . implode("\n", $data) . "\n"),
                      $blacklist)
                    ) {
                    unset( $collection->registered[$handle]->extra[$position] );
                  }
                }
              }
            }
          }
        },
        0
      );
    }

}
}

現在，將以下程式碼複製到你的 functions.php 中，在上述程式碼之後，為每個你希望上述程式碼移除的衝突，新增一個 md5 雜湊到這個「封鎖清單」中。

我們已經為你準備了兩個雜湊，如果它們存在於你的網頁中，它們真的會與 Font Awesome 6 衝突，所以你最好將它們留在封鎖清單中。無論如何，希望這能更清楚地說明你可以如何根據需要新增更多雜湊。

• 7ca699f29404dcdb477ffe225710067f - 這是 4.7.0 font-awesome.css 檔案內容的雜湊。
• 3c937b6d9b50371df1e78b5d70e11512 - 這是字串的雜湊：https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.css。這是載入 Font Awesome 4.7.0 的常見 CDN URL。

fa_custom_remove_conflicts([
  '7ca699f29404dcdb477ffe225710067f',
  '3c937b6d9b50371df1e78b5d70e11512',
]);

新增版本 4 相容性

當你移除的衝突包含 Font Awesome 版本 4，而你的佈景主題或外掛程式會根據名稱參照圖示，這些名稱會在版本 4 和版本 6 之間變更。對你來說很幸運的是，版本 4 相容性已內建到套件中！因此，在 WordPress 中設定你的套件，這樣就完成了。

了解解決方案

你在此移除的這些衝突元素究竟是什麼？

它們是你的佈景主題或外掛程式新增到你的網頁中的 <style>、<link> 或 <script> 元素，這些元素會載入與你預期不同的 Font Awesome 版本，並會因此造成混亂。

你可能會說：「等等！如果我移除這些元素，這不是會損壞依賴它們的佈景主題或外掛程式嗎？」

好問題。答案是：可能不會，通常不會，但你的實際情況可能有所不同。

通常，主題或外掛會透過加入適當 CSS 類別的 <i> 元素，在頁面上放置圖示，或讓您這麼做。

Font Awesome 第 4 版使用 CSS 類別的方式，與 Font Awesome 第 5 版及以上版本使用的方式略有不同。第 4 版始終使用 fa 類別來表示底層 CSS 屬性 font-family: FontAwesome;，以載入 Font Awesome 網路字型，而第 5 版和現在的第 6 版則引入了幾個新概念

多種樣式

Font Awesome 第 5 版及以上版本有多種樣式，而第 6 版則新增了多個字型系列。這些樣式由多個 CSS 樣式「前置」類別定義，以 各種樣式 取代簡單的 fa。

任何使用 fa 的舊方法（第 4 版的方式），在第 5 版和第 6 版中都會自動理解為 fa-solid。

圖示	第 4 版程式碼	等效的第 5 版/第 6 版程式碼（實心樣式）
	<i class="fa fa-user"></i>	<i class="fa-solid fa-user"></i>

在第 6 版中（當您使用網路字型技術時，我們接下來會介紹 SVG），這些不同的樣式前置詞對應於不同的網路字型！

CSS 規則會自動為您處理所有這些事項：您只需使用您想要的樣式前置詞，它就會載入正確的網路字型檔案，以您選擇的樣式顯示圖示。

SVG 技術作為網路字型的替代方案

在第 5 版中，我們新增了將圖示新增為 SVG 的功能，以及傳統的 Font Awesome 網路字型。對於網路字型，<i> 標籤上的樣式前置詞不一定會選取對應的網路字型。如果您使用我們的 SVG 技術，則沒有網路字型檔案，但相同的 CSS 樣式前置詞會告訴我們的 JavaScript 程式碼，要將哪種樣式的圖示呈式為 SVG。

圖示設計變更

您知道我們的圖示設計可能會隨著版本的不同而略有變更嗎？看看 user 和 users 圖示在不同時期的變更。

您可以看到 fa-user 類別在不同版本中從未變更，但呈式的圖像確實會變更。對於 fa-users 也是一樣。

好吧，現在考慮到這些因素，以下說明當您使用此衝突解決技術來移除主題和外掛嘗試安裝的 Font Awesome 版本，並設定您自己偏好的版本時，通常會發生什麼事

• 在任何使用 fa 以第 4 版方式參照圖示的地方，它會自動理解為 fa-solid。
• 在任何使用第 4 版或第 5 版方式參照圖示的地方，它將使用您已設定的 Font Awesome 版本來呈式，而不是您的主題或外掛嘗試設定的版本。

回到 user 圖示如何隨著時間變更的範例

假設您有一個外掛嘗試安裝它自己的 Font Awesome 第 4.7.0 版，並且它在其頁面範本中使用 <i class="fa fa-user"></i>（第 4 版的方式），然後您使用 SVG 設定 Font Awesome 第 6.0.0 版。

您的外掛在任何有 <i class="fa fa-user"></i> 的地方，都會取得實心樣式 (fa-solid) SVG 圖示，而不是第 4.7.0 版網路字型圖示，它看起來像是在上方圖像中看到，在第 6.0.0 版中最後變更的 user。

你將有效地升級主題和外掛所使用的圖示。

什麼時候不是這樣運作的？

這是它將運作的方式，無論何時使用此標準方法，即帶有 CSS 類別名稱的 <i> 標籤。

還有其他一些較不常見的方式可以將圖示放在頁面上，例如使用 JavaScript 直接呈現 SVG 元素，例如 我們的 React 元件所做的那樣。以這種方式進行並不常見，但如果你的外掛碰巧以這種方式進行，也不會造成相同的衝突。這僅表示這種衝突解決方法不會以任何方式影響這些情況，因此它們將繼續按照外掛作者的原始意圖呈現圖示。