WordPress : Comment ajouter une section à la configuration des menus, proposant des éléments codés en dur ?
Alors, laissez-moi vous expliquer ce que j’essaie réellement de faire, peut-être qu’il y a une meilleure façon d’y parvenir. Je travaille sur un thème, et j’aimerais que l’utilisateur puisse positionner facilement des éléments « spéciaux » dans le menu qui feront quelque chose de « spécial » dans l’interface des thèmes, dans ce cas (entre autres) construire un menu imbriqué structures basées sur des taxonomies personnalisées et leurs publications liées.
J’ai donc pensé à une nouvelle « section » dans la configuration » Apparence > Menus » de WordPress, où certains éléments codés en dur seraient proposés, quelque chose comme ceci :
Maintenant, je pouvais penser à deux façons de gérer cela, un type de publication personnalisé qui n’est affiché que dans le menu de navigation, ou une méta-boîte personnalisée (ce qui semble être beaucoup de travail, wp_nav_menu_item_post_type_meta_box()ressemble au moins à des heures d’essais et d’erreurs) .
Je me demande si l’une de ces deux options est la méthode recommandée pour résoudre ce problème?
btw, je n’envisagerais pas de l’utiliser wp_update_nav_menu_item()comme option car les éléments créés avec lui semblent simplement s’asseoir dans le menu sans interface utilisateur pour les rajouter au cas où ils seraient supprimés. Donc, cela nécessiterait de toute façon une méta-boîte personnalisée, cela enregistrerait également les éléments directement dans le menu, brisant la convention » ajouter un élément> enregistrer le menu » que les gens utilisent à partir de l’interface utilisateur WordPress.
Solution n°1 trouvée
Les éléments de menu sont un type de publication et les menus auxquels ils appartiennent sont des termes de taxonomie. Donc, créer un type de publication afin d’obtenir une métabox à partir de laquelle vous pouvez ajouter des éléments de menu semble un peu redondant (en dupliquant effectivement chaque « élément spécial » dans la base de données). Dans tous les cas, il peut être délicat de définir la visibilité du type de message de manière à ce qu’il ne soit visible que sur l’écran des menus.
Quoi qu’il en soit, il s’agit d’une tâche assez complexe, je vais donc simplement décrire ici comment je procéderais. Vous pouvez en voir un « exemple de travail » dans ce plug-in que j’ai construit avec Kaiser et Ryan Urban. Ce plug-in ajoute une métabox d’archive de type de publication pour les liens vers la page d’archive d’un type de publication.
Ajout de la métabox
Vous voudrez vous accrocher au admin_initcrochet et add_meta_box()(voir codex). L’ID d’écran pour cette page est nav-menus
add_action( 'admin_init', 'wpse102735_add_meta_boxe' );
public function wpse102735_add_meta_boxe() {
add_meta_box(
'wpse102735-metabox-id,
'My Custom Section'
'wpse102735_metabox_callback',
'nav-menus',
'side',
'low'
);
}
La fonction wpse102735_metabox_callback()est responsable du contenu de la metabox. Et devrait produire une liste de cases à cocher des « éléments spéciaux » – tous avec une valeur/ID avec laquelle vous pouvez identifier cet élément. (Voir metabox()la méthode dans le plug-in mentionné ci-dessus, ou cette fonction dans le noyau qui produit le balisage HTML pour les métabox post/page standard.
Javascript
À l’étape précédente, vous auriez dû ajouter un bouton « Soumettre ». Vous devrez écouter quand ce bouton est cliqué, puis envoyer une requête ajax personnalisée à ajaxurl(une variable javascript globale pointant vers le gestionnaire ajax de WordPress). Voici le code squelette :
jQuery( document ).ready( function($) {
$( '#my-submit-id' ).click( function( event ) {
event.preventDefault();
var item_identifiers = [];
//Collect the IDs of the selected items and put them in $item_identifiers
// Show spinner - you need to add this in the mark-up.
$( '#wpse102735-metabox-id' ).find('.spinner').show();
// Disable button
$(this).prop( 'disabled', true );
// Send checked post types with our action, and nonce
$.post( ajaxurl, {
action: wpse102735_add_menu_items,
items: item_identifiers,
},
// AJAX returns html to add to the menu, hide spinner
function( response ) {
$( '#menu-to-edit' ).append( response );
$( '#wpse102735-metabox-id').find('.spinner').hide();
$(this).prop( 'disabled', false );
//Uncheck checkboxes too
}
);
} );
} );
Notez que j’ai omis les nonces ci-dessus (et ci-dessous). Vous devrez les ajouter. Vous devrez également enregistrer/mettre en file d’attente correctement le script ci-dessus. Voir le plug-in référencé pour plus de détails.
Gérer l’ajax
Dans ce qui précède, nous définissons l’action sur wpse102735_add_menu_items , nous avons besoin du crochet du gestionnaire ajax.
add_action( 'wp_ajax_wpse102735_add_menu_items', 'wpse102735_ajax_handler' );
Notre gestionnaire ajax fera deux choses :
- Créez les éléments de menu avec
wp_update_nav_menu_item()(regardez au mieux la source / le plug-in ci-dessus) - À partir des ID renvoyés, récupérez les objets de menu et générez le HTML pour l’écran d’administration. (Nous avons ajouté le code HTML renvoyé au menu à l’étape précédente)
Le gestionnaire ajax :
add_action( 'wp_ajax_wpse102735_add_menu_items', 'wpse102735_ajax_handler' );
function wpse102735_ajax_handler(){
//Perform any necessary nonce/permission checks
$items = $_POST['items']
//For each item, set up the details for the menu item:
foreach( $items as $item ){
$menu_item_data= array(
'menu-item-title' => 'Item title',
...
);
// Collect the items' IDs.
$item_ids[] = wp_update_nav_menu_item( 0, 0, $menu_item_data );
}
// If there was an error die here
if( is_wp_error( $item_ids ) )
die( '-1' );
//Finally we want to generate mark-up to be added to the menu admin screen
//First we set up the menu items we've just created
// Set up menu items
foreach ( (array) $item_ids as $menu_item_id ) {
$menu_obj = get_post( $menu_item_id );
if ( ! empty( $menu_obj->ID ) ) {
$menu_obj = wp_setup_nav_menu_item( $menu_obj );
// don't show "(pending)" in ajax-added items
$menu_obj->label = $menu_obj->title;
$menu_items[] = $menu_obj;
}
}
//Now generate HTML using Walker_Nav_Menu_Edit walker
// Needed to get the Walker up and running
require_once ABSPATH.'wp-admin/includes/nav-menu.php';
// This gets the HTML to returns it to the menu
if ( ! empty( $menu_items ) ) {
$args = array(
'after' => '',
'before' => '',
'link_after' => '',
'link_before' => '',
'walker' => new Walker_Nav_Menu_Edit
);
echo walk_nav_menu_tree( $menu_items, 0, (object) $args );
}
exit();
}
J’espère que cela vous mettra sur la bonne voie 🙂
0 commentaire