[WPTuts] Tab을 이용한 Shortcode를 알아보자 Part 2

안녕하세요.

제가 사는곳이 아무래도 너무 덥고 건조하다 보니깐 잠을 청하기가 점점 힘들어지네요 ㅠ

왠지 잠을 못잘때마다 하나씩 글을 올리는거 같아요 ㅎ

저번 Part 1 에서는 HTML, CSS, jQuery를 이용하여 탭을 만들어 보았는데요. 이번 Part 2 에서는 Part 1 에 첨부되어 있는 파일을

쪼개서 사용하는 방법을 알아 보겠습니다. 간단하게 방법을 설명해드리자면

 

1. CSS를 style.css에 복사해서 넣는다.

2. jQuery는 js 파일로 저장을 하여 header.php에 링크를 걸어준다.

3. HTML은 page나 post에 넣어준다.

 

이번 튜토리얼을 잘 이해하시고 응용하신다면 다른 멋진 jQuery 플러그인들도 동일한 방법으로 적용이 가능하답니다.

 

그럼 1.2.3 번 순서대로 가볼께요.

 

1. CSS 코드 style.css 복사하기.

 

Part 1 에서 CSS코드 기억하시죠? 그 코드들을 Appearance-> Editor-> style.css 를 열어서 붙여넣습니다. 아, 저는 기본테마인

 

Twenty Eleven을 사용하여 진행하고 있습니다. 뭐.. 그냥 그렇다구요 -_-; 그닥 중요한건 아니에요..

j1

 

2. jQuery 코드를 js 파일로 만들어서 header.php에 링크 걸어주기.

 

에디터로 jQuery 소스코드만 따로 뽑아서 js파일로 만들어 줍니다. 저는 tab.js라고 이름을 지어주었어요 :)

 

j2

 

그리고 FTP를 열어서 Twenty Eleven 아래 js 폴더에 만들어진 tab.js 파일을 업로드 시켜 줍니다. js 폴더 없으시면 만들어 주셔요.

j3

 

이제 header.php 를 열어서 링크를 걸어 줄거에요. 다시한번 말씀드리지만 jQuery는 library 라서 사용하기 위해서는 꼭 불러

 

주어야 합니다. 안그럼 삐져서 소스코드가 있어도 쳐다도 안본답니다. :(

 

header.php 에는

<script src=”<?php echo get_template_directory_uri(); ?>/js/tab.js” type=”text/javascript”></script>

<script src=”http://code.jquery.com/jquery-latest.js”></script>

 

이 두 스크립트 링크를 head 태그 안에 넣어 주세요. 왜 꼭 저기다 넣어야 해요? 라고 물으시는 분들이 가끔 있으신데..

 

저는 그냥 good follower 에요 -_-; 그냥 따라쟁이일뿐.. ㅎ

 

<?php echo get_template_directory_uri(); ?> 이 부분을 설명 드리자면 echo는 php 용어로 화면에 텍스트나 함수를 보여주는

 

역할을 해요. 예를 들면 echo “유후~”; 라고 코드를 넣으면 웹화면에서는 유후~ 가 보인답니다. 함수를 넣게 되면 해당 함수의

 

실행 결과를 보여주는것이죠. echo get_template_directory_uri(); <- 보시다시피 get_template_directory_uri()라는 워드프레스

 

내장 함수를 뿌려주라는건데요. get_template_directory_uri() 의 실행결과는 테마 폴더 주소를 불러온답니다.

 

j4

 

3. Page나 Post에 HTML 코드 넣기.

 

HTML 코드를 간단하게 붙여 넣어 주시면 되세요. 전 tabs라는 페이지를 만들어서 적용 시켜보았어요.

 

j5

 

자, 그럼 잘 되는지 한번 볼까요?

 

j6

짜잔~! 안돼요 ㅠㅠ…………. 이거 왜 안되는걸까요 흑 아 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

 

글쓰다가 이럴때면 정말 멘붕 제대로죠. 거의 마지막에 와서…..

 

.

.

.

.

.

.

.

.

.

.

 

하.지.만. 우리에겐 구글이 있답니다. 워드프레스에서는요 jQuery를 사용하려면 특별한 function을 사용해 주어야 해요.

 

wp_enqueue_script( ) <- jQuery를 위한 거에요. 이 function을 사용해서 jQuery를 연결시켜줍니다.

 

그래서 header.php 에 아래 두 스크립트 대신에

 

<script src=”<?php echo get_template_directory_uri(); ?>/js/tab.js” type=”text/javascript”></script>

<script src=”http://code.jquery.com/jquery-latest.js”></script>

 

 

이 한 줄을 넣어 줍니다.

<?php wp_enqueue_script( ‘tab‘, get_template_directory_uri() . ‘/js/tab.js’, array( ‘jquery‘ ), null, true ); ?>

 

빨간색은 tab.js에서 확장자 js를 뺀 이름만 적어주고 파란색은 링크를 적어 줍니다. get_template_directory_uri() 뒤에 . 은

 

php에서 쓰이는 것으로 연결자 역할을 합니다. 그래서 함수에서 불러주는 주소값과 바로 뒤의 ‘/js/tab.js’를 연결 시켜주죠.

 

녹색 부분은 워드프레스에 저장되어 있는 jQuery libary 를 로드 시켜주는 역할을 한답니다.

 

그럼…다시 되는지 볼까요? 안되면 어쩌죠 ㅠㅠ

 

j7

 

유후~ 탭이 완성 되었어요.

 

오늘은 여기까지에요.

 

참 쉽…죠? -_-;

 

아, 저기 탭 보니깐 줄이 생겨있네요. 아래 CSS 찾아서 내용 넣어주시거나 귀찮으시면 그냥 저 둘 그대로 복사하셔서 맨아래 넣어

 

주셔도 됩니다.

 

ul.tabs .tab-active a {

position: relative;

z-index: 20;

}

.tab_container {
z-index: 10;
}

 저 역시 사람인지라… 흑……실수 많이해요…

 

다음 시간에는 드디어 Shortcode 코드 작성과 함께 적용시켜보는 시간을 갖도록하겠습니다.

 

오늘도 열공이에요~.

 

출처 : 워드프레스홈페이지 네이버카페  JonJon님의 글 ( http://cafe.naver.com/wphome/7058)

 

2013년 2월 9일 / TIP 노하우, 테마&플러그인

Share the Post

About the Author

Comments

No comment yet.


Warning: strpos() expects parameter 1 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 190

Warning: preg_match() expects parameter 2 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 201
Leave a Reply

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

장바구니

  • 장바구니에 상품이 없습니다.

로그인