Ajouter Javascript au menu WordPress

Existe-t-il un moyen de mettre javascript dans la partie URL d'un élément de menu WordPress? J'ai une fonction de chat en direct sur mon site, et je suis censé mettre ce code sur le site pour faire un lien pour ouvrir le chat en direct (comme suggéré ici).

<!-- BEGIN OLARK CHAT LINK -->
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
    Click here to chat!
</a>
<!-- END OLARK CHAT LINK -->

Le client veut le lien dans la barre de navigation de l'utilitaire, qui a été créé à l'aide d'un menu WordPress dans le tableau de bord WordPress. Mais lorsque je copie et colle javascript:void(0);" onclick="olark('api.box.expand')dans la zone URL du tableau de bord WordPress, cela disparaît et le lien reste inactif.

Quelque chose que j'ai lu a dit que je pourrais peut-être mettre une classe personnalisée sur le lien en question, puis écrire une fonction Javascript qui se déclenche lorsque le lien avec cette classe est cliqué. J'ai essayé, cependant, et je n'ai pas pu le faire fonctionner. Je ne connais pas beaucoup Javascript, il est donc possible que je l'écrive complètement mal.

Est-ce que quelqu'un sait comment faire ça? Je voudrais le faire sans utiliser de plugin.

Bon que ça marche. Si c'est pour un client ou si vous voulez juste un code plus propre, vous pouvez le faire comme l'a suggéré @ Tom J Nowell.

Ajoutez un élément de menu personnalisé, liez-le à nulle part ou n'importe où. Recherchez l'ID d'élément de menu (chaque élément en a un), puis ciblez cet ID avec jQuery.

$("#menu-item-num").on("click", function(e){ 
      e.preventDefault();
      // olark code here
});

De cette façon, chaque fois qu'un utilisateur clique dessus, menu-itemle script ci-dessus sera déclenché. Vous pouvez mettre le script jquery en file d'attente via functions.php.

Mise à jour:

1. Assurez-vous que votre olark.js se charge. Si vous l'ajoutez au pied de page ou à l'en-tête, inspectez votre page et assurez-vous que le script est là. Assurez-vous également que vous n'obtenez aucune erreur dans la console du navigateur.

2. Enveloppez vos js avec un document prêt, afin que le script s'exécute au bon moment:

   jQuery(document).ready(function($) {
     $("#menu-item-38872").on("click", function(e){
     e.preventDefault();
     olark('api.box.expand');
     });
   });

Le fait que le lien ne se charge pas signifie qu'il y a un problème avec le script lui-même ou que le script ne se charge pas du tout.

Solution n ° 1 (pas idéale, mais ça marche):

// Live Chat Utility Link
add_filter( 'wp_nav_menu_items', 'live_chat_utility_link', 10, 2 );
function live_chat_utility_link ( $items, $args ) {
    if ( $args->theme_location == 'utility' ) {
        $items .= '<li><a href="javascript:void(0);" onclick="olark(\'api.box.expand\')" class="livechat">Live Chat</a></li>';
    }
    return $items;
}

Solution n ° 2 (idéale):

Avec l'aide des commentaires ci-dessus, voici la solution qui a fonctionné pour moi. J'ai créé un nouveau fichier appelé olark.js et y ai mis ce code:

jQuery(document).ready(function($) {
    $("#menu-item-38872").on("click", function(e){ 
          e.preventDefault();
          // olark code here
          olark('api.box.expand');
    });
});

Ensuite, j'ai mis le script en file d'attente dans mon fichier functions.php avec le code suivant:

function olark_script() {
    wp_register_script( 'olark', get_stylesheet_directory_uri() . '/js/olark.js', array(), '1.0.0', true );
    wp_enqueue_script( 'olark' );
}

add_action( 'wp_enqueue_scripts', 'olark_script' );

Si cela ne fonctionne pas, assurez-vous de mettre correctement votre script en file d'attente. J'utilise un thème enfant, j'ai donc dû utiliser à la get_stylesheet_directory_uri()place de get_template_directory_uri().

Je pense qu'il existe une option «plus fiable». Compter sur le numéro d'élément de menu n'est pas garanti pour fonctionner si vous migrez votre code du développement à la production par exemple. Si vous transformez le nombre en paramètre, cela s'améliore, mais ce n'est toujours pas vraiment bon.

Une alternative pourrait être de créer un lien vers une ancre inexistante, comme #olark, à partir de votre élément de menu. Cela peut être défini à l'aide de l'interface utilisateur et est fiable dans tous les environnements. Ensuite, votre script séparé devrait observer le changement de hachage (dans la barre d'adresse du navigateur) et agir en conséquence.

Un exemple de script de café simple qui se compile en javascript qui écoute le hachage:

if window.addEventListener
  window.addEventListener 'hashchange', (event) =>
  @showLogin()
else
  window.attachEvent 'onhashchange', (event) =>
  @showLogin()
#enable sharing the url
if location.hash then @showLogin()

@showLogin est une fonction qui affiche une boîte de dialogue qui vous permet de vous connecter si le hachage est égal à '#login'.

[edit] Assez drôle, le hachage dans l'adresse ne change pas si vous cliquez sur un élément de menu. Ceci est inattendu et pourrait être dû à un autre script empêchant l'événement par défaut. J'ai donc dû ajouter une autre ligne, pour faire changer l'emplacement de la fenêtre en réponse au clic sur un lien:

# make sure the hash changes when a link in the menu is clicked (somehow, it doesn't in my case)
$('.menu-item a').click (event) =>
  window.location = $(event.currentTarget).attr 'href'

[/Éditer]

Vous pouvez l'utiliser pour functions.php pour ajouter un script d'ajout dans l'élément de menu de navigation

function add_nav_class($output) {
$output= preg_replace('/<a/', '<a id="join_club" onclick="awf_Form_.showForm(); return false;"', $output, -1);
return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');