如何白标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