Twenty Seventeen에서 헤더 이미지 높이를 어떻게 변경합니까?

Twenty Seventeen Theme에서 헤더 이미지 (헤더 미디어 섹션에 지정)의 높이를 어떻게 변경합니까?

특히 홈페이지 전체를 채우므로 홈페이지에서 변경하고 싶습니다. 나는 그것이 훨씬 더 짧기를 원합니다. 기본 제공 정보 페이지와 같은 다른 페이지에 표시되는 방식은 높이가 좋으므로 홈 페이지에서 모방 할 수 있으면 만족할 것입니다. 정확한 제어 방법을 아는 것이 좋을 것입니다.

에서 높이를 제어하는 ​​CSS 코드의 일부를 찾았습니다 wp-content/themes/twentyseventeen/style.css.

현재 3629 행에 관리자 표시 줄 이 보이지 않는 경우 (일반적인 익명 사용자) 적용되는 코드가 있습니다

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

그리고 현재 3646 행에 관리자 표시 줄 이 표시 될 때 (예 : 로그인 한 경우) 적용되는 코드

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
  height: calc(100vh - 32px);
}

그런 다음 현재 1638 행에서 모바일에 적용되는 코드 :

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
        display: table;
        height: 300px;
        height: 75vh;
        width: 100%;
}

CSS 의이 세 섹션을 내 자식 테마의 style.css에 복사하고 height속성을 수정 하여 홈페이지의 헤더 이미지 높이를 조정할 수있었습니다. I는 상기 높이를 설정 30vh, calc(30vh - 32px)및 30vh각 부에 각각. 나는 첫 번째 height: 1200px혼자 떠났다 .

높이 요소는 100vh뷰포트 높이를 기준으로 높이의 크기를 설정 합니다. 따라서 100vh는 뷰포트의 100 %이고 50vh는 뷰포트의 50 %입니다.

한 가지 이상한 점은 홈 페이지에서 헤더 이미지의 확대 / 축소 및 위치가 다른 페이지와 다릅니다.

이것이 최선의 방법인지 확실하지 않습니다. 더 나은 옵션을 열었지만 지금까지는 기본 수준에서 작동하고 있습니다.

대시 보드에서 테마를 편집하고 테마 섹션 "custom css"에 다음 CSS 정의를 추가하십시오.

.has-header-image.home.blog .custom-header {
    height: 26vh;
}

@User의 답변 (멋진 이름)에서 작성한 의견에서 나는 그것을 줄 것이라고 생각했습니다.

버려진 도커 컨테이너에서 작업하고 있기 때문에 테마 파일을 직접 편집하고 있습니다. 개념 증명입니다. 어린이 테마에 적용하려면 약간의 조정이 필요합니다.

에서 content/themes/twentyseventeen/style.css3680 ~ 3670ish 사이의 영역에서 어디에 헤더 이미지 거짓말이다.

원래 코드 :

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

로그 아웃 된보기를 달성하기 위해 크기 (및 순서)를 변경하면 충분합니다.

  height: 100vh;    
  height: 100%; 
  max-height: 500px;

나는에 도달하지 않은 기지를 덮기 위해 vh와를 떠났지만, 당신이 무엇을했는지에 대해 설정했습니다 .%max-heightmax-height

이 모든 것에는 하나의 경고가 있습니다.

픽셀의 맨 위 섹션입니다. 따라서 해당 영역에 이미지의 좋은 부분이 없다면 ... 엉뚱한 것처럼 보입니다 (많은 머리가 잘립니다)

따라야 할 것들 (내가 정리할 때)

이미지를 자르면 이미지를 변경할 수 있습니다. 워드 프레스에는 커 스터 마이저 옵션이 있습니다. 이미지를 자르려면 아래 단계를 따라야합니다.

    1) Go appearance->customize
    2) Header media
    3) add a new image and then crop that image as per your needs and you go.

Firebug를 사용하거나 페이지 소스 코드를보고 헤더 이미지를 표시하는 데 사용되는 CSS를 찾을 수 있습니다. 그런 다음 CSS를 추가하여 변경하십시오. 사용하는 정확한 CSS는 테마에 따라 다릅니다.

Firebug를 사용하면 CSS를 일시적으로 변경하여 원하는 방식으로 가져 와서 새 CSS를 테마의 CSS 페이지에 복사 할 수 있습니다 (옵션이있는 경우).

테마에 '사용자 정의 CSS'옵션이없는 경우 가장 좋은 방법은 하위 테마 (많은 튜토리얼)를 작성하고 해당 하위 테마의 styles.css 페이지에 사용자 정의 CSS를 추가하는 것입니다. (부모 테마를 변경하지 마십시오. 다음 테마 업데이트시 변경 사항을 덮어 씁니다.)

먼저 하위 테마를 설정하여이 방법에 접근했습니다 (WP의 권장 단계). 그런 다음 하위 테마의 style.css 파일에서 아래 CSS를 추가했습니다. 첫 번째 섹션은 앞 페이지의 이미지 높이를 제어합니다. 두 번째 섹션은 앞 페이지의 이미지 공간 높이를 제어합니다. 이것이 작동하려면 둘 다 일치해야합니다. 고정 높이 이미지를 방해하는 몇 줄을 주석 처리했습니다. 이제 홈페이지의 헤더가 다른 모든 페이지와 정확히 동일합니다.

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    /* height: 100%; */
    height: 400px;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}
.twentyseventeen-front-page.has-header-image .custom-header-media, 
.twentyseventeen-front-page.has-header-video .custom-header-media, 
.home.blog.has-header-image .custom-header-media, 
.home.blog.has-header-video .custom-header-media {
    height: 400px;
    /* height: 100vh; */
    /* max-height: 100%; */
    overflow: hidden;
}