如何白標WordPress

已發表: 2020-04-28

WordPress 佔當今互聯網網站的 1/3。但是它們中的許多並沒有以 WordPress 的形式出現在用戶或公眾面前。為什麼？因為一種叫做白標的做法。白色標籤是指您刪除一種產品的所有品牌以代替另一種產品。例如，您的登錄頁面和儀表板（以及其他）將使用您自己的徽標、公司名稱和媒體進行裝飾。您仍將使用 WordPress 並獲得其所有功能和實用程序，但它不會作為默認 WP 顯示給您的用戶或訪問者。您甚至可以在傳統的 WordPress 標籤區域內自定義小部件和消息。

訂閱我們的 YouTube 頻道

如何白標WordPress

在為 WordPress 貼白標籤時，您有幾個選擇。您可以手動更改 WP 安裝中的 PHP 文件，在您的站點需要新標識的位置插入自定義代碼。還存在許多插件，為您提供大量的白標定制和自由。我們將引導您完成手動為您的網站添加白標所需的代碼，向您展示如何使用 Branda 插件為 WordPress 白標，並指導您使用其他一些頂級插件，以便您對什麼有一個清晰的了解您必須從中選擇的選項。

手動白標 WordPress

手動給 WordPress 貼白標籤實際上非常簡單：您編輯安裝的functions.php文件。您還可以具體控制您想要更改的內容，並且不會因插件代碼而產生額外的膨脹，這些代碼可能適用於您的情況，也可能不適用於您的情況。如果您只想更改登錄頁面上的徽標，則可以。更改管理面板中的菜單而不是其他任何東西？你也能做到。但是你可以挑選你白標的 WP 的哪些部分。但是，如果操作不當，更改 WordPress 文件系統中的任何內容都可能是危險的。

這就是我們強烈建議您使用子主題進行這些更改的原因。因為您正在編輯核心 WordPress 文件（從技術上講是核心 WordPress 文件），如果您不這樣做，可能會出現太多問題。

如果您不使用子主題，當您的主題更新時，您對functions.php所做的任何更改都將被覆蓋。

因此，我們盡可能強烈地建議和敦促您遵循我們創建兒童主題的指南。或者，如果您是 Elegant Themes 會員，請參閱我們專門創建 Divi 子主題的終極指南。如果您不這樣做，並且您的主題更新（或某些內容損壞並且必須恢復備份或其他一百件事之一），您的白標代碼將消失。你會回到第一個廣場。所以請使用兒童主題。

如果您不習慣通過我們的指南手動創建一個，您還可以使用子主題創建插件或 Divi Space Divi 子主題構建器。

如何編輯您的 Functions.php 文件

編輯您的functions.php文件非常容易，您有多種選擇可供選擇。您可以使用代碼編輯器和 FileZilla 等 FTP 程序來下載和重新上傳文件。或者您可以使用 cPanel 的文件管理器或 WP 文件管理器之類的 WordPress 插件在您的儀表板內處理它。無論您選擇哪種編輯文件的方法，您 100% 都希望為您的站點和文件本身創建備份，以防止任何災難性的數據丟失。

話雖如此，您可以在/public_html/example.com/wp-content/theme-name目錄中找到您的functions.php文件。

在哪裡可以找到functions.php

根據您的編輯器和網站設置，確切的結構將與上述示例不同，但會相似。然後，下載它並開始編輯。

手動為 WordPress 登錄頁面貼上白標籤

開始為您的網站貼上白標的最佳地點是 WP 登錄頁面。它是您網站上最常用的頁面之一，因此您可能不希望大 WP 徽標盯著您的用戶或員工。很容易改變。您需要的代碼片段的任何特定說明都作為註釋包含在代碼塊本身中，您還應該注意，任何關於 URL 和自定義文本的自定義都需要在我們的佔位符中進行更改。此外，非常感謝 ET 開發團隊的 Ayub 提供的這些精彩示例。

現在對於代碼本身：

<?php/**
 * Change WordPress login logo with your own
 */
function et_custom_login_logo() {
  $logo_url   = get_stylesheet_directory_uri() . '/images/logo.png';
  $logo_ . esc_url( $logo_url ) . '); background-size: 186px 86px; width: 186px; height: 86px; }';
  wp_add_inline_style( 'login', $logo_style );
}
add_action( 'login_enqueue_scripts', 'et_custom_login_logo' );/* Code explanation - Start Here *//**
 * Change WordPress login logo with your own
 */
