Cómo etiqueta blanca WordPress

WordPress constituye hoy en día 1/3 de los sitios web en Internet. Pero muchos de ellos no aparecen como WordPress para los usuarios o el público. ¿Por qué? Debido a una práctica llamada etiqueta blanca . El etiquetado blanco es cuando elimina toda la marca de un producto en lugar de otro. Por ejemplo, sus páginas de inicio de sesión y su tablero (y otros) estarán decorados con su propio logotipo, nombre de la empresa y medios. Seguirás usando WordPress y obteniendo todo su poder y utilidad, pero no aparecerá como WP predeterminado para tus usuarios o visitantes. Incluso puede tener widgets y mensajes personalizados dentro de áreas etiquetadas tradicionalmente de WordPress.

Suscríbete a nuestro canal de Youtube

Cómo etiqueta blanca WordPress

Tiene algunas opciones cuando se trata de etiquetado blanco de WordPress. Puede modificar manualmente los archivos PHP en su instalación de WP, insertando código personalizado en lugares donde su sitio necesita una nueva identidad. También existen varios complementos para brindarle una gran cantidad de personalización y libertad de marca blanca. Lo guiaremos a través del código requerido para etiquetar manualmente su sitio, le mostraremos cómo usar el complemento Branda para etiquetar WordPress y lo guiaremos a algunos de los otros complementos principales para que tenga una idea sólida de qué opciones que tiene para elegir.

WordPress de etiqueta blanca manual

El etiquetado manual de WordPress es bastante simple: edita el archivo functions.php de su instalación. También puede controlar específicamente lo que desea cambiar, y lo hace sin la hinchazón adicional del código del complemento que puede o no aplicarse a su situación. Si solo desea modificar el logotipo en la página de inicio de sesión, puede hacerlo. ¿Cambiar los menús en el panel de administración y nada más? Usted puede hacer eso también. Pero puede elegir qué partes de WP marca en blanco. Sin embargo, alterar cualquier cosa en el sistema de archivos de WordPress puede ser peligroso si no se hace correctamente.

Es por eso que recomendamos encarecidamente que utilice un tema hijo para realizar estos cambios. Debido a que está editando un archivo principal de WordPress (técnicamente el archivo principal de WordPress), muchas cosas pueden salir mal si no lo hace.

Si no utiliza un tema hijo, los cambios que realice en functions.php se sobrescribirán cuando se actualice el tema.

Por lo tanto, le sugerimos e instamos en la mayor medida posible a que siga nuestra guía sobre la creación de temas para niños. O, si es miembro de Elegant Themes, nuestra guía definitiva sobre cómo crear un tema secundario Divi específicamente. Si no lo hace, y su tema se actualiza (o algo se rompe y se debe restaurar una copia de seguridad o una de cientos de otras cosas), su código de etiqueta blanca desaparecerá. Volverás al punto de partida. Por lo tanto, utilice un tema hijo.

Si no se siente cómodo creando uno manualmente a través de nuestras guías, también puede usar un complemento de creación de temas secundarios o el generador de temas secundarios Divi Space Divi.

Cómo editar su archivo Functions.php

Editar su archivo functions.php es muy fácil y tiene múltiples opciones para elegir. Puede usar un editor de código junto con un programa FTP como FileZilla para descargar y volver a cargar el archivo. O puede usar el administrador de archivos de su cPanel o un complemento de WordPress como WP File Manager para manejarlo todo dentro de su tablero. Independientemente del método que elija para editar el archivo, desea 100% crear una copia de seguridad tanto de su sitio como del archivo en sí para evitar cualquier pérdida catastrófica de datos.

Dicho esto, puede encontrar su archivo functions.php en su directorio /public_html/example.com/wp-content/theme-name .

Dependiendo de la configuración de su editor y sitio web, la estructura exacta será diferente del ejemplo anterior, pero será similar. Luego, descárgalo y empieza a editar.

Etiqueta blanca manualmente en la página de inicio de sesión de WordPress

El lugar perfecto para comenzar a etiquetar en blanco su sitio es la página de inicio de sesión de WP. Es una de las páginas más utilizadas en su sitio, por lo que es posible que no desee que el gran logotipo de WP mire a sus usuarios o personal. Es fácil de cambiar. Todas las instrucciones específicas que necesite para los fragmentos de código se incluyen como comentarios dentro del bloque de código en sí, y también debe tener en cuenta que cualquier personalización con respecto a las URL y el texto personalizado debe cambiarse desde nuestros marcadores de posición aquí. Además, muchas gracias a Ayub del equipo de desarrollo de ET por estos maravillosos ejemplos.

Ahora para el código en sí:

<?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 */?>

Además, es posible que deba redirigir después de que un usuario haga clic en el logotipo. Querrá agregar este código para hacer eso:

<?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' );?>

Y debido a que la accesibilidad es tan importante, querrá algo de texto flotante / título para la imagen. He aquí cómo hacerlo:

