ถ้าเราเรียกดู ไดเรกทอรีธีม WordPressธีมส่วนใหญ่แสดงภาพหน้าปก เป็นคุณสมบัติที่ได้รับความนิยม แนวโน้มหน้าปกเป็นจริงแม้ใน ไดเร็กทอรีธีมบล็อก ภาพหน้าจอเช่นกัน
ลองพิจารณาตัวอย่างต่อไปนี้จาก ยี่สิบยี่สิบ (ธีมคลาสสิก) ซึ่งรวมถึง a แม่แบบปก ที่สามารถใช้แสดงทั้งในโพสต์และหน้าเดียว โดยรูปภาพเด่นของโพสต์จะแสดงที่ด้านบนสุดซึ่งทอดยาวไปตามหน้าจอเบราว์เซอร์ โดยมีชื่อโพสต์และข้อมูลเมตาอื่นๆ ที่ต้องการด้านล่าง เทมเพลตหน้าปกช่วยให้สร้างเนื้อหาที่โดดเด่นจากข้อจำกัดดั้งเดิมในการแสดงเนื้อหา
การสร้างเทมเพลตหน้าปกในปัจจุบันจำเป็นต้องมีการเขียนโค้ด PHP ตามที่บันทึกไว้ใน เทมเพลตหน้าปกของธีมเริ่มต้น XNUMX แบบ. หากเรามองว่า template-parts/content-cover.php ไฟล์จะมี รหัส สำหรับแสดงเนื้อหาเมื่อ cover-template ถูกนำมาใช้.
ดังนั้นจึงไม่สามารถสร้างหน้าปกที่กำหนดเองได้หากคุณไม่มีความรู้เชิงลึกเกี่ยวกับ PHP สำหรับผู้ใช้ WordPress ทั่วไป ทางเลือกเดียวคือใช้ปลั๊กอินเช่น UI ประเภทโพสต์ที่กำหนดเอง ตามที่อธิบายไว้ใน วิดีโอสั้น ๆ นี้.
ครอบคลุมส่วนต่างๆ ในรูปแบบบล็อก
ตั้งแต่ 5.8 WordPressผู้สร้างธีมสามารถสร้างเทมเพลตที่กำหนดเองได้ (เช่น โพสต์เดี่ยว ผู้เขียน หมวดหมู่ และอื่นๆ) โดยใช้ส่วนฮีโร่ยอดนิยม เครื่องมือแก้ไขบล็อก บล็อกหน้าปกและรวมเข้ากับธีมด้วยโค้ดที่น้อยที่สุดหรือไม่มีเลย
ก่อนเจาะลึกถึงวิธีการสร้างหน้าปกขนาดใหญ่บนเทมเพลตธีมบล็อก มาดูสั้น ๆ ที่ธีมบล็อกทั้งสองกัน ยี่สิบยี่สิบสอง และ Wabi โดย Rich Tabor (รีวิวฉบับเต็ม โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม).
เบื้องหลัง Twenty Twenty-Two ใช้ส่วนหัวขนาดใหญ่โดย เพิ่มภาพที่ซ่อนอยู่ในรูปแบบ ใน header-dark-large ชิ้นส่วน ในขณะที่ธีม Wabi ใช้สีพื้นหลังส่วนหัวขนาดใหญ่ในโพสต์เดียวด้วย สีพื้นหลังเน้นเสียงและบล็อกตัวเว้นวรรคความสูง 50px (เส้น: 5-9). สีของสำเนียงได้รับการจัดการโดย assets/js/accent-colors.js ไฟล์
หลายคนเลือกที่จะสร้างส่วนปกด้านบนโดยใช้ บล็อกปกซึ่งอนุญาตให้ผู้ใช้เปลี่ยนสีพื้นหลังและเพิ่มภาพนิ่งจาก Media Library หรืออัปโหลดจากอุปกรณ์สื่อโดยไม่ต้องเขียนโค้ดใดๆ ด้วยแนวทางนี้ ภาพจาก โพสต์บล็อกรูปภาพเด่น ต้องเพิ่มด้วยตนเองในแต่ละโพสต์หากคุณต้องการให้โพสต์มีรูปภาพเป็นภาพพื้นหลังในโพสต์เดียว
บล็อกหน้าปกพร้อมรูปภาพเด่นของโพสต์แบบไดนามิก
WordPress 6.0 เปิดให้ใช้งานได้แล้ว บล็อกภาพเด่น ซึ่งอนุญาตให้ใช้รูปภาพเด่นของโพสต์หรือหน้าใด ๆ เป็นภาพพื้นหลังในบล็อกหน้าปก
ในเรื่องดังต่อไปนี้ วิดีโอสั้น ๆ, วิศวกร Automattic หารือเกี่ยวกับการเพิ่มภาพเด่นเพื่อครอบคลุมบล็อกด้วยตัวอย่างจาก อาร์เคียว ชุดรูปแบบ:
บล็อกรูปภาพรวมถึงบล็อกรูปภาพเด่นของโพสต์สามารถปรับแต่งเพิ่มเติมได้โดยใช้ duotone สีใน theme.json ตามที่กล่าวไว้ในบทสั้นๆ นี้ เชื่อมต่อจุด วิดีโอ YouTube (Anne McCarthy จาก Automattic)
ใช้ตัวอย่างกรณี (Wei, โหมดสว่าง)
ถ้าเราเรียกดูภาพขนาดย่อใน ไดเร็กทอรีธีมบล็อกเราเห็นส่วนใหญ่รวมถึงส่วนหัวของหน้าปกขนาดใหญ่ หากเราเจาะลึกเข้าไปในไฟล์เทมเพลต พวกเขาใช้ประโยชน์จากบล็อกหน้าปกที่มีพื้นหลังแบบภาพนิ่ง
ธีมที่พัฒนาขึ้นเมื่อเร็วๆ นี้บางธีมใช้บล็อกหน้าปกที่มีพื้นหลังรูปภาพเด่นของโพสต์แบบไดนามิก (เช่น Archeo, Wei, Frost, Bright Mode เป็นต้น) ภาพรวมโดยย่อของคุณสมบัติใหม่มีอยู่ใน วิดีโอ GitHub สั้น ๆ นี้.
รวมคุณสมบัติสีเน้นแบบไดนามิกของ Wabi ธีมพร้อมปกและโพสต์บล็อกรูปภาพเด่น Rich Tabor ขยายความคิดสร้างสรรค์ของเขาในใหม่ Wei ธีม (มีรีวิวฉบับเต็ม โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม) เพื่อแสดงภาพหน้าปกแบบไดนามิกจากโพสต์เดียว
ในโพสต์ประกาศของ Wei Rich Tabor เขียน: “เบื้องหลัง single.html เทมเพลตใช้บล็อกหน้าปกที่ใช้ประโยชน์จากรูปภาพเด่นของโพสต์ จากนั้นใช้สีดูโอโทนตามแบบแผนสีที่กำหนดให้กับโพสต์ ด้วยวิธีนี้ รูปภาพใด ๆ ก็จะดูดี”
หากคุณต้องการเจาะลึกลงไปในบล็อกส่วนหัวของธีม Wei และเรียนรู้วิธีสร้างธีมของคุณเอง นี่คือ วิดีโอสั้น ๆ ราคาเริ่มต้นที่ แฟรงค์ ไคลน์ (หลักสูตรการพัฒนา WP) ซึ่งอธิบายทีละขั้นตอนว่ามันถูกสร้างขึ้นอย่างไร
คล้ายกับธีม Wei ไบรอันการ์ดเนอร์ ยังใช้ประโยชน์จากบล็อกหน้าปกพร้อมโพสต์บล็อกรูปภาพเด่นในล่าสุดของเขา โหมดสว่าง ธีมเพื่อแสดงเนื้อหาที่โดดเด่นด้วย สีสันสดใส.
ไบรอันบอกกับ WPTaver: “เขาชอบธีมนี้มากที่สุดคือวิธีการใช้งาน Cover Block หน้าเดียว. มันดึงรูปภาพเด่นลงในบล็อกหน้าปก และยังมีสไตล์บล็อกแบบกำหนดเองสำหรับเงาและตัวเลือกความสูงเต็ม […] ฉันรู้สึกราวกับว่าสิ่งนี้นำเสนอสิ่งที่เป็นไปได้ด้วย WordPress สมัยใหม่”
สำหรับรายละเอียดเพิ่มเติม นี่คือ ไซต์สาธิต และ บทวิจารณ์แบบเต็มของธีม Bright Mode ของ Brian.
การออกแบบเลย์เอาต์ที่ซับซ้อนด้วยตัวแก้ไขบล็อก
เมื่อเร็ว ๆ นี้ WordPress ได้เปิดตัวตัวแก้ไขบล็อกใหม่ที่ได้รับการออกแบบ หน้าแรก และ ดาวน์โหลดหน้า. ประกาศ ดึงดูดปฏิกิริยาผสม จากผู้อ่าน รวมถึงจาก แมตต์มัลเลนเว็ก (Automattic) ที่แสดงความคิดเห็นเกี่ยวกับ 33 วัน นำมาออกแบบและเปิดตัวดังกล่าว “หน้าธรรมดา” คุณสามารถหา เพิ่มเติมการสนทนาเบื้องหลังที่นี่.
ในการตอบสนอง Jamie Marsland จาก Poollepress ได้สร้าง วิดีโอ YouTube นี้ ซึ่งเขาสร้างหน้าแรกที่เกือบจะเหมือนกันเกือบ 20 นาที
แสดงความคิดเห็นเกี่ยวกับวิดีโอ Marsland Sarah Gooding จาก WP Travern เขียน: “เขาคือสิ่งที่ใครๆ อาจอธิบายได้ว่าเป็นผู้ใช้ระดับสูงด้วยตัวแก้ไขบล็อก เขาสามารถสับเปลี่ยนแถว คอลัมน์ และกลุ่มต่างๆ รอบๆ ได้อย่างรวดเร็ว โดยปรับช่องว่างภายในและระยะขอบตามความจำเป็น และกำหนดสีให้แต่ละส่วนสอดคล้องกันสำหรับการออกแบบ ณ จุดนี้ นี่ไม่ใช่สิ่งที่ผู้ใช้ WordPress ทั่วไปส่วนใหญ่สามารถทำได้”
แม้ว่าตัวแก้ไขบล็อกจะพัฒนามาไกลแล้ว แต่ก็ยังมีจุดบอดที่เพิ่มขึ้นสำหรับนักพัฒนาธีมส่วนใหญ่และผู้ใช้ทั่วไปในการสร้างและออกแบบเลย์เอาต์ที่ซับซ้อนด้วย
เพิ่มการเพิ่มประสิทธิภาพให้กับบล็อก TT2 Gopher
ในส่วนนี้ ฉันจะแนะนำวิธีการเพิ่มการเพิ่มประสิทธิภาพให้กับ ธีม TT2 Gopher Blocks ที่ผมอ้างถึงในบทความที่แล้ว แรงบันดาลใจจากบล็อกหน้าปกจากธีมที่ฉันอธิบายไว้ก่อนหน้านี้ ฉันต้องการเพิ่มเทมเพลตหน้าปกสามแบบ (ผู้แต่ง หมวดหมู่ และปกเดี่ยว) ให้กับธีม
ขณะเรียกดูเว็บไซต์ เราสังเกตเห็นส่วนหัวของปกสองประเภท ส่วนหัวที่สังเกตได้ส่วนใหญ่เป็นหน้าปกผสมกับส่วนหัวของไซต์ (ชื่อไซต์และการนำทางด้านบนสุด) ลงในบล็อกหน้าปก (เช่น Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode เป็นต้น) นอกจากนี้เรายังพบส่วนหัวของหน้าปกที่ไม่รวมกับส่วนหัวของไซต์และวางไว้ด้านล่าง เช่น this อนาคตบีบีซี เว็บไซต์. สำหรับธีม TT2 Gopher บล็อก ฉันเลือกใช้อย่างหลัง
การสร้างรูปแบบส่วนหัวของหน้าปก
ขั้นแรก มาสร้างรูปแบบส่วนหัวของปกสำหรับเทมเพลตผู้แต่ง ซิงเกิล และอื่นๆ (หมวดหมู่ แท็ก) โดยใช้บล็อกปก จากนั้นเราจะแปลงเป็นรูปแบบ (ตามที่อธิบายไว้ ที่นี่ก่อนหน้านี้) และเรียกรูปแบบปกส่วนหัวที่เกี่ยวข้องลงในเทมเพลต
หากคุณคุ้นเคยกับการทำงานกับตัวแก้ไขบล็อก ให้ออกแบบส่วนหัวของคุณโดยใช้บล็อกหน้าปกในตัวแก้ไขไซต์ แล้วแปลงรหัสส่วนหัวของหน้าปกเป็นรูปแบบ อย่างไรก็ตาม หากคุณไม่คุ้นเคยกับโปรแกรมแก้ไข FSE วิธีที่ง่ายที่สุดคือการคัดลอกรูปแบบจาก ไดเรกทอรีรูปแบบ ในโพสต์ ทำการแก้ไขที่จำเป็นและแปลงเป็นรูปแบบ
ในฉัน บทความ CSS-Tricks ก่อนหน้าฉันได้พูดคุยรายละเอียดเกี่ยวกับการสร้างและการใช้รูปแบบบล็อก ต่อไปนี้คือภาพรวมคร่าวๆ ของเวิร์กโฟลว์ที่ฉันใช้เพื่อสร้างรูปแบบส่วนหัวของหน้าปกโพสต์เดียว:
รูปแบบส่วนหัวปกโพสต์เดียว
ขั้นตอนที่ 1: ใช้อินเทอร์เฟซ FSE มาสร้างไฟล์เปล่าใหม่และเริ่มโครงสร้างบล็อคส่วนประกอบตามที่แสดงในแผงด้านซ้าย
อีกวิธีหนึ่งสามารถทำได้ในโพสต์หรือหน้าก่อน จากนั้นคัดลอกและวางมาร์กอัปลงในไฟล์รูปแบบในภายหลัง
ขั้นตอนที่ 2: ต่อไป เพื่อแปลงมาร์กอัปด้านบนเป็นรูปแบบ อันดับแรก เราควรคัดลอกมาร์กอัปโค้ดและวางลงในรูปแบบใหม่ /patterns/header-single-cover.php ในโปรแกรมแก้ไขโค้ดของเรา เราควรเพิ่มมาร์กอัปส่วนหัวของไฟล์รูปแบบที่จำเป็น (เช่น ชื่อ กระสุน หมวดหมู่ ตัวแทรก ฯลฯ)
นี่คือรหัสทั้งหมดของ /patterns/header-single-cover.php ไฟล์:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
ขั้นตอนที่ 3: สำหรับการสาธิตนี้ ฉันเคยใช้ ภาพนี้จากไดเรกทอรีภาพถ่าย เป็นภาพพื้นหลังฟิลเลอร์ และใช้ เที่ยงคืน สีดูโอโทน ในการใช้โพสต์ภาพเด่นแบบไดนามิก เราควรเพิ่ม "useFeaturedImage":true ในบล็อกหน้าปกโดยแทนที่ลิงก์รูปภาพตัวเติมด้านบนก่อน "dimRatio":50 เพื่อให้บรรทัดที่ 10 ควรมีลักษณะดังนี้:
หรือเปลี่ยนรูปฟิลเลอร์ได้ด้วยการคลิก แทนที่ และเลือก ใช้รูปภาพเด่น ตัวเลือก:
ตอนนี้ รูปแบบปกของส่วนหัวควรมองเห็นได้ในแผงตัวแทรกรูปแบบ เพื่อใช้งานที่ใดก็ได้ในเทมเพลต โพสต์ และหน้า
ส่วนหัวของหน้าปกที่เก็บถาวร
แรงบันดาลใจจาก โพสต์ WP Tavern นี้ และคำแนะนำทีละขั้นตอนในการสร้างส่วนหัวของเทมเพลตผู้เขียน ฉันต้องการสร้างส่วนหัวของหน้าปกที่คล้ายกันและเพิ่มในธีม TT2 Gopher ด้วย
ขั้นแรก มาสร้างรูปแบบส่วนหัวของหน้าปกไฟล์เก็บถาวรสำหรับ author.html แม่แบบเช่นกัน ตามเวิร์กโฟลว์ข้างต้น ในกรณีนี้ ฉันกำลังสร้างสิ่งนี้ในหน้าเปล่าใหม่ โดยการเพิ่มบล็อค (ดังที่แสดงด้านล่างในมุมมองรายการ):
ในพื้นหลังของหน้าปก ฉันใช้รูปภาพเดียวกับที่ใช้ในปกส่วนหัวของโพสต์เดียว
เนื่องจากเราต้องการแสดงประวัติผู้เขียนสั้นๆ ในกลุ่มผู้เขียน จึงควรเพิ่มข้อความชีวประวัติในหน้าโปรไฟล์ผู้ใช้ มิฉะนั้น พื้นที่ว่างจะแสดงในส่วนหน้า
ต่อไปนี้เป็นรหัสมาร์กอัปของ header-author-coverที่เราจะใช้รูปแบบในขั้นตอนต่อไป:
Published by:
เพื่อปกปิดมาร์กอัปเป็น header-author-cover รูปแบบ เราควรเพิ่มมาร์กอัปส่วนหัวของไฟล์รูปแบบที่จำเป็นตามที่อธิบายไว้ก่อนหน้านี้ โดยการแก้ไข header-author-cover.php แบบแผน เราสามารถสร้างส่วนหัวที่คล้ายกันสำหรับแท็ก อนุกรมวิธาน และเทมเพลตที่กำหนดเองอื่นๆ
พื้นที่ header-category-cover.php รูปแบบของฉัน category.html เทมเพลตมีอยู่ใน GitHub.
การสร้างเทมเพลตด้วยบล็อกส่วนหัว
6.0 WordPress และเมื่อเร็ว ๆ นี้ Gutenberg 13.7 เทมเพลตเพิ่มเติมที่สร้างคุณสมบัติในตัวแก้ไขบล็อก ทำให้เป็นไปได้สำหรับผู้ใช้ WordPress จำนวนมากโดยไม่ต้องมีความรู้เชิงลึกเกี่ยวกับการเข้ารหัส เพื่อสร้างเทมเพลตที่กำหนดเอง
สำหรับข้อมูลโดยละเอียดเพิ่มเติมและกรณีการใช้งาน นี่คือ บันทึกการปรับแต่งอย่างละเอียดโดย Justin Tadlock.
ตัวแก้ไขบล็อก อนุญาตให้สร้างเทมเพลตประเภทต่างๆ รวมถึงเทมเพลตหน้าปก มาดูภาพรวมคร่าวๆ ว่ารวมกันได้อย่างไร บล็อกปก และ โพสต์บล็อกรูปภาพเด่น ด้วยเทมเพลต UI ใหม่ทำให้ง่ายต่อการสร้างเทมเพลตที่กำหนดเองได้หลากหลายประเภท แม้จะไม่มีทักษะการเขียนโค้ดน้อยหรือน้อยก็ตาม
การสร้างเทมเพลตทำได้ง่ายขึ้นมากด้วย Gutenberg 13.7 วิธีสร้างเทมเพลตบล็อก พร้อมรหัส และ ในตัวแก้ไขเว็บไซต์ อธิบายไว้ใน คู่มือธีม และใน บทความก่อนหน้าของฉัน.
เทมเพลตผู้แต่งพร้อมบล็อกหน้าปก
มาร์กอัป (ส่วนหัว) บนสุดของ author.html แม่แบบแสดงอยู่ด้านล่าง (บรรทัดที่ 6):
...
...
...
... นี่คือภาพหน้าจอของส่วนหัวของหน้าปกสำหรับ author.html และ category.html แม่แบบ:
ทั้งหมด รหัสสำหรับทั้งสองเทมเพลตมีอยู่ใน GitHub.
โพสต์เดี่ยวพร้อมบล็อคหน้าปก
เพื่อแสดงปกในโพสต์เดียวของเรา เราต้องเรียก header-cover-single pattern ใต้ส่วนหัว (บรรทัดที่ 3):
....
....
....นี่คือภาพหน้าจอที่แสดงมุมมองส่วนหน้าของโพสต์เดี่ยวพร้อมส่วนปกส่วนหัว:
ทั้งหมด single-cover.html เทมเพลตมีอยู่ใน GitHub.
คุณสามารถค้นหาบทช่วยสอนทีละขั้นตอนเพิ่มเติมเกี่ยวกับการสร้าง ส่วนโพสต์ส่วนหัวของฮีโร่ และ ใช้บล็อกปกพื้นหลังรูปภาพเด่นของโพสต์ on โรงเตี๊ยม WP และ การแก้ไขเว็บไซต์แบบเต็ม เว็บไซต์.
ที่นั่นคุณมี!
ทรัพยากรที่เป็นประโยชน์
บล็อกภาพเด่น
บล๊อคโพสต์
แม้ว่าโดยทั่วไปแล้วธีมของบล็อกจะเป็น ได้รับการตอบกลับมากมายจากสมาชิกชุมชน WordPress, ในความเห็นของฉัน, พวกเขาคืออนาคตของ WordPress, ด้วย. ด้วยธีมบล็อก ผู้เขียนธีมมือสมัครเล่น ที่ไม่มีทักษะในการเขียนโปรแกรมเชิงลึกและความเชี่ยวชาญในภาษา PHP และ JavaScript สามารถสร้างธีมที่มีเลย์เอาต์ที่ซับซ้อนด้วยส่วนหน้าปกฮีโร่ตามที่อธิบายไว้ในบทความนี้ร่วมกับ รูปแบบ และ หลากหลายสไตล์.
ในฐานะผู้ใช้ Gutenberg รุ่นแรกๆ ฉันรู้สึกตื่นเต้นกับเครื่องมือสร้างธีมใหม่อย่าง สร้างธีมบล็อก ปลั๊กอินและอื่น ๆ ที่อนุญาตให้ผู้สร้างธีมทำสิ่งต่อไปนี้ได้โดยตรงจาก UI ของตัวแก้ไขบล็อกโดยไม่ต้องเขียนโค้ดใดๆ:
- (i) สร้าง
- (ii) เขียนทับไฟล์ธีมและส่งออก
- (iii) สร้างว่างเปล่าหรือธีมลูกและ
- (iv) แก้ไขและบันทึกรูปแบบรูปแบบของธีมปัจจุบัน
นอกจากนี้ การทำซ้ำล่าสุดของปลั๊กอิน Gutenberg ช่วยให้เปิดใช้งาน การพิมพ์ของเหลว และ การจัดวางเลย์เอาต์ และการควบคุมโวหารอื่น ๆ โดยใช้ only theme.json ไฟล์ที่ไม่มี JavaScript และบรรทัดของกฎ CSS
ขอขอบคุณที่อ่านและแบ่งปันความคิดเห็นและความคิดของคุณด้านล่าง!
