WordPressメニューにJavaScriptを追加

WordPressメニュー項目のURL部分にJavaScriptを配置する方法はありますか？私のサイトにはライブチャット機能があり、このコードをサイトに配置して、ライブチャットを開くためのリンクを作成することになっています（ここで提案されています）。

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

クライアントは、WordPressダッシュボードのWordPressメニューを使用して作成されたユーティリティナビゲーションバーのリンクを必要としています。しかしjavascript:void(0);" onclick="olark('api.box.expand')、WordPressダッシュボードのURLボックスにコピーして貼り付けると、表示されなくなり、リンクは非アクティブのままになります。

私が読んだ何かは、おそらく私は問題のリンクにカスタムクラスを置き、そのクラスとのリンクがクリックされたときに起動するJavascript関数を書くことができると言いました。私はそれを試してみましたが、動作させることができませんでした。私はJavascriptをあまり知らないので、それを完全に間違って書いていた可能性があります。

誰でもこれを行う方法を知っていますか？プラグインを使わずにやりたいです。

それが機能するのは良いことです。クライアント向けの場合や、よりクリーンなコードが必要な場合は、@ Tom J Nowellの提案どおりに実行できます。

カスタムメニュー項目を追加し、それをどこにもまたはどこにもリンクしません。メニュー項目ID（すべての項目に1つある）を見つけ、そのIDをjQueryでターゲットにします。

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

このように、ユーザーがクリックするたびにmenu-item、上記のスクリプトがトリガーされます。functions.phpを介してjqueryスクリプトをエンキューできます。

更新：

1. olark.jsが読み込まれていることを確認してください。フッターまたはヘッダーに追加する場合は、ページを調べて、スクリプトがそこにあることを確認してください。また、ブラウザのコンソールでエラーが発生していないことを確認してください。

2. jsをドキュメントでラップして、スクリプトが適切なタイミングで実行されるようにします。

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

リンクが読み込まれていないということは、スクリプト自体に問題があるか、スクリプトがまったく読み込まれていないことを意味します。

ソリューション＃1（理想的ではありませんが、機能します）：

// 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;
}

ソリューション＃2（理想的）：

上記のコメントの助けを借りて、ここに私のために働いた解決策があります。私はolark.jsという名前の新しいファイルを作成し、次のコードをその中に入れました。

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

次に、次のコードを使用してfunctions.phpにスクリプトをエンキューしました。

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' );

それが機能しない場合は、スクリプトを適切にエンキューしていることを確認してください。子テーマを使用しているため、のget_stylesheet_directory_uri()代わりに使用する必要がありましたget_template_directory_uri()。

「もっと信頼できる」オプションがあると思います。たとえば、コードを開発から本番に移行した場合、メニュー項目番号に依存することは保証されません。数値を設定にすると、改善されますが、実際にはあまり良くありません。

別の方法として、メニュー項目から#olarkなどの存在しないアンカーにリンクすることもできます。これは、ユーザーインターフェイスを使用して設定でき、環境全体で信頼できます。次に、別のスクリプトがハッシュの変更（ブラウザのアドレスバー内）を監視し、それに応じて動作する必要があります。

hashchangeをリッスンするjavascriptにコンパイルされる簡単なコーヒースクリプトの例：

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

@showLogin ハッシュが「#login」に等しい場合にログインを許可するダイアログを表示する関数です。

[編集]面白いことに、メニュー項目をクリックしてもアドレスのハッシュは変わりません。これは予期しないことであり、別のスクリプトがデフォルトのイベントを妨げていることが原因である可能性があります。したがって、リンクのクリックに応じてウィンドウの場所を変更するには、別の行を追加する必要がありました。

# 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'

[/編集]

これをfunctions.phpに使用して、ナビゲーションメニュー項目にスクリプトを追加できます。

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');