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

안녕하세요.

매번 미루고 미루다가 잠이 너무 안와서 생각난김에 올려봅니다.

워드프레스 사용하면서 탭 기능이 있으면 얼마나 좋을까.. 하고 생각하시는 분들 있으실거에요. (없으시면 뭐… ㅠ)

유료테마에는 당연히 들어있지만 무료테마에는 없는 탭기능… 근데 요즘에는 무료테마에도 있더라구요 ㅎ

워드프레스 Shortcode 설명서: http://codex.wordpress.org/Shortcode_API (영문이에요 +_+)

 

Shortcode라는게 어떤것이냐! 직역을 하자면 “짧은 코드”. 맞아요 짧은 코드에요. 초보자 입장에서는 php 코딩같은것은 정말

 

말할것도 없이 눈이 @_@ 이렇게 되기 마련이죠. 하지만 !! Shortcode를 사용하는 방법만 알게 된다면 페이지나 포스트에 바로

 

바로 적용 가능하니까 긴 프로그래밍 보다는 훨씬 간단하답니다.

 

이 튜토리얼은 jQuery 탭를 이용하여 Shortcode를 사용하는 방법과 만드는 방법을 알아 볼거에요. 그 전에 할일은 HTML ,

 

CSS 그리고 jQuery, 이 3가지를 알아두셔야 해요. 사전 지식이 없으시다면…..그냥 복사복사복사…복사…. 그리고 붙이기!

 

아.. 게시판 에디터에 html 코딩이 가능해서 눌렀는데 스크립트는 안되는군요 ㅠ 일단 탭 완성품을 볼까요?

 

shot1

순서는 HTML ul, li 태그로 탭 제목들을 만들고, 그 아래에 div를 이용하여 내용을 넣어줍니다. 그리고 CSS로 옷을 입혀

 

주고난 뒤, jQuery로 기능을 하게 합니다.

 

 

1.  HTML을 살펴 볼까요?

shot2

 

(그림이 잘 안보이시면 클릭해서 보셔요.)

 

HTML을 보시면 첫 div로 tab menu (빨간박스) 와 contents (파란박스)를 감싸고 있어요. id와 class를 사용하여 구분을 지어주 세요.

 

id와 class는 다음에 올 CSS와 jQuery에 사용된답니다. 지금 HTML 코딩 하신걸 화면을 보신다면

shot3

 

이렇게 tab list와 내용들이 다 따로 따로 보인답니다.

 

 

2. CSS로 옷을 입혀 볼께요.

shot4

이 CSS 코드들은 설명하자면 너무 길어지므로 따로 공부하셔요… (절대 귀찮아서 그런거 아니에요 ㅠ) 그래도! 간략하게 설명드리자면

 

#은 id를 .은 class를 가르키며 HTML 태그가 저 id나 class를 갖고 있다면, 그 해당하는 부분을 꾸며 주는 거랍니다.

 

빨간박스는 tab menu를 꾸며주는 부분이에요. 아…지금 보니깐 ul.tabs li a 부분이 중복되어 있네요.(이건 귀찮으니 패스..-_-; )

 

그리고 파란박스는 contents를 꾸며주는 부분입니다.

 

그럼 옷입은 모습을 볼까요? 개인적으론 벗은게 좋지만.. 웹에선 옷입은 모습이 보기 좋답니다 *-_-*

 

shot5

3. 마지막으로 jQuery 코드 !!!!!!!!!!!

shot6

 

설명은 코멘트블럭에 달아놓았습니다. (지극히 “저의” 기준에서 쉽게)

 

이게 jQuery 코드인데요. 요즘은 javascript를 그냥 사용하는것보다 library 인 jQuery를 사용하여 다이나믹하게 하는것이 더욱

 

쉬워 졌답니다. 사용하시려면 jQuery 파일을 불러와야 한답니다.

 

<script src=”http://code.jquery.com/jquery-latest.js”></script> <- 이것을 <head>에 넣어주시면 되겠습니다.

 

jQuery와 영어(음?)공부하시려면 [과장]..WP완소자료에서 게시글을 찾아 보시면 되겠습니다.

 

WP를 더욱 강력하게 해주는 jQuery 를 배워 봅시다 :) http://cafe.naver.com/wphome/5625

 

이제 옷을 입혀 놓은 탭을 걷게 만들어 보겠습니다!!!

 

라고 해봤자 스샷 .. 헤헤

 

shot7

오늘은 여기까지 입니다.

 

참 쉽죠? :)

 

html 파일 첨부해놓았으니 살펴 보시고, 두번째 시간에는 WordPress에 이 코드들을 쪼개서 적용해보는 시간을 갖도록 하겠습니다.

 

열심히 하세요~!

 

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

 

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

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

장바구니

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

로그인