web-dev-qa-db-ja.com

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メニューを使用して作成されたユーティリティナビゲーションバーのリンクを希望しています。しかし、WordPressダッシュボードのURLボックスにjavascript:void(0);" onclick="olark('api.box.expand')をコピーして貼り付けると、それは消えてリンクは非アクティブのままになります。

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

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

menusjavascriptnavigation
8
mcography

それはうまくいった。それがクライアントのためであるか、またはあなたがよりきれいなコードが欲しいならば、あなたは@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');
  });
});

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

6
gdaniel

解決策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()を使わなければなりませんでした。

3
mcography

私は「もっと信頼できる」選択肢があると思います。たとえば、コードを開発から本番に移行した場合、メニュー項目番号に頼ることが保証されるわけではありません。数値を設定に変えると良くなっていますが、それでも実際は良くありません。

別の方法としては、メニュー項目から#olarkなどの存在しないアンカーにリンクすることが考えられます。これはユーザーインターフェイスを使用して設定でき、環境全体にわたって信頼できます。それから、あなたの別のスクリプトはハッシュ変更（ブラウザのアドレスバーにある）を観察し、それに従って行動するべきです。

ハッシュチェンジを監視する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'

[/編集]

1
Bart McLeod