플레이비디오 카테고리 탭방식으로 보기

플레이비디오스킨 2.9 버전, Kboard 6.0 버전입니다.

2018년 글에 비슷한 질문이 있긴 한데, 지금 버전이랑 좀 다른 것 같아서 질문드립니다.

기본 카테고리만 활성화할 경우 카테고리를 셀렉트 방식으로 보여주는 데
default 게시판 처럼 탭방식으로 선택할 수 있게 나열할 수 있는 방식을 알려주시면 감사하겠습니다.

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

    KBoard 플레이 비디오 스킨에서 카테고리1과 카테고리2 레이아웃을

    디폴트 게시판처럼 PC에서는 탭 형식으로 표시하고

    모바일에서는 셀렉트 박스로 표시하고 싶으신 건지요?

     

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/list-category-default.php 파일을

    아래의 코드로 교체해보세요.

    <div class="kboard-category category-mobile">
    	<form id="kboard-category-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
    		<?php echo $url->set('pageid', '1')->set('category1', '')->set('category2', '')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
    		
    		<?php if($board->initCategory1()):?>
    			<select name="category1" onchange="jQuery('#kboard-category-form-<?php echo $board->id?>').submit();">
    				<option value=""><?php echo __('All', 'kboard')?></option>
    				<?php while($board->hasNextCategory()):?>
    				<option value="<?php echo $board->currentCategory()?>"<?php if(kboard_category1() == $board->currentCategory()):?> selected<?php endif?>><?php echo $board->currentCategory()?></option>
    				<?php endwhile?>
    			</select>
    		<?php endif?>
    		
    		<?php if($board->initCategory2()):?>
    			<select name="category2" onchange="jQuery('#kboard-category-form-<?php echo $board->id?>').submit();">
    				<option value=""><?php echo __('All', 'kboard')?></option>
    				<?php while($board->hasNextCategory()):?>
    				<option value="<?php echo $board->currentCategory()?>"<?php if(kboard_category2() == $board->currentCategory()):?> selected<?php endif?>><?php echo $board->currentCategory()?></option>
    				<?php endwhile?>
    			</select>
    		<?php endif?>
    	</form>
    </div>
    
    <div class="kboard-category category-pc">
    	<?php if($board->initCategory1()):?>
    		<ul class="kboard-category-list">
    			<li<?php if(!kboard_category1()):?> class="kboard-category-selected"<?php endif?>><a href="<?php echo $url->set('category1', '')->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->tostring()?>"><?php echo __('All', 'kboard')?></a></li>
    			<?php while($board->hasNextCategory()):?>
    			<li<?php if(kboard_category1() == $board->currentCategory()):?> class="kboard-category-selected"<?php endif?>>
    				<a href="<?php echo $url->set('category1', $board->currentCategory())->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toString()?>"><?php echo $board->currentCategory()?></a>
    			</li>
    			<?php endwhile?>
    		</ul>
    	<?php endif?>
    	
    	<?php if($board->initCategory2()):?>
    		<ul class="kboard-category-list">
    			<li<?php if(!kboard_category2()):?> class="kboard-category-selected"<?php endif?>><a href="<?php echo $url->set('category2', '')->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->tostring()?>"><?php echo __('All', 'kboard')?></a></li>
    			<?php while($board->hasNextCategory()):?>
    			<li<?php if(kboard_category2() == $board->currentCategory()):?> class="kboard-category-selected"<?php endif?>>
    				<a href="<?php echo $url->set('category2', $board->currentCategory())->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toString()?>"><?php echo $board->currentCategory()?></a>
    			</li>
    			<?php endwhile?>
    		</ul>
    	<?php endif?>
    </div>

     

    그 다음,

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

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

    #kboard-play-video-list .kboard-category { float: left; padding-bottom: 15px; width: 100%; }
    #kboard-play-video-list .kboard-category.category-mobile { display: none; }
    #kboard-play-video-list .kboard-category.category-pc { display: block; }
    #kboard-play-video-list .kboard-category select { display: inline; margin: 0 0 5px 0; padding: 0; width: 100%; min-width: 100%; height: 28px; min-height: 0; line-height: 28px; font-size: 13px; color: #666666; border-radius: 0; border: 1px solid #f1f1f1; background: white; vertical-align: middle; box-shadow: none; box-sizing: border-box; text-indent: 0; -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; }
    #kboard-play-video-list .kboard-category .kboard-category-list { margin: 0 0 5px 0; padding: 0; list-style: none; border: 0; background-color: #f9f9f9; overflow: hidden; }
    #kboard-play-video-list .kboard-category .kboard-category-list li { display: inline-block; *display: inline; zoom: 1; margin: 0; padding: 0 5px; border: 0; list-style: none; }
    #kboard-play-video-list .kboard-category .kboard-category-list li::before,
    #kboard-play-video-list .kboard-category .kboard-category-list li::after { display: none; }
    #kboard-play-video-list .kboard-category .kboard-category-list li a { display: block; padding: 10px 10px 8px 10px; font-size: 14px; border: 0; border-bottom: 2px solid transparent; text-decoration: none; text-shadow: none; box-shadow: none; color: #515151; }
    #kboard-play-video-list .kboard-category .kboard-category-list li.kboard-category-selected a { font-weight: bold; border-bottom: 2px solid #545861; color: #545861; }
    
    @media screen and (max-width: 600px) {
    	#kboard-play-video-list .kboard-category.category-mobile { display: block; }
    	#kboard-play-video-list .kboard-category.category-pc { display: none; }
    }

    고맙습니다.

  • 말씀해주신 대로 해봤는 데 잘 안되네요. 

    말씀해주신 카테고리에 해당하는 php 파일의 위치가 
    "/wp-content/plugins/kboard/skin/사용중인스킨/list-category-default.php" 이 위치를 말씀해주셨는데, 이 위치에는 avatar, contact-form, default, thumbnail 만 있고

    현재 ftp에 플레이비디오 스킨은
    ""/wp-content/plugins/play-video/list-category-default.php" 이 위치에 있는 것 같습니다.

    이 위치의 파일을 수정하고 CSS 입력필드를 입력하면 
    http://www.jgmj.co.kr/data-03/

    의 형태로 셀렉트 방식이 계속 나오고 탭 방식도 제대로 구현이 안되고 있습니다. (아이프레임 사용중)
    답변 감사하고 한 번 체크 부탁드립니다. 

     

     

  • 게시판 스킨을 플러그인으로 설치하시면

    /wp-content/plugins/ 경로에 스킨이 설치됩니다.

     

    아이프레임으로 보기 기능을 사용 중이시라면

    사용자 정의하기 쪽이 아닌

    워드프레스 관리자 -> KBoard -> 대시보드 페이지에서

    커스텀 CSS 입력 필드에 CSS 코드를 추가해보시겠어요?

     

    특별한 경우가 아니라면 아이프레임으로 보기 기능은 비활성화해주시는 게 좋을 듯합니다.

    고맙습니다.

  • 잘 해결되었습니다., 감사합니다.

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