안녕하세요. kboard 버튼 이미지 관련 문의드립니다.

안녕하세요! 

좋은 kboard 개발해주시고 항상 피드백 해주셔서 감사드립니다.

 

다름이 아니라, 

검색 부분을 위에서 아래의 이미지로 변경하고 싶은데.. 방법을 몰라서 글을 올려봅니다.

검색 시, 카테고리는 딱히 필요치 않는 부분이라 제거할 예정이지만, 검색 textfield 와 search icon 을 통한 검색을 하고 싶습니다.

감사합니다!

 

 

+ 한가지 더 질문드립니다!

글쓰기 버튼이 아래와 같이 페이징과 같은 라인에 있을 수 있을까요? 

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

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

    KBoard 플러그인에서 검색 버튼을 이미지로 교체하는 건 스킨마다 다를 수도 있습니다.

    Default 스킨을 기준으로 안내해드리겠습니다.

     

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/images/ 경로에

    돋보기 모양의 이미지를 업로드해보세요.

    예제에서는 icon-search.png 파일명으로 안내해드리겠습니다.

     

    /wp-content/plugins/kboard/skin/사용중인스킨/list.php 파일에

    아래의 코드를 찾아서

    <!-- 검색폼 시작 -->
    <div class="kboard-search">
    	<form id="kboard-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
    		<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
    		
    		<select name="target">
    			<option value=""><?php echo __('All', 'kboard')?></option>
    			<option value="title"<?php if(kboard_target() == 'title'):?> selected<?php endif?>><?php echo __('Title', 'kboard')?></option>
    			<option value="content"<?php if(kboard_target() == 'content'):?> selected<?php endif?>><?php echo __('Content', 'kboard')?></option>
    			<option value="member_display"<?php if(kboard_target() == 'member_display'):?> selected<?php endif?>><?php echo __('Author', 'kboard')?></option>
    		</select>
    		<input type="text" name="keyword" value="<?php echo esc_attr(kboard_keyword())?>">
    		<button type="submit" class="kboard-default-button-small"><?php echo __('Search', 'kboard')?></button>
    	</form>
    </div>
    <!-- 검색폼 끝 -->

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

    <!-- 검색폼 시작 -->
    <div class="kboard-search">
    	<form id="kboard-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
    		<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
    		
    		<select name="target">
    			<option value=""><?php echo __('All', 'kboard')?></option>
    			<option value="title"<?php if(kboard_target() == 'title'):?> selected<?php endif?>><?php echo __('Title', 'kboard')?></option>
    			<option value="content"<?php if(kboard_target() == 'content'):?> selected<?php endif?>><?php echo __('Content', 'kboard')?></option>
    			<option value="member_display"<?php if(kboard_target() == 'member_display'):?> selected<?php endif?>><?php echo __('Author', 'kboard')?></option>
    		</select>
    		<input type="text" name="keyword" value="<?php echo kboard_keyword()?>" required>
    		<input type="image" class="magnifier" src="<?php echo $skin_path?>/images/icon-search.png" title="<?php echo __('Search', 'kboard-cross-link')?>" alt="<?php echo __('Search', 'kboard-cross-link')?>">
    	</form>
    </div>
    <!-- 검색폼 끝 -->

     

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

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

    #kboard-default-list .kboard-search select { display: inline; margin: 0; padding: 0 5px; width: 100px; min-width: 0; max-width: none; height: 26px; min-height: 0; font-size: 13px; color: #666666; border-radius: 0; border: 1px solid #cccccc; background: white; line-height: 26px; vertical-align: middle; box-shadow: none; box-sizing: content-box; -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; }
    #kboard-default-list .kboard-search input { display: inline; margin: 0; padding: 0 25px 0 5px; width: 170px; min-width: 0; max-width: none; height: 26px; min-height: 0; background: none; font-size: 13px; color: #666666; border-radius: 0; border: 1px solid #cccccc; line-height: 26px; vertical-align: middle; box-shadow: none; box-sizing: content-box; }
    #kboard-default-list .kboard-search .magnifier { margin-left: -25px; padding: 0; float: unset; width: 12px; height: 12px; border: none; }
    
    @media screen and (max-width: 600px) {
    	#kboard-default-list .kboard-search { float: none; }
    	#kboard-default-list .kboard-search select { float: left; margin-right: 1%; width: 29%; height: 28px; line-height: 28px; box-sizing: border-box; }
    	#kboard-default-list .kboard-search input[type=text] { float: left; width: 70%; height: 28px; line-height: 28px; box-sizing: border-box; }
    }

     

    페이징 오른쪽에 글쓰기 버튼을 표시하시려면

    list.php 파일에

    아래의 코드를 찾아서 지워보세요.

    <?php if($board->isWriter()):?>
    <!-- 버튼 시작 -->
    <div class="kboard-control">
    	<a href="<?php echo $url->getContentEditor()?>" class="kboard-default-button-small"><?php echo __('New', 'kboard')?></a>
    </div>
    <!-- 버튼 끝 -->
    <?php endif?>

    그다음, 아래의 코드를 찾아서

    <!-- 페이징 시작 -->
    <div class="kboard-pagination">
    	<ul class="kboard-pagination-pages">
    		<?php echo kboard_pagination($list->page, $list->total, $list->rpp)?>
    	</ul>
    </div>
    <!-- 페이징 끝 -->

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

    <!-- 페이징 시작 -->
    <div class="kboard-pagination">
    	<ul class="kboard-pagination-pages">
    		<?php echo kboard_pagination($list->page, $list->total, $list->rpp)?>
    	</ul>
    	
    	<?php if($board->isWriter()):?>
    	<!-- 버튼 시작 -->
    	<div class="kboard-control">
    		<a href="<?php echo $url->getContentEditor()?>" class="kboard-default-button-small"><?php echo __('New', 'kboard')?></a>
    	</div>
    	<!-- 버튼 끝 -->
    	<?php endif?>
    </div>
    <!-- 페이징 끝 -->

     

    마지막으로 아래의 CSS 코드를 추가해보세요.

    #kboard-default-list .kboard-pagination { position: relative; }
    #kboard-default-list .kboard-control { position: absolute; right: 0; width: auto; }

    고맙습니다.

  • 으와!! 

    이렇게 자세히 작성해주시다니 감사합니다!

     

    따라했더니 한번에 적용 완료되었습니다 ! 감사합니다!

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