안녕하세요~^^

우커머스 상품에 KBoard 게시판 연결하기에서 2번 내용에 설명되어 있는

woocommerce_product_tabs 필터 대신 woocommerce_after_single_product 액션을 활용하시면

상품 페이지 하단에 KBoard 게시판을 추가하실 수 있습니다.

워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

아래의 코드를 활용해보시겠어요?

add_action('woocommerce_after_single_product', 'my_woocommerce_after_single_product', 10);
function my_woocommerce_after_single_product(){
	global $product;
	
	$board_id = 1; // 새로 만든 게시판의 ID값으로 수정해주세요.
	$iframe_id = uniqid();
	$product_id = $product->get_id();
	
	$url = new KBUrl();
	$_SESSION['kboard_board_id'] = $board_id;
	
	echo '<iframe id="kboard-iframe-' . $iframe_id . '" class="kboard-iframe kboard-iframe-' . $board_id . '" src="' . $url->set('kboard_id', $board_id)->set('category1', $product_id)->set('iframe_id', $iframe_id)->toString() . '" style="width:100%" scrolling="no" frameborder="0"></iframe>';
}

위의 코드에서 $board_id = '1' 부분은 실제 게시판 id로 적용해주세요.

2번을 제외한 다른 순서들은 블로그에 안내되어 있는 내용대로 적용해보세요.

고맙습니다.

답변 감사합니다.
작동 잘하네요. 감사합니다.

몇가지 추가질문이있어서요.

1) 현재 동일페이지에 두개의 게시판을 설치하려합니다.
그러니까 
board_id = 1 을 설치하고 추가적으로 board_id = 2를 설치하려합니다.
이럴경우 php 수정을 어떤식으로 해야하는지 궁금합니다.ㅋ

일반적으로 쇼핑몰에서 보면
상품후기 게시판 하단에 상품문의 게시판이 같이 존재하는것과 같은 모양입니다.
몇가지 시도를 해봤는데 계속 에러가나서 문의드립니다.

2) 출력되는 게시판의 너비 사이즈를 조절하고싶습니다.

예를들어 웹에서는 너비 80%로 중앙에 위치하고,
모바일에서는 너비 100%로 설정.
이런식으로는 가능할까요?
숏코드가 지원되면 간단히 되는데 소스코드를 수정하는거라 초보인 저에게는 많이 버겁네요.

그럼 답변 부탁드리겠습니다.

감사합니다.

안녕하세요.

게시판을 여러 개 추가하는 건

기존 코드 대신 아래의 코드를 활용해보세요.

add_action('woocommerce_after_single_product', 'my_woocommerce_after_single_product', 10);
function my_woocommerce_after_single_product(){
	global $product;
	
	$board_id = 1; // 새로 만든 게시판의 ID값으로 수정해주세요.
	$iframe_id = uniqid();
	$product_id = $product->get_id();
	
	$url = new KBUrl();
	$_SESSION['kboard_board_id'] = $board_id;
	
	echo '<div class="kboard-iframe-wrap"><iframe id="kboard-iframe-' . $iframe_id . '" class="kboard-iframe kboard-iframe-' . $board_id . '" src="' . $url->set('kboard_id', $board_id)->set('category1', $product_id)->set('iframe_id', $iframe_id)->toString() . '" style="width: 100%;" scrolling="no" frameborder="0"></iframe></div>';
	
	$board_id = 2; // 새로 만든 게시판의 ID값으로 수정해주세요.
	$iframe_id = uniqid();
	$url = new KBUrl();
	$_SESSION['kboard_board_id'] = $board_id;
	
	echo '<div class="kboard-iframe-wrap"><iframe id="kboard-iframe-' . $iframe_id . '" class="kboard-iframe kboard-iframe-' . $board_id . '" src="' . $url->set('kboard_id', $board_id)->set('category1', $product_id)->set('iframe_id', $iframe_id)->toString() . '" style="width: 100%;" scrolling="no" frameborder="0"></iframe></div>';
}

PC에서는 너비 80% 가운데 정렬하고 모바일에서는 100%로 표시하시려면

아래의 CSS 코드를 활용해보세요.

.kboard-iframe-wrap { margin: 0 auto; width: 80%; }

@media screen and (max-width: 600px) {
	.kboard-iframe-wrap { width: 100%; }
}

워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에 코드를 추가해보세요.

고맙습니다.

답변 감사합니다.

답변주실걸로 적용해보니 각 상품페이지에 게시판이 독립적으로 작동을 합니다.

그런데 두번쨰 답변인 출력되는 게시판의 사이즈는 CSS를 적용을 해봐도 변동없이 일괄적으로 100%로 출력됩니다.

다른 문제가 있는건가요?

안녕하세요.

CSS 코드 수정 후에는 반드시 브라우저 캐시를 비우신 후에 확인해주세요.

크롬 브라우저에서 강력 새로고침 단축키는 Ctrl + Shift + R 입니다.

그래도 해결되지 않으신다면

비회원으로도 확인 가능한 페이지 주소 알려주시겠어요?

고맙습니다.