function et_custom_login_logo() {
  // Path URL to your own logo. Method get_stylesheet_directory_uri() will return
  // current theme path URL.
  $logo_url   = get_stylesheet_directory_uri() . '/images/logo.png';  // Set logo background image. esc_url() method is needed to check and clean the
  // logo URL. You can resize the logo as well by adjusting the background size,
  // height, and width.
  $logo_ . esc_url( $logo_url ) . '); background-size: 186px 86px; width: 186px; height: 86px; }';  // Render custom logo style above. 'login' is the registered stylesheet for
  // default WordPress login page. By using wp_add_inline_style() method we no
  // longer need to specify <style> tag, has unique ID, and it will be fired as
  // soon as WordPress login stylesheet is loaded.
  wp_add_inline_style( 'login', $logo_style );
}
add_action( 'login_enqueue_scripts', 'et_custom_login_logo' );/* Code explanation - End Here */?>

此外，您可能需要在用戶單擊徽標本身後進行重定向。您將需要添加此代碼來執行此操作：

<?php/**
 * Change the URL of the WordPress login logo with home URL
 *
 * @return string Your custom logo URL
 */
function et_custom_login_logo_url() {
  return esc_url( home_url() );
}
add_filter( 'login_headerurl', 'et_custom_login_logo_url' );?>

由於可訪問性非常重要，您需要為圖像添加一些懸停/標題文本。以下是如何做到這一點：

<?php/**
 * Change the hover/title text of the WordPress login logo
 *
 * @return string Your custom hover/title text
 */
function et_custom_login_logo_title() {
  return esc_html__( 'Custom Title Text Here', 'et-text-domain' );
}
add_filter( 'login_headertext', 'et_custom_login_logo_title' );/* Code explanation - Start Here *//**
 * Change the hover/title text of the WordPress login logo
 *
 * @return string Your custom hover/title text
 */
function et_custom_login_logo_title() {
  // esc_html__() method is used to support locale translation and clean the
  // translated string if it exists.
  return esc_html__( 'Custom Title Text Here', 'et-text-domain' );
}
add_filter( 'login_headertext', 'et_custom_login_logo_title' );/* Code explanation - End Here */?>

手動為 WordPress 管理儀表板貼上白標籤

當然，除了登錄頁面之外，還有 WordPress 管理員。所有魔法發生的地方。或者至少是工作。隨著 WordPress 的最後幾個版本，臭名昭著的 WordPress 後端在設計和用戶體驗方面取得了重大進展。以下代碼片段旨在幫助解決此問題。

歡迎辭

您知道 WordPress 管理員右上角的那個小小的問候語，上面寫著“你好，你的名字”？那麼現在你可以讓它說任何你想要的。

<?php/**
 * Change admin bar menu greeting text
 *
 * This function will replace "Howdy" text and also regenerate display name and
 * the avatar of current user. So, the new greeting text will work for all
 * languages and can be translated.
 *
 * @see wp_admin_bar_my_account_item()
 *
 * @param object $wp_admin_bar WP_Admin_Bar instance
 */
function et_custom_admin_bar_greeting_text( $wp_admin_bar ) {
  $user_data         = wp_get_current_user();
  $user_display_name = isset( $user_data->display_name ) ? $user_data->display_name : false;
  $user_id           = isset( $user_data->ID ) ? (int) $user_data->ID : 0;
  if ( ! $user_id || ! $user_display_name ) {
    return;
  }  $user_avatar = get_avatar( $user_id, 26 );  // translators: %s: Current user's display name
  $my_account_text = sprintf(
    __( 'Hello, %s' ),
    '<span class="display-name">' . esc_html( $user_data->display_name ) . '</span>'
  );  $wp_admin_bar->add_node(
    array(
      'id'    => 'my-account',
      'title' => $my_account_text . $user_avatar,
    )
  );
}
add_action( 'admin_bar_menu', 'et_custom_admin_bar_greeting_text' );/* Code explanation - Start Here *//**
 * Change admin bar menu greeting text
 *
 * This function will replace "Howdy" text and also regenerate display name and
 * the avatar of current user. So, the new greeting text will work for all
 * languages and can be translated.
 *
 * @see wp_admin_bar_my_account_item()
 *
 * @param object $wp_admin_bar WP_Admin_Bar instance
 */
