0
321
Views¿Cómo agregar un nombre de clase HTML personalizado a los elementos del submenú de la pantalla de administración?
Aquí están estos elementos del submenú en el menú Publicaciones
Inspeccioné el código y descubrí que el marcado es este
<ul class="wp-submenu wp-submenu-wrap"> <li class="wp-submenu-head" aria-hidden="true">Posts</li> <li class="wp-first-item current"><a href="edit.php" class="wp-first-item current">All Posts</a></li> <li><a href="post-new.php">Add New</a></li> <li><a href="edit-tags.php?taxonomy=category">Categories</a></li> <li><a href="edit-tags.php?taxonomy=post_tag">Tags</a></li> </ul> Lo que me gustaría hacer es agregar una clase personalizada my-custom-class en las etiquetas <li> (procesadas en el lado del servidor) de modo que quede así
<ul class="wp-submenu wp-submenu-wrap"> <li class="wp-submenu-head" aria-hidden="true">Posts</li> <li class="wp-first-item current my-custom-class"><a href="edit.php" class="wp-first-item current">All Posts</a></li> <li class="my-custom-class"><a href="post-new.php">Add New</a></li> <li class="my-custom-class"><a href="edit-tags.php?taxonomy=category">Categories</a></li> <li class="my-custom-class"><a href="edit-tags.php?taxonomy=post_tag">Tags</a></li> </ul>¿Hay alguna manera de agregar un nombre de clase HTML personalizado a los elementos del submenú de la pantalla de administración?
3 answers
Answer question0
Puede hacer un str_replace en el html que ocurrirá antes de que se cargue la página:
Solo necesita resolver los selectores o luego analizarlo con DOMDocument
function callback($buffer) { $buffer = str_replace('wp-first-item', 'wp-first-item my-custom-class', $buffer); return $buffer; } function buffer_start() { ob_start("callback"); } function buffer_end() { ob_end_flush(); } add_action('admin_head', 'buffer_start'); add_action('admin_footer', 'buffer_end');0
De hecho, podemos hacerlo con un complemento simple como este:
<?php /** Plugin Name: Custom Admin Submenu CSS Class **/ add_action( 'admin_menu', function() use ( &$submenu ) { $class = 'my-class'; // Edit to your needs! if( ! isset( $submenu['edit.php'][5] ) ) return; if( ! empty( $submenu['edit.php'][5][4] ) ) // Append if css class exists $submenu['edit.php'][5][4] .= ' ' . $class; else $submenu['edit.php'][5][4] = $class; } ); Lo construimos de esta manera detectando esta parte de la función central _wp_menu_output() :
if ( ! empty( $sub_item[4] ) ) { $class[] = esc_attr( $sub_item[4] ); }Así es como se ve el HTML modificado:
<ul class='wp-submenu wp-submenu-wrap'> <li class='wp-submenu-head' aria-hidden='true'>Posts</li> <li class="wp-first-item current my-class"> <a href='edit.php' class="wp-first-item current my-class">All Posts</a> </li> <li> <a href='post-new.php'>Add New</a> </li> <li> <a href='edit-tags.php?taxonomy=category'>Categories</a> </li> <li> <a href='edit-tags.php?taxonomy=post_tag'>Tags</a> </li> </ul> donde la clase css personalizada se agrega tanto a la etiqueta <li> como a la etiqueta <a> .
En general, no me gusta modificar una variable global, pero no parece haber una solución alternativa para agregar la clase al submenú a través add_submenu_page() u otros filtros explícitos.
Si desea modificar las clases css para los elementos de primer nivel (menú), puede, por ejemplo, buscar en el filtro add_menu_classes .
Si cree firmemente que las clases css para los submenús deben ajustarse directamente a través de un filtro, entonces puede crear un ticket de seguimiento, explicar en detalle por qué es necesario y, por ejemplo, sugerir un nuevo filtro add_submenu_classes .
¡Espero que ayude!
0
Esto debería hacerlo:
function add_admin_class() { $find = '.wp-submenu li'; $add_class = 'my-custom-class'; echo '"<script type="text/javascript"> jQuery(function() { jQuery("' . $find . '").addClass("' . $add_class . '"); }); </script>"'; } add_action('admin_footer', 'add_admin_class'); 