Jak zmienić wysokość obrazu nagłówka w Twenty Seventeen?

Jak zmienić wysokość obrazu nagłówka (określonego w sekcji Media nagłówka) w motywie Twenty Seventeen?

W szczególności chcę to zmienić na stronie głównej, ponieważ tutaj wypełnia prawie całą stronę. Chcę, żeby było o wiele krótsze. Wygląda na innych stronach, takich jak wbudowana strona Informacje, ma dobrą wysokość, więc gdybym mógł naśladować to na stronie głównej, byłbym zadowolony. Chociaż wiedza na temat precyzyjnej kontroli byłaby świetna.

Znalazłem (część) kodu css, który kontroluje wysokość w wp-content/themes/twentyseventeen/style.css.

Istnieje kod, który ma zastosowanie, gdy pasek administratora nie jest widoczny (typowy anonimowy użytkownik) obecnie w linii 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;
}

I kod, który ma zastosowanie, gdy pasek administratora jest widoczny (np. Jesteś zalogowany) obecnie w linii 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);
}

A następnie kod obowiązujący na telefonach komórkowych w linii 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%;
}

Kopiując te trzy sekcje css do style.css mojego motywu podrzędnego i modyfikując heightatrybut, mogłem dostosować wysokość obrazu nagłówka na stronie głównej. I aby ustawić wysokość 30vh, calc(30vh - 32px)oraz 30vhodpowiednio w każdej sekcji. Pierwszy zostawiłam height: 1200pxsama.

Zwróć uwagę, że element wysokości jest ustawiany przy 100vhrozmiarach odpowiadających wysokości rzutni. Zatem 100vh to 100% rzutni, podczas gdy 50vh to 50% rzutni.

Dziwną rzeczą jest to, że na stronie głównej powiększenie i położenie obrazu nagłówka jest inne niż na innych stronach.

Nie jestem pewien, czy to najlepszy sposób. Jestem otwarty na lepsze opcje, ale jak dotąd działa na poziomie podstawowym.

Po prostu edytuj motyw z pulpitu nawigacyjnego i dodaj następującą definicję CSS do sekcji motywu „niestandardowy css”:

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

Z komentarza, który napisałem w odpowiedzi @ użytkownika (to fajna nazwa);) Myślałem, że spróbuję.

Edytuję plik motywu bezpośrednio, ponieważ pracuję w wysuwanym kontenerze dokowanym, jest to bardziej dowód koncepcji. Dostosowanie go do motywu podrzędnego będzie wymagało drobnych poprawek.

W content/themes/twentyseventeen/style.cssobszarze pomiędzy 3680 ~ 3670ish znajduje się obraz nagłówka.

oryginalny kod:

.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;
}

Zmiana rozmiaru (i kolejności) jest wystarczająca, aby uzyskać wylogowany widok:

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

Zostawiłem vhi, %aby objąć te bazy, do których max-heightnie ma dostępu, ale potem ustaw max-heightto, czego szukasz.

Jest jedno zastrzeżenie:

To bardzo górna część pikseli. Więc jeśli nie masz ładnej porcji obrazu w tym obszarze ... Wygląda kiepsko (wiele głów jest odciętych)

więcej do naśladowania (kiedy to uporządkuję)

Możesz to zmienić, przycinając obraz. w WordPress istnieje opcja dostosowywania. Aby przyciąć zdjęcie, musisz wykonać poniższe kroki.

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

Możesz użyć Firebug (lub spojrzeć na kod źródłowy strony), aby znaleźć CSS używany do wyświetlania obrazu nagłówka. Następnie dodaj CSS, aby wprowadzić zmianę. Dokładny używany CSS zależy od motywu.

Firebug pozwala tymczasowo zmienić CSS, aby uzyskać go tak, jak chcesz, a następnie skopiować ten nowy CSS na stronę CSS motywu (jeśli ma tę opcję).

Jeśli w kompozycji nie ma opcji „niestandardowy CSS”, najlepszym sposobem jest utworzenie motywu podrzędnego (wiele samouczków na ten temat) i dodanie niestandardowego css do strony styles.css tego motywu podrzędnego. (Nigdy nie zmieniaj motywu nadrzędnego; zmiany zostaną zastąpione przy następnej aktualizacji motywu).

Podszedłem do tego, najpierw konfigurując motyw potomny (zalecany krok przez WP). Następnie w pliku style.css motywu podrzędnego dodałem poniżej css. Pierwsza sekcja kontroluje wysokość obrazu na pierwszej stronie; druga sekcja kontroluje wysokość miejsca na zdjęcie na pierwszej stronie. Oba muszą się dopasować, aby to zadziałało. Skomentowałem niektóre linie, które zakłócały mój obraz o stałej wysokości. Teraz mój nagłówek na stronie głównej jest dokładnie taki sam jak na wszystkich innych stronach.

.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;
}