워드프레스 GeneratePress 테마 세로 방향 헤더 설정하기 - 워드프레스 정보꾸러미
베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

워드프레스 GeneratePress 테마 세로 방향 헤더 설정하기

Last Updated: 2022년 10월 24일 | 2개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

헤더는 보통 사이트 상단에 배치됩니다. 드물지만 왼쪽 사이드바 또는 오른쪽 사이드바 부분에 헤더를 표시하는 사이트가 있습니다. 아바다, 엔폴드 등 워드프레스 유료 테마에서도 헤더를 수직 방향으로 표시하는 옵션과 데모를 제공합니다. GeneratePress 테마에서는 수직 내비게이션 옵션을 제공하지 않지만 데모를 제공합니다.

세로 헤더 레이아웃은 SEO에 안 좋은 것을 알려져 있으므로 사용 여부를 신중히 결정하시기 바랍니다.

워드프레스 GeneratePress 테마 세로 방향 헤더 설정하기

GeneratePress 테마에는 헤더를 세로 방향으로 설정하는 옵션이 제공되지 않습니다.

GeneratePress 테마 헤더 설정
헤더 설정

위의 그림과 같이 헤더를 내비게이션(헤더 메뉴)과 함께 배치할 때 위치를 지정하는 옵션이 제공되지만 헤더를 수직 방향으로 설정하는 옵션은 보이지 않습니다. 내비게이션을 헤더로 설정하는 것도 가능합니다. 현재 이 블로그에서는 내비게이션을 헤더로 설정하여 사용하고 있습니다.

제너레이트프레스 테마에서는 두 가지 방법으로 수직 내비게이션 레이아웃을 구현할 수 있습니다.

  • 사이트 라이브러리에서 제공하는 템플릿(데모) 사용
  • CSS로 헤더를 사이드바 위치로 이동시키기

GeneratePress 유료 버전을 사용하는 경우 사이트 라이브러리(Site Library)에서 제공하는 템플릿을 이용할 수 있습니다. 사이트 라이브러리에 대해서는 다음 글을 참고해보세요.

Sider라는 템플릿이 헤더를 왼쪽에 배치하고 있습니다.

워드프레스 GeneratePress 테마 세로 방향 헤더 설정하기

데모를 로드한 후에 사용자 정의하기의 레이아웃(Layout) 섹션에서 여백 등의 레이아웃을 원하는 대로 조정할 수 있습니다. 잘 안 되는 경우에는 CSS로 스타일을 세부적으로 지정할 수 있습니다.

CSS 코드를 사용하여 헤더를 왼쪽 사이드바 위치에 표시하는 것도 가능합니다. 예시:

@media (min-width: 1000px) {
    body {
        margin-left: 300px;
    }

    .site-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 300px;
        z-index: 300;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-overflow-scrolling: touch;
        transition: .1s ease;
    }

    .admin-bar .site-header {
        top: 32px;
    }

    .site-header .main-navigation li {
        float: none;
    }
}

.inside-header {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

.site-branding,
.site-logo {
    order: 1;
}

.header-widget {
    order: 3;
}

.nav-float-right .inside-header .main-navigation {
    order: 2;
    float: none;
    margin-top: 30px;
    margin-bottom: 50px;
}

.nav-float-right .header-widget {
    float: none;
    top: auto;
    max-width: 100%;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

.main-navigation.toggled .main-nav li {
    text-align: center !important;
}

사용자 정의 CSS 코드는 외모 » 사용자 정의하기 » 추가 CSS에 추가할 수 있습니다.

위의 코드를 잘 안 되는 경우 GeneratePress 테마 개발자에게 지원을 요청해보시기 바랍니다.

참고



2 개 댓글

Leave a Comment

    • GeneratePress 세팅 방법은 다음 글을 참고해보세요:

      https://avada.tistory.com/2299

      직접 세팅하는 데 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다. 이 블로그 외에 다음과 같은 레이아웃으로 세팅해드릴 수 있습니다.

      - https://avada.co.kr/
      - https://wpnews.co.kr/

      응답

카페에서 워드프레스 정보를 공유하실 수 있습니다.

Thanks!