Ejemplo para ver cómo podemos añadir o cambiar los iconos de custom post types de nuestro dashboard o panel de administración de WordPress, por iconos de la Font Awesome.
Descripción
A veces, cuando instalamos plugins o themes, se nos añaden diferentes custom post types en el panel de adminsitración o dashboard de nuestro WordPress, según de qué trate ese theme o plugin.
Por ejemplo, muchos themes de WordPress, vienen incorporados con las secciones comúnmente conocidas de:
- Testimonios
- Portfolio
- Galería
- Servicios
- etc
y a veces, o tienen un icono más feo que un troll de mordor (jeje 
), o un icono muy complicado de diferenciar con los demás apartados, o directamente viene con el icono por defecto como podemos apreciar en la siguiente imagen:
Para cambiar estos iconos, simplemente podríamos utilizar el parámetro menu_icon en la función register_post_type de WordPress donde hayamos creado esos custom post types, y ponerle o un icono de la fuente oficial de WordPress Dashicons o una imagen de un icono que tengamos en nuestro theme:
<?php
/* Con icono de dashicons */
register_post_type( $post_type,
array(
'menu_icon' => 'dashicons-format-quote',
)
);
<?php
/* Con icono de una imagen */
register_post_type( $post_type,
array(
'menu_icon' => 'get_template_directory_uri() . "/images/custom-posttype-icon.png"',
)
);
Con iconos de font-awesome
Como hemos visto anteriormente, podemos ponerle o iconos de la fuente dashicons, o un icono de una imagen. Pero, ¿y si quisiéramos ponerle un icono de la fuente Awesome?.
Seguramente pensarías, pues fácil, incluyo la fuente en la cabecera de mi theme, y en el parámetro menu_icon de la función register_post_type le pongo el nombre de dicho icono de font-awesome:
'menu_icon' => 'fa fa-car'
Pues he de decirte, que eso no te va a funcionar. Para que te funcione, tenemos que hacerlo con los siguientes códigos que te pongo a continuación.
Códigos
Cargar font-awesome
Lo primero que haremos es cargar la fuente Awesome. Para ello, añadiríamos al archivo functions.php de nuestro theme, este código:
<?php
function cargar_admin_fonts() {
wp_enqueue_style( 'awesome', 'http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' );
};
add_action( 'admin_init', 'cargar_admin_fonts' );
Función de custom css
Ahora necesitamos añadir de nuevo en el archivo functions.php, el código css del icono de font-awesome para cada custom post type:
<?php
function custom_post_types_css() {
echo '<style type="text/css" media="screen">
#adminmenu #menu-posts-nombrecustomposttype .menu-icon-nombrecustomposttype div.wp-menu-image::before {
font-family: FontAwesome !important;
content: "\\unicode";
color: #FF0000;
}
</style>';
}
add_action( 'admin_head', 'custom_post_types_css' );
Por ejemplo, para los custom post que vimos anteriormente en la imagen (portfolio, servicios, testimonials), el código sería así:
<?php
function custom_post_types_css() {
echo '<style type="text/css" media="screen">
#adminmenu #menu-posts-portfolio .menu-icon-portfolio div.wp-menu-image::before {
font-family: FontAwesome !important;
content: "\\f0b1";
color: #FFBF00;
}
#adminmenu #menu-posts-servicios .menu-icon-servicios div.wp-menu-image::before {
font-family: FontAwesome !important;
content: "\\f0ad";
color: #00BFFF;
}
#adminmenu #menu-posts-testimonials .menu-icon-testimonials div.wp-menu-image::before {
font-family: FontAwesome !important;
content: "\\f10e";
color: #FF0000;
}
</style>';
}
add_action( 'admin_head', 'custom_post_types_css' );
Vista Previa
La vista previa una vez añadidos los códigos descritos anteriormente, daría como resultado:
