pure gallery 스킨 오류 + pagination 모바일 갯수

pure gallery 스킨 사용중인데 원인을 알수없는 기괴한 오류가 발생중입니다.

WP Rocket 사용하고 있고 비활성화 했을때도 동일한 현상이 발생합니다.

 

641px 까지는 정상적으로 보이는데, 640px 부터는 썸네일 height 값이 0이 되어버리고, 제목과 작성자도 사라져버립니다.

그리고 "검색" 버튼을 누르면 제목과 작성자가 나타나고, 가로크기를 변화시키면 이미지도 다시 나타납니다.

 

원인도 모르겠고 해결방법은 더더욱 모르겠습니다. 무슨 문제일까요 ..

 

그리고 pagination이 모바일에서 하나밖에 안나옵니다.

페이지 수는 3 ~ 5개 인데

1 » 마지막

 

이렇게 숫자가 하나밖에 안나오네요.

최대 5개로 게시판 페이지만큼 숫자가 나오게 하려면 어떻게 해야하나요?

 

PC에서는 정상적으로 작동합니다.

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

    게시판 스킨이 깨지는 건 테마 쪽에서

    과도하게 CSS 코드를 적용하고 있을 가능성이 높습니다.

    비회원으로도 확인 가능한 페이지 주소 알려주시면

    CSS 코드로 해결이 가능할지 살펴보겠습니다.

     

    페이징 쪽은 에러나 버그는 아닙니다.

    모바일에서는 표시되는 영역이 PC보다 비교적 좁기 때문에

    올려주신 내용처럼 현재 페이지와 이전, 다음, 처음, 마지막 버튼만 표시하고 있습니다.

     

    모바일에서 최대 5개의 페이징을 표시하시려면

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

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

    @media screen and (max-width: 600px) {
    	#kboard-pure-gallery-list .kboard-pagination .kboard-pagination-pages li { display: inline-block; }
    }

    위의 CSS 코드를 추가하면 모든 페이지가 표시됩니다.

     

    아래의 코드를 추가하시면 모바일에서 최대 5개의 페이지만 표시하실 수 있습니다.

    add_filter('kboard_pagination_sliding_size', 'kboard_pagination_sliding_size_20211021', 10, 1);
    function kboard_pagination_sliding_size_20211021($sliding_size){
    	if(wp_is_mobile() && get_the_ID() == '1'){ // 실제 페이지 id로 적용해주세요.
    		$sliding_size = 5;
    	}
    	
    	return $sliding_size;
    }

    위의 코드에서 get_the_ID() == '1' 부분은 실제 페이지 id로 적용해주세요.

     

    페이지 ID를 찾는 방법은 아래 블로그 링크를 확인해주세요.

    워드프레스에서 페이지(포스트) ID를 찾는 방법

    고맙습니다.

  • 올려주신 페이지 주소로 확인해보니

    아래의 CSS 코드를 직접 추가하신 듯합니다.

    #kboard-pure-gallery-list .kboard-control {
        float: left;
        padding-bottom: 15px;
        width: 100%;
        text-align: right;
    }

    위의 코드에서 float 속성을 추가한 이유가 있으신지요?

    별다른 이유가 없다면 float 속성을 지우신 후에도 확인해보시겠어요?

    고맙습니다.

  • 감사합니다! 질문드렸던 내용은 모두 해결되었습니다.

    혹시 모바일에서 1열로 표시되는걸 2열, 3열로 표시되게는 어떻게 수정해야하나요?

    list.php를 수정해야할까요?

  • 모바일에서 게시글을 한 줄에 2개씩 표시하시려면

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

    #kboard-pure-gallery-list.mw600 .kboard-pure-gallery-list .kboard-list-item { margin: 0 1% 0 0; width: 49%; }

    위의 코드에서 49%를 32%로 수정하시면 한 줄에 3개씩 표시하실 수 있습니다.

    고맙습니다.

  • 감사합니다 !

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