워드프레스 차일드테마에 대한 기본적인 부분은 구글 검색 등으로 쉽게 찾으실 수 있습니다.


저는 검색으로 쉽게 찾아지지 않는 부분을 이 블로그에 설명하고자 합니다.




1. 워드프레스 차일드테마의 CSS 적용방법


크게 2가지가 있는데 다음과 같습니다.


1-(1) CSS 속성을 import


@import url("../twentyeleven/style.css");


와 같은 방법으로 style.css 파일에 속성을 import하여 넣는 것을 말합니다.


1-(2) function.php 파일을 변경


function theme_enqueue_styles() {                            

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );                            

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );     


function.php에 위와 같은 옵션을 집어넣어 style.css를 불러온 것과 같은 효과를 내는 것을 말합니다.



2. 워드프레스 차일드테마의 JS 적용방법 


일반적으로 이 방법을 사용하면 동작하지만, 동작하지 않는 경우도 생깁니다.


function my_scripts_method() {

wp_enqueue_script( 'child-style', get_stylesheet_directory_uri() . '/js/menutoggle.js', array( 'jquery' ), '20150706', 'true' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );


동작하지 않는 경우는, 저의 경우에는 get_stylesheet_directory_uri() 함수가 Parents 테마를 가리키면서 잘못 작동할 때였습니다.


이럴 때에는 다음과 같은 속성을 추가시켜 줍니다.


function my_scripts_method() {

wp_enqueue_script( 'child-style', get_stylesheet_directory_uri() . '/../child24' . '/js/menutoggle.js', array( 'jquery' ), '20150706', 'true' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );


저의 경우 차일드 테마의 폴더 이름이 child24였기 때문에 위와 같이 추가한 것이고, 폴더 이름이 다르다면 다른 이름으로 지정해야 할 것입니다. 위의 동작 방법은 php 문법상 유효합니다.




3. 워드프레스 테마에서 jQuery를 동작시킬 때 주의할 점


워드프레스 테마에서는 jQuery 를 흔히 사용하는 $(document).ready()와 같은 방법으로 동작시킬 수 없습니다.


따라서 아래와 같은 방법을 사용하셔야 합니다.


(function ($) {

[실제 동작시킬 DOM 구문]

})(jQuery);





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바