GeneratePress 테마 페이지 내비게이션(페이지네이션) 번호 스타일을 뉴스페이퍼 스타일로 변경하기

워드프레스 뉴스페이퍼 테마로 만든 사이트와 비슷하게 만드는 작업을 최근 진행했습니다. 뉴스페이퍼는 쉽게 퀄리티 높은 사이트를 만들 수 있지만 속도면에서 GeneratePress 테마보다 느리고 트래픽도 많이 소모하는 편입니다.

이 글에서는 GeneratePress 테마의 페이지 내비게이션 번호 스타일을 뉴스페이퍼 페이지네이션 스타일과 비슷하게 변경하는 방법을 살펴보겠습니다.

워드프레스 GeneratePress 테마 페이지 내비게이션(페이지네이션) 번호 스타일을 뉴스페이퍼 스타일로 변경하기

뉴스페이퍼의 기본 데모를 로드할 경우 페이지네이션 번호 스타일은 다음과 같습니다.

GeneratePress 테마의 경우 페이지네이션이 숫자로만 표시되고 아무런 디자인이 들어가 있지 않습니다. 위의 그림과 같은 스타일로 변경하고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

/* GeneratePress 테마 페이지네이션 번호 스타일을 뉴스페이퍼 스타일로 변경하기 */
nav#nav-below.paging-navigation .page-numbers {
    display: inline-block;
    padding: 7px 14px;
    margin-right: 10px;
    border: 1px solid #ddd;
    /* Removed border-radius */
    font-size: 14px;
    transition: all 0.3s ease-out;
    text-decoration: none;
    background-color: #ffffff;
    color: #666;
}

nav#nav-below.paging-navigation span.page-numbers.current {
    font-weight: 600;
    /* Updated background-color, color, and border-color */
    background-color: #4db2ec;
    color: #ffffff;
    border-color: #4db2ec;
    box-shadow: 0 2px 5px rgba(74, 144, 226, 0.3);
}

nav#nav-below.paging-navigation a.page-numbers {
    color: #666;
}

nav#nav-below.paging-navigation a.page-numbers:hover,
nav#nav-below.paging-navigation a.page-numbers:focus {
    /* Updated color, background-color, and border-color */
    color: #fff;
    background-color: #444;
    border-color: #444;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.separate-containers .paging-navigation {
    padding: 28px 0;
    text-align: center;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    background: #f7f7f7;
}

nav#nav-below.paging-navigation .gp-icon {
    vertical-align: middle;
}

위의 코드를 외모 » 사용자 정의하기 » 추가 CSS에 추가하거나 차일드 테마의 스타일시트(style.css) 파일에 추가합니다.

변경사항을 저장하고 캐시를 삭제한 후(클라우드웨이즈의 경우 서버 캐시도 삭제) 살펴보면 다음과 비슷하게 바뀔 것입니다.

색상 등은 적절히 변경할 수 있습니다. 위의 코드를 적용하면 음영 효과도 조금 들어갑니다.😄😄😄

더 다양한 GP 테마의 페이지네이션 스타일을 여기에서 확인할 수 있습니다. 아스트라 테마를 사용하는 경우 이 글을 참고하세요.

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 비교 (Cloudways vs. Bluehost)