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


Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

Warning: extract() expects parameter 1 to be array, null given in /free/home/topshock/html/wp-content/themes/envision/includes/shortcodes/shortcode.tabs/_shortcode.advanced.tabs.php on line 301

안녕하세요.

어제 글 다 쓰고 탭관련 게시글 읽었는데 Shortcodes Ultimate plugin이 있더라구요. 굉장히 파워풀하더만요 ㅠ

전 언제쯤 저런 플러그인을 만들 실력이 될런지……그저 눈물만 뿜네요 ㅠ

약한 소리는 이 튜토리얼 끝나고 또 하기로 하고! 이번 Part 3 에서는 function.php 안에 Shortcode를 만들어 보는 시간을 갖도록

 

하겠습니다.

http://codex.wordpress.org/Shortcode_API Shortcode 사용 설명서를 보시면 어떻게 프로그래밍을 하고 사용방법이 나와있습니다.

 

하.지.만!! 영어라는거~ 그래서! 제가 제일 잘하는 copy & paste 스킬을 시전할거에요. -_-)=b

 

Shortcode 는 두가지 방법을 보여주고 있는데요.

 

1.

[]만 사용하는 방법.

2.

My Caption

[]와 [/]를 사용하는 방법.

 

어떤 차이냐 라고 물으신다면 대답해주는게 인지상정! (어디서 이런멘트 들었었는데 기억이 가물가물..)

 

차이점은 바로 이거!! function tab( $atts )와 function tab( $atts, $content = null )

 

입니다. 잘 모르시겠다구요? 함수에 $atts 이거 하나만 들이 밀어넣느냐 $atts와 $content = null 이거 두개를 같이

 

들이 밀어넣느냐의 차이에요. 워드프레스 내에 이미 약속이 되어서 저 둘의 문법을 지켜 주게 되면 스마트하게~ 알아서

 

잘 구분해준답니다.

 

이제 실질적인 코딩으로 들어갈거에요. 떨지 마시길 ㄷㄷ;

 

appearance-> editor에서 functions.php 를 열고 맨 아랫줄로 갑니다. 프로그래밍 코딩에서 제일 중요한것중 하나는

 

바로 주석. 즉, 간단한 설명을 넣어 주는거랍니다.  /* 와 */ 를 이용하여 주석을 넣어서 구분을 지어 주시고

1

 

add_shortcode( ‘tabgroup’, ‘tabgroup_func’ );

function tabgroup_func( $atts, $content ){ }

이런 형식으로 ㅎ ㅏㄴ ㅏ.

 

 

add_shortcode( ‘tab’, ‘tab_func’ );

function tab_func( $atts, $content ){ }

이런 형식으로 또 ㅎ ㅏㄴ ㅏ.

 

각각 두개씩 함수와 Shortcode를 등록 시켜 줍니다.

 

add_shortcode() 함수는 Shortcode를 등록 시켜서 사용 가능하게 해주는 함수로써 사용 방법은

 

add_shortcode( ‘Shortcode 이름‘, ‘Shortcode 함수’ ); php 문법으로 function.php에등록,

page나 post에 [Shortcode 이름][/Shortcode 이름] 이와 같이 사용 되겠습니다.

 

 

tabgroup_func와 tab_func 함수안에 위의 그림과 같이 코드를 넣어줍니다.

 

tab_func 함수를 먼저 설명드리자면 title값 그리고 content를 탭 숫자만큼 저장을 해줍니다.

 

예를 들면

    

이렇게 3개의 Shortcode를 tab_func함수가 저장을 하는 것이지요. 이 저장된 값들을 tabgroup_func로 보내서 화면에 뿌려주는

역할을 합니다. 화면에 뿌려주려면 HTML 태그가 있어야겠지요?
1_1

 Part 2 에서 페이지에 들어간 HTML 태그들과 contents 입니다. 이 HTML 태그들을 조각조각 내서 php 코드로 다시 써주는것이죠.

 

<li><a href=”#tab-‘.$id.$tab[‘count’].'”>’.$tab[‘title’].'</a></li>

<div id=”tab-‘.$id.$tab[‘count’].'”>’.do_shortcode( $tab[‘content’] ).'</div>

 

요런 모양으로 말이죠. 여기서 탭 메뉴와 내용을 연결시켜주는 연결 고리가 필요한데요. tab_func 에서 저장된 $tab[‘count’] 가 #tab- 와 합쳐져서 탭 메뉴와 탭 내용을 연결시켜주는 역할을 한답니다. (tab- 바로 뒤에 있는 $id는 나중에…)

 

이해를 돕기 위해 좀더 보충 해드릴게요.

 

 

 

 

title=low (title값이 low일때 $tab[‘count’]값은 1)

<li><a href=”#tab-1″>low</a></li>

<div id=”tab-1″>내용1</div>

 

 

title=middle (title 값이 middle일때 $tab[‘count’] 값은 2)

