5-3-3 자바스트립트와 스타일시트 파일 붙여넣기
Font Awesome의 폰트 아이콘과 트위터 부트스트랩을 사용할 것이므로 관련 파일을 자식테마 폴더에 복사해 붙여넣습니다. 우선 Font Awesome의 관련 파일이 있는 폴더인 assets 폴더를 복사하여 붙여넣습니다. 부트스트랩 파일을 두번 내려받았는데 두번째 방법으로 내려받은 파일중 bootstrap.css를 assets/css 폴더에 붙여넣고 bootstrap.js파일은 js폴더에 붙여넣습니다. 그러면 다음과 같이 됩니다. 사용자 정의해서 내려받은 bootstrap.css 파일에는 bootstrap-responsive.css의 파일 내용이 포함돼 있습니다. 폴더 안에서 지금 붙여 넣은 폴더 안에서 파일 외에는 사용하지 않으니 삭제하거나 무시해도 됩니다.
5-3-4 함수를 사용하여 관련 파일 링크하기
이전까지는 스타일시트 파일을 사용할 때 <head>태그 안에 삽입해서 사용했지만 이렇게 하면 많은 자바스크립트와 스타일시트를 사용할 때 중복되거나 충돌이 일어나기도 합니다. 이를 방지하고자 워드프레스는 wp_register_style() 라는 스타일시트를 등록하는 함수(자바스크립트는 wp_register_script())와 wp_enqueue_style()(또는 wp_enqueue_style()) 라는 등록된 스타일시트를 대기시키는 함수를 사용합니다. 앞의 등록 함수는 생략할 수도 있습니다. 기본 형태는 다음과 같습니다.
wp_register_style( 스타일시트 이름, 경로, 의존하는 스타일시트, 버전, 스타일시트 용도)
-스타일시트 이름은 독특하고 가능한한 긴 이름을 사용해야 중복되는 것을 방지할 수 있습니다. -경로는 스타일시트가 있는 폴더를 지정하는 템플릿 태그인 “get_stylesheet_directory_uri()”를 사용하고 추가 경로를 삽입합니다.
-의존하는 스타일시트는 순서상 등록할 스타일시트 이전에 있어야할 스타일 시트입니다.
-버전은 스타일시트 버전이며
-스타일시트 용도는 스크린인지 프린트용인지의 구별입니다.
의존하는 스타일시트와 버전, 스타일시트 용도는 생략해도 됩니다.
그러면 실제 사용될 파일을 functions.php파일에 등록해 보겠습니다. Font Awesome의 스타일시트 파일인 font-awesome.css는 다음과 같이 등록합니다. 테마 폴더를 표시하는 템플릿 태그는 두가지가 있습니다. 부모 테마 폴더를 표시하려면 get_template_directory_uri()를 사용하고 자식 테마 폴더를 표시하려면 get_stylesheet_directory_uri()를 사용합니다.
<?php
function my_styles() {
wp_register_style( 'font-awesome-stylesheet', get_stylesheet_directory_uri() . '/assets/css/font-awesome.css' );
wp_enqueue_style( 'font-awesome-stylesheet' );
}
add_action('wp_enqueue_scripts', 'my_styles');
?>
먼저 php코드 블럭을 만들고 그 안에 함수의 시작인 function을 입력하고 함수 이름인 my_styles()를 입력합니다. 중괄호 안에 함수가 들어갑니다. 주 스타일시트 폴더를 표시하는 템플릿 태그 다음에는 하위 폴더를 입력하는데, 이 둘을 연결시키기 위해서 점( . )을 중간에 넣어줍니다. 그 다음으로 스타일시트를 대기시키는 함수를 사용하여 등록한 스타일시트를 불러옵니다. 다음으로 내 스타일시트를 작동시키기 위한 함수인 add_action() 함수를 사용합니다. 매개변수의 순서를 잘 넣어야합니다. 등록함수를 생략할 수 있다고 했으므로 다음과 같이 할 수도 있습니다. 'my_styles'에 스타일이 들어갔지만 단순한 이름이므로 함수 안에는 스타일시트뿐만 아니라 자바스크립트도 등록할 수 있습니다.
<?php
function my_styles() {
wp_enqueue_style( 'font-awesome-stylesheet', get_stylesheet_directory_uri() . '/assets/css/font-awesome.css' );
}
add_action('wp_enqueue_scripts', 'my_styles');
?>
위와같이 입력하고 저장한 다음 웹브라우저에서 요소검사를 하여 Resources탭을 클릭합니다.
좌측의 Frames폴더 아래의 세모 아이콘을 클릭하면 트리가 펼쳐집니다. stylesheets폴더에 font-awesome.css가 있는지 확인합니다. 파일 이름을 클릭하면 우측에 이 스타일시트의 내용이 나타납니다.
이번에는 폰트 아이콘이 IE7에서 작동할 수 있도록하는 핵을 그 다음줄에 삽입합니다.
wp_register_style( 'font-awesome-ie7-stylesheet', get_stylesheet_directory_uri() . '/assets/css/font-awesome-ie7.css' );
wp_enqueue_style( 'font-awesome-ie7-stylesheet' );
그 다음으로 부트스트랩 자바스크립트 파일을 등록합니다. 자바스크립트의 등록 형태는 다음과 같습니다. 다른 부분은 스타일시트와 같으나 함수이름이 wp_register_script로 바뀌었고 마지막은 자바스크립트를 푸터에 삽입할 것인지 선택할 수 있습니다. 생략하면 <head>에 삽입되며 푸터에 삽입하려면 true를 입력합니다. 이것만 입력해서는 안되고 앞에 버전의 자리를 확보해줘야하는데 버전이 없으면 따옴표만 삽입합니다.
wp_register_script( 스크립트 이름, 경로, 의존파일, 버전, 푸터삽입여부 );
실제 사용할 부트스트랩 자바스크립트 파일을 이번에는 등록함수를 사용하지 않고 대기함수만 사용해 등록해 보겠습니다. 부트스트랩 자바스크립트는 제이쿼리 라이브러리를 사용하므로 워드프레스에 이미 설치되어 있는 제이쿼리를 의존파일로 추가해줍니다.
wp_enqueue_script( 'bootstrap-script', get_stylesheet_directory_uri() . '/assets/js/bootstrap.js', array('jquery') );
자바스크립트를 <head>부분에 삽입하지 않고 footer에 삽입하려면 마지막에 “true”를 추가하면 됩니다.
wp_enqueue_script( 'bootstrap-script', get_stylesheet_directory_uri() . '/assets/js/bootstrap.js', array('jquery'), '', true );
이렇게 하면 제이쿼리 라이브러리도 함께 불러오게 됩니다. 이런 식으로 추가되는 스타일시트와 자바스크립트마다 등록해주면 됩니다. 여기까지의 코드는 다음과 같습니다. 추가할 때마다 요소검사를 하여 파일 이름이 나타나는지 확인하세요.
<?php
function my_styles() {
wp_register_style( 'font-awesome-stylesheet', get_stylesheet_directory_uri() . '/assets/css/font-awesome.css' );
wp_enqueue_style( 'font-awesome-stylesheet' );
wp_register_style( 'font-awesome-ie7-stylesheet', get_stylesheet_directory_uri() . '/assets/css/font-awesome-ie7.css' );
wp_enqueue_style( 'font-awesome-ie7-stylesheet' );
wp_enqueue_script( 'bootstrap-script', get_stylesheet_directory_uri() . '/assets/js/bootstrap.js', array('jquery') );
}
add_action('wp_enqueue_scripts', 'my_styles');
?>
부트스트랩용 스타일시트는 위처럼 삽입해주면 각종 스크립트와 스타일시트를 불러오는 템플릿 태그인 <?php wp_head(); ?>에 의해 </head>태그 바로 위에 나타납니다. 그런데 테마를 수정하기 위해 필요한 주 스타일시트인 style.css는 <link>태그에 의해 부트스트랩 스타일시트보다 위에 삽입됩니다. CSS의 캐스캐이딩 논리에 의해 부트스트랩 스타일시트가 주 스타일시트보다 나중에 선언돼서 덮어쓰기를 할 수 없으므로 다른 방법을 사용해야합니다. 요소검사를 해서 HTML 창에서 <head>. . </head>를 열어보면 주스타일시트인 style.css가 먼저 나오고 그 다음에 <?php wp_head(); ?>나 <?php wp_footer(); ?> 템플릿 태그에 의해 함수에 등록한 스타일시트가 나중에 나타납니다.
앱타나에서 style.css 파일의 주석부분이 끝나는 곳에 이전에 삽입한 @import url(../twentyeleven/style.css);를 삭제하고 다음과 같이 부트스트랩 스타일시트를 불러오는 CSS 룰을 사용합니다.
@import url(assets/css/bootstrap.css);
url 다음에 경로와 파일 이름을 입력합니다. 이렇게 하면 이 스타일시트가 먼저 선언이 되고 그 다음부터 새로운 스타일시트를 입력하면 이미 부트스트랩 스타일시트에 의해 적용된 스타일을 덮어쓰기 해서 변경할 수 있습니다. 저장을 하고 웹브라우저에서 블로그 화면을 보면 위 스타일시트에서 선언된 명령이 적용되어 링크가 있는 일부 글자가 다른 색상으로 나타납니다. 이제까지 함수에 의해 등록된 파일과 style.css에서 불러온 파일들이 나타납니다.
