WordPress representa 1/3 de los sitios web en Internet hoy en día. Pero muchos de ellos no aparecen como WordPress para los usuarios o el público. ¿Por qué? Debido a una práctica llamada marca blanca . La etiqueta blanca es cuando elimina todas las marcas de un producto en lugar de otro. Por ejemplo, sus páginas de inicio de sesión y el tablero (y otros) estarán decorados con su propio logotipo, nombre de empresa y medios. Seguirá usando WordPress y obtendrá todo su poder y utilidad, pero no aparecerá como WP predeterminado para sus usuarios o visitantes. Incluso puede tener widgets y mensajes personalizados dentro de las áreas etiquetadas tradicionalmente de WordPress.
Suscríbete a nuestro canal de Youtube
Tienes algunas opciones cuando se trata de etiqueta blanca 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 en blanco, le mostraremos cómo usar el complemento Branda para etiquetar en blanco WordPress y lo guiaremos a algunos de los otros complementos principales para que tenga una idea sólida de lo que es. opciones que tienes para elegir.
WordPress de etiqueta blanca manualmente
La etiqueta blanca 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 sobrecarga 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? Tu también puedes hacer eso. Pero puede seleccionar y elegir qué partes de WP le marcan 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 le recomendamos encarecidamente que utilice un tema secundario 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 usa un tema secundario, cualquier cambio que realice en functions.php se sobrescribirá cuando su tema se actualice.
Por lo tanto, sugerimos e instamos en la medida de lo posible a que siga nuestra guía sobre la creación de temas secundarios . O, si es miembro de Elegant Themes, nuestra guía definitiva sobre cómo crear un tema infantil 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 cien otras cosas), su código de etiqueta blanca desaparecerá. Volverás al punto de partida. Por lo tanto, utilice un tema secundario.
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 WP Zone 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 al 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árguelo y empiece a editar.
Etiqueta blanca manual 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. Las instrucciones específicas que necesita para los fragmentos de código se incluyen como comentarios dentro del propio bloque de código, 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í:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
|
<?php/** * Change WordPress login logo with your own */function et_custom_login_logo() { $logo_url = get_stylesheet_directory_uri() . '/images/logo.png'; $logo_style = '.login h1 a { background-image: url(' . 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_style = '.login h1 a { background-image: url(' . 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:
|
01
02
03
04
05
06
07
08
09
|
<?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á algún texto flotante/título para la imagen. Así es como se hace:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
<?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 manual 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 sucede 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 la UX del backend notoriamente feo de WordPress. Los siguientes fragmentos de código están destinados a ayudar con eso.
Mensaje de bienvenida
¿Conoces ese pequeño saludo en la esquina superior derecha de tu administrador de WordPress que dice «Hola, tu nombre»? Bueno, ahora puedes hacer que diga lo que quieras.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<?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.
|
01
02
03
04
05
06
07
08
09
|
<?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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
|
<?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_style = '#wp-admin-bar-wp-logo > .ab-item { background-image: url(' . 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_style = '#wp-admin-bar-wp-logo > .ab-item { background-image: url(' . 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á trabajando tanto en su sitio (o en el sitio de un cliente), desea que sepan cómo comunicarse con usted (o los desarrolladores sucesivos), por lo que tenemos un código que querrá usar para eso.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<?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 aspecto 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 muy útil.
|
01
02
03
04
05
06
07
|
<?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 experiencia 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 manejar la etiqueta blanca 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 Tablero de WP. Vaya a Dashboard y verá todo lo que posiblemente pueda personalizar y etiquetar en blanco en su sitio.
Encontrará una serie de categorías, debajo de cada una de las cuales hay muchas subopciones que puede etiquetar en blanco. Puede usar Branda para ajustar tantos como desee. Las categorías de títulos 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 conjunto de personalizaciones que está restaurando, puede usar la herramienta Importar/Exportar para eso.
Etiquetado blanco en la barra de administración
Para nuestro ejemplo, le mostraremos cómo etiquetar en blanco la barra de administración en el panel de control de WP de su sitio.
Para empezar, busca esa opción en tu Branda Pro Dashboard . Debería 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 de Área de administración con una serie de pestañas que conducen hacia abajo a la izquierda de la pantalla. Estos lo llevan a los otros aspectos del etiquetado en blanco del administrador, por lo que este es el único que afecta el encabezado.
Como puede ver en el ejemplo anterior, la barra de administración predeterminada de WordPress muestra el logotipo de WP en la esquina izquierda. Puede configurar eso 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. (Consejo profesional: 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 el front-end. Nada más elegante que eso. Lo siguiente 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. Elige icono, dónde se abre (pestaña nueva o igual), icono que muestra, visibilidad, etc.
Una vez que guardes, 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 marca blanca. 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 cargar los activos y, con unos pocos clics, su sitio será tan blanco como la nieve recién caída. Puede obtener más información sobre Branda y WPMU DEV aquí .
Otros complementos principales de marca blanca para WordPress
Si no te gusta Branda, también está bien. Tenemos algunos de los otros mejores complementos de marca blanca para WordPress para que pueda personalizar y marcar 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 tuyo es lo rápido y fácil, 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 hace con Branda arriba, por ejemplo), pero lo que pierdes en detalle, lo ganas en eficiencia. Si no planea cambiar literalmente cada pequeña cosa, 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 excelente complemento para usted.
Más información
Administrador personalizado absolutamente glamoroso
Realmente nos gusta 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 de complementos, y eso significa que puede mantener más fácilmente sus mensajes, colores, logotipos y otras personalizaciones en línea entre sí. No hay que adivinar si hiciste X, Y o Z: puedes verlo todo en un solo lugar. Lo que realmente nos gusta y creemos que a ti también te gustará.
Más información
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 en blanco sobre el sitio, pero también obtiene una plataforma de administración de funciones de usuario personalizada. Desde la página del producto:
Hemos agregado un poderoso administrador de roles y capacidades, que le permitirá crear nuevos roles 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 usar si desea otorgar a sus clientes acceso de «administrador», pero aún así limitar a lo que tienen acceso.
El administrador real también se ocultará de la lista de usuarios. De esta forma, un cliente con la cuenta de administrador «falsa» nunca sabrá que no tiene acceso completo a todas las funciones.
Por $ 25, hace mucho bien.
Más información
Admin Menu Editor viene en una versión gratuita o profesional, aunque la versión gratuita hace mucho, tal vez suficiente para la mayoría de ustedes. Obtiene control de CSS, cambios en el front-end, cambios en el back-end y edición de arrastrar y soltar para los menús. La versión gratuita no viene con edición o restricción de roles, pero si eso no es un factor decisivo, AME es un obsequio que puede etiquetar en blanco a WordPress con lo mejor de ellos.
Más información
Cusmin
Cusmin (por Cus tom Ad min , ¿entiendes?) es uno de los complementos de etiqueta blanca de administración personalizados más sólidos que hemos encontrado. Le permite etiquetar en blanco y personalizar realmente hasta el último detalle de su instalación de WP, desde logotipos, íconos, tableros, incluso metacuadros y metatablas. Incluso puede trabajar su magia de marca blanca usando JavaScript. Por $ 36 al año (o $ 4 por mes), creemos que vale la pena intentarlo con Cusmin.
Más información
Conclusión
De una forma u otra, estamos seguros de que la etiqueta blanca de su instalación de WordPress está totalmente 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. La etiqueta blanca no es necesaria para todos los sitios, pero puede dar a una empresa o marca un poco más de presencia única y credibilidad potencial con los usuarios si toma los pasos adicionales para personalizar su instalación.
¿Cómo te sientes acerca de la etiqueta blanca de WordPress? ¡Háganos saber sus consejos, trucos y estrategias favoritas en los comentarios!
Imagen destacada del artículo por nelelena / shutterstock.com