function et_custom_admin_bar_greeting_text( $wp_admin_bar ) {
  // Verify current user ID and name
  $user_data         = wp_get_current_user();
  $user_display_name = isset( $user_data->display_name ) ? $user_data->display_name : false;
  $user_id           = isset( $user_data->ID ) ? (int) $user_data->ID : 0;
  if ( ! $user_id || ! $user_display_name ) {
    return;
  }  // Get user avatar
  $user_avatar = get_avatar( $user_id, 26 );  // Set new greeting text "Hello" and regenerate menu text
  // translators: %s: Current user's display name
  $my_account_text = sprintf(
    __( 'Hello, %s' ),
    '<span class="display-name">' . esc_html( $user_data->display_name ) . '</span>'
  );  // Override existing my account text with the new one
  $wp_admin_bar->add_node(
    array(
      'id'    => 'my-account',
      'title' => $my_account_text . $user_avatar,
    )
  );
}
add_action( 'admin_bar_menu', 'et_custom_admin_bar_greeting_text' );/* Code explanation - End Here */?>

頁腳文本

默認情況下，WordPress 管理員的頁腳顯示，“感謝您使用 WordPress 創建”。但多虧了這個小片段，它現在可以更改為您認為適合您客戶的品牌的任何信息。

<?php/**
 * Change admin footer text
 *
 * @return string Your custom footer text
 */
function et_change_admin_footer_text () {
  return __( 'Powered by WordPress. Theme designed by <a href="https://www.elegantthemes.com/">Elegant Themes</a>.', 'et-text-domain' );
}
add_filter( 'admin_footer_text', 'et_change_admin_footer_text' );?>

管理欄徽標

如果您需要將默認的 WordPress 徽標更改為您自己的小圖像，則只需使用以下代碼段：

<?php/**
 * Change WordPress admin top-left logo with your own
 */
function et_custom_admin_top_left_logo() {
  $logo_url   = get_stylesheet_directory_uri() . '/images/top-left-logo.png';
  $logo_ . esc_url( $logo_url ) . '); background-size: 28px; background-repeat: no-repeat; background-position: center; } #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before { content: none; }';
  wp_add_inline_style( 'admin-bar', $logo_style );
}
add_action( 'admin_enqueue_scripts', 'et_custom_admin_top_left_logo' );/* Code explanation - Start Here *//**
 * Change WordPress admin top-left logo with your own
 */
function et_custom_admin_top_left_logo() {
  // Path URL to your own logo. Method get_stylesheet_directory_uri() will return
  // current theme path URL.
  $logo_url   = get_stylesheet_directory_uri() . '/images/top-left-logo.png';  // Set admin bar logo background image. esc_url() method is needed to check and
  // clean the logo URL. You need to set background repeat as no-repeat to ensure
  // the background image will be displayed once. You can resize and reposition
  // the logo as well by adjusting the background size and position.
  $logo_ . esc_url( $logo_url ) . '); background-size: 28px; background-repeat: no-repeat; background-position: center; } #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before { content: none; }';  // Render custom logo style above. 'admin-bar' is the registered stylesheet for
  // default WordPress admin bar. By using wp_add_inline_style() method we no
  // longer need to specify <style> tag, has unique ID, and it will be fired as
  // soon as WordPress admin bar stylesheet is loaded.
  wp_add_inline_style( 'admin-bar', $logo_style );
}
add_action( 'admin_enqueue_scripts', 'et_custom_admin_top_left_logo' );/* Code explanation - End Here */?>

聯繫小部件/主題詳情

由於您在自己的網站（或客戶的網站）上做了大量工作，您希望他們知道如何與您（或後續開發人員）聯繫，因此我們有一些代碼供您使用。

<?php/**
 * Add theme info widget into WordPress Dashboard
 */
function et_add_dashboard_widgets() {
  wp_add_dashboard_widget(
    'et_dashboard_widget_info',
    esc_html__( 'Theme Details', 'et-text-domain' ),
    'et_dashboard_widget_info_render'
  );
}
add_action( 'wp_dashboard_setup', 'et_add_dashboard_widgets' );/**
 * Render the content of theme info widget
 */
