특정 카테고리 추출

안녕하세요 워드프레스로 웹사이트를 간간히 만들고 있는 프리랜서입니다.

http://www.samsung.com/sec/

삼성전자처럼 카테고리 클릭시 슬라이드로 부드럽게 이동을 원합니다. (메인에서만)

 

제 생각은

각 카테고리를 슬라이드나 탭형식으로 나눈 후

php 코드로 해당 카테고리만 출력되게 하여 5~6개의 카테고리를 출력하려고 합니다.

 

제가 참고한 내용입니다.

-----------------------------------------------------------------------------------

하나의 게시판 숏코드(예:[kboard id=1])를 여러 페이지에 삽입하시고 주소에 카테고리 정보를 추가해서 접근하시면 될 듯합니다.

domain.com/aaa_board?category1=유체꽃축제
domain.com/bbb_board?category1=부산골목길축제

혹은 한 페이지에 카테고리 주소를 붙혀서 접근하셔도 됩니다.

domain.com/aaa_board?category1=유체꽃축제
domain.com/aaa_board?category1=부산골목길축제

 

아니면 처음부터 게시판을 각각 만드시고

통합으로 보여줄 게시판 하나를 따로 만드시는 방법도 있습니다.

 

방법은 여러가지 인데 어떻게 하실지 고민해보셔야 할 듯합니다.

-----------------------------------------------------------------------------------

 

일단 이 부분이 가능한지와 안된다고 한다면 어떤 방법이 또 있을지 궁금합니다!

