ฉันจะเปลี่ยนความสูงของภาพส่วนหัวใน Twenty Seventeen ได้อย่างไร

ฉันจะเปลี่ยนความสูงของภาพส่วนหัว (ระบุไว้ในส่วนหัวกระดาษ) ในธีมยี่สิบเจ็ดได้อย่างไร

โดยเฉพาะฉันต้องการเปลี่ยนมันในหน้าแรกเพราะที่นี่มันเติมเกือบทั้งหน้า ฉันต้องการให้สั้นกว่านี้มาก ลักษณะที่ปรากฏบนหน้าอื่น ๆ เช่นหน้าเกี่ยวกับในตัวมีความสูงที่ดีดังนั้นหากฉันสามารถเลียนแบบที่หน้าแรกฉันจะพอใจ แม้ว่าการรู้วิธีควบคุมที่แม่นยำจะทำได้ดี

ผมพบว่า (บางส่วน) ของโค้ด 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คุณลักษณะที่ฉันสามารถปรับความสูงสำหรับภาพส่วนหัวในหน้าแรก ผมตั้งความสูง30vh, calc(30vh - 32px)และ30vhตามลำดับในแต่ละส่วน ฉันทิ้งคนแรกไว้height: 1200pxคนเดียว

หมายเหตุองค์ประกอบความสูงมีการตั้งค่า100vhซึ่งขนาดความสูงเทียบกับความสูงวิวพอร์ต ดังนั้น 100vh คือ 100% ของวิวพอร์ตในขณะที่ 50vh คือ 50% ของวิวพอร์ต

สิ่งหนึ่งที่แปลกคือในหน้าแรกการซูมและตำแหน่งของภาพส่วนหัวจะแตกต่างจากในหน้าอื่น ๆ

ไม่แน่ใจว่านี่เป็นวิธีที่ดีที่สุดหรือไม่ ฉันเปิดให้ตัวเลือกที่ดีกว่า แต่จนถึงขณะนี้มันทำงานในระดับพื้นฐาน

เพียงแก้ไขธีมจากแดชบอร์ดและเพิ่มนิยาม CSS ต่อไปนี้ในส่วนของธีม "custom css":

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

จากความคิดเห็นที่ฉันทำใน @ คำตอบของผู้ใช้ (นั่นคือชื่อเจ๋ง);) ฉันคิดว่าฉันจะให้มันไป

ฉันกำลังแก้ไขไฟล์ธีมโดยตรงเพราะฉันกำลังทำงานในคอนเทนเนอร์นักเทียบท่าทิ้งมันเป็นหลักฐานเพิ่มเติมของแนวคิด การปรับให้เข้ากับธีมลูกจะต้องมีการปรับแต่ง

ในcontent/themes/twentyseventeen/style.cssพื้นที่ระหว่าง 3680 ~ 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-heightไม่ถึง แต่จากนั้นตั้งค่าตามmax-heightที่คุณต้องการ

มีข้อแม้หนึ่งข้อสำหรับทั้งหมดนี้:

เป็นส่วนบนสุดของพิกเซล ดังนั้นถ้าคุณไม่มีภาพในบริเวณนั้น ... มันดูเส็งเคร็ง (มีหลายหัวที่ถูกตัดออก)

มีอีกมากที่จะติดตาม (เมื่อฉันจัดเรียง)

คุณสามารถเปลี่ยนได้โดยการครอบตัดภาพ ใน WordPress มีตัวเลือกเป็นเครื่องมือปรับแต่งเอง คุณต้องทำตามขั้นตอนด้านล่างเพื่อตัดภาพ

    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 ที่กำหนดเอง' ในธีมของคุณวิธีที่ดีที่สุดคือการสร้างธีมลูก (มีบทช่วยสอนจำนวนมากบนนั้น) และเพิ่ม CSS ที่กำหนดเองของคุณลงในหน้า styles.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;
}