10 trucos o “hacks” tutorial para personalizar el dashboard de WordPress.

El siguiente tutorial recopila una serie de funciones que modifican el aspecto de WordPress, es muy útil para programadores o freelance que están realizando la implementación del desarrollo de wordpress para un cliente o empresa.

El panel de control o dashboard de wordpress como ya sabemos es una herramienta muy potente desde la que podremos realizar las tareas de crear artículos, cambiar el tema, activar widgets y una serie de funcionalidades. Pero cuando se construye un site para un cliente, es especialmente importante ser capaz de controlar y editar el panel de control en función de las necesidades y la personalización que le queramos dar. Este artículo he recopilado 10 “hacks” que podemos usar para editar, extender o modificar funciones del dashbard o escritorio de WordPress.

Eliminar menús del dashboard

Esta es una de las primeras tareas que necesitamos realizar cuando implementamos un wordpress para un cliente, y es ocultar y desactivar ciertos menús de la columna lateral izquierda. De manera que podemos ocultar el menú de “Apariencia” para que nuestro cliente no pueda acceder a esta sección evitando que pueda eliminar accidentalmente el tema o temas. Otro menú crítico que se tiene que desactivar es el menú de “Ajustes” o “Settings” (en inglés). Evitando que el cliente pueda alterar la configuración que hemos realizado del blog.
Desde el siguiente ejemplo eliminaremos todos los menús que se indican en el array $restricted.
Hay que copiar el siguiente código en nuestro archivo functions.php

function remove_menus () {
global $menu;
		$restricted = array(__('Dashboard'), __('Posts'), __('Media'), __('Links'), __('Pages'), __('Appearance'), __('Tools'), __('Users'), __('Settings'), __('Comments'), __('Plugins'));
		end ($menu);
		while (prev($menu)){
			$value = explode(' ',$menu[key($menu)][0]);
			if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
		}
}
add_action('admin_menu', 'remove_menus');

Personalizar con tu propio logo

También es importante dar una imagen corporativa en todo momento, y el cliente siempre nos los requerirá. De manera que la página principal de login, /wp-login.php, que muestra el formulario de acceso a nuestro dashboard, contiene el logotipo de WordPress. Lo óptimo sería poner el logotipo de nuestro cliente o nuestro site.

Ver el siguiente artículo para editar el logotipo Personalizar la pagina de login de wordpress

Reemplazar el logo del panel de control o dashboard

Siguiendo con la dinámica anterior, a un cliente le gustará ver el logo en la página de login, pues también le gustará verlo en el panel de control.
Para ello hay que añadir el siguiente código en functions.php

add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
   echo '<style type="text/css">
         #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }</style>';
}

Deshabilitar el mensaje de actualización

Como ya sabemos wordpress va lanzando nuevas versiones, y cada vez que lo hace, el código alberga funciones que son capaces de comprobar la versión instalada con la ultima release. Cuando hay una nueva versión nos aparece el típico mensaje de “Please upgrade now”. Pues bien, a nosotros como programadores y administradores de wordpress, pues como que nos da igual, podemos actualizarlo cuando queremos, recomendable hacerlo cuanto antes, pero no está bien que este mensaje le aparezca al cliente.

Para evitar que aparezca este mensaje, incluiremos la siguiente línea en nuestro archivo functions.php

if ( !current_user_can( 'edit_users' ) ) {
  add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
  add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );
}

Eliminar widgets o paneles del escritorio

Los usuarios que acceden a WordPress entran el la página principal de escritorio o dashboard, aquí se presenta mucha información en diferentes widgets. Es útil eliminar ciertos paneles que son irrelevantes para un cliente, o incluso para nuestro propio blog.

Colocar el siguiente código en functions.php

function example_remove_dashboard_widgets() {
	// array global metaboxes array, contiene todos los widgets para  wp-admin
 	global $wp_meta_boxes;

	// Elimina el widget de "incomming links"
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);	

	// Elimina el widget "right now
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}