<li><a href=”#tab-2″>middle</a></li>

<div id=”tab-2″>내용2</div>

 

 

title=high (title 값이 high일때 값은 3)

<li><a href=”#tab-3″>high</a></li>

<div id=”tab-3″>내용3</div>

 

마지막으로 이 내용들을 뿌려주어야 하니 탭메뉴 부분은 ul 태그 li 태그로 마무리를 지어줍니다. (ul 태그와 li 태그는 항상 함께 인거 아시죠?)

 

<ul>’.implode( “n”, $tabs ).'</ul>

 

그리고 탭 내용 역시 div로 마무리를 지어줍니다.

 

<div>’.implode( “n”, $panes ).'</div>’.”n”;

 

implode는 php 함수인데 배열에 있는 값들을 뿌려주는 역할을 하는데, 이 부분은 php를 함수를 검색하여 공부하셔요.

 

자, 여기까지 functions.php 안에 코딩을 넣어주는 부분이였습니다.

 

지금도 이해가 잘 안가신다구요? 네. 프로그래밍을 모르시는 초급자 분들께서는 당연히 이해가 안가실수 있습니다. 설명하는

 

저도 어떻게 해야 할지 모르겠네요 @_@;

 

다음으로 넘어가서 page와 post에 등록, 코딩해준 Shortcode를 넣어 보겠습니다.

 

2

 

tab Shortcode라는 새로운 페이지를 만들어 주고 코드를 넣어 보았습니다.

 

 

[tabgroup]

[/tabgroup]

 

tabgroup으로 묶인것은 하나의 그룹으로써 탭들을 컨트롤 한답니다.
자 그럼 결과를 볼까요?
4
짜잔~! Shortcode를 이용한 탭이 완성 되었습니다. 스크린샷에 보이는 빨간색, 파란색 박스를 보시면 위에 설명한대로 소스코드가
그대로 나타난걸 볼 수 있습니다. ㅈ ㅏ! 여기서 질문 한페이지에 여러 탭 그룹을 넣으려면 어떻게 해야 할까요?
[tabgroup]
[/tabgroup]
[tabgroup]
[/tabgroup]
이렇게 한번 넣어 보겠습니다.
5
첫화면은 잘 나온거 같죠? 하지만….. 클릭을 하여 다른 탭을 열어 봅시다.
6
첫번째 탭은 탭메뉴가 전부 비활성화 되어 있으며 두번째 탭은 내용이 아예 안나오는 문제가 발생하였습니다. 왜 그럴까요?
이유는. tab id가 동일 하기 때문입니다.7

<li><a href=”#tab-‘.$id.$tab[‘count’].'”>’.$tab[‘title’].'</a></li>

<div id=”tab-‘.$id.$tab[‘count’].'”>’.do_shortcode( $tab[‘content’] ).'</div>

 

이 두 코드에 들어있는 $id 기억하시나요? 그래요. 이 $id에 값을 주어서 탭을 구분 지어 줄수 있습니다.

[tabgroup id=height]
[/tabgroup]
[tabgroup id=order]
[/tabgroup]
tabgroup에 id 속성을 부여하고 값을 넣은다음 어떻게 될지 다시 한번 보겠습니다.
7
이번엔 $id 값이 각각 적용이 되었음에도 불구하고 !!! 탭이 정상 작동을 안하네요 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 아놔!
이럴때!! 우리에겐 누가 있다? Google 선생님이 있습니다~!
신속하게 검색을 해서 문제를 찾아내지요 +_+ 검색 결과 Part 1,2 에 사용되어진 jQuery tab 코드는 모든 탭에 영향을 주어서
클릭 한곳의 내용만 보여주게 되어있답니다. 그래서 Vㅔ리 빠른 속도로 tab.js 코드를 바꿔 보아요 ~!
9
그리고 테스트!!! 으아아아아아아아아아 아 아 앙 ㅏ ㅏㅇ ㅏㅇ ㅏㅇ ㅏ!!!!!!!!!!!!
10
우왕ㅋ 성공이에요!! 역시 구글선생님은 우리 모두를 실망시키지 않습니다~!
자, 여기까지가 Part 3 의 Shortcode 코드 등록과 함수 만들기, 그리고 Shortcode를 페이지에 적용해보는 시간 이였습니다.
다들 어떠셨나요?
참 쉽죠? :) 라고 하기엔 저 역시 힘들었네요…… 진짜 생각지도 못한 문제들이 톡톡 튀어나오는게 다음 Part 4 하기가 두렵네요 ㅠㅠ
다음 Part 4 에서는 Category의 Post를 tab에 불러오는 법을 알아 보겠습니다.
모두 따라오시느라 수고하셨어요~
출처 : 워드프레스홈페이지 네이버카페  JonJon님의 글 ( http://cafe.naver.com/wphome/7082)
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

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

장바구니

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

로그인