Cómo personalizar tu panel de administración de WordPress

Category: Tutorial 17 0

Coches a medida. Te llevarán del punto A al B como cualquier otro automóvil. Están hechos de los mismos materiales y queman galones de gasolina como cualquier otro vehículo de motor. Sin embargo, nosotros (o al menos los aficionados a los coches entre nosotros) tenemos un profundo amor por los coches hechos a medida. ¿Por qué?

  • Se ven mucho mejor que sus homólogos directamente de la línea de montaje
  • Están optimizados para un mejor rendimiento

WordPress es uno de los mejores vehículos que puedes usar para lograr tus sueños online. Viene con un gran tablero, y fuera de la caja, WordPress te ayudará a ti y/o a tus clientes a construir grandes sitios web en poco tiempo.

Pero el tablero de administración de WordPress es demasiado “convencional” en cuanto a la apariencia y la sensación. Quiero decir, aunque es hermoso, no rezuma exactamente estilo personal. Es un poco genérico y probablemente no impresionará a un cliente que haya usado la plataforma antes. Diablos, no impresionará a un cliente que aprecie el estilo personal o algún parecido con la marca.

Por otro lado, los tableros personalizados de WordPress son personales y proporcionarán a tus clientes el factor adicional de sentirse bien que les mantiene anhelando más. Puedes construir tu marca o adaptar el tablero de control de WordPress a las necesidades de tu cliente, dejándote con un gran producto que viene con un gran empaque – tu propio empaque personalizado. En el post de hoy, lo haremos:

  • Eliminar los widgets y menús innecesarios para crear un tablero personalizado más limpio y ligero
  • Personalizar el enlace del pie de página del tablero
  • Deshacerse de elementos genéricos como el logotipo de WordPress
  • Opciones de pantalla táctil
  • Toca algunos plugins que puedes usar para personalizar tu tablero

Al final de este post, deberías ser capaz de crear hermosos y personales tableros de administración de WordPress que resuenen con tus clientes o que refuercen tu presencia de marca en línea. Disfruta hasta el final y sorpréndenos con tus pensamientos en la sección de comentarios de abajo!

¡Espera! Antes de empezar, crea un tema infantil