// Hacemos un "Hook" o gancho a la acción 'wp_dashboard_setup' para registrar nuestra propia función
add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

Crear nuestro propio widget para el escritorio o dashboard de WordPress

Desde el ejemplo anterior hemos borrado widgets del escritorio, ahora bien, incluiremos uno nuestro con un mensaje de bienvenida o lo que se nos ocurra o nos solicite nuestro cliente.

Seguimos editando el archivo functions.php

function example_dashboard_widget_function() {
	// Aquí mostramos lo que queramos o necesitemos
	echo "Bienvenido al panel de control del blog";
} 

// Crea la función usando la accion de un "hook" o gancho
function example_add_dashboard_widgets() {
	wp_add_dashboard_widget('example_dashboard_widget', 'Ejemplo de Widget en Escritorio', 'example_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

Editar los estilos de panel de control

Siempre se puede editar los estilos del escritorio de WordPress sin necesidad de editar los archivos del core, para ello se crea una función que simplemente añada las etiquetas de apertura y cierre de <style> y dentro se van añadiendo las clases e identificadores de los estilos que queremos reemplazar con las propiedades que queremos.
En el siguiente ejemplo se modifica el color gris de la cabecera por uno azulado.

Añadir el siguiente código en el archivo functions.php

function custom_colors() {
   echo '<style type="text/css">#wphead{background:#069}</style>';
}
add_action('admin_head', 'custom_colors');

Como se puede ver en este ejemplo sigue el mismo patrón que el punto 3, donde hemos cambiado el logo del escritorio. La función es muy básica un echo que pinta el html con nuevos estilos que “atacan” o sobre-escriben los que ya hay.

Añadir mensajes de ayuda

Se pueden incluir mensajes de ayuda cuando un usuario entra en un menú determinado, ofreciéndole información relevante sobre que puede hacer.
Estos son los mensajes que aparecen en el menú desplegable, cuando se pulsa sobre la pestaña “Ayuda” que aparece en la cabecera de nuestro panel de control en WordPress.

/**
        * Funcion que se encarga de modificar los textos de ayuda en el panel de control de wordpress.
        * 
        * @param mixed $contextual_help, este es el texto de ayuda por defecto definido para una página en concreto. 
        * Se hereda desde otras librerías de wordpress y contendrá un valor ya definido.
        * @param mixed $screen Esta es la página en la que estamos.
        * 
        * @returns Siempre se devuelve el valor de $contextual_help. Puede que este no se sobreescriba cuando pase por el switch case, devolviendo su valor original.
        * Si la página en la que estamos, está incluida en el switch case, el valor de la variable $contextual_help se sobreescribe con lo que añadamos.
        * 
        * @version 1.0 Pedro Ventura. Actualmente esta funcionando para la version de WP 3.0.3
        * 
        */
        function paneles_ayuda($contextual_help, $screen) 
        {
            switch($screen)
            {
                # poner este case para hacer pruebas, despues quitarlo para un entorno en produccion.
                case 'dashboard':
                    $contextual_help = 'Este mensaje de ayuda esta reemplanzando al que hay en la página principal del escritorio o dashboard';
                break; 
                case PAGINA_EJEMPLO:
                    $contextual_help = 'Este es otro texto de ayuda para una nueva pagina del panel de control.';
                break;
            }
            return $contextual_help;
        }
        /**
        * Registramos la función paneles_ayuda, para la accion de contextual_help, que pinta los mensajes de ayuda del panel de control
        * Los dos siguientes valores indican lo siguiente:
        * 10 - Es la prioridad de la función. por defecto se suele usar 10.
        * 2 -Indica el número de parámetros que enviamos a la función registrada. Si se quita este valor dará un error de "missing arguments"
        * @link Para conocer más sobre la funcion add_action() de Wordpres visitar http://codex.wordpress.org/Function_Reference/add_action
        */
        add_action( 'contextual_help', 'paneles_ayuda',10,2 );

Monitorizar los errores de de php

Este hack esta muy bien para entornos de desarrollo, y pre-producción, de manera que se puede ir comprobando todos los errores de php que puede ir generando nuestra aplicación.

Al mostrar los errores de php, es obvio que una vez terminado el trabajo y se le entregue la plataforma al cliente, este widget habrá que quitarlo.

Como todas estas funciones se añade en el archivo functions.php
La única modificación que hay que hacer es introducir el path completo al archivo de log que se va a revisar desde la variable $logfile y comprobar que se tenga permisos de lectura sobre el archivo de log.

function slt_PHPErrorsWidget() {
	$logfile = '/home/path/logs/php-errors.log'; // Añadir el path completo a log de errores de apache
	$displayErrorsLimit = 100; // El numero máximo de lineas que se mostrarán en el widget
	$errorLengthLimit = 300; // El número máximo de caracteres que mostraremos por línea.
	$fileCleared = false;
	$userCanClearLog = current_user_can( 'manage_options' );
	// Clear file?
	if ( $userCanClearLog && isset( $_GET["slt-php-errors"] ) && $_GET["slt-php-errors"]=="clear" ) {
		$handle = fopen( $logfile, "w" );
		fclose( $handle );
		$fileCleared = true;
	}
	// Read file
	if ( file_exists( $logfile ) ) {
		$errors = file( $logfile );
		$errors = array_reverse( $errors );
		if ( $fileCleared ) echo '<p><em>File cleared.</em></p>';
		if ( $errors ) {
			echo '<p>'.count( $errors ).' error';
			if ( $errors != 1 ) echo 's';
			echo '.';
			if ( $userCanClearLog ) echo ' [ <b><a href="'.get_bloginfo("url").'/wp-admin/?slt-php-errors=clear" onclick="return confirm('Are you sure?');">CLEAR LOG FILE</a></b> ]';
			echo '</p>';
			echo '<div id="slt-php-errors" style="height:250px;overflow:scroll;padding:2px;background-color:#faf9f7;border:1px solid #ccc;">';
			echo '<ol style="padding:0;margin:0;">';
			$i = 0;
			foreach ( $errors as $error ) {
				echo '<li style="padding:2px 4px 6px;border-bottom:1px solid #ececec;">';
				$errorOutput = preg_replace( '/[([^]]+)]/', '<b>[$1]</b>', $error, 1 );
				if ( strlen( $errorOutput ) > $errorLengthLimit ) {
					echo substr( $errorOutput, 0, $errorLengthLimit ).' [...]';
				} else {
					echo $errorOutput;
				}
				echo '</li>';
				$i++;
				if ( $i > $displayErrorsLimit ) {
					echo '<li style="padding:2px;border-bottom:2px solid #ccc;"><em>More than '.$displayErrorsLimit.' errors in log...</em></li>';
					break;
				}
			}
			echo '</ol></div>';
		} else {
			echo '<p>No errors currently logged.</p>';
		}
	} else {
		echo '<p><em>There was a problem reading the error log file.</em></p>';
	}
}

// Add widgets
function slt_dashboardWidgets() {
	wp_add_dashboard_widget( 'slt-php-errors', 'PHP errors', 'slt_PHPErrorsWidget' );
}
add_action( 'wp_dashboard_setup', 'slt_dashboardWidgets' );

Ocultar campos dependiendo del role del usuario

Cuando se esta editando un artículo hay ciertos paneles que aparecen, entre ellos el campo de texto donde se escribe, las revisiones del artículo, el panel donde aparece el autor, el panel donde aparecen los campos personalizados,etc..

Si tenemos un blog con diferentes tipos de roles, tales como administrador, autores, contribuidores,etc. Podemos ocultar el panel de campos personalizados para que no interfiera o confunda al otro usuarios.

De esta manera podemos añadir el siguiente código en functions.php para ocultar el panel de “campos personalizados” de la página de edición de un artículo para todos los usuarios.


add_action('admin_init','customize_meta_boxes');

function customize_meta_boxes() {
     remove_meta_box('postcustom','post','normal');
}

Si lo que queremos es ocultar el panel de “campos personalizados” para usuarios con roles de autor o inferiores, añadimos el siguiente hook o gancho en el código, en functions.php

//hook the admin init
add_action('admin_init','customize_meta_boxes');

function customize_meta_boxes() {
     //obtenemos la informacion del usuario
     global $current_user;
     get_currentuserinfo();

     //si el nivel actual del usuario es 3 o menos se elimina el campo "postcustom", es decir "Campos personalizados"
     if ($current_user->user_level < 3)
          remove_meta_box('postcustom','post','normal');
}

32 opiniones en “10 trucos o “hacks” tutorial para personalizar el dashboard de WordPress.”

  1. Hola amigo muy bueno el tutorial, estoy haciendo mi tesis en wordpresss y me este tutorial me funciona de maravilla, pero me falta algo más que no consigo por ninguna parte, y esto es: hacer un login (diferente al login para admin de wordpress del que hablas) para la página de wordpress, un login con usuarios y administradores, pq le agregue ciertas funciones a mi wp para la parte usuario y pienso agregar otras para la parte admin, pero no se como hacer un login que me las separe y le de privacidad, entiendes a lo que me refiero? bueno si sabes de algun tutorial o sabes algo y tienes el tiempo de ayudarme, muchisimas gracias, sino, igual muchas gracias por esta ayuda. Saludos desde Venezuela

    1. Qué tal:
      hay algo que no comprendo… El archivo functions dónde se encuenta? dentro de includes de wordpress o dentro de nuestro theme?
      Gracias!

  2. Hola, gracias por los tips, pero me gustaría saber como deshabilitar los molestos tooltips que aparecen a la hora de llenar etiquetas cuando se crea un post!, gracias de antemano por la ayuda!

    Saludos!! 😉

    1. Buenas John, pues sinceramente ni idea. Nunca me lo he planteado. He estado buscando algo en Google y hay algunas cosas pero nada concreto. Lo mejor es que mires que llamada AJAX está haciendo e intentes buscar a la función que llama. Conociendo el nombre de la función intenta buscarla en la documentacion de WP a lo mejor hay alguna forma de desactivarlo… Pero no te puedo decir nada mas concreto.

      Si encuentras la solución compártela aqui, ok?!

      Un saludo!

  3. Hola Pedro, bueno bueno tu post. muy bueno de verdad que si. Me gustaria hacerte llegar una duda a la que no he conseguido encontrar solución. a ver como lo explico: Estoy montando una web con acceso restringido a miembros, estos usuarios (clientes) recibirán por mi parte un password y login. Bien hasta ahi todo correcto. Ahora viene lo heavy. quiero y necesito gestionar el contenido del dashboard o panel de control de cada miembro de manera individual.
    El negocio es catering y a cada cliente quiero facilitarle en su dashboard un calendario o una lista con fecha de los menus que ha comprado y otro apartado con las facturas y otro apartado con observaciones. Y todo esto desde el panel de control de admin.

    Por ejemplo: Pepe tiene un menu para 3 personas el dia 2/02/2012. tengo que subir un pdf con el menu y el precio total. en el apartado de factura poder señalar si ha sido pagada o no, y en observaciones pues eso mismo una caja de texto. Como puedo hacer paragestionar individualmente el contenido de cada miembro?

    Ufff espero que haya explicado por lo menos un poco bien.

    gracias de antemano

    1. Pues esto lo he hecho yo hace poco para este theme que estoy usando. Es muy sencillo tienes que descargar todo el theme, en tu ejemplo tendrías que descargar el theme de “twentyeleven” que comentas, renombrar la carpeta y volverlo a subir.

      Yo esto lo hize directamente desde linux con un comando: cp -R tema_actual/ mi_nuevo_tema

      Luego en el dashboard de WordPress entras y haces el cambio de temas y ya vas modificando el nuevo tema como quieras, empezando por el style.css donde puedes poner tus nuevos datos.

  4. Hola Pedro. Gracias por hacernos mucho más llevadero WP a los que nos iniciamos en este CMS.
    Estoy intentando implementar la Ayuda Personalizada en el panel de control de los usuarios, pero no consigo poner en cada página un mensaje distinto. Me explico… Un mensaje de ayuda en la sección páginas, otro en añadir nueva página, otro distinto en la sección multimedia… Esto con el objetivo de poner indicaciones de lo que pueden hacer en cada sección.

    /**
    * Funcion que se encarga de modificar los textos de ayuda en el panel de control de wordpress.
    *
    * @param mixed $contextual_help, este es el texto de ayuda por defecto definido para una página en concreto.
    * Se hereda desde otras librerías de wordpress y contendrá un valor ya definido.
    * @param mixed $screen Esta es la página en la que estamos.
    *
    * @returns Siempre se devuelve el valor de $contextual_help. Puede que este no se sobreescriba cuando pase por el switch case, devolviendo su valor original.
    * Si la página en la que estamos, está incluida en el switch case, el valor de la variable $contextual_help se sobreescribe con lo que añadamos.
    *
    * @version 1.0 Pedro Ventura. Actualmente esta funcionando para la version de WP 3.0.3
    *
    */
    function paneles_ayuda($contextual_help, $screen)
    {
    switch($screen)
    {
    # poner este case para hacer pruebas, despues quitarlo para un entorno en produccion.
    case ‘dashboard’:
    $contextual_help = ‘Este mensaje de ayuda esta reemplanzando al que hay en la página principal del escritorio o dashboard’;
    break;
    case load-page:
    $contextual_help = ‘Este es otro texto de ayuda para una nueva pagina del panel de control.’;
    }
    return $contextual_help;
    }
    /**
    * Registramos la función paneles_ayuda, para la accion de contextual_help, que pinta los mensajes de ayuda del panel de control
    * Los dos siguientes valores indican lo siguiente:
    * 10 – Es la prioridad de la función. por defecto se suele usar 10.
    * 2 -Indica el número de parámetros que enviamos a la función registrada. Si se quita este valor dará un error de “missing arguments”
    * @link Para conocer más sobre la funcion add_action() de Wordpres visitar http://codex.wordpress.org/Function_Reference/add_action
    */
    add_action( ‘contextual_help’, ‘paneles_ayuda’,10,2 );

    Tal y como está ahora me sale el primero en e escritorio y el segundo en el resto de secciones.

    Si tienes la solución me harías mucho más feliz!!

  5. Hola,

    Mi antiguo programador web ha ocultado opciones del menu en wordpress, por ejemplo, no puedo ver los widget y no sé si ha ocultado algo más.

    ¿Como puedo ponerlo todo “Bien”, que sea accesible? en todo caso, si estas opciones estan ocultas, él, ¿Como accede?

    Gracias,

    1. hola,

      Pues en primer lugar puede que el tenga una cuenta de administrador y tu solo una de editor o colaborador. Con lo que ni siquiera tengas acceso a los plugins, widget y demás.

      Puede que haya instalado algún plugin tipo http://wordpress.org/extend/plugins/exclude-pages/ y te haya desactivado la visualización de éstas páginas. Prueba a acceder a tu panel de wordpress y luego accede a TUDOMINIO.LOQUESEA/wp-admin/plugins.php para acceder al directorio de plugins y ver que es lo que ha instalado, y luego ya tu te buscas la vida. Si no puedes acceder es que no tendrás permisos con tu usuario y no seas administrador. En ese caso le tendrás que pedir el usuario administrador.

  6. Saludos Pedro, muy buen artículo y muy útil para quienes gustamos de personalizar nuestra instalación de WordPress sin instalar Plugins, gracias por publicarlo.

  7. Hola, tengo un problema y queria saber si tu podrias ayudarme. Queria saber como puedo modificar la apariencia de las noticias de WordPress. Bueno no es exactamente las noticias,sino las “paginas”,te dejo la web para que veas mi problema.
    http://jhutchspain.org/?page_id=154

    Queria saber como poner fondo en donde salen las interrogaciones.
    Espero que puedas ayudarme.
    Gracias

  8. Es importante que a la hora de cambiar el logo del website también quitemos la URL que lleva a la página de wordpress. Solo hay que modificar el wp-login.php en las líneas 81 y 82 😉

  9. Hola Pedro. Gracias por tus aportes. En relación con tu primer aporte “Eliminar menús del dashboard” creo entender que el código tal y como está escrito elimina del menu ciertas opciones para el rol Administrador.

    ¿Puedo hacer los mismo, pero solo deshabilitando la visión de ciertos elemenos para los usuarios Autor?

    ¿Sería cambiar la variable admin_menu por otra (¿cual?) en la línea: add_action(‘admin_menu’, ‘remove_menus’);

    Muchas gracias.

  10. Hola y gracias por el post!
    Te planteo un reto (yo ya no se donde ver): he cambiado el logo de login en wp-login y perfecto… pero si se accede a la web desde movil (da igual iPhone que Android) no muestra el logo nuevo sino el de wordpress :S
    Se te ocurre por donde tirar?

    Gracias.

  11. hola Pedro Ventura me gusto mucho tu post de tips es en realidad bueno solo que me quedo una inquietud.En el tip de agregar un widget al panel de amin como podria hacer lo mismo pero para agregar un video me gustaria mucho si me pudieras ayudar ya mire muchas opciones pero ninguna me funciona de ante mano gracias y muy buena web. si pudieras mandar email para ver la respuesta gracias de nuevo

  12. Hola, llevo un tiempo batallando por conseguir una cosa y no he sido capaz. Tu me sabrias explicar como modificar la paginación de mis usuarios registrados dentro de el administrador de mi wordpress.

    Un saludo y gracias de antemanos.

  13. Muy buen artículo. Es exactamente lo que estaba buscando.

    Me lancé como diseñador web freelance hace poco, y entiendo que con estas modificaciones en el código podría evitar que el administrador cambie opciones avanzadas en wordpress. Pero que si yo quiero tener un usuario administrador en las páginas que haga con todos los permisos y darle a los clientes otro usuario administrador pero con permisos reducidos?

    Gracias de antemano.

  14. Pingback: aha-Diseño – 10 TRUCOS O “HACKS” TUTORIAL PARA PERSONALIZAR EL DASHBOARD DE WORDPRESS.
  15. Hola.

    Ante todo gracias por la información. Está muy completo !.

    Como soy relativamente nuevo en este tema no me doy cuenta de donde debería poner el llamado a una función para ocultar un item del menú del panel de administración.

    Si no es mucha molestia podrías darme un ejemplo.

    Gracias.

    Daniel.

  16. Hola, yo necesito algo tan simple como cambiar la palabra “Portfolio” por “Trabajos” en el panel de gestión y no tengo ni idea de como hacerlo, ando mal de código, me podéis echar una mano?? Gracias!!

  17. Hola Pedro, hay alguna forma de crear un perfil en wordpress al cual mostrar las secciones que a mi me interesan del menu de navegación de la izquierda? Es dedcir, que al registrase so,amente vea las secciones que yo quiero que pueda gestinoar. No se si me he excplicado bien.

    Agradezco mucho tu ayuda.

    Marcos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *