it-swarm.com.de

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 Site und soll diesen Code auf die Site 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. Aber wenn ich javascript:void(0);" onclick="olark('api.box.expand') kopiere und 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 in den fraglichen Link einfügen und dann eine JavaScript-Funktion schreiben könnte, die ausgelöst wird, wenn auf den Link mit dieser Klasse geklickt wird. Ich habe es trotzdem 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.

8
mcography

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

Fügen Sie ein benutzerdefiniertes Menüelement hinzu, verknüpfen Sie es mit nirgendwo oder irgendwo. Finden Sie die Menüelement-ID heraus (jedes Element hat eine) und richten Sie diese ID mit jQuery aus.

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

Auf diese Weise wird jedes Mal, wenn ein Benutzer auf diesen menu-item klickt, das 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 in die Fußzeile oder Kopfzeile einfü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. Packen Sie Ihre js in ein fertiges Dokument, damit das Skript zur richtigen Zeit 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.

6
gdaniel

Lösung 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 mit dem Namen 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 folgendem 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, daher musste ich get_stylesheet_directory_uri() anstelle von get_template_directory_uri() verwenden.

3
mcography

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

Eine Alternative könnte sein, einen Link zu einem nicht existierenden Anker, wie #olark, von Ihrem Menüpunkt aus 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 Beispiel für ein Kaffeeskript, das in Javascript kompiliert wird und die Hash-Änderung 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.

[edit] Lustigerweise ändert sich der Hash in der Adresse nicht , wenn Sie auf einen Menüpunkt klicken. Dies ist unerwartet und kann darauf zurückzuführen sein, dass ein anderes Skript das Standardereignis verhindert. Also musste ich eine weitere Zeile hinzufügen, damit sich die Fensterposition ändert, wenn ich auf einen Link klicke:

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

1
Bart McLeod