항상 감사드립니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    올려주신 페이지 확인해봤습니다.

    비슷하게 하시려면 자바스크립트(혹은 jQuery)로 만드셔야 할 듯합니다.

    게시판에서 카테고리별로 게시글을 가져오는게 아니라,

    최초 모든 게시글을 불러온 다음,

    선택된 카테고리에 해당하는 게시글만 보여지도록 자바스크립트 프로그램을 만드셔야겠습니다.

    전문 개발자가 아니라면 쉽지 않은 작업이 될 듯합니다.

    고맙습니다.

  • 추가로 mw600, mw800 등의 클래스 추가가 문제가 된다면

    FTP로 접속해서 /wp-content/plugins/kboard/skin/pure-gallery/list.js 파일에

    아래의 코드를 찾아서 주석 혹은 삭제해보시겠어요?

    jQuery(window).resize(function(){
    	kboard_pure_gallery_list_layout();
    });
    
    function kboard_pure_gallery_list_layout(){
    	jQuery('.kboard-pure-gallery-list').each(function(){
    		var parent = jQuery(this).parent('#kboard-pure-gallery-list');
    		var width = jQuery(parent).width();
    		if(width > 1400){
    			jQuery(parent).removeClass('mw1400');
    			jQuery(parent).removeClass('mw1200');
    			jQuery(parent).removeClass('mw1000');
    			jQuery(parent).removeClass('mw800');
    			jQuery(parent).removeClass('mw600');
    		}
    		else if(width > 1200){
    			jQuery(parent).addClass('mw1400');
    			jQuery(parent).removeClass('mw1200');
    			jQuery(parent).removeClass('mw1000');
    			jQuery(parent).removeClass('mw800');
    			jQuery(parent).removeClass('mw600');
    		}
    		else if(width > 1000){
    			jQuery(parent).removeClass('mw1400');
    			jQuery(parent).addClass('mw1200');
    			jQuery(parent).removeClass('mw1000');
    			jQuery(parent).removeClass('mw800');
    			jQuery(parent).removeClass('mw600');
    		}
    		
    		else if(width > 800){
    			jQuery(parent).removeClass('mw1400');
    			jQuery(parent).removeClass('mw1200');
    			jQuery(parent).addClass('mw1000');
    			jQuery(parent).removeClass('mw800');
    			jQuery(parent).removeClass('mw600');
    		}
    		else if(width > 600){
    			jQuery(parent).removeClass('mw1400');
    			jQuery(parent).removeClass('mw1200');
    			jQuery(parent).removeClass('mw1000');
    			jQuery(parent).addClass('mw800');
    			jQuery(parent).removeClass('mw600');
    		}
    		else{
    			jQuery(parent).removeClass('mw1400');
    			jQuery(parent).removeClass('mw1200');
    			jQuery(parent).removeClass('mw1000');
    			jQuery(parent).removeClass('mw800');
    			jQuery(parent).addClass('mw600');
    		}
    		var item_width = jQuery('.kboard-list-item', this).width();
    		jQuery('.kboard-list-item .kboard-list-thumbnail', this).css({'height':item_width+'px'});
    	});
    }

     

    /wp-content/plugins/kboard/skin/pure-gallery/style.css 파일에

    아래의 코드도 주석 혹은 삭제해보시고 다시 테스트해보시겠어요?

    #kboard-pure-gallery-list.mw1400 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 24%; }
    #kboard-pure-gallery-list.mw1200 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 24%; }
    #kboard-pure-gallery-list.mw1000 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 32.3333333333%; }
    #kboard-pure-gallery-list.mw800 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 49%; }
    #kboard-pure-gallery-list.mw600 .kboard-control { margin: 0; }
    #kboard-pure-gallery-list.mw600 .kboard-pure-gallery-list { margin: 0; }
    #kboard-pure-gallery-list.mw600 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 49%; }

    고맙습니다.

  • 아마 테마에서 건드는건 아닌것같습니댜

     

    스와이프 슬라이드 js를 삭제하고 테스트해보니 첫번째 height값이 320정도에서 288로 줄어듬을 확인하였습니다.

     

    k보드오류 해결에대한 답변이 많으면 많을수록 좋으니

    계속테스트하여 답이생기면 답글로 남기겠습니다.

    감사합니다.

  • 안녕하세요.

    어떤 이유인지는 모르겠지만 두 번째 카테고리의 kboard-list-thumbnail class의 div 태그에

    height 값이 49px로 설정되어있습니다.

    테마 쪽에서 스크립트로 style을 추가하고 있는 듯합니다.

    테마에서 스크립트로 과도하게 레이아웃에 관여하고 있는 경우라면 도움을 드리기 어려울 수도 있습니다.

    고맙습니다.

  • 에고 수정중에 있었습니다

    다시 카테고리 만들어뒀습니다.

     

    첫번째를 제외하고는 두번째부터 이상하게 나오는데요,

    두번째부터는 스크롤을 움직여야 페이드효과가 나오며 보일때도 있습니다.

     

    홈페이지 사이즈를 조금씩 줄이면 카테고리 2,3도 나오긴하지만 카테고리1,2,3 의 크기가 달라집니다.

  • 안녕하세요~^^

    현재 페이지를 수정 중이신지 카테고리가 보이지 않네요.

    3번에 말씀하신 것처럼 한 페이지에 2개의 숏코드를 추가할 수 있습니다.

    워드프레스 관리자 -> 페이지 -> 새 페이지 추가 페이지에서

    제목을 입력하시고 에디터에

    아래의 숏코드를 입력해보시겠어요?

    [kboard_latest id="1" url="http://pedrail.cafe24.com/test/" rpp="5" category1="중역용가구"]
    [kboard_latest id="1" url="http://pedrail.cafe24.com/test/" rpp="5" category1="사무용가구"]

    입력 후에 공개하기 버튼을 누르고 해당 페이지에서 테스트해보시겠어요?

    고맙습니다.

  •   <div id="Executive" class="Product">
    	<?php echo do_shortcode('[kboard_latest id="1" url="http://pedrail.cafe24.com/test/" rpp="5" category1="# 중역용가구"]'); ?>
      </div>

    이런식으로 탭속에 k보드 숏코드를 넣었는데요.

     

    1.

    첫번째 탭은 적용이 잘 되는데 두번째 탭부터 css가 깨져서 나옵니다 원인은 class="mw600"이것때문인데요

    아무래도 width값을 적게 인식하는것 같습니다.

    하지만 모든 탭이 동일적용이라 그런일은 없을거같은데.. 제실력이 부족한지 제대로 수정이 안되네요..

     

    2.

    요소검사를 해보면 li에 width값이 엘리먼트 속성으로 들어가있습니다 이부분은 수정이 불가능한가요?

    엘리먼트 속성이 안들어갔으면 합니다.

     

    3.아니면 혹시 한페이지 안에

    <?php echo do_shortcode('[kboard_latest id="1" url="http://pedrail.cafe24.com/test/" rpp="5" category1="# 중역용가구"]'); ?>

    <?php echo do_shortcode('[kboard_latest id="1" url="http://pedrail.cafe24.com/test/" rpp="5" category1="# 사무용가구"]'); ?>

    이렇게 넣을수는 없는건가요?

     

    홈페이지는 pedrail.cafe24.com 입니다.

  • latest.php 파일도 list.php 파일에서처럼 코드를 만들어 사용할 수 있습니다.

    다만 게시판 페이지로 이동되어야 하기 때문에 <a> 태그에 삽입되는 링크 주소만 달라지게 되니 이 부분만 확인하시면 됩니다.

    고맙습니다.

  • 아하 이해했습니다.

    스크립트 실력이 떨어져 php로 만든방법을 구상해보았는데 

    일단 하나의게시판을 서버에서 전부 불러온 후

    값들 전부를 배열로 저장하여

    <?php echo $tmp['caterogy1'] ?>

    <?php echo $tmp['caterogy2'] ?>

    <?php echo $tmp['caterogy3'] ?>

    이런식으로 슬라이딩 안에 끼워넣고 돌리면 되겠네요!

    물론 게시판 안쪽에서도 작업을 해야 할것이고..

    추가로 본 게시판에서는 적용되지않게 하려면 최신글.php를

    만지는 쪽으로 하면 되겠죠?!

     

    최신글.php쪽은

    html과 echo만 잘 이용하면 원래 게시판처럼도 만들 수 있는것인지도 궁금합니다.

  • 감사합니다.

    js파일은 이미 테스트해보았지만 케이보드 문제는 아니었습니다.

    임시방편으로 탭을 css만으로 다시 제작하여보니 플러그인js와 탭js의 충돌이었던거 같습니다.

    다만 첫제품은 페이드인이 잘 적용되지만 두번째 카테고리부터는 스크롤을 내려야 제품이 보이게되는 현상이 있습니다.

    jQuery('.kboard-pure-gallery-list .kboard-list-item').kboardPureGalleryViewport(function(px){
    			if(px && !jQuery(this).hasClass('animation-fadein')){
    				jQuery(this).addClass('animation-fadein');

    이부분에서 수정하면 해결이 가능한 부분일까요?

    굳이 페이드인이 적용되지 않아도 괜찮습니다

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기