안녕하세요!
좋은 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; }
고맙습니다.