워드 프레스 메뉴에 자바 스크립트 추가

WordPress 메뉴 항목의 URL 부분에 자바 스크립트를 넣는 방법이 있습니까? 내 사이트에 라이브 채팅 기능이 있으며이 코드를 사이트에 추가하여 라이브 채팅을 열 수있는 링크를 만들어야합니다 (여기에서 제안).

<!-- 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 (모든 항목에 하나 있음)를 찾은 다음 jQuery를 사용하여 해당 ID를 대상으로 지정하십시오.

$("#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를 수신하는 자바 스크립트로 컴파일되는 간단한 커피 스크립트 예제 :

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'

[/편집하다]

nav-menu 항목에 추가 스크립트를 추가하기 위해 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');