Fügen Sie Javascript zum WordPress-Menü hinzu

Gibt es eine Möglichkeit, Javascript in den URL-Teil eines WordPress-Menüelements einzufügen? Ich habe eine Live-Chat-Funktion auf meiner Website und soll diesen Code auf die Website setzen, um einen Link zum Öffnen des Live-Chats zu erstellen (wie hier vorgeschlagen).

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

Der Client möchte den Link in der Utility-Navigationsleiste, die über ein WordPress-Menü im WordPress-Dashboard erstellt wurde. Wenn ich jedoch kopiere und javascript:void(0);" onclick="olark('api.box.expand')in das URL-Feld im WordPress-Dashboard einfüge, verschwindet es einfach und der Link bleibt inaktiv.

Etwas, das ich gelesen habe, besagte, dass ich möglicherweise eine benutzerdefinierte Klasse auf den betreffenden Link setzen und dann eine Javascript-Funktion schreiben könnte, die ausgelöst wird, wenn auf den Link mit dieser Klasse geklickt wird. Ich habe das allerdings versucht und konnte es nicht zum Laufen bringen. Ich kenne nicht viel Javascript, daher ist es möglich, dass ich es völlig falsch geschrieben habe.

Weiß jemand, wie man das macht? Ich würde es gerne ohne Plugin machen.

Gut, dass es funktioniert. Wenn es sich um einen Client handelt oder wenn Sie nur einen saubereren Code wünschen, können Sie dies wie von @Tom J Nowell vorgeschlagen tun.

Fügen Sie einen benutzerdefinierten Menüpunkt hinzu und verknüpfen Sie ihn mit Nirgendwo oder irgendwo. Finden Sie die Menüelement-ID heraus (jedes Element hat eine) und zielen Sie dann mit jQuery auf diese ID ab.

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

Auf diese Weise wird jedes Mal, wenn ein Benutzer darauf klickt, menu-itemdas obige Skript ausgelöst. Sie können das jquery-Skript über functions.php in die Warteschlange stellen.

Aktualisieren:

1. Stellen Sie sicher, dass Ihre olark.js geladen wird. Wenn Sie es der Fußzeile oder Kopfzeile hinzufügen, überprüfen Sie Ihre Seite und stellen Sie sicher, dass das Skript vorhanden ist. Stellen Sie außerdem sicher, dass in der Browserkonsole keine Fehler angezeigt werden.

2. Wickeln Sie Ihr js mit einem bereitstehenden Dokument ein, damit das Skript zum richtigen Zeitpunkt ausgeführt wird:

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

Die Tatsache, dass der Link nicht geladen wird, bedeutet, dass etwas mit dem Skript selbst nicht stimmt oder dass das Skript überhaupt nicht geladen wird.

Lösung Nr. 1 (nicht ideal, aber es funktioniert):

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

Lösung 2 (ideal):

Mit Hilfe der obigen Kommentare ist hier die Lösung, die für mich funktioniert hat. Ich habe eine neue Datei namens olark.js erstellt und diesen Code eingefügt:

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

Dann habe ich das Skript in meiner functions.php mit dem folgenden Code in die Warteschlange gestellt:

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

Wenn es nicht funktioniert, stellen Sie sicher, dass Sie Ihr Skript ordnungsgemäß in die Warteschlange stellen. Ich verwende ein untergeordnetes Thema, also musste ich get_stylesheet_directory_uri()stattdessen verwenden get_template_directory_uri().

Ich denke, es gibt eine "zuverlässigere" Option. Wenn Sie beispielsweise Ihren Code von der Entwicklung in die Produktion migrieren, ist es nicht garantiert, dass Sie sich auf die Menüelementnummer verlassen. Wenn Sie die Zahl in eine Einstellung verwandeln, wird sie besser, aber immer noch nicht wirklich gut.

Eine Alternative könnte darin bestehen, über Ihren Menüpunkt einen Link zu einem nicht vorhandenen Anker wie #olark zu erstellen. Dies kann über die Benutzeroberfläche eingestellt werden und ist in allen Umgebungen zuverlässig. Dann sollte Ihr separates Skript die Hash-Änderung (in der Adressleiste des Browsers) beobachten und entsprechend handeln.

Ein einfaches Kaffee-Skript-Beispiel, das in Javascript kompiliert wird und den Hash-Wechsel abhört:

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

@showLogin ist eine Funktion, die ein Dialogfeld anzeigt, in dem Sie sich anmelden können, wenn der Hash gleich '#login' ist.

[Bearbeiten] Komischerweise ändert sich der Hash in der Adresse nicht , wenn Sie auf einen Menüpunkt klicken. Dies ist unerwartet und kann auf ein anderes Skript zurückzuführen sein, das das Standardereignis verhindert. Also musste ich eine weitere Zeile hinzufügen, damit sich die Position des Fensters als Reaktion auf das Klicken auf einen Link ändert:

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

[/bearbeiten]

Sie können dies zu functions.php verwenden, um ein zusätzliches Skript im Navigationsmenüelement hinzuzufügen

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