WordPress Menüsüne Javascript Ekle

Javascript'i bir WordPress menü öğesinin URL bölümüne koymanın bir yolu var mı? Sitemde canlı sohbet işlevi var ve canlı sohbeti açmak için bir bağlantı yapmak için bu kodu siteye koymam gerekiyor (burada önerildiği gibi).

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

İstemci, WordPress panosunda bir WordPress menüsü kullanılarak oluşturulan yardımcı program gezinme çubuğundaki bağlantıyı istiyor. Ancak, kopyalayıp javascript:void(0);" onclick="olark('api.box.expand')WordPress kontrol panelindeki URL kutusuna yapıştırdığımda , kayboluyor ve bağlantı etkin değil.

Okuduğum bir şey, belki de söz konusu bağlantıya özel bir sınıf koyabileceğimizi ve daha sonra bu sınıfla bağlantı tıklandığında tetiklenen bir Javascript işlevi yazabileceğini söyledi. Yine de denedim ve işe yaramadım. Çok fazla Javascript bilmiyorum, bu yüzden tamamen yanlış yazıyordum.

Bunu nasıl yapacağını bilen var mı? Bir eklenti kullanmadan yapmak istiyorum.

İyi çalışıyor. Bir istemci içinse veya daha temiz bir kod istiyorsanız, @Tom J Nowell'nin önerdiği gibi yapabilirsiniz.

Özel bir menü öğesi ekleyin, hiçbir yere veya herhangi bir yere bağlayın. Menü öğesi kimliğini bulun (her öğede bir tane vardır) ve ardından bu kimliği jQuery ile hedefleyin.

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

Bu şekilde, bir kullanıcı menu-itemyukarıdaki komut dosyasını her tıkladığında tetiklenir. Jquery komut dosyasını function.php aracılığıyla enqueque edebilirsiniz.

Güncelleme:

1. Olark.js dosyanızın yüklendiğinden emin olun. Altbilgiye veya başlığa ekliyorsanız, sayfanızı inceleyin ve komut dosyasının orada olduğundan emin olun. Ayrıca, tarayıcı konsolunda herhangi bir hata almadığınızdan emin olun.

2. Js'nizi hazır bir belge ile sarın, betiğin doğru zamanda çalışması için:

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

Bağlantının yüklenmemesi, komut dosyasının kendisinde bir sorun olduğu veya komut dosyasının hiç yüklenmediği anlamına gelir.

Çözüm # 1 (ideal değil, ama işe yarıyor):

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

Çözüm # 2 (ideal):

Yukarıdaki yorumların yardımıyla, benim için işe yarayan çözüm. Olark.js adlı yeni bir dosya oluşturdum ve bu kodu içine koydum:

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

Sonra, benim script.php betiği aşağıdaki kodla enqueued:

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

Eğer işe yaramazsa, betiğinizi düzgün bir şekilde sıktığınızdan emin olun. Çocuk teması kullanıyorum, get_stylesheet_directory_uri()bunun yerine kullanmak zorunda kaldım get_template_directory_uri().

Bence 'daha güvenilir' bir seçenek var. Örneğin, kodunuzu geliştirmeden üretime geçirirseniz, menü öğesi numarasına güvenmeniz garanti edilmez. Numarayı bir ayara dönüştürürseniz iyileşiyor, ancak yine de gerçekten iyi değil.

Alternatif olarak, menü öğenizden #olark gibi varolmayan bir çapa bağlamak olabilir. Bu kullanıcı arayüzü kullanılarak ayarlanabilir ve ortamlar arasında güvenilirdir. Ardından, ayrı komut dosyanız karma değişikliğini (tarayıcı adres çubuğunda) gözlemlemeli ve buna göre hareket etmelidir.

Hashchange dinleyen javascript derleme basit bir kahve komut dosyası örneği:

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

@showLogin karma '#login' değerine eşitse giriş yapmanızı sağlayan bir iletişim kutusu görüntüleyen bir işlevdir.

[değiştir] Komik yeterli, adres karma vermez size bir menü öğesi tıklarsanız değiştirin. Bu beklenmedik bir durumdur ve varsayılan olayı engelleyen başka bir komut dosyası nedeniyle olabilir. Bu yüzden, bir bağlantıyı tıklamaya yanıt olarak pencere konumunu değiştirmek için başka bir satır eklemek zorunda kaldım:

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

[/Düzenle]

Gezinme menüsü öğesine ek komut dosyası eklemek için function.php dosyasını kullanabilirsiniz.

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