<?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 */?>

Etiqueta blanca manualmente en el panel de administración de WordPress

Más allá de la página de inicio de sesión, por supuesto, está el administrador de WordPress. El lugar donde ocurre toda la magia. O al menos el trabajo. Con los últimos lanzamientos de WordPress, se ha logrado un progreso significativo en el diseño y UX del backend notoriamente feo de WordPress. Los siguientes fragmentos de código están destinados a ayudar con eso.

Mensaje de bienvenida

¿Conoce ese pequeño saludo en la esquina superior derecha de su administrador de WordPress que dice, "Hola, su nombre"? Bueno, ahora puedes hacer que diga lo que quieras.

<?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 */?>

Texto de pie de página

De forma predeterminada, el pie de página del administrador de WordPress dice: "Gracias por crear con WordPress". Pero gracias a este pequeño fragmento, ahora se puede cambiar a cualquier mensaje que considere apropiado para sus clientes.

<?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' );?>

Logotipo de la barra de administración

Si necesita cambiar el logotipo predeterminado de WordPress a una pequeña imagen propia, solo tiene que usar este fragmento:

<?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 */?>

Widget de contacto / Detalles del tema

Dado que está haciendo tanto trabajo en su sitio (o en el sitio de un cliente), desea que sepan cómo comunicarse con usted (o con los desarrolladores sucesivos), por lo que tenemos un código que querrá usar para eso.

<?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 */?>

Esquema de colores del panel de administración

Puede hacer esto por usuario en el editor de perfil, también puede cambiar el predeterminado a cualquier aspecto que se adapte a su marca con este código. Si está tratando de eliminar la "sensación de WordPress" del backend, esto puede ser de gran ayuda.

<?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' );?>

Ahora, gracias a los comentarios y explicaciones de Ayub, estamos seguros de que casi cualquier persona, independientemente de su experiencia o antecedentes en codificación y desarrollo. Pero si se siente más cómodo usando un complemento para lograr sus objetivos de marca blanca, tenemos algunas cosas que debería ver.

Uso del complemento WPMU DEV Branda

Probablemente, la forma más sencilla de gestionar el etiquetado blanco de su instalación de WordPress es mediante el uso de un complemento. WPMU DEV tiene uno específicamente para esto: Branda, anteriormente conocido como Ultimate Branding.

Usar Branda para personalizar su instalación es fácil, rápido y limpio. Obtiene un montón de opciones que requieren mucho trabajo y ajustes cuando se realizan manualmente, por lo que creemos que esta es una excelente manera de simplificar ese proceso.

Primero, verá la nueva entrada de Branda Pro agregada a su Panel de WP. Vaya al Panel de control y verá todo lo que pueda personalizar y una etiqueta blanca en su sitio.

Encontrará una serie de categorías, bajo cada una de las cuales hay muchas subopciones que puede etiquetar en blanco. Puede utilizar Branda para ajustar tantos o tan pocos como desee. Las categorías de encabezado que ve son:

• Área de administración
• Widgets
• Interfaz
• Correos electrónicos
• Utilidades

La mayoría de ellos son bastante sencillos (widgets, correos electrónicos), pero con Front-End vienen opciones para cosas como avisos de cookies, pantallas de registro / inicio de sesión e incluso el cuadro de autor. Además, las utilidades incluyen control de comentarios, varias imágenes, reemplazo de texto en todo el sitio e incluso códigos de seguimiento.

Y si tiene otro sitio o un conjunto de personalizaciones que está restaurando, puede usar la herramienta Importar / Exportar para eso.

Etiquetado blanco de la barra de administración

Para nuestro ejemplo, le mostraremos cómo etiquetar en blanco la barra de administración en el panel de WP de su sitio.

Para empezar, busque esa opción en su Branda Pro Dashboard . Debe estar cerca de la esquina superior derecha con el diseño predeterminado.

Haga clic en el lápiz para ir a las opciones de edición. Debería ver un encabezado del Área de administración con una serie de pestañas hacia la izquierda de la pantalla. Estos lo llevan a los otros aspectos del etiquetado blanco de administración, por lo que este es el único que afecta al encabezado.

Como puede ver en el ejemplo anterior, la barra de administración de WordPress predeterminada muestra el logotipo de WP en la esquina izquierda. Puede configurarlo en un logotipo personalizado aquí. Será increíblemente pequeño, así que asegúrese de que su imagen esté optimizada tanto en tamaño de archivo como en resolución para el espacio. (Sugerencia: use un SVG).

La siguiente opción es la sección Visibilidad de la barra de herramientas , y esto solo le da control sobre quién ve realmente la barra de administración en la interfaz. Nada más elegante que eso. Los siguientes son elementos de menú y CSS personalizado .

Agregar un elemento de menú personalizado es tan simple como hacer clic en el botón + Agregar elemento personalizado y seguir los pasos para agregar el enlace deseado. Elija icono, dónde se abre (nueva pestaña o la misma), el icono que muestra, visibilidad, etc.

