kboard 최신글 돌아가게 만들기

안녕하세요.

다름이 아니라 제가 1줄 짜리 최신글 게시판을 만들고 거기에 5개의 최신글이 올라오게 해서 글5개가 자동으로 돌아가게효과를 주어 보여주고 싶은데 예시같은게 있나요?

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

    스킨 파일을 수정해주셔야 할 듯합니다.

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/latest.php 파일의 코드를

    아래의 코드로 교체해보시겠어요?

    <style>
    .notice{width:100%; height:50px; overflow:hidden; background-color:#fff;}
    .rolling{position:relative; width:100%; height:auto;}
    .rolling li{width:100%; height:50px; line-height:50px;}
    </style>
    
    <div class="notice">
    	<ul class="rolling" style="list-style:none; ">
    	<?php while($content = $list->hasNext()):?>
    		<li><a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>"><?php echo $content->title?></a></li>
    	<?php endwhile;?>
    	</ul>
    </div>
    
    <script>
    jQuery(document).ready(function(){
    	var height =  jQuery('.notice').height(); 
    	var num = jQuery('.rolling li').length; 
    	var max = height * num;
    	var move = 0; 
    	function noticeRolling(){
    		move += height; 
    		jQuery('.rolling').animate({'top':-move}, 600, function(){ 
    			if(move >= max){
    				jQuery(this).css("top",0); 
    				move = 0;
    			};
    		});
    	};
    	noticeRollingOff = setInterval(noticeRolling, 2000); 
    });      
    </script>

     

    아래의 링크도 참고해보시겠어요?

    https://www.cosmosfarm.com/threads/document/26220

    고맙습니다.

  • 답변 너무 감사드립니다.

    제공해주신 코드 교체해보았는데

    롤링은 끊김없이 되나,

    1 2 3 4 5 의 게시물이 1 2 3 4 5 1 1 2 2 3 3 4 4 5 5 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4 5 5 5 5  이런식으로

    두배씩 중복되어 노출이됩니다. ㅠㅠ....왜그런건지 잘 모르겠습니다 도와주시면 정말 감사드리겠습니다..

    아 그리고 혹시 최신글 숏코드를 메인 두 영역에 노출시키고 싶은데,

    한 영역의 게시글에만 저 롤링 효과를 적용하고,

    다른 게시글은 일반 최신글 게시판처럼 노출시키고 싶으면 어떻게해야하나요 ㅠ ㅠ~?

  • 안녕하세요.

    저희 쪽 테스트 서버에서는 별 문제없었는데 이상하군요.

    비회원으로도 확인 가능한 페이지 주소 알려주시면 살펴보겠습니다.

     

    최신글 레이아웃을 게시판 별로 다른 레이아웃으로 표시하시려면

    latest.php 파일에 아래의 코드를 활용해보시겠어요?

    <?php if($board->id == '1'):?>
    <!-- 게시판 ID가 1인 게시판일 때만 동작합니다. -->
    <?php else:?>
    <!-- 게시판 ID가 1이 아닌 게시판에서만 동작합니다. -->
    <?php endif?>

    고맙습니다.

  • 안녕하세요.

    올려주신 페이지 주소로 확인해보니 여러 개의 최신글 숏코드를 추가하신 듯합니다.

    이전 댓글에 안내해드린 코드를 여러 개의 최신글 쪽에서 적용하면

    jQuery 코드에서 선택자 충돌이 날 수도 있습니다.

    기존 코드 대신 아래의 코드로 교체해서 확인해보시겠어요?

    <style>
    .notice {width:100%; height:250px; overflow:hidden; background-color:#fff;}
    .rolling {position:relative; width:100%; height:auto;}
    .rolling li {width:100%; height:50px; line-height:50px;}
    </style>
    
    <div class="notice">
    	<ul class="rolling rolling-<?php echo $board->id?>" style="list-style:none; ">
    	<?php while($content = $list->hasNext()):?>
    		<li><a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>"><?php echo $content->title?></a></li>
    	<?php endwhile;?>
    	</ul>
    </div>
    <script>
    jQuery(document).ready(function(){
    	var board_id = '<?php echo $board->id?>';
    	var rolling = function(){
    		setTimeout(function(){
    			jQuery('.rolling-'+board_id+' li:first').animate({marginTop:'-50px'}, 500, function(){
    				jQuery(this).detach().appendTo('.rolling-'+board_id).css({'margin':'0'});
    			});
    			rolling();
    		}, 2000);
    	};
    	rolling();
    });
    </script>

    위의 코드를 적용하시면 게시판 id로 구분합니다.

    고맙습니다.

  • 일단 흝어보았는데.. 한번 해볼 수 있을거 같습니다.
    케이보드.. 정신.. 너무 좋습니다.!!

    워드프레스의 꽃입니다. ^^:

    안되면.. 다른 게시물로 질문 남기겠습니다. 

  • <style> .notice {width:100%; height:250px; overflow:hidden; background-color:#fff;} .rolling {position:relative; width:100%; height:auto;} .rolling li {width:100%; height:50px; line-height:50px;} </style> <div class="notice"> <ul class="rolling rolling-<?php echo $board->id?>" style="list-style:none; "> <?php while($content = $list->hasNext()):?> <li><a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>"><?php echo $content->title?></a></li> <?php endwhile;?> </ul> </div> <script> jQuery(document).ready(function(){ var board_id = '<?php echo $board->id?>'; var rolling = function(){ setTimeout(function(){ jQuery('.rolling-'+board_id+' li:first').animate({marginTop:'-50px'}, 500, function(){ jQuery(this).detach().appendTo('.rolling-'+board_id).css({'margin':'0'}); }); rolling(); }, 2000); }; rolling(); }); </script>

     

    위 소스 그대로 올렸지만.. 

    로테이션마다.. 글이 두번씩,. 세번씩 출력이 됩니다. 

     

  • 댓글을 자세히 보면 답이 있었네요.

    여러개 최신게시물을 올려 충돌이 났었습니다. (특히.. 반복적으로.. 두번씩 겹치는 현상)

    설명대로만 하면 초보라도 가능한 작업입니다.

     

    -

    다만. 케이보드측에서.. 이런 질문유형은.. 깔끔하게 전체적으로 정리하여 주시면 좋을거 같습니다.

    더 많은 분들이 케이보드를 사용하기 바랍니다.

     

     

  • 이 상태에서는 게시글의 링크(타이틀)만 출력되는데

    혹시 다른 시간/카테고리 등의 항목도 함께 출력될 수 있는 방법이 있을까요!?

  • 답변 너무 감사드립니다.

    제공해주신 코드 교체해보았는데

    롤링은 끊김없이 되나,

    1 2 3 4 5 의 게시물이 1 2 3 4 5 1 1 2 2 3 3 4 4 5 5 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4 5 5 5 5  이런식으로

    두배씩 중복되어 노출이됩니다. ㅠㅠ....왜그런건지 잘 모르겠습니다 도와주시면 정말 감사드리겠습니다..

     

  • 안녕하세요~^^

    한 줄이 아닌 여러 줄을 표시하고 올려주신 내용처럼 적용하시려면

    아래의 코드로 교체해서 확인해보시겠어요?

    <style>
    .notice{width:100%; height:250px; overflow:hidden; background-color:#fff;}
    .rolling{position:relative; width:100%; height:auto;}
    .rolling li{width:100%; height:50px; line-height:50px;}
    </style>
    
    <div class="notice">
    	<ul class="rolling" style="list-style:none; ">
    	<?php while($content = $list->hasNext()):?>
    		<li><a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>"><?php echo $content->title?></a></li>
    	<?php endwhile;?>
    	</ul>
    </div>
    
    <script>
    jQuery(document).ready(function(){
    	var rolling = function(){
    		setTimeout(function(){
    			jQuery('.rolling li:first').animate({marginTop:'-50px'}, 500, function(){
    				jQuery(this).detach().appendTo('.rolling').css({'margin':'0'});
    			});
    			rolling();
    		}, 2000);
    	};
    	rolling();
    });
    </script>

    구글에 jquery vertical rolling 키워드로 검색해보시면 더 많은 자료들이 있으니

    참고해보시는 것도 좋을 듯합니다.

    고맙습니다.

  • 알려 주신 방법으로 해보니 잘동작합니다. 감사합니다.

    한가지 더 물어볼까 합니다.

    최신글 숏코드에 url을 게시판 url을 넣었더니 최신글 게시글을 클릭했을때 글로 가지않고 그 게시판 화면으로 나오는데 이부분은 설정 할수있나요?

  • 안녕하세요.

    이전 댓글에 안내해드린 코드를 그대로 적용하신 건지요?

    실제 추가하신 숏코드는 어떻게 되시는지요?

    확인 가능한 페이지 주소도 알려주시겠어요?

    고맙습니다.

  • php 파일에 직접 입력했습니다.

    $out .= do_shortcode('[kboard_latest id="3" url="http://kjh8822.cafe24.com/2019/01/29/%EA%B3%B5%EC%A7%80%EC%82%AC%ED%95%AD/?mod=list&pageid=1&uid=52" rpp="5"]');

    이렇게 입력하였어요.

    http://kjh8822.cafe24.com/

    서브 메뉴 아래에 돌아가는 공지사항입니다.

  • 안녕하세요.

    숏코드를 잘못 입력해주신 듯합니다.

    올려주신 코드 대신 아래의 코드로 교체해서 확인해보시겠어요?

    $out .= do_shortcode('[kboard_latest id="3" url="http://kjh8822.cafe24.com/" rpp="5"]');

    고맙습니다.

  • 알려주신 코드로 변경하였으나 다음과 같이 URL만 보이고 반응이 없습니다.

    http://kjh8822.cafe24.com/?uid=53&mod=document

  • 현재는 처음 올려주신 코드가 적용되어 있는 듯합니다.

    실제 게시판이 설치된 URL로 적용해보시겠어요?

    아래의 코드처럼 적용해보세요.

    $out .= do_shortcode('[kboard_latest id="3" url="http://kjh8822.cafe24.com/2019/01/29/공지사항/" rpp="5"]');

    고맙습니다.

  • 안녕하세요.

     

    한글이 들어간 주소로 했더니 고유주소가 입력되지않는것으로 인식하여, 워드프레스 설정에서 고유주소를 기본으로 변경하니 되었습니다.

    그리고나서 다시 고유주소 원래 사용하던것으로 변경하여도 문제 없이 잘 되네요.

     

    바쁘신데도 답변 주셔서 감사합니다!

  • 안녕하세요.

    위의 양식을 조금 변경하여 

    <style>
    .notice{width:100%; height:200px; overflow:hidden; background-color:#fff;}
    .rolling{position:relative; width:100%; height:auto;}
    .rolling li{width:100%; height:50px; line-height:50px;}
    </style>

    <div class="notice">
        <ul class="rolling" style="list-style:none; ">
        <?php while($content = $list->hasNext()):?>
            <li><a href="<?php echo $url->set('uid', $content->uid)->set('mod', 'document')->toStringWithPath($board_url)?>"><?php echo $content->title?></a>
            <span class="kboard-latest-date"><?php echo $content->getDate()?></span>
            </li>
        <?php endwhile;?>
        </ul>
    </div>

    <script>
    jQuery(document).ready(function(){
        var height =  jQuery('.notice li').height(); 
        var num = jQuery('.rolling li').length; 
        var max = height;
        var move = 0; 
        function noticeRolling(){
            move += height; 
            jQuery('.rolling').animate({'top':-move}, 600, function(){ 
                if(move >= max){
                    jQuery(this).css("top",0); 
                    move = 0;
                };
            });
        };
        
        noticeRollingOff = setInterval(noticeRolling, 2000); 
    });      
    </script>

     

    이런식으로 코드를 넣었는데

    맨마지막 게시글 다음에 처음 게시글이 바로 나오지 않아요.

    만약 1 2 3 4 5 의 게시물이 있다면

    1

    2

    3

    4

    5

    1

    2

    3

    4

    5

    이런식으로 빈 텀이 없이 롤링하고 싶습니다. 도와주세요..

  • 안녕하세요.

    아래의 코드로 게시글 작성일을 표시하실 수 있습니다.

    <?php echo $content->getDate()?>

     

    아래의 코드로 카테고리1을 표시하실 수 있습니다.

    <?php echo $content->category1?>

    카테고리2는 아래의 코드로 표시 가능합니다.

    <?php echo $content->category2?>

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기