wordpress에서 로고 크기 변경 스크립트 실행

Question

웹 사이트에서 맞춤 로고 축소를 구현하려고하지만 잘못된 것을하고 실수를 찾을 수 없습니다. 어쩌면 당신은 작은 조언을 줄 수 있습니다.

는 이미 한 그래서 :있는 style.css, functions.php, 자산 /의 JS/my_shrinker.js와

1.Child 테마를

2. 나는 내-쉬 링커를로드하는 기능을 추가했습니다. 내-shrinker.js에서 스크롤 할 때 functions.php에서 JS는 축소 수행 할 수있는이 코드를

function shrinker() { 
    wp_enqueue_script('my_shrinker', get_stylesheet_directory_uri().'/assets/js/my_shrinker.js', array('jquery'), '1.0.0', true); 
} 
add_action('wp_enqueue_scripts', 'shrinker'); 

을 3.Added

function my_shrinker() { 
window.addEventListener('scroll', function(event){ 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
      shrinkOn = 300, 
      d = document.getElementsByTagName("kad-header-left"); 
     if (distanceY > shrinkOn) { 
      d.className += " shrinkedlogoyo"; 
     } else { 
      d.classList.remove("shrinkedlogoyo"); 
     } 
     }) 
} 

스크립트는이 CSS를 가지고있는 KAD 헤더 왼쪽 DIV에 "shrinkedlogo"클래스를 추가해야합니다

.shrinkedlogoyo { display: block !important; position: absolute !important; left: 8% !important; top: 2px !important; width: 45px !important; height: 45px !important; } 

하지만, 음, 이런 일이되지 않고, 내가 어떤 오류를받지 못했습니다. 너 나에게 좋은 조언을 해줄 수 있니?

웹 사이트 http://arthome17.ru

Answer 1

스크립트 "내-shrinker.js"입니다 제대로 호출되지 않습니다.

http://arthome17.ru/wp-content/themes/virtue_premium/assets/js/my-shrinker.js?ver=1.0.0

는 상위 테마 스크립트를 찾고 그 get_template_directory_uri()의 때문입니다 (404)

를 반환합니다.

대신 자녀 테마로 get_stylesheet_directory_uri()을 사용하십시오.

희망이 있습니다.

편집 이후 콘솔에서 새로운 오류 (구문 에러 :. 실종 (형식 매개 변수)

난 당신이 addClass() 및 removeClass() 속성을 사용하고 구문을 검토하는 것이 좋습니다 전에

RE- 편집

스크립트가 페이지에서 실행되게하려면 다음과 같이 작성해야합니다.

$ = jQuery.noConflict(); 
$(document).ready(function() { 
    window.addEventListener('scroll', function(event){ 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
      shrinkOn = 300; 
     if (distanceY > shrinkOn) { 
      $(".kad-header-left").addClass("shrinkedlogoyo"); 
     } else { 
      $(".kad-header-left").removeClass("shrinkedlogoyo"); 
     } 
    }); 
}); 

(3210)는 작업 스크립트의 jsfiddle 여기

live example를 추가합니다. 행운을 빕니다 !