KBoard 컨텍트폼 최신글 롤링관련 도움 요청드립니다

KBoard 컨텍트폼으로 간단한 폼을 만들고 폼으로 들어온 문의 글을 메인페이지에 최신글로 불러오기는 성공을 했습니다.
그 다음엔 롤링을 시켜야 하는데 커미니티에서 관련 글을 검색해서 아래 소스를 넣어 봤는데요, 
 

<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>


최신글에서 보여지는 항목 중 'title' 항목(title을 연락처로 설정을 해놨습니다.)만 화면에 나와서 롤링되고 나머지 항목은 나오질 않습니다.
아래 첨부해드린 이미지가 KBoard 컨텍트폼 최신글 커스트마이징을 마친 상태인데요
저 상태에서 'category1'(개인파산), 'user'(이름), 'title'(연락처), 'date'(날짜) 가 모두 함께 스크롤 되게 하려면 어떻게 해야 하는지 좀 알려주시면 감사드리겠습니다.
 

SOnjwMW.png

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    KBoard 플러그인 최신글에서 카테고리1, 작성자, 제목, 작성일을 표시하는 코드는

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

    <!-- 카테고리1 -->
    <?php echo $content->category1?>
    <!-- 작성자명 -->
    <?php echo $content->member_display?>
    <!-- 제목 -->
    <?php echo $content->title?>
    <!-- 작성일 -->
    <?php echo $content->getDate()?>

    올려주신 코드 중 아래의 코드를 위의 코드로 교체하시면

    카테고리1, 작성자명, 제목, 작성일 순으로 표시할 수 있습니다.

    <?php echo $content->title?>

     

    KBoard 플러그인에서 최신글 레이아웃은

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/latest.php 파일에서 표시하고 있습니다.

    고맙습니다.

  • 감사합니다~
    알려주신 대로 해서 각 항목이 모두 출력되고 롤링까지 되도록 설정 됐습니다.

     

    <style>
    .notice{font-weight: bold; font-size: 18px; width:100%; height:255px; 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><?php echo $content->category1?><?php echo $content->member_display?><?php echo $content->title?><?php echo $content->getDate()?></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>

     

    그런데 각 항목들이 다닥다닥 붙어있습니다... ㅜㅜ 이걸 좀 보기 좋게 항목별로 띄워줄 수 있을 까요?
    부탁드립니다..ㅜㅜ

     

    q3IENRY.png

     

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

    <span class="kboard-latest-info kboard-latest-category1"><?php echo $content->category1?></span>
    <span class="kboard-latest-info kboard-latest-member_display"><?php echo $content->member_display?></span>
    <span class="kboard-latest-info kboard-latest-title"><?php echo $content->title?></span>
    <span class="kboard-latest-info kboard-latest-date"><?php echo $content->getDate()?></span>

    그 다음, 워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보세요.

    .notice .rolling .kboard-latest-info { margin-right: 10px; }

    위의 코드에서 픽셀 크기는 적절히 조절해보시겠어요?

     

    CSS 코드 수정 시 크롬 브라우저 개발자 도구(F12)를 사용하시면

    CSS 속성을 쉽게 찾을 수 있고 테스트해보실 수 있습니다.

    고맙습니다.

  • 너무 감사합니다.
    알려주신 대로 설정해서 깔끔하게 완성 되었습니다.
    다시 한 번 감사드립니다.

     

    x5GkUzc.png

     

    그런데 끝으로 title(현재 연락처로 설정)이 PC에서는 한두 글자 정도만 빼고 나머지는 모두 * 표로 보이고 모바일에서는 아예 안 보이게 설정하려면 어떻게 하면 될까요?
     

    감사합니다.

  • kboard_content_value 필터를 활용하시면

    게시글 제목을 편집하실 수 있습니다.

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

    아래의 코드를 추가해보세요.

    add_filter('kboard_content_value', 'my_kboard_content_value', 10, 3);
    function my_kboard_content_value($value, $name, $content){
    	$board = $content->getBoard();
    	if(!is_admin() && !$board->isAdmin() && $name == 'title' && $board->id == '1'){ // 실제 게시판 id로 적용해주세요.
    		$phone1 = substr($value, 0, 2);
    		$phone2 = substr($value, 2);
    		$phone2 = preg_replace('/[0-9]/', '*', $phone2);
    		$value = $phone1 . $phone2;
    	}
    	return $value;
    }

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

    위의 코드를 적용하시면 워드프레스 관리자 페이지나 게시판 관리자는 정상적으로 표시됩니다.

    실제 별표처리가 되는 것을 확인하시려면 게시판 관리자가 아닌 계정 혹은 비회원으로 확인해보세요.

     

    모바일에서 연락처 필드를 안 보이게 하시려면

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보세요.

    @media screen and (max-width: 600px) {
    	.notice .rolling .kboard-latest-info.kboard-latest-title { display: none; }
    }

    고맙습니다.

  • 정말 너무너무 감사합니다.
    알려주신대로 해서 모두 다 설정 했습니다.
    감사합니다.

     

    pezQ2CA.png?1

     

    그런데 너무 염치 없어서 이번엔 제가 스스로 이름(member_display)에서 성만 남겨두고 이름 두 글자는 별표처리를 직접 해볼라고
    알려주신 kboard_content_value 필터에 member_display를 이리 저리 끼워 넣어봐도 이름 별표처리가 안 되네요...ㅜㅜ
    이름도 성만 빼고 나머지 두글자는 별표처리를 하려면 kboard_content_value 필터 어디에 member_display를 넣으면 될까요?
    염치 불구하고 다시 부탁드립니다. ㅜㅜ

  • 가급적 이미지 사진은 imgur에 업로드한 뒤 링크 걸어주시길 부탁드립니다.

    그래야 이미지가 지워질 염려도 없고 오래도록 다른 사용자분들도 글 내용을 파악하는데 어렵지 않습니다.

    고맙습니다.

  • 안녕하세요.

    작성자명을 성만 표시하고 이름을 별표 처리하시려면

    추가하신 kboard_content_value 필터 코드를 아래의 코드로 교체해보시겠어요?

    add_filter('kboard_content_value', 'my_kboard_content_value', 10, 3);
    function my_kboard_content_value($value, $name, $content){
    	$board = $content->getBoard();
    	if(!is_admin() && !$board->isAdmin() && $board->id == '1'){ // 실제 게시판 id로 적용해주세요.
    		if($name == 'title'){
    			$phone1 = substr($value, 0, 2);
    			$phone2 = substr($value, 2);
    			$phone2 = preg_replace('/[0-9]/', '*', $phone2);
    			$value = $phone1 . $phone2;
    		}
    		else if($name == 'member_display'){
    			$strlen = mb_strlen($value, 'utf-8');
    			
    			if($strlen > 3){
    				$showlen = 2;
    			}
    			else{
    				$showlen = 1;
    			}
    			
    			$value = mb_substr($value, 0, $showlen, 'utf-8') . str_repeat('*', $strlen-$showlen);
    		}
    	}
    	return $value;
    }

    고맙습니다.

  • 알려주신 대로 수정해서 모두 완벽하게 세팅이 됐습니다.
    계속 이어지는 질문에도 정말 상세히 그리고 정확하게 알려주셔서 무어라 감사의 말씀 드려야 할지 모르겠습니다.
    KBoard 무제한 라이센스를 쓰는 것에 자부심이 느껴집니다.

    거듭 감사의 말씀 드립니다~

    p.s)위에 첨부한 이미지는 모두 imgur로 옮겨서 자료가 사라지지 않도록 하겠습니다.

    9R8T3MF.png

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요