Agregar atributos personalizados a los menús de WordPress

Hay tantos tutoriales en la web para explicar “cómo agregar un campo personalizado a los menús de WordPress”, pero la mayoría de ellos tratan sobre cómo usar el campo CSS predeterminado del campo Descripción predeterminado. Ninguno de ellos ofrece un método real para agregar un campo nuevo real a los menús. Entonces, hoy crearemos un complemento simple que agregará un campo de “subtítulo” a cualquier menú de WordPress.

Aquí está el resultado final en la administración de WordPress:

Paso 1: la creación del complemento

Vamos, como vimos en una de mis publicaciones anteriores, crear un complemento no es complejo. Solo necesita crear una nueva carpeta en wp-content / plugins y llamarla “sweet-custom-menu”, y crear dentro de ella un archivo llamado “sweet-custom-menu.php”. Luego abra este archivo y agregue este código:


Este código es todo lo que necesitamos para definir un nuevo complemento. Ahora vamos a crear una clase PHP personalizada que contiene un constructor y las funciones que necesitaremos para que el complemento funcione bien.

A continuación se explica cómo crear la clase:

class rc_sweet_custom_menu {

	/*--------------------------------------------*
	 * Constructor
	 *--------------------------------------------*/

	/**
	 * Initializes the plugin by setting localization, filters, and administration functions.
	 */
	function __construct() {

	} // end constructor

	/* All functions will be placed here */

}

// instantiate plugin's class
$GLOBALS['sweet_custom_menu'] = new rc_sweet_custom_menu();

La última línea crea una instancia de la clase y agrega toda la clase en una variable global.

Paso 2: agregar el filtro de campos personalizados

Ahora que tenemos nuestra clase, crearemos funciones personalizadas. La primera función a agregar es la que registrará el campo personalizado “subtítulo” que queremos incluir como un atributo de menú avanzado. Para hacerlo, aquí la función a crear, coloque este código en lugar de / * Todas las funciones se colocarán aquí * /:

/**
 * Add custom fields to $item nav object
 * in order to be used in custom Walker
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function rc_scm_add_custom_nav_fields( $menu_item ) {

    $menu_item->subtitle = get_post_meta( $menu_item->ID, '_menu_item_subtitle', true );
    return $menu_item;

}

Luego, necesitamos decirle a WordPress que tenga en cuenta nuestra función, así que coloque el siguiente código en la función __construct ():

// add custom menu fields to menu
add_filter( 'wp_setup_nav_menu_item', array( $this, 'rc_scm_add_custom_nav_fields' ) );

Paso 3: guardar campos personalizados

Incluso si el campo "subtítulo" personalizado no existe realmente, debemos crear una función que guarde su valor en la edición del menú. Los elementos del menú están en dos tipos de publicaciones personalizadas, por lo que podemos usar las API de tipo de publicación personalizada y el método post_meta. Entonces, para guardar el valor del campo de menú personalizado, agregue esta función en rc_scm_add_custom_nav_fields ():

/**
 * Save menu custom fields
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function rc_scm_update_custom_nav_fields( $menu_id, $menu_item_db_id, $args ) {

    // Check if element is properly sent
    if ( is_array( $_REQUEST['menu-item-subtitle']) ) {
        $subtitle_value = $_REQUEST['menu-item-subtitle'][$menu_item_db_id];
        update_post_meta( $menu_item_db_id, '_menu_item_subtitle', $subtitle_value );
    }

}

En esta función, estamos verificando si el valor del campo personalizado se envía desde el formulario que estamos a punto de crear y luego simplemente almacenamos su valor. Ahora tenemos que agregar la función al gancho apropiado. Para hacerlo, agregue estas líneas a __construct ():

// save menu custom fields
add_action( 'wp_update_nav_menu_item', array( $this, 'rc_scm_update_custom_nav_fields'), 10, 3 );

Paso 4: el formulario

Si siguió este tutorial paso a paso, probablemente adivinará que no hemos creado el formulario que debe contener nuestro campo de subtítulo. Esta parte es un poco más compleja que las anteriores. Esta vez tenemos que lidiar con Walker. Realmente te animo a leer el códice sobre la clase caminante, esto realmente te ayudará a entender qué es y para qué sirve. Por cierto, hay muchos tutoriales excelentes en Internet para brindarte más detalles sobre esta clase, ¡así que échales un vistazo! En la mayor parte del tiempo, los caminantes se utilizan para modificar la salida HTML de un menú. Aquí, estamos trabajando en el formulario de salida del menú de administración. Simplemente agregue esta función a su clase principal:

/**
 * Define new Walker edit
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/
function rc_scm_edit_walker($walker,$menu_id) {

    return 'Walker_Nav_Menu_Edit_Custom';

}

y luego esto al constructor:

// edit menu walker
add_filter( 'wp_edit_nav_menu_walker', array( $this, 'rc_scm_edit_walker'), 10, 2 );

Lo que hace es reemplazar el formulario de menú de edición de administrador predeterminado por uno personalizado. Ahora que se agregó el filtro, copie estas dos líneas en la parte inferior del archivo sweet-custom-menu.php, fuera de la clase rc_sweet_custom_menu:

include_once( 'edit_custom_walker.php' );
include_once( 'custom_walker.php' );

Estamos a punto de incluir dos archivos. El primero "edit_custom_walker.php" es el que modificará el formulario predeterminado para editar el menú. Es en este archivo donde vamos a agregar el campo de subtítulo.

El segundo es el welker utilizado en la interfaz del sitio web, este es el archivo que modificará la salida del menú para sus visitantes.

Como "edit_custom_walker.php" es un poco largo, no voy a pegar todo el código. Puedes ver el código completo aquí. El único código que le agregué es de la línea 174 a la línea 185. Aquí está el código agregado:

Si desea agregar más campos al menú, simplemente duplique estas líneas y cópielas y péguelas. Una vez realizado este paso, el menú debería estar funcionando en la administración. Ahora debería poder ver el nuevo campo "subtítulo" al agregar un nuevo elemento a un menú. Si no es el caso, haz que sigas el tutorial paso a paso. Ahora es el momento de mostrar el valor de los subtítulos en la interfaz.

Paso 5: Salida de campo personalizado

Si todo funciona bien en la administración, probablemente ahora desee mostrar los subtítulos en la interfaz. Abra custom_walker.php y agregue este código:

classes ) ? array() : (array) $item->classes;

           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';

           $output .= $indent . '

Este código es bastante estándar. Lo único importante aquí es esta línea:

$item_output .= ' '.$item->subtitle.'';

Paso 6: ¡Llame al caminante!

En el último paso, deberá abrir el archivo header.php en su carpeta de temas. Es donde se llama la mayor parte del tiempo al menú. De lo contrario, comuníquese con el creador del tema para saber dónde se llama.

Busque la función wp_nav_menu ().

Luego, simplemente agregue el parámetro walker:

'walker' => new rc_scm_walker

Eso es todo ! Espero que haya disfrutado agregando un campo personalizado a un menú de WordPress. Ahora puede modificar un poco este código para agregar otros campos como casillas de verificación, menú desplegable de selección, áreas de texto, etc. No dude en agregar un comentario en la sección de comentarios. Si encuentra un error, si lo mejora, etc.

Complemento de menú personalizado dulce

Si está buscando implementar este tutorial, puede descargar el "Complemento de menú personalizado dulce" que he creado para comenzar. ¡Disfrutar!

Obtener el complemento →