Añadir notificación de actualizaciones en el menú del admin de WordPress

ByLuis

Si queremos indicar que hay novedades en algún elemento del menú del admin de WordPress, tendremos que añadir un simple filtro en nuestro functions.php. Esto puede ser necesario por ejemplo si tenemos un Custom Post Type y se actualiza mediante un cron, el usuario podría tener un vistazo rápido de como ha ido el cronjob si usamos ese tipo de notificaciones.

Clipboard01

Para añadir estas notificaciones tendremos que hacer uso del filtro add_menu_classes, que aunque no creo que esté pensado para esto, nos permite modificar el menú antes de ser dibujado. En el filtro tendremos que buscar la opción del menú por la acción que realiza (posición 2 del array) y añadir un pequeño HTML en el título (posición 0 del array). Buscamos por la acción y no por el título ya que si usamos multi-lenguaje nos puede dar problemas.

add_filter( 'add_menu_classes', 'admin_menu_updates');
function admin_menu_updates( $menu ) {
  foreach($menu as $i=>$item) {
    if ($item[2] == 'edit.php?post_type=miposttype') {
      $c = get_transient( 'contador_updates_miposttype' );
      if ($c) $menu[$i][0] .= ' '.$c.'';
    }
  }
  return $menu;
}

Yo en este caso el valor lo almaceno usando la API de Transients, pero vosotros lo podéis gestionar como os venga mejor.

| |

Menú radial mediante XHTML

ByLuis

Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.

menu_radial.png

El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.

Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.

menu_radial2.png

El HTML sería el siguiente:

<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>

Y los estilos:

ul {
width: 150px;
height: 150px;
display: block;
padding: 0px;
margin: 0px;
}
li {
width: 48px;
height: 48px;
display: block;
border: 1px solid #008585;
background: #24B8B8;
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
li + li + li {
margin-left: 50px;
}
li:first-child {
margin: 0px 50px;
}
a {
font-size: 250%;
font-family: Arial;
text-decoration: none;
color: #DEDED2;
}

Javascript Tutorial – Radial Menus Part 1