조회수 게시판 추출 관련 문의

안녕하세요. 항상 감사드립니다~

http://xion.kr/?page_id=53 보시면, 조회수 게시판 추출 페이지 편집작업중인데요.

참조 이미지 보시면

https://imgur.com/a/3HDtBk9

1번에 배너랑 최근 뜨는 게시판 사이에 여백이 없어서

페이지 편집하면서 <br> 이나 <br/> 삽입했는데 적용이 안되는 것 같아서요^^;

그리고 2번째 문의는 페이지내 "insert shortcode" 로 탭 2개 생성해서 최근 뜨는 게시판, 게시판 랭킹 2개를 삽입했는데, 현재 카페 페이지 들어가면 기본 선택으로 2개 탭중에서 2번째 '게시판 랭킹'이 선택되어져서 보이고 있는데 1번 "최근 뜨는 게시판"이 기본으로 선택되져서 보이게 하려면 어떻게 하면 될까요? 숏코드 안에 메뉴에서는 보이는 순서 조정하는게 없는것 같아요.

3번째 문의는 지금 게시판 제목하고 조회수가 붙어있는데 조회수를 화면의 오른쪽에 정렬되게 하려면 어떻게 할지 도움부탁드립니다...

감사합니다.

 

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

    1. 배너와 추가하신 숏코드의 여백은

    워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보시겠어요?

    .su-tabs { margin-top: 25px; }

    위의 코드에서 픽셀 값은 적절히 수정해보세요.

     

    2. Shortcodes Ultimate 플러그인을 사용해서 탭을 추가하신 건지요?

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

    아래의 숏코드처럼 적용해보시겠어요?

    [su_tabs style="default" active="1" vertical="no" class=""]
      [su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
      [su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
    [/su_tabs]

    위의 숏코드에서 active="2" 이런 식으로 적용하시면 두 번째 탭이 기본적으로 선택됩니다.

    active="1"로 되어 있는지 확인해보시겠어요?

     

    3. 현재는 조회수가 표시되지 않는 코드를 적용하신 듯합니다.

    조회수는 아래 링크에 안내해드린 코드를 적용하신 건지요?

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

     

    CSS 입력 필드에 아래의 코드도 추가해보시겠어요?

    .kboard-best-view .kboard-best-view-board-name { margin-right: 10px; }

    고맙습니다.

  • 안녕하세요~

    https://imgur.com/a/6vCNAhL 보시면

    스레드봇 (13929 Point)ㆍ2019.02.27 10:10 이 알려주신 코드로 수정해서 순위 표시가 잘되는데 그 이후로 해당 카페로 이동이 안되어지는데 어디를 수정하면 좋을까요? 그리고 글자가 안 보여서

    .kboard-best-view2 .kboard-best-view-board-name { color: #0066ff; }

     이렇게 수정했는데 적용이 안되서요^^;; 이 코드도 한번 봐주세요.

  • 안녕하세요.

    1. 올려주신 이미지처럼 탭 메뉴가 모바일에서도 PC처럼 보이게 하시려면

    워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보시겠어요?

    @media only screen and (max-width: 768px) {
    	.su-tabs-nav span { display: inline-block !important; }
    }

     

    2. 추가하신 탭 쪽 배경 색상을 올려주신 이미지처럼

    서로 다른 색상을 적용하시려면

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

    /* 탭 */
    .su-tabs-nav { background: green; }
    
    /* 현재 선택된 탭 */
    .su-tabs-nav span.su-tabs-current { background: blue; }
    
    /* 탭 안쪽 */
    .su-tabs-pane { background: red; }

    위의 코드에서 색상은 적절히 수정해주세요.

    만약, 위의 코드가 적용되지 않는다면 !important 속성을 추가해보시겠어요?

     

    3. 같은 플러그인으로 탭 메뉴를 추가하셨다면

    1번과 2번에 안내해드린 코드를 적용하시면 해결되실 듯합니다.

    고맙습니다.

  • 내일 오픈하려고 하는데 기술이 미천해서 너무 힘드네요^^;; 그래도 수많은 질문에도 이렇게 계속 도와주시는덕분에 여기까지 왔습니다. 감사합니다. 그리고, 내일부터 휴무라 오늘도 폭풍질문들 달아야될거 같아 죄송하네요.^^;;

    1. https://imgur.com/a/c8GzwWm 보시면 탭메뉴들이 "ㄴ"자 형태로 pc에서 보여지는데 모바일에서는 이 "ㄴ"자가 퍼져서 보이는데 모바일에서도 이 "ㄴ"자가 유지되게 할수 있나요?

    2. https://imgur.com/a/4QFSYtk 보시면 빨강, 파랑, 연두 색 3가지 부분을 서로 다른 색으로 구현하고 싶은데 크롬 도구에서 본 코드로 아무리해도 변경이 안되네요.. 도움부탁드립니다.

    3. 위에 2개 질문은 https://xion.kr/?page_id=53 크리에이퍼 카페 메뉴에 구현한 탭메뉴이고, https://xion.kr/?page_id=226 이건 동영상 메뉴인데 여기도 탭메뉴를 구현했습니다. 동영상메뉴도 1,2번 질문 그대로 적용하려고 하는데 여기 코드 어떻게 구현해야되는지도 도움부탁드려요... 

  • 안녕하세요.

    추가하신 코드에 아래의 코드를 활용해보시겠어요?

    ob_start();
    ?>
    <?php $index = 0?>
    <?php foreach($best_board_list as $board):?>
    <?php $best_board = new KBoard($board->board_id)?>
    
    <?php $index++?>
    <?php if($index == 1):?>
    	<div>1번 <?php echo $best_board->board_name?></div>
    <?php elseif($index == 2):?>
    	<div>2번 <?php echo $best_board->board_name?></div>
    <?php else:?>
    	<div><?php echo $best_board->board_name?></div>
    <?php endif?>
    <?php endforeach?>
    <?php
    $html = ob_get_clean();

    위의 코드를 활용하시면 첫 번째 표시되는 게시판과 두 번째에 표시되는 게시판 이름 앞에

    서로 다른 문구, 아이콘, 이미지 등을 추가하실 수 있습니다.

    고맙습니다.

  • https://www.cosmosfarm.com/threads/document/29884?page=3 여기서 알려주신 코드를 2개 만들어서

    표시하기1, 표시하기2로 타이틀 잡고 표시하기1은 숏코드를 kboard_board_best_view (1주 단위) 라 하고 표시하기 2는 숏코드 kboard_board_best_view2 (4주 단위)로 해서  functions.php 작성하였습니다. 페이지 편집은 텍스트 편집 창에서 아래와 같이 하였습니다.

    <div class="cafe">[searchandfilter fields="search" submit_label="검색" search_placeholder="카페..."] <a href="http://xion.kr/"><img src="http://www.xion.kr/main/banner_4.jpg"></a><br/>[su_tabs active="1"][su_tab title="최근 뜨는 카페" disabled="no" anchor="" url="" target="blank" class=""][kboard_board_best_view][/su_tab]
    [su_tab title="카페 랭킹" disabled="no" anchor="" url="" target="blank" text-align="left" class=""][kboard_board_best_view2][/su_tab]
    [/su_tabs] <a href="http://xion.kr/?page_id=180"><img src="http://www.xion.kr/main/bbs.png" alt="null" /></a></div>

     

  • 올려주신 페이지에서 탭 메뉴와 카페 랭킹의 내용을 왼쪽 정렬하시려면

    아래의 코드를 추가해보시겠어요?

    .su-tabs-nav, 
    .su-tabs-pane { text-align: left; }

     

    카페 랭킹 쪽 내용은 어떻게 추가하신 건지요?

    일반 텍스트로 추가하셨다면 직접 아이콘이나 특수문자를 추가해보시겠어요?

    고맙습니다.

  • .kboard-best-view2 .kboard-best-view2-board-name { float: left; margin: 0; width: 50%; text-align: left; }
    

    감사합니다. 잘 적용됐습니다. 그런데 두번째 탭메뉴인 '카페 랭킹'을 왼쪽 정렬해주려고 알려주신 코드 이름을 view2 로 수정했더니 적용이 안되서요. '카페랭킹'을 https://imgur.com/a/QqbYw0d 첨부이미지처럼 왼쪽 정렬하면서 카페 이름 앞에 아이콘도 넣으려면 어떻게 하면 될까요?

    그리고, 한개 더 여쭤볼게 있는데 https://imgur.com/a/R888aYe 이 탭메뉴가 원래 왼쪽에 있었는데 지금은 가운데로 가버려서요. 원래대로 왼쪽으로 보내는 방법도 부탁드립니다.^^;;

     

  • 탭 메뉴 쪽 최대 너비를 600px로 설정하고

    올려주신 이미지처럼 CSS 코드를 적용하시려면

    직접 추가하신 아래의 코드를 각각 지우신 후

    .cafe { width: 600px; }
    .kboard-best-view .kboard-best-view-board-name { margin-right: 350px; }

    아래의 코드를 추가해보시겠어요?

    .cafe { max-width: 600px; margin: 0 auto; }
    .kboard-best-view { overflow: hidden; }
    .kboard-best-view .kboard-best-view-board-name { float: left; margin: 0; width: 50%; text-align: left; }
    .kboard-best-view .kboard-best-view-count { float: left; margin: 0; width: 50%; text-align: right; }

    고맙습니다.

  • 안녕하세요~ 항상 감사드립니다. 다름아니라 위 작성한 '카페'페이지를 가운데 정렬하려고 페이지 편집창에서

    <div class="cafe">[searchandfilter fields="search" submit_label="검색" search_placeholder="카페..."] <a href="http://xion.kr/"><img src="http://www.xion.kr/main/banner_4.jpg"></a><br/>[su_tabs active="1"][su_tab title="최근 뜨는 카페" disabled="no" anchor="" url="" target="blank" class=""][kboard_board_best_view][/su_tab]
    [su_tab title="카페 랭킹" disabled="no" anchor="" url="" target="blank" text-align="left" class=""][kboard_board_best_view2][/su_tab]
    [/su_tabs] <a href="http://xion.kr/?page_id=180"><img src="http://www.xion.kr/main/bbs.png" alt="null" /></a></div>

    전체 class 를 카페로 지정하고, 사용자정의 추가 CSS 창에  .cafe{text-align: center !important; }로 가운데 정렬을 해주니까 위치가 가운데로 가긴 했는데 탭메뉴2개도 왼쪽에 위치하던게 가운데로 이동되었습니다.  그리고, 일전에 문의드린 https://www.cosmosfarm.com/threads/document/30393 이때 화면을 넓게 쓰는 바람에 탭메뉴 내용이 가로로 너무 길게 늘어져서 .cafe{width: 600px} 을 추가했더니 페이지 내용들이 다시 왼쪽으로 붙어버리고, 모바일에서는 잘린 모양으로 나오고 있습니다.

    도움 부탁드릴 내용이 ^^:;

    1. 탭메뉴내용 폭을 600px 정도로 고정하려고 하고,

    2. 카페 페이지 모든 내용들이 가운데 정렬로 보여지고(모바일에서도 잘리는거 없이요.)

      단, 탭메뉴들은 원래 숏코드에서 제공하는 것처럼 왼쪽에 표시되게요.

    3. https://imgur.com/a/acQwKIS 처럼 카페명은 왼쪽정렬로 왼쪽에 붙고 조회수는 오른쪽 정렬로 오른쪽에 붙게

    이렇게 도움부탁드립니다. 감사합니다...

  • 안녕하세요.

    기존 코드 대신 아래 코드를 활용해서 링크를 추가해보시겠어요?

    $url = new KBUrl();
    
    ob_start();
    ?>
    <?php $index = 0?>
    <?php foreach($best_board_list as $board):?>
    <?php $best_board = new KBoard($board->board_id)?>
    
    <?php $index++?>
    <?php if($index == 1):?>
    	<div><a href="<?php echo $url->getBoardRedirect($best_board->id)?>">1번 <?php echo $best_board->board_name?></a></div>
    <?php elseif($index == 2):?>
    	<div><a href="<?php echo $url->getBoardRedirect($best_board->id)?>">2번 <?php echo $best_board->board_name?></a></div>
    <?php else:?>
    	<div><a href="<?php echo $url->getBoardRedirect($best_board->id)?>"><?php echo $best_board->board_name?></a></div>
    <?php endif?>
    <?php endforeach?>
    <?php
    $html = ob_get_clean();

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기