function et_dashboard_widget_info_render() {
  $content = __( '
    <ul>
      <li>
        <strong>Designed By:</strong> Elegant Themes
      </li>
      <li>
        <strong>Website:</strong> <a href="https://www.elegantthemes.com/">www.elegantthemes.com/</a>
      </li>
      <li>
        <strong>Contact:</strong> <a href="https://www.elegantthemes.com/contact/">Chat with our support</a>
      </li>
    </ul>', 'et-text-domain' );  echo wp_kses_post( $content );
}/* Code explanation - Start Here *//**
 * Add theme info widget into WordPress Dashboard
 */
function et_add_dashboard_widgets() {
  // You can replace 'et-text-domain' with your preferred one
  wp_add_dashboard_widget(
    'et_dashboard_widget_info',
    esc_html__( 'Theme Details', 'et-text-domain' ),
    'et_dashboard_widget_info_render'
  );
}
add_action( 'wp_dashboard_setup', 'et_add_dashboard_widgets' );/**
 * Render the content of theme info widget
 */
function et_dashboard_widget_info_render() {
  // The widget content is available for translation. You can replace
  // 'et-text-domain' with your preferred one.
  $content = __( '
    <ul>
      <li>
        <strong>Designed By:</strong> Elegant Themes
      </li>
      <li>
        <strong>Website:</strong> <a href="https://www.elegantthemes.com/">www.elegantthemes.com/</a>
      </li>
      <li>
        <strong>Contact:</strong> <a href="https://www.elegantthemes.com/contact/">Chat with our support</a>
      </li>
    </ul>', 'et-text-domain' );  // wp_kses_post() method is needed to clean up translated widget content
  echo wp_kses_post( $content );
}/* Code explanation - End Here */?>

管理面板配色方案

您可以在個人資料編輯器中針對每個用戶執行此操作，您還可以使用此代碼將默認值更改為適合您品牌的任何外觀。如果您想消除後端的“WordPress 感覺”，這可能會有很長的路要走。

<?php/**
 * Custom WordPress admin color scheme
 */
function et_load_admin_css() {
  wp_enqueue_style( 'et-admin-css', get_template_directory_uri() . '/css/admin.css' );
}
add_action( 'admin_print_styles', 'et_load_admin_css' );?>

現在，感謝 Ayub 的評論和解釋，我們相信幾乎任何人，無論您的編碼和開發經驗或背景如何。但是，如果您更願意使用插件來實現您的白標目標，我們有一些您應該看到的內容。

使用 WPMU DEV Branda 插件

處理 WordPress 安裝白標的最簡單方法可能是使用插件。 WPMU DEV 專門為此提供了一個：Branda，以前稱為 Ultimate Branding。

白標 WordPress

使用 Branda 自定義您的安裝非常簡單、快速且乾淨。手動執行時，您會獲得大量需要大量工作和調整的選項，因此我們認為這是簡化該過程的好方法。

首先，您將看到新的Branda Pro條目已添加到您的 WP 儀表板。轉到儀表板，您將看到您可以自定義的所有內容和網站上的白標。

布蘭達儀表板

您會發現許多類別，在每個類別下都有許多子選項，您可以對其進行白標。您可以根據需要使用 Branda 進行調整。您看到的標題類別是：

行政區域
小工具
前端
電子郵件
公用事業

它們中的大多數都非常簡單（小部件、電子郵件），但是前端提供了諸如 cookie 通知、註冊/登錄屏幕甚至作者框等選項。此外，實用工具包括評論控制、各種圖像、站點範圍的文本替換，甚至跟踪代碼。

白標 WordPress

如果您有另一個站點或要恢復的一組自定義，您可以使用導入/導出工具。

管理欄的白標

對於我們的示例，我們將向您展示如何在站點的 WP 儀表板中為管理欄添加白標。

首先，在您的Branda Pro Dashboard 中找到該選項。它應該在默認佈局的右上角附近。

白標 WordPress

單擊鉛筆以轉到編輯選項。您應該會看到一個管理區域標題，其中包含一系列位於屏幕左側的選項卡。這些將帶您了解管理白標的其他方面，因此這是唯一影響標題的方面。

白標 WordPress

正如您在上面的示例中看到的，默認的 WordPress 管理欄在左角顯示 WP 徽標。您可以在此處將其設置為自定義徽標。它會非常小，因此請確保您的圖像在文件大小和分辨率方面都針對空間進行了優化。（提示：使用 SVG。）

下一個選項是工具欄可見性部分，這只是讓您控制誰實際看到前端的管理欄。沒有比這更美妙的了。接下來是菜單項和自定義 CSS 。

白標 WordPress

添加自定義菜單項就像單擊“ +添加自定義項”按鈕並按照步驟添加所需鏈接一樣簡單。選擇圖標、它打開的位置（新標籤或相同）、它顯示的圖標、可見性等。

白標 WordPress

保存後，它將出現在屏幕頂部。

白標 WordPress

最後，還有Custom CSS ，這正是您所期望的。僅適用於管理欄的 CSS 代碼。

白標 WordPress

就是這樣。 Branda 對所有不同的白標選項都遵循這些相同的步驟。您可以將徽標、自定義 CSS、背景等添加到您喜歡的 WordPress 的任何部分。正如您在這個特定示例中看到的那樣，它既簡單又快捷。這意味著您只需要上傳資產，只需點擊幾下，您的網站就會變得像剛開過的雪一樣白。您可以在此處找到有關 Branda 和 WPMU DEV 的更多信息。

WordPress 的其他頂級白標插件

如果你不喜歡布蘭達，那也沒關係。我們為 WordPress 提供了一些其他頂級白標插件，供您根據需要自定義和標記您的安裝。雖然它們都實現了相同的目的，但每個都略有不同，適合不同類型的用戶。

白標內容管理系統

白標cms

如果您喜歡快速簡便，那麼白標 CMS 絕對是您應該看到的東西。您要使用此插件執行的實際工作需要幾分鐘才能完成。你不會得到大量的定制（例如你對 Branda 所做的那樣），但是你失去了細節，你會提高效率。如果您不打算從字面上改變每一件小事，而是想要一個新的登錄頁面、管理面板、頁眉/頁腳等，那麼這對您來說可能是一個很棒的插件。

更多信息

絕對迷人的自定義管理員

自定義管理員

我們非常喜歡 Absolutely Glamorous Custom Admin 提供的功能。不僅用戶界面簡單易用，而且選項簡單易懂。您可以在插件儀表板中看到您正在更改的內容，這意味著您可以更輕鬆地使您的消息、顏色、徽標和其他自定義設置相互一致。無需猜測您是否做了 X、Y 或 Z — 您可以在一處查看所有內容。我們非常喜歡並認為您也會喜歡。

更多信息

白標品牌

白標 WordPress

如果您想對用戶有更多的控制，白標品牌絕對是您應該考慮的高級選項。您可以在網站上獲得白色標籤的正常選項，但您也可以獲得自定義用戶角色管理平台。從產品頁面：

我們添加了一個強大的角色和能力管理器，它允許您創建新的用戶角色並分配能力。您可以為特定用戶角色添加新功能，甚至可以創建“假”管理員帳戶。如果您想授予客戶“管理員”訪問權限，但仍限制他們有權訪問的內容，則可以使用此選項。
真正的管理員也將從用戶列表中隱藏。這樣，擁有“假”管理員帳戶的客戶將永遠不會知道他們沒有對所有功能的完全訪問權限。

只需 25 美元，它就做得很好。

更多信息

管理菜單編輯器

白標 WordPress

Admin Menu Editor 有免費版或專業版，不過免費版有很多功能——也許對你們大多數人來說已經足夠了。您可以獲得 CSS 控制、前端更改、後端更改和菜單的拖放編輯。免費版本不附帶角色編輯或限制，但如果這不是破壞者，AME 是一個免費贈品，可以用其中最好的白標籤 WordPress。

更多信息

康明

白標 WordPress

Cusmin（對於因為不敢湯姆廣告分鐘，得到它？）是最強大的自定義管理員白色標籤的插件，我們已經遇到的一個。它使您可以白標並自定義 WP 安裝的每一個細節，從徽標、圖標、儀表板，甚至元框和元表。你甚至可以使用 JavaScript 來施展你的白標魔法。每年 36 美元（或每月 4 美元），我們認為 Cusmin 值得一試。

更多信息

結論

無論如何，我們相信為您的 WordPress 安裝貼上白標完全在您的掌握之中。因此，無論您是在尋找手動編碼體驗、WPMU DEV 及其插件生態系統的會員資格，還是可以使用的一次性插件，這裡都有一個選項。並非每個站點都需要白標，但如果您採取額外的步驟來自定義您的安裝，它可以為企業或品牌提供更多獨特的存在和潛在的用戶可信度。

您如何看待白色標籤 WordPress？ 在評論中告訴我們您的提示、技巧和最喜歡的策略！

文章特色圖片來自 nelelena / shutterstock.com