Una vez que guarde, aparecerá en la parte superior de la pantalla.

Y finalmente, está el CSS personalizado , que es exactamente lo que esperas. Código CSS que solo se aplica a la barra de administración.

Y eso es eso. Branda sigue estos mismos pasos para todas las diferentes opciones de etiquetado blanco. Puede agregar logotipos, CSS personalizado, fondos, etc. a cualquier parte de WordPress que desee. Y como puede ver con este ejemplo en particular, es fácil y rápido. Esto significa que solo necesita los recursos para cargar y, con unos pocos clics, su sitio estará tan blanco como la nieve recién traída. Puede encontrar más información sobre Branda y WPMU DEV aquí.

Otros complementos de etiqueta blanca principales para WordPress

Si no te gusta Branda, también está bien. Tenemos algunos de los otros complementos de etiqueta blanca principales para WordPress para que personalice y marque su instalación como mejor le parezca. Si bien todos logran el mismo fin, cada uno es un poco diferente y adecuado para un tipo diferente de usuario.

CMS de marca blanca

Si lo rápido y fácil es lo tuyo, White Label CMS es absolutamente algo que deberías ver. El trabajo real que va a realizar con este complemento lleva unos minutos. No obtienes una gran cantidad de personalización (como lo haces con Branda arriba, por ejemplo), pero lo que pierdes en detalle, lo ganas en eficiencia. Si no está planeando cambiar literalmente todo, sino que desea una nueva página de inicio de sesión, panel de administración, encabezado / pie de página, etc., este podría ser un complemento excelente para usted.

Más información

Administrador personalizado absolutamente glamoroso

Nos gusta mucho lo que ofrece Absolutely Glamorous Custom Admin. La interfaz de usuario no solo es simple y fácil de usar, sino que las opciones son sencillas y comprensibles. Puede ver lo que está cambiando dentro del panel del complemento, y eso significa que puede mantener más fácilmente sus mensajes, colores, logotipos y otras personalizaciones alineadas entre sí. No adivine si hizo X, Y o Z: puede verlo todo en un solo lugar. Lo que realmente nos gusta y creemos que a usted también le gustará.

Más información

Marca de marca blanca

Si desea un poco más de control sobre los usuarios, White Label Branding es definitivamente una opción premium que debe considerar. Obtiene las opciones normales para el etiquetado blanco en el sitio, pero también obtiene una plataforma de administración de roles de usuario personalizada. Desde la página del producto:

Hemos agregado un poderoso administrador de funciones y capacidades, que le permitirá crear nuevas funciones de usuario y asignar capacidades. Puede agregar nuevas capacidades para roles de usuario específicos e incluso puede crear una cuenta de administrador "falsa". Esto se puede utilizar si desea dar acceso de "administrador" a sus clientes, pero aún así limitar a qué tienen acceso.

El administrador real también se ocultará de la lista de usuarios. De esta manera, un cliente con una cuenta de administrador "falsa" nunca sabrá que no tiene acceso completo a todas las funciones.

Por $ 25, hace mucho bien.

Más información

Editor del menú de administración

Admin Menu Editor viene en una versión gratuita o pro, aunque la versión gratuita hace mucho, tal vez lo suficiente para la mayoría de ustedes. Obtiene control de CSS, cambios de front-end, cambios de back-end y edición de arrastrar y soltar para menús. La versión gratuita no viene con edición de roles o restricción, pero si eso no es un factor decisivo, AME es un obsequio que puede etiquetar a WordPress con lo mejor de ellos.

Más información

Cusmin

Cusmin (para Cus tom Ad min , ¿entiendes?) Es uno de los complementos de etiqueta blanca de administración personalizados más robustos que hemos encontrado. Te permite marcar en blanco y personalizar hasta el último detalle de la instalación de tu WP, desde logotipos, iconos, paneles de control, incluso metacajas y metatablas. Incluso puede trabajar su magia de marca blanca usando JavaScript. Por $ 36 anuales (o $ 4 por mes), creemos que vale la pena probar Cusmin.

Más información

Conclusión

De una forma u otra, estamos seguros de que el etiquetado blanco de su instalación de WordPress está completamente a su alcance. Entonces, ya sea que esté buscando una experiencia de codificación manual, una membresía con WPMU DEV y su ecosistema de complementos, o un complemento único que pueda usar, aquí hay una opción para eso. El etiquetado blanco no es necesario para todos los sitios, pero puede darle a una empresa o marca una presencia un poco más única y una credibilidad potencial con los usuarios si toma los pasos adicionales para personalizar su instalación.

¿Qué te parece el etiquetado blanco de WordPress? ¡Háganos saber sus consejos, trucos y estrategias favoritas en los comentarios!

Imagen destacada del artículo por nelelena / shutterstock.com