어드민 화면 정리를 위해 Adminimize, Admin Menu Editor로 메뉴들을 권한에 따라 노출하는 것을 컨트롤한 다음에도 화면에는 상당부분 불필요 요소들이 존재합니다. 이를 해결하기 위해 플러그인으로 어드민 화면에 CSS를 적용(Add Admin CSS 이용)해서 처리를 했었는데, IE에서는 CSS로 제어 불가한 요소가 일부 있어서 아쉬움이 있었습니다. 이번에 이 부분도 해결하고자 찾아보니… 자바스크립트를 살짝 사용을 해 주면 이 부분도 컨트롤이 가능하네요. (필요해서 찾아보면 안 되는 게 없는 WP;)
▽ [ 아래 내용을 자식테마(child-theme), functions.php 파일에 추가 ]
/* 내가 작성한 자바스크립트, 스타일 적용 -------------------------------- */
function my_custom_script_style() {
// 워드프레스에 파일 위치 말해주기
wp_register_script( 'my_script', get_stylesheet_directory_uri() . '/js/myscript.js', array('jquery'), '1', true); // true = 푸터에서 적용, false = 헤더에서 적용
wp_register_style( 'my_style', get_stylesheet_directory_uri() . '/css/mystyle.css', array(), '2', 'all'); // get_stylesheet_directory_uri() - 현재 테마의 위치(url)를 자동 반환
// 실제 사용 여부 결정 ( 컨디셔널 테그 이용하면 특정 페이지에만 적용할 수도 있음)
wp_enqueue_script( 'my_script' );
wp_enqueue_style( 'my_style' );
}
add_action('admin_enqueue_scripts', 'my_custom_script_style');
// 만약, 외부 사이트에 적용할 거면? 윗줄에서 'admin_enqueue_scripts' 대신 'wp_enqueue_scripts' 로 변경
▽ myscript.js 파일 내에서는 아래와 같이… (‘성공!’이라는 알림창이 나오면 적용 성공)
// 1. 푸터에서 동작시킬 때
(function($) {
alert('성공!');
})( jQuery );
// 2. 헤더에서 동작시킬 때
jQuery(document).ready(function($) {
alert('성공!');
})( jQuery );
위 방법을 이용하여 얻은 점.
– 기존 ‘Add Admin CSS’ 플러그인을 이용한 스타일 적용 시 느꼈던 편집 화면 뷰 상의 부족함 해소
– 익스플로러에서 대처 불가한 요소들(옵션 메뉴)이 존재했던 문제를 해결
– jQuery의 선택자 사용으로 아이디,클래스 없어도 일부 제어 가능