web-dev-qa-db-fra.com

Ajouter Javascript au menu WordPress

Y a-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 créer un lien permettant d'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, il disparaît et le lien reste inactif.

Quelque chose que j'ai lu disait 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 l'utilisateur clique sur le lien avec cette classe. J'ai essayé, cependant, et je ne pouvais pas le faire fonctionner. Je ne connais pas beaucoup le langage Javascript, il est donc possible que je l'écrive complètement faux.

Est-ce que quelqu'un sait comment faire ça? Je voudrais le faire sans l'aide d'un plugin.

menusjavascriptnavigation
8
mcography

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

Ajouter un élément de menu personnalisé, le lier à 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 sur ce menu-item, le script ci-dessus est déclenché. Vous pouvez mettre en file d'attente le script jQuery via le fichier functions.php.

Mettre à jour:

  1. Assurez-vous que votre olark.js est en cours de chargement. Si vous l'ajoutez au pied de page ou à l'en-tête, inspectez votre page et assurez-vous que le script est présent. Assurez-vous également que vous ne recevez aucune erreur dans la console du navigateur.

  2. Enveloppez votre 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 le script ne se charge pas du tout.

6
gdaniel

Solution n ° 1 (pas idéal, 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 get_stylesheet_directory_uri() au lieu de get_template_directory_uri().

3
mcography

Je pense qu'il existe une option "plus fiable". Compter sur le numéro d’élément de menu n’est pas garanti 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 très bon.

Une alternative pourrait être de créer un lien vers une ancre inexistante, telle que #olark, à partir de votre élément de menu. Ceci peut être défini à l'aide de l'interface utilisateur et est fiable dans tous les environnements. Ensuite, votre script séparé doit 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 compile en javascript qui écoute le hashchange:

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 du menu. Ceci est inattendu et peut être dû à un autre script empêchant l'événement par défaut. J'ai donc dû ajouter une autre ligne pour que l'emplacement de la fenêtre change en réponse à un 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'

[/modifier]

1
Bart McLeod