Ajouter Javascript au menu WordPress

9

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.

mcographie
la source
Vous ne devriez pas être en mesure d'ajouter du javascript au menu via l'interface utilisateur, et vous ne devriez jamais vous fier à l' onclickattribut pour exécuter le javascript
Tom J Nowell
Pourquoi pas? C'est le code que la société de chat en direct m'a fourni.
mcography
1
Cela ne signifie pas que c'est la bonne façon de procéder, recherchez l' .click()événement jQuerys
Tom J Nowell
Je n'essayais pas de dire que c'était le cas. J'essayais juste de demander pourquoi je ne devrais jamais compter sur l' onclickattribut. Je lève les yeux .click().
mcography
Parce que HTML est pour définir un document, l'ajout d'un attribut onclick est mauvais de la même manière que l'ajout d'une balise ou d'un attribut de style en ligne est mauvais, il les mélange. Voir cette question pour savoir pourquoi c'est mauvais
Tom J Nowell

Réponses:

7

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.

gdaniel
la source
Merci pour votre réponse. Je ne connais pas grand chose à Javascript, pouvez-vous me dire pourquoi votre solution est meilleure / plus propre? J'essaye juste de comprendre.
mcography
J'ai créé un fichier appelé olark.js et l'ai mis en file d'attente, mais le lien mène toujours à #(car c'est là que je l'ai défini dans le tableau de bord Wordpress). Voici ce que j'ai mis dans olark.js: $("#menu-item-38872").on("click", function(e){ e.preventDefault(); // olark code here olark('api.box.expand'); });Qu'est-ce que je fais mal?
mcography
Ah ha! Ils ont jQuery(document).ready(function($) {fait l'affaire! Merci, @gdaniel!
mcography
Heureux que cela ait fonctionné. L'idée est de séparer le script du contenu. C'est pourquoi il est suggéré de procéder de cette façon.
gdaniel
3

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().

mcographie
la source
1

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]

Bart McLeod
la source
-2

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');
Pk Ray
la source
Ce n'est pas une bonne solution, cela cassera complètement le menu, car tous les boutons seront affectés, et cela ne fait pas l'objet de la question.
Milan Petrovic