Modificar el diseño del admin de WordPress

ByLuis

Una de las opciones que trae WordPress 3.8 es que permite que cada usuario elija una gama de colores para el admin de WordPress. Esto puede ser bastante útil si somos una empresa y queremos que los colores propios se vean reflejados en el administrador de WordPress, por ejemplo para el blog de un cliente.

Para ello deberemos crearnos un CSS (tomando por referencia los que hay en wp-admin/css/colors) y meterlo en nuestro theme y luego añadir lo siguiente a nuestro functions.php:

add_action('admin_init', 'colores_admin');
function colores_admin() {
	wp_admin_css_color( 'id', 'Titulo', // poned el id que querais, si id = fresh modificara el diseño por defecto
		get_template_directory_uri(). "/css/admin.css" ,
		array( '#f00', '#0f0', '#00f', '#ff0' ), // los cuatro colores que muestran y que deberan corresponder a los del css que hemos creado
		array( 'base' => '#0ff', 'focus' => '#f0f', 'current' => '#fff' ) // los textos
	);
}

Recordad que WordPress ya no usa iconos, sino font icons, por lo que si queréis añadir o modificar iconos, deberéis crearos una web font con ellos (podéis usar Fontastic).

Importar listado de enlaces en los menús de WordPress

ByLuis

Los menús de WordPress son una de las funcionalidades menos aprovechadas de WordPress. Una de sus funciones más frecuente es la de blogroll, el problema viene cuando el cliente te pasa una lista de enlaces enorme que te toca meter a mano. Para evitar echar horas a esto, he desarrollado una caja que te aparecerá en los menús de WordPress que te permite importar lotes de enlaces sacados de un Excel, ODS, Google Drive, … tan solo tendrás que copiar las columnas y pegarlas (primera columna es el texto y la segunda el enlace):

// Añadir caja en menus para importar enlaces
function add_menu_importar_box() {
  $screen = get_current_screen();
  if ($screen->base == 'nav-menus') {
			add_meta_box( "add-importar", 'Importar enlaces', 'add_menu_importar_meta_box', 'nav-menus', 'side', 'default', null );
  }
}
add_action('admin_head', 'add_menu_importar_box');

function add_menu_importar_meta_box() {
?>
    
Copia los enlaces de la hoja de cálculo con el siguiente formato: Nombre, Enlace

    
		

      
				Borrarlos todos

El código es sencillo, con add_menu_importar_box creo la caja y con add_menu_importar_meta_box la "pinto", luego lo único que hay que hacer es llamar a wpNavMenu.addLinkToMenu con los datos del textarea y listo.

También he añadido botón de borrado masivo, porque borrarlos uno a uno es otra tortura.

Añadir class al ultimo elemento de un menú en WordPress

ByLuis

Muchos diseñadores suelen mostrar los menús en una línea separados entre ellos por una línea salvo el último elemento. El problema está en cómo diferenciar el último elemento para que no tenga ese estilo. Para ello tendremos que meter este código en el functions.php

add_filter( 'wp_nav_menu_objects', 'add_last', 10, 2);
function add_last($sorted_menu_items, $args) {

  $c = 0;
  foreach($sorted_menu_items as $i=>$item) {
    $c++;
    if ($c == count($sorted_menu_items)) {
      $sorted_menu_items[$i]->classes[] = 'last';
    }
  }
  
  return $sorted_menu_items;
}

La verdad es que se podria hacer con los selectores de CSS, pero aunque parezca mentira, no son compatibles con IE7, y algunos clientes aún usan el dichoso navegador.

Añadir class a la lista de categorías descriptivo en WordPress

ByLuis

Uno de las cosas que no me gustan de WordPress es la costumbre de añadir las clases a los elementos basados en el ID del mismo y no en su slug. Esto ocurre en todo, pero en este caso es con la lista de categorías generadas por wp_list_categories, devolviendo un HTML parecido a este:

  • Mi categor&iactute;a

    • Si queremos indicar estilos específicos para estas categorías, por ejemplo para añadir un icono a cada categoría, no nos sirve el class basado en ID, porque nos encontramos con que dependiendo de cuando se genere esta categoría, habrá que cambiar el css, siendo más lógico obtener un código como este:

  • Mi categor&iactute;a

    • Para poder conseguir esto, deberíamos añadir en nuestro functions.php lo siguiente.

    
add_filter('wp_list_categories', 'mete_slug_en_class', 10, 2);
function mete_slug_en_class($output, $args) {
  return preg_replace_callback('#]+)class="([^"]+)"([^>]*)>]+)>([^<]+)<\/a>#', function($m) {
    return ''.$m[5].'';
  }, $output);
}

    Poner modo mantenimiento automáticamente en WordPress

    ByLuis

    Para poner WordPress en modo mantenimiento, cuando actualizamos el theme o plugins y nos va a llevar un tiempo, o en otra ocasión, tan solo tendremos que crear un fichero con nombre .maintenance en el raíz de WordPress.

    Si además queremos mostrar un HTML específico, podemos crear el fichero /wp-content/maintenance.php que se cargará si existe.

    Actualización 12/02/2015

    El fichero .maintenance debe tener definida la variable $upgrading con un timestamp, según dice el código de WordPress, con el valor del momento en el que el fichero fue creado, pero luego viendo el código comprueba que hayan pasado 10 minutos. Yo en mi caso le he asignado el valor de time() y ya borraré yo el fichero cuando haya acabado.