Podrías editar tus archivos de temas principales, o usar el Editor en Apariencia en tu panel de temas, pero eso significaría no volver a actualizar tu tema de WordPress. Antes de hacer cualquier cambio en los archivos de temas deberías crear un tema hijo . De esta manera, cuando actualices el tema principal, todos tus cambios permanecerán intactos. Aquí hay algunos pasos rápidos para configurar este tutorial, pero también tenemos una guía completa de creación de temas hijo o puedes consultar el código de WordPress para obtener más ayuda.

  1. Crea tu carpeta de temas infantiles: Entra en tu instalación de WordPress y localiza la carpeta wp-content/themes/yourthemename . Dentro de esta carpeta añade una nueva carpeta y llámala “child-theme” o “yourthemename-child” (ya te haces una idea).
  2. Crea el archivo CSS del tema de tu hijo: Ahora que tienes una nueva carpeta de temas infantiles puedes añadir nuevos archivos para modificar o anular el estilo y la función de tu tema actual. Primero crea un nuevo archivo style.css dentro de tu carpeta de temas hijo, luego edita el nuevo archivo para añadir alguna información básica de encabezado (sólo para que tú o los desarrolladores subsiguientes sepan lo que está pasando):
    /*------------------------------------------------------------------- Nombre del tema: El nombre de la carpeta de temas de su hijo aquí Descripción: Tema infantil para el tema de los padres Nombre aquí Autor: Tu nombre aquí Plantilla: El nombre del tema de los padres aquí 
  3. Crea el archivo PHP del tema de tu hijo: Dentro de tu nueva carpeta de temas infantiles crea un archivo functions.php. A continuación edita el nuevo archivo de funciones para añadir el código que cargará el estilo de tu tema "padre" original:
    <?php function myprefix_theme_enqueue_styles() {     wp_enqueue_style( estilo-padre, get_template_directory_uri() . /estilo.css ); } add_action( wp_enqueue_scripts, myprefix_theme_enqueue_styles ); ?¢;Sólo asegúrate de añadir tus ajustes function.php después de la última etiqueta PHP abierta.

Por supuesto, puede añadir mucho más al tema de su hijo para hacer cambios en las plantillas para su cabecera, pie de página o cualquier otra cosa realmente. Pero para los propósitos de este tutorial, ¡ya está todo listo! Así que aquí vamos...

Eliminando los widgets innecesarios del tablero de mandos de WordPress

Una vez que ingreses a tu panel de control de WordPress, notarás un par de secciones (widgets) como At a Glance , Site Stats, Quick Draft , y WordPress News entre otras. La mayoría de estos widgets de tablero son añadidos por WordPress, pero el número de widgets mostrados podría subir o bajar dependiendo de tu tema y/o plugins. Algunos temas y plugins añaden sus propios widgets al tablero.

Mientras que algunos de estos widgets son útiles, ¿necesitan sus clientes ver cada uno de ellos? ¿Necesitan ver cada uno de estos widgets cada vez que se conectan? Tal vez tuviste que soportar los widgets porque no tenías forma de deshacerte de ellos. Hoy es tu día de suerte. Puedes eliminar fácilmente tantos widgets del tablero como quieras usando unas pocas líneas de código:

// Eliminar los widgets del tablero de mandos function remove_dashboard_meta() { 	si ( ! current_user_can( manage_options ) ) { 		remove_meta_box( dashboard_incoming_links, dashboard, normal ); 		remove_meta_box( dashboard_plugins, dashboard, normal ); 		remove_meta_box( dashboard_primary, dashboard, normal ); 		remove_meta_box( dashboard_secondary, dashboard, normal ); 		remove_meta_box( dashboard_quick_press, dashboard, side ); 		remove_meta_box( dashboard_recent_drafts, dashboard, side ); 		remove_meta_box( dashboard_recent_comments, dashboard, normal ); 		remove_meta_box( dashboard_right_now, dashboard, normal ); 		remove_meta_box( dashboard_activity, dashboard, normal); 	} } add_action( admin_init, remove_dashboard_meta ); 

Copiar el código anterior en el archivo functions.php del tema infantil (que se encuentra en wp-content/themes/yourthemename/child-theme/functions.php ) y guardar los cambios eliminará todos los widgets del tablero con la excepción de los añadidos por el tema o los plugins. A partir del código anterior, todos los usuarios con menos capacidades de administración no verán los widgets gracias a esta parte del código:

if ( ! current_user_can( manage_options ) )

...que comprueba si el usuario tiene (manage_options) capacidad sólo disponible para los administradores. Tal vez no quieras deshacerte de todos los widgets en tu tablero. Puedes usar el siguiente código en su lugar:

// Crear la función para usar en el gancho de acción function wpexplorer_remove_dashboard_widget () {     remove_meta_box (dashboard_quick_press, dashboard, side ); } add_action (wp_dashboard_setup, wpexplorer_remove_dashboard_widget); 

Copia el código anterior en tu archivo functions.php y guarda los cambios para deshacerte del widget Quick Draft . Para eliminar cualquier otro widget, simplemente sustituye dashboard_quick_press, dashboard, side por el correspondiente slug para cada widget. Otros slugs estándar de los widgets incluyen:

  • dashboard_incoming_links
  • Dashboard_plugins
  • tablero_primario
  • tablero_secundario
  • dashboard_quick_press
  • dashboard_recent_drafts
  • dashboard_recent_comments
  • dashboard_right_now
  • actividad_de_cuadro de mando

Pero puede que tengas widgets adicionales añadidos por tu tema padre, otros plugins que hayas instalado o incluso tu hosting (WP Engine añade uno llamado wpe_dify_news_feed ). Para encontrar el slug de estos widgets añadidos utiliza un inspector de navegador (nos gusta el de Chrome - forma parte de sus herramientas de desarrollo web por defecto, así que todo lo que tienes que hacer es hacer clic con el botón derecho del ratón en un elemento y elegir "inspeccionar") y luego copiar el ID de div para el widget que quieres eliminar.

Añadiendo Widgets de Tablero de Control de WordPress

Ahora que puedes eliminar los widgets del tablero de mandos como te apetezca, probemos a añadir nuestros propios widgets personalizados. Puedes mostrar todo lo que quieras con tu widget, así que nada te impedirá crear el tablero personalizado de tus sueños. La mejor parte es que es súper fácil añadir un widget a tu panel de control de WordPress. Sólo tienes que añadir el siguiente código a tu archivo wp-content/themes/yourthemename/child-theme/functions.php :

/**  * Añade un widget al tablero.  *  * Esta función está enganchada en la acción wp_dashboard_setup de abajo.  */ function wpexplorer_add_dashboard_widgets() { 	wp_add_dashboard_widget( 		"wpexplorer_dashboard_widget", // Widget babosa. 		My Custom Dashboard Widget, // Título. 		wpexplorer_dashboard_widget_function // Función de visualización. 	); } add_action( wp_dashboard_setup, wpexplorer_add_dashboard_widgets ); /**  * Crea la función para dar salida al contenido de tu Widget del Dashboard.  */ function wpexplorer_dashboard_widget_function() { 	eco "Hola, soy un gran Dashboard Widget. ¡Editame!"; } 

Guarda los cambios. Por supuesto, puedes editar el plugin para adaptarlo a tus necesidades. Ponga su HTML, PHP o lo que sea donde lo tenga:

echo "Hola, soy un gran Widget de tablero. ¡Editame!";

Tu nuevo widget personalizado aparecerá en la parte inferior absoluta, debajo de todos los widgets, que puede estar fuera del visor si tienes muchos widgets. Sin embargo, puedes arrastrar y soltar el widget en la parte superior (o en cualquier otro lugar).

Página personalizada del tablero de WordPress

Digamos que estás interesado en crear un tablero de mandos totalmente diferente. Uno que venga con tu propio HTML, PHP e incluso estilo. Si quieres ir más allá de sólo añadir/eliminar widgets de tablero, por favor revisa Cómo crear una página de tablero personalizado de WordPress por Remi Corson.

Ha construido un gran plugin que te ayudará a acelerar la creación de tu propia página de tablero personalizado (custom-dashboard.php). Debes refrescar tus habilidades de desarrollo de PHP para que el plugin se adapte a tus necesidades específicas. Con todo, probé Sweet Custom Dashboard y es increíble. Tu custom dashboard puede estar a una instalación de distancia :). Si quieres personalizar tu mensaje de bienvenida, revisa nuestro post en Personalizar tu mensaje de bienvenida de WordPress Dashboard.

Eliminación de los menús del tablero de mandos de WordPress

Podemos agregar o eliminar los widgets del tablero de WordPress e incluso cambiar el aspecto del tablero por completo (gracias a Remi), Ahora pasemos a la siguiente parte: eliminar los elementos de menú no deseados.

¿Por qué? Quieres quitar algunos menús para proporcionar a los clientes un tablero de mandos más ágil y evitar que accedan a zonas "restringidas". Si un cliente no sabe cómo usar WordPress, puede terminar rompiendo el sitio si lo visita y cambia las opciones en páginas como Configuración o Plugins. Añade el siguiente código a tu archivo functions.php:

function wpexplorer_remove_menus() { 	remove_menu_page( themes.php ); // Apariencia 	remove_menu_page( plugins.php ); // Plugins 	remove_menu_page( users.php ); // Usuarios 	remove_menu_page( tools.php ); // Tools 	remove_menu_page( options-general.php ); // Settings } add_action( admin_menu, wpexplorer_remove_menus ); 

El código anterior elimina los enlaces del menú de Configuración, Plugins, Apariencia, Usuarios y Herramientas para todos los usuarios. También puedes eliminar los submenús. Aquí está el código de ejemplo que elimina el submenú Widgets en Apariencia:

function wpexplorer_adjust_the_wp_menu() { 	$page = remove_submenu_page( themes.php, widgets.php ); } add_action( admin_menu, wpexplorer_adjust_the_wp_menu, 999 ); 

En el ejemplo anterior, los usuarios accederán a todos los submenús de Apariencia, excepto a los Widgets. Puede eliminar tantos menús o submenús como desee. Recuerda que esto no impedirá que los usuarios accedan a estas páginas directamente. Es decir, si un usuario entra, por ejemplo, en yourdomain.com/wp-admin/options-general.php, accederá a tu página de Configuración. Lo bueno es que la mayoría de los usuarios no se molestarán si el elemento no está en el menú.

Si no puedes o no quieres editar tu archivo functions.php, siempre puedes instalar el plugin Admin Menu Editor, que te da un control total sobre tus menús. Se suministra con un par de características geniales, incluyendo restricciones de menú basadas en roles, capacidad para ocultar menús y crear elementos de menú personalizados entre otras características geniales.

Personalizar el pie de página del tablero de WordPress

Hasta este momento, hemos hecho una personalización "significativa" de su panel de administración de WordPress. Es justo tomar algo de crédito por todo el brillante trabajo que estás haciendo. Personalizar el pie de página ("Gracias por crear con WordPress.") puede ayudar a fortalecer aún más tu marca (o la del cliente). Cambiemos tu pie de página a "Construido con amor por tu nombre". Sólo añade el siguiente fragmento a tu archivo functions.php y guarda los cambios:

// Custom Admin footer function wpexplorer_remove_footer_admin () { 	eco Construido con amor por WPExplorer; } add_filter( admin_footer_text, wpexplorer_remove_footer_admin ); 

Sustituye "Tu nombre" por tu nombre, página web, dirección de correo electrónico, etc. y "Tu dominio.com" por tu nombre de dominio real. Siguiendo adelante...

Personalizar el formulario de acceso

Hasta ahora, tienes todo lo necesario para personalizar tu panel de administración de WordPress. Demos un paso más y personalicemos la página de inicio de sesión, para que tus usuarios puedan tener una experiencia verdaderamente personalizada desde el principio. Después de todo, ¿por qué molestarse en personalizar tu panel de control de WordPress sólo para ser regalado por la página de inicio de sesión?

Con esta página, necesitamos personalizar dos elementos: el logo predeterminado de WordPress y el enlace de wordpress.org que viene con él. Pero antes de mostrarles el código , pueden personalizar su página de inicio de sesión fácilmente usando cualquiera de estos 15 mejores plugins de página de inicio de sesión personalizada para WordPress. Ahora, para la cálida sensación borrosa que viene de jugar con el código, copien lo siguiente en su functions.php:

function wpexplorer_login_logo() { ?> 	wpexplorer_login_logo() { ?ª;style type="text/css "ª; 		body.login div#login h1 a { 			imagen de fondo: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png ); 			acolchado-fondo: 30px; 		} 	...y el estilo..; <?php } add_action( login_enqueue_scripts, wpexplorer_login_logo ); 

Sustituye logo.png por el nombre del archivo de tu logo personalizado, que primero debes subir a wp-content/themes/yourtheme/images . Mantén tu logo personalizado por debajo de 80 x 80 píxeles aunque puedes cambiarlo con algunos CSS personalizados. Con el logo personalizado de inicio de sesión en su lugar, es hora de cambiar el enlace que viene con el logo original de WordPress. Copia este código en tu archivo functions.php y guarda los cambios:

function wpexplorer_login_logo_url() <span

Related Articles