간단한 jQuery 스크립트를 WordPress에 추가하려면 어떻게 해야 합니까?
WordPress에서 jQuery를 사용하는 것에 대한 Codex와 블로그 투고를 몇 개 읽었는데 매우 답답합니다.jQuery에 를 로드하는 functions.phpWordPress 경험이 풍부하다고 생각하기 때문에 모든 가이드는 엉망입니다.를 들어하면 jQuery가 로딩된다고 .functions.phpjQuery는 jQuery를 사용합니다.
정확히 어떻게 해야 하죠?구체적으로 어떤 파일에 코드를 추가해야 합니까?WordPress 페이지 하나에 추가하려면 어떻게 해야 하나요?
튜토리얼이 무슨 뜻인지 알겠어요.방법은 다음과 같습니다.
먼저 대본을 작성해야 합니다.테마 폴더에 'js'와 같은 폴더를 만듭니다.javascript 。.js: : your - script . -js 。합니다(jQuery 스크립트는 없습니다<script>.파일의 태그 「」를 지정합니다).
다음으로 jQuery 스크립트(wp-content/temes/your-teme/js/your-script.js)의 예를 나타냅니다.
jQuery(document).ready(function($) {
$('#nav a').last().addClass('last');
})
함수 시작 시 $가 아닌 jQuery를 사용합니다.
제 、 능 、 file니 file file filefile file file file 을 지정합니다.php 파일.사용하실 수 있습니다.wp_enqueue_script()스크립트를 추가하는 동시에 워드프레스에게 jQuery에 의존함을 알릴 수 있습니다.과 같습니다
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'your-script', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
당신의 테마가 wp_head와 wp_footer가 올바른 위치에 있다고 가정하면, 이것은 효과가 있을 것입니다.도움이 더 필요하시면 말씀하세요.
WordPress 질문은 WordPress Answers에서 확인할 수 있습니다.
한참을 검색한 끝에 드디어 최신 워드프레스로 작동하는 것을 발견했다.다음 단계를 수행합니다.
- 테마의 디렉토리를 찾아 사용자 지정 js(이 예에서는 custom_js)의 디렉토리에 폴더를 만듭니다.
- 커스텀 jQuery를 이 디렉토리의 .js 파일에 넣습니다(이 예에서는 jquery_test.js).
커스텀 jQuery .js가 다음과 같이 되어 있는지 확인합니다.
(function($) { $(document).ready(function() { $('.your-class').addClass('do-my-bidding'); }) })(jQuery);테마의 디렉토리로 이동하여 함수를 엽니다.php
다음과 같은 코드를 상단 근처에 추가합니다.
//this goes in functions.php near the top function my_scripts_method() { // register your script location, dependencies and version wp_register_script('custom_script', get_template_directory_uri() . '/custom_js/jquery_test.js', array('jquery'), '1.0' ); // enqueue the script wp_enqueue_script('custom_script'); } add_action('wp_enqueue_scripts', 'my_scripts_method');- 당신의 사이트를 체크하여 그것이 작동하는지 확인하세요!
워드프레스 자녀 테마를 사용하여 테마에 스크립트를 추가하는 경우 get_template_directory_uri 함수를 get_stylesheet_directory_uri로 변경해야 합니다.다음은 예를 제시하겠습니다.
부모 테마:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script(
'parent-theme-script',
get_template_directory_uri() . '/js/your-script.js',
array('jquery')
);
wp_enqueue_script('parent-theme-script');
}
하위 테마:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script(
'child-theme-script',
get_stylesheet_directory_uri() . '/js/your-script.js',
array('jquery')
);
wp_enqueue_script('child-theme-script');
}
get_module_directory_uri : /your-site/wp-content/parent-module
get_stylesheet_directory_uri : /your-site/wp-content/content/child-content
테마 기능에 jQuery나 javascript를 추가할 수 있습니다.php 파일.코드는 다음과 같습니다.
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'your_script_name', // your script unique name
get_template_directory_uri().'/js/your-script.js', //script file location
array('jquery') //lists the scripts upon which your script depends
);
}
상세한 것에 대하여는, 다음의 튜토리얼을 참조해 주세요.http://www.codecanal.com/add-simple-jquery-script-wordpress/
함수를 통해 스크립트를 삽입하는 것 외에 헤더, 바닥글, 템플릿에 링크(링크 릴레이 태그)를 "그냥" 포함할 수 있습니다.경로가 올바른지 확인만 하면 됩니다.이런 것을 사용하는 것이 좋습니다(테마의 디렉토리에 있는 경우).
<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>
이것을 클로징 바디 태그의 바로 앞 또는 적어도 바닥글의 바로 앞에 포함시키는 것이 좋습니다.php includes 또는 이 파일을 끌어오기 위한 몇 가지 다른 방법을 사용할 수도 있습니다.
<script type="javascript"><?php include('your-file.js');?></script>
지금까지 본 솔루션은 javascript 기능을 테마에 추가하는 관점입니다.그러나 OP는 특히 "단일 WordPress 페이지에 대해 정확히 어떻게 추가합니까?"라고 물었습니다.제 Wordpress 블로그에서 javascript를 사용하는 방법처럼 들리는데, 각 게시물마다 javascript 기반의 "위젯"이 다를 수 있습니다.예를 들어, 게시물은 사용자가 변수(슬라이더, 확인란, 텍스트 입력 필드)를 변경하고 결과를 플롯 또는 나열할 수 있습니다.
JavaScript 관점부터:
- JavaScript 함수를 별도의 ".js" 파일에 씁니다.
게시물의 html에 중요한 JavaScript를 포함시킬 생각도 하지 말고 코드를 사용하여 JavaScript 파일을 하나 이상 생성하십시오.
- JavaScript를 게시물의 html과 인터페이스합니다.
JavaScript 위젯이 html 컨트롤 및 필드와 상호 작용하는 경우, JavaScript에서 이러한 요소를 쿼리하고 설정하는 방법 및 UI 요소가 JavaScript 함수를 호출하도록 하는 방법을 이해해야 합니다.다음은 몇 가지 예입니다. 먼저 JavaScript에서:
var val = document.getElementById(“AM_Freq_A_3”).value;
html에서:
<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
- jQuery를 사용하여 JavaScript 위젯의 초기화 함수를 호출합니다.
페이지가 준비되면 JavaScript 위젯을 구성하고 그리는 함수 이름을 사용하여 .js 파일에 추가합니다.
jQuery(document).ready(function( $ ) {
your_init_function();
});
- 투고의 html 코드로 투고에 필요한 스크립트를 로드합니다.
Wordpress 코드 에디터에서는 일반적으로 포스트 말미에 스크립트를 지정합니다.예를 들어, 메인 디렉토리에 스크립트 폴더가 있습니다.그 안에는 공통 자바스크립트가 있는 유틸리티 디렉토리가 있습니다.이 경우, 제 자신의 수학 유틸리티 함수와 flotr2 플로팅 라이브러리의 일부를 공유할 수 있습니다.예를 들어 미디어 매니저를 사용하는 대신 다른 디렉토리에서 포스트 고유의 JavaScript를 날짜 기반 하위 디렉토리와 함께 그룹화하는 것이 더 편리합니다.
<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>
- Enqueue jQuery
Wordpress는 jQuery를 등록하지만, Wordpress에 필요한 정보를 입력하지 않으면 사용할 수 없습니다.그렇지 않으면 jQuery 명령이 실패합니다.이 명령어를 functions.php에 추가하는 방법은 많은 소스로부터 알려지고 있지만 다른 중요한 세부사항을 알고 있다고 가정합니다.
첫째, 테마를 편집하는 것은 좋지 않습니다. 나중에 테마를 업데이트하면 변경 내용이 지워집니다.아이 테마를 만듭니다.방법은 다음과 같습니다.
https://developer.wordpress.org/themes/advanced-topics/child-themes/
아이의 기능.php 파일은 같은 이름의 부모 테마의 파일을 덮어쓰지 않고 추가합니다.child-temes 튜토리얼에서는 부모 및 자녀 style.css 파일을 큐잉하는 방법을 제안합니다.이 함수에 다른 행을 추가하여 jQuery를 큐잉할 수도 있습니다.이게 내 모든 기능이야.php 파일(자테마용):
<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
// styles
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
// posts with js widgets need jquery
wp_enqueue_script('jquery');
}
**#방법 1:**jquery 코드를 다른 js 파일에 넣습니다.
이제 스크립트를 함수에 등록합니다.php 파일.
function add_my_script() {
wp_enqueue_script(
'custom-script', get_template_directory_uri() . '/js/your-script-name.js',
array('jquery')
);
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
이것으로 끝입니다.
하면 스크립트가 이 있습니다.<head>php php php php php php php php php php php php 。따라서 새로운 html 콘텐츠를 작성할 때마다 코드를 반복할 필요가 없습니다.
#방법 2: 페이지 본문 안에 스크립트 코드를 입력합니다.<script>태그. 그러면 기능에 등록하지 않아도 됩니다.
Javascript jquery 。
https://wordpress.org/plugins/custom-javascript-editor/httpswordpress.org/plugins//
jQuery를 사용하는 경우 jquery noconflict 모드를 사용하는 것을 잊지 마십시오.
페이지에 포함할 스크립트를 추가하는 방법에는 많은 튜토리얼과 답변이 있습니다.하지만 제대로 작동하도록 코드를 어떻게 구성하느냐는 것을 찾을 수 없었습니다.이 JQuery 형식에서는 $가 사용되지 않기 때문입니다.
여기 제 코드가 있습니다.이 코드를 템플릿으로 사용할 수 있습니다.
jQuery(document).ready(function( $ ){
$("#btnCalculate").click(function () {
var val1 = $(".visits").val();
var val2 = $(".collection").val();
var val3 = $(".percent").val();
var val4 = $(".expired").val();
var val5 = $(".payer").val();
var val6 = $(".deductible").val();
var result = val1 * (val3 / 100) * 10 * 0.25;
var result2 = val1 * val2 * (val4 / 100) * 0.2;
var result3 = val1 * val2 * (val5 / 100) * 0.2;
var result4 = val1 * val2 * (val6 / 100) * 0.1;
var val7 = $(".pverify").val();
var result5 = result + result2 + result3 + result4 - val7;
var result6 = result5 * 12;
$("#result").val("$" + result);
$("#result2").val("$" + result2);
$("#result3").val("$" + result3);
$("#result4").val("$" + result4);
$("#result5").val("$" + result5);
$("#result6").val("$" + result6);
});
});
답변은 이쪽에서 : https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/
WordPress가 오랫동안 존재해 왔고, 테마나 플러그인에 스크립트를 추가하는 방법은 몇 년 동안 동일했지만, 스크립트를 어떻게 추가해야 하는지에 대해서는 여전히 혼란스러운 부분이 있습니다.그러니 확실히 해두죠
jQuery는 여전히 가장 일반적으로 사용되는 Javascript 프레임워크이므로 간단한 스크립트를 테마나 플러그인에 추가하는 방법을 살펴보겠습니다.
jQuery의 호환성 모드
WordPress에 스크립트를 첨부하기 전에 jQuery의 호환성 모드를 살펴보겠습니다.WordPress는 jQuery 복사본과 함께 사전 패키징되어 제공되므로 코드와 함께 사용해야 합니다.WordPress의 jQuery가 로드되면 호환성 모드를 사용하여 다른 언어 라이브러리와의 충돌을 방지합니다.
요컨대 다른 프로젝트처럼 달러 표시를 직접 사용할 수 없습니다.WordPress용 jQuery를 작성할 때는 대신 jQuery를 사용해야 합니다.아래 코드를 보시면 무슨 뜻인지 알 수 있습니다.
function xyz_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');
"우리는 구글을 가지고 있다" cit.wordpress에서 스크립트를 올바르게 사용하려면 호스트 라이브러리를 추가하십시오.구글처럼
선택한 후 커스텀 스크립트 전에 링크해야 하는 라이브러리: exmpl
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
자기 대본대로 하면
<script type="text/javascript">
$(document).ready(function () {
$('.text_container').addClass("hidden");
});
</script>
함수 내에 스크립트를 추가하는 가장 간단한 방법입니다.wp_enqueue_script를 사용하지 않는 php 파일(테마/자녀 테마)은 다음과 같습니다.
// CREATE WORDPRESS ACTION ON FOOTER
add_action('wp_footer', 'customJsScript');
function customJsScript() {
echo '
<script>
// YOUR JS SCRIPT
jQuery(function(){
console.log("test");
});
</script>
';
}
보시다시피 wp_footer 액션을 사용하여 코드를 주입합니다.
이 방법은 사용 빈도가 높거나 다른 플러그인 등과 '대화'해야 하는 경우에는 적합하지 않을 수 있습니다.하지만 그게 가장 빠른 방법이야!
헤더 안에 Javascript 코드를 직접 넣을 수도 있습니다.php 또는 바닥글.php if는 Word Press 전체에 삽입되는 코드입니다.
WordPress 미리 정의된 함수를 사용하여 WordPress 플러그인에 스크립트 파일을 추가할 수 있습니다.
wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));
WordPress 플러그인에서 jQuery와 CSS를 얼마나 쉽게 구현할 수 있는지 이해할 수 있는 게시물을 참조하십시오.
함수를 통해 스크립트를 삽입하는 것 외에 헤더, 바닥글, 템플릿에 링크(링크 릴레이 태그)를 "그냥" 포함할 수 있습니다.
아니요. WordPress에서 이와 같은 외부 스크립트에 대한 링크만 추가하면 안 됩니다.함수를 통해 큐잉하는 것.php 파일을 사용하면 스크립트가 올바른 순서로 로드됩니다.
큐에 넣지 않으면 스크립트가 올바르게 기술되어 있어도 동작하지 않을 수 있습니다.
스크립트를 다른 파일에 쓸 수 있습니다.그리고 스크립트 이름이 다음과 같이 파일을 큐에 넣습니다.image-ticker.js.
wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true );
대신해서/js/image-ticker.jsjs 파일 경로를 입력해야 합니다.
WordPress에서 웹 사이트에 스크립트를 포함하는 올바른 방법은 다음 기능을 사용하는 것입니다.
wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )
이러한 기능을 후크 내부라고 합니다.wp_enqueue_script.
자세한 내용과 예는 Wordpress에서 wp_register_script & wp_enqueue_script를 사용하여 JS 파일 추가를 확인하시면 됩니다.
예:
function webolute_theme_scripts() {
wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );
여기 있는 다른 모든 답변에 대해 심각한 문제가 있었습니다. 그래서 더 최신 솔루션을 원하는 분들을 위해 추가 사항을 말씀드리겠습니다.
이것은 쇼트 코드를 사용하고 있기 때문에 OP가 요구하는 것은 아니지만, 이것만이 동작할 수 있는 방법이며, 페이지에 쇼트 코드가 포함되어 있는 경우에만 기능을 사용할 수 있는 이점이 있습니다.이것은 사용하지 않는다.wp_enqueue_script()도 아니다add_action()기능들.
코드 스니펫 플러그인을 사용하고 있기 때문에, 기능을 만지작거릴 필요가 없습니다.php 및 새로운 .vp 파일을 만듭니다.
쇼트 코드에서는 다음과 같이 jQuery 함수를 에코합니다.
echo '<script type="text/javascript">
jQuery(document).ready(function($) {
//your jQuery code goes here.
});
</script>';
jquery만 로드하면 되나요?
1) 다른 가이드의 설명과 같이 스크립트를 함수에 등록합니다.php 파일은 다음과 같습니다.
// register scripts
if (!is_admin()) {
// here is an example of loading a custom script in a /scripts/ folder in your theme:
wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
// enqueue these scripts everywhere
wp_enqueue_script('jquery');
wp_enqueue_script('sandbox.common');
}
2) jQuery는 이미 핵심에 있기 때문에 등록할 필요가 없습니다.바닥글에서 wp_footer()가 호출되었는지 확인하십시오.php 및 wp_head()는 header.php(스크립트 태그를 출력하는 위치)에서 호출되며 jQuery는 모든 페이지에 로드됩니다.WordPress로 jQuery를 큐잉하면 "경합 없음" 모드가 되므로 $ 대신 jQuery를 사용해야 합니다.원하는 경우 wp_deregister_script('jquery')를 실행하여 jQuery를 등록 해제하고 재등록할 수 있습니다.
이 플러그인을 요소 또는 https://wordpress.org/plugins/insert-php/와 함께 사용하고 있습니다.
스크립트를 복사하여 붙여넣고 쇼트 코드를 사용하여 호출할 수 있습니다.기능을 편집할 필요가 없습니다.php
언급URL : https://stackoverflow.com/questions/11159860/how-do-i-add-a-simple-jquery-script-to-wordpress
'itsource' 카테고리의 다른 글
| Spring Boot에서 휴지 상태 사투리를 설정하는 방법 (0) | 2023.02.10 |
|---|---|
| JavaScript에서 스크립트 태그로 JSON을 읽는 방법은 무엇입니까? (0) | 2023.02.10 |
| 구텐베르크 CSS 삭제 (0) | 2023.02.10 |
| ASP.NET Core - 'JsonRequestBehavior' 이름이 현재 컨텍스트에 없습니다. (0) | 2023.02.10 |
| Swift에서 사전을 JSON으로 변환 (0) | 2023.02.10 |