programing

js 스크립트 파일의 WordPress 경로 URL

powerit 2023. 3. 29. 21:57
반응형

js 스크립트 파일의 WordPress 경로 URL

커스텀 스크립트를 추가했습니다.

wp_enqueue_script('functions', get_bloginfo('template_url') . '/js/functions.js', 'search', null, false);

동작은 훌륭합니다만,functions.js다음과 같은 것이 있습니다.

Reset.style.background = "url('../images/searchfield_clear.png') no-repeat top left";

예전에는 이게 잘 먹혔어요. 제가 퍼머링크와 .htaccess로 바뀌기 전까지는요.

폴더 계층은 다음과 같습니다.

themename/js themename/images(이미지와 js 폴더는 이름 폴더에 있습니다.)

/images - . /images - /images - /images

보통 js파일이 있는 곳으로 1레벨 되돌아가야 합니다.

풀 패스를 사용하고 싶지 않습니다.

워드프레스가 javascript 파일에서 올바른 경로를 인식할 수 있는 다른 방법이 있습니까?

지금 나는 내가 무엇을 잘못하고 있는지 혼란스러울 뿐이다.

Wordpress 설명서에 따르면 기능을 사용해야 합니다.php 파일.그러면 헤더에 Javascript 객체가 생성되어 실행 시 스크립트에서 사용할 수 있게 됩니다.

Codex

예:

<?php wp_localize_script('mylib', 'WPURLS', array( 'siteurl' => get_option('siteurl') )); ?>

Javascript에서 이 변수에 액세스하려면 다음과 같이 하십시오.

<script type="text/javascript">
    var url = WPURLS.siteurl;
</script>

템플릿 헤더에 JS 변수를 설정하면 풀 패스의 하드코딩을 피할 수 있습니다.wp_head()템플릿 URL을 유지하며 호출됩니다.다음은 예를 제시하겠습니다.

<script type="text/javascript">
var templateUrl = '<?= get_bloginfo("template_url"); ?>';
</script>

그리고 이 변수를 사용하여 배경을 설정합니다(다른 사람에게 도움이 되는 경우에만 다음 세부 정보를 포함합니다).

Reset.style.background = " url('"+templateUrl+"/images/searchfield_clear.png') ";
    wp_register_script('custom-js',WP_PLUGIN_URL.'/PLUGIN_NAME/js/custom.js',array(),NULL,true);
    wp_enqueue_script('custom-js');

    $wnm_custom = array( 'template_url' => get_bloginfo('template_url') );
    wp_localize_script( 'custom-js', 'wnm_custom', $wnm_custom );

그리고 관습에 따라.js

alert(wnm_custom.template_url);

관리 대시보드에서 javascript 파일을 로드하면 이 javascript 함수는 WordPress 설치 루트를 제공합니다.관리 대시보드에서 Ajax 요청을 해야 하는 플러그인을 구축할 때 많이 사용합니다.

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}

Genesis 프레임워크로 작업하는 사용자용.

자녀 테마에 다음 추가functions.php

add_action( 'genesis_before', 'script_urls' );

function script_urls() {
?>
    <script type="text/javascript">
     var stylesheetDir = '<?= get_bloginfo("stylesheet_directory"); ?>';
    </script>
<?php
}

그리고 이 변수를 사용하여 스크립트에서 상대 URL을 설정합니다.예를 들어 다음과 같습니다.

Reset.style.background = " url('"+stylesheetDir+"/images/searchfield_clear.png') ";

언급URL : https://stackoverflow.com/questions/5221630/wordpress-path-url-in-js-script-file

반응형