วิธีเปลี่ยนรูปภาพส่วนหัวใน WordPress

เผยแพร่แล้ว: 2022-09-08

หากคุณต้องการเปลี่ยนรูปภาพส่วนหัวบนเว็บไซต์ WordPress คุณสามารถทำได้โดยแก้ไขไฟล์ header.php ในธีมของคุณ ในการเปลี่ยนรูปภาพส่วนหัวของแต่ละหน้า คุณจะต้องแก้ไขโค้ดในไฟล์ header.php เพื่อเรียกไฟล์รูปภาพอื่นสำหรับแต่ละหน้า ตัวอย่างเช่น หากคุณมีรูปภาพส่วนหัวสำหรับหน้าแรกและรูปภาพส่วนหัวอื่นสำหรับหน้าเกี่ยวกับ คุณจะต้องแก้ไขโค้ดใน header.php ให้มีลักษณะดังนี้: คุณยังสามารถเพิ่มโค้ดเพื่อแสดงรูปภาพส่วนหัวอื่นสำหรับ แต่ละโพสต์หรือหน้า ในการดำเนินการนี้ คุณจะต้องแก้ไขโค้ดในไฟล์ header.php เพื่อเรียกใช้ฟังก์ชัน the_post_thumbnail() ตัวอย่างเช่น หากคุณต้องการแสดงรูปภาพเด่นสำหรับแต่ละโพสต์ คุณจะต้องแก้ไขโค้ดใน header.php เพื่อให้มีลักษณะดังนี้: คุณยังสามารถใช้ปลั๊กอินเพื่อเปลี่ยนรูปภาพส่วนหัว มีปลั๊กอินบางตัวที่ให้คุณเปลี่ยนภาพส่วนหัวบนเว็บไซต์ WordPress ของคุณได้ หนึ่งปลั๊กอินที่คุณสามารถใช้ได้เรียกว่า Custom Header Image ด้วยปลั๊กอินนี้ คุณสามารถเปลี่ยนรูปภาพส่วนหัวสำหรับแต่ละหน้าหรือโพสต์ได้ ปลั๊กอินอื่นที่คุณสามารถใช้ได้เรียกว่า WP Header images ปลั๊กอินนี้ช่วยให้คุณเปลี่ยนรูปภาพส่วนหัวสำหรับแต่ละหน้า โพสต์ หรือหมวดหมู่

เมื่อต้องเลือกว่าจะให้รูปภาพใดปรากฏในหน้าใดหน้าหนึ่ง ไม่มีทางทำเช่นนั้น เมื่อเปลี่ยนรูปภาพส่วนหัวสำหรับส่วนของไซต์ คุณต้องแก้ไขธีม ในบทความนี้ ฉันจะแสดงวิธีแก้ไขรูปภาพส่วนหัวแบบทีละหน้า ขั้นตอนแรกคือการอัปโหลดภาพที่ครอบตัดและป้อน URL เมื่อคุณคลิกที่รูปภาพใดๆ ใน Media Library คุณจะพบส่วนหัวในคอลัมน์ทางขวามือ ตอนนี้คุณต้องวางโค้ดต่อไปนี้ลงในไฟล์ functions.php ของธีมของคุณ โดยใช้รหัสนี้ คุณสามารถเลือกรูปภาพส่วนหัวที่สอดคล้องกับพื้นที่ของไซต์ที่กำลังดูอยู่

ฉันจะใส่ส่วนหัวในทุกหน้าใน WordPress ได้อย่างไร

เครดิต: www.hitechwork.com

หากต้องการใส่ส่วนหัวของทุกหน้าใน WordPress คุณจะต้องแก้ไขไฟล์ header.php ของธีม สามารถทำได้ผ่านแผงผู้ดูแลระบบ WordPress โดยไปที่ ลักษณะที่ปรากฏ > ตัวแก้ไข เมื่อคุณอยู่ในเครื่องมือแก้ไข คุณจะต้องค้นหาไฟล์ header.php ทางด้านขวามือ เมื่อพบแล้วให้คลิกเพื่อเปิดขึ้น ในไฟล์ header.php คุณจะต้องค้นหาโค้ดที่เริ่มต้นส่วนส่วนหัว โดยทั่วไปแล้วจะเป็น div ที่มีคลาสของ "ส่วนหัว" เมื่อคุณพบรหัสส่วนหัวแล้ว คุณจะต้องใส่รหัสต่อไปนี้ด้านบน: รหัสนี้จะตรวจสอบว่าหน้าปัจจุบันเป็นหน้าแรกหรือไม่ หากใช่ จะแสดง รูปภาพส่วนหัว ที่คุณตั้งค่าไว้ในการตั้งค่า WordPress หากไม่ใช่หน้าแรก ระบบจะไม่แสดงรูปภาพส่วนหัว เมื่อคุณเพิ่มรหัสนี้แล้ว คุณจะต้องบันทึกการเปลี่ยนแปลงและอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณ

การใช้ WordPress เพื่อแสดง ส่วนหัวที่แตกต่างกัน ในแต่ละหน้านั้นมีประโยชน์อย่างมากสำหรับหน้าการขาย เช่นเดียวกับแคมเปญการแปลง อย่างไรก็ตาม คุณสามารถเลือกที่จะใช้ปลั๊กอินได้ตลอดเวลา ทั้งนี้ขึ้นอยู่กับธีม อ่านต่อด้านล่างเพื่อเรียนรู้เกี่ยวกับกระบวนการเปลี่ยนส่วนหัว WP ของคุณแบบต่อหน้า มีส่วนหัวและตัวเลือกการแสดงผลที่แตกต่างกัน หากธีมของคุณไม่มี hook (customer_header) คุณจะไม่สามารถใช้ส่วนหัวได้ คุณสามารถหลีกเลี่ยงการทำซ้ำส่วนหัวของคุณโดยใช้วิธีใดวิธีหนึ่งเหล่านี้ ปลั๊กอินไม่สามารถใช้ได้หากคุณเปลี่ยนเฉพาะส่วนหัวหรือโลโก้เท่านั้น

หากคุณต้องการใช้ปลั๊กอินเหล่านี้ คุณสามารถซ่อนองค์ประกอบด้วย CSS เพื่อแก้ไขด่วนได้ ปลั๊กอินส่วนหัวของ WP Display จะแทนที่ส่วนหัวเริ่มต้นด้วยส่วนหัวที่แตกต่างกันสำหรับโพสต์หรือหน้านั้น รูปภาพส่วนหัวที่แสดงคือรูปภาพที่เคยอัปโหลดใน การตั้งค่าส่วนหัว ของเครื่องมือปรับแต่งธีม สามารถสร้างกราฟิกที่กำหนดเองได้ในเวลาเพียงสองนาที (ขึ้นอยู่กับการเชื่อมต่ออินเทอร์เน็ตของคุณ) และจะถูกบันทึกลงในคอมพิวเตอร์ของคุณและอัปโหลดไปยัง WP เมื่อคุณรวมธีมบริสุทธิ์และเรียบง่าย (เวอร์ชันฟรี) และส่วนหัว WP Display คุณสามารถใส่ส่วนหัวที่แตกต่างกันในหน้าต่างๆ ได้ หากคุณต้องการประหยัดเงินในขณะที่ปรับแต่งธีม WP ฟรีสำหรับไซต์ WordPress ของคุณ การรวมกันจะทำงานได้ดีโดยไม่ต้องผ่านการปรับ CSS ให้ยุ่งยาก

วิธีเปลี่ยนส่วนหัวหรือส่วนท้ายใน WordPress

WordPress ทำให้การออกแบบและสร้างเว็บไซต์เป็นเรื่องง่าย ข้อเสียอย่างหนึ่งคือส่วนหัวและส่วนท้ายไม่ใช่ตัวเลือกที่ดีที่สุดเสมอไป คุณมีหลายทางเลือกในการเปลี่ยนส่วนท้ายหรือส่วนหัว ขั้นตอนแรกคือการเลือกเทมเพลตจากแดชบอร์ด WordPress เทมเพลตใหม่สามารถเปลี่ยนชื่อเป็น Footer หรือ Header (หรือ Footer) จากนั้น คุณจะต้องสร้างเทมเพลตส่วนท้ายหรือส่วนหัว นี่คือส่วนหัวหรือส่วนท้ายที่สร้างไว้ล่วงหน้าที่คุณสามารถใช้ได้ เมื่อคุณเลือก สร้างส่วนหัว (หรือส่วนท้าย) คุณจะเห็นชื่อของส่วนหัว (หรือส่วนท้าย) ที่คุณต้องการสร้าง หากคุณต้องการลบส่วนหัวออกจากทุกหน้าในไซต์ WordPress ของคุณ คุณต้องตั้งค่า Layout เป็น None ก่อน

รูปภาพส่วนหัวของ WordPress ไม่เปลี่ยนแปลง

เครดิต: www.eggradients.com

ในการเปลี่ยนรูปภาพส่วนหัว คุณต้องเปิดใช้งานปลั๊กอิน Unique Headers ก่อน หลังจากที่คุณเปิดใช้งานแล้ว ให้ไปที่ตัวแก้ไขเพจและเลือก อัปโหลดรูปภาพส่วนหัว

ส่วนหัวของบล็อก WordPress เกือบทั้งหมดเป็นส่วนประกอบภาพที่สำคัญที่สุดอย่างไม่ต้องสงสัย ต้องเลือกและปรับแต่งรูปภาพส่วนหัวเพื่อให้สอดคล้องกับข้อความที่ผู้เยี่ยมชมจะเห็นในครั้งแรกที่พวกเขาเปิดไซต์ของคุณ เมื่อใช้ธีม WordPress คุณสามารถเลือกภาพส่วนหัวของคุณเองได้เสมอ ขึ้นอยู่กับธีมที่คุณใช้ เป็นการดีที่สุดที่จะใช้น้อยกว่าหรือมากกว่าขนาดที่แนะนำเล็กน้อยสำหรับรูปภาพส่วนหัวเล็กน้อย ไฟล์รูปภาพสามารถสร้างขึ้นบนคอมพิวเตอร์ของคุณหรือจาก WordPress Media Library ของคุณ ข้อความส่วนหัว ของธีมยอดนิยมสามารถแสดงหรือซ่อนได้ รวมทั้งเปลี่ยนสีได้ ข้อความส่วนหัวในเว็บไซต์ของคุณคือชื่อเว็บไซต์ของคุณ และคุณสามารถเปลี่ยนได้โดยไปที่การตั้งค่า

3 วิธีในการปรับแต่งภาพส่วนหัวของคุณใน WordPress

คุณสามารถทำได้หลายวิธีใน WordPress ทั้งนี้ขึ้นอยู่กับสิ่งที่คุณต้องการปรับแต่ง หากคุณต้องการเพิ่มแบนเนอร์หรือรูปภาพเท่านั้น ให้ไปที่ส่วนปรับแต่ง คลิกไอคอนรูปเฟืองถัดจากบันทึกร่างแล้ว จากนั้นเลือกเผยแพร่ หลังจากที่คุณคลิกที่ปุ่มเผยแพร่ การเปลี่ยนแปลงของคุณจะถูกบันทึกและรูปภาพส่วนหัวใหม่ของคุณจะปรากฏขึ้น หากคุณต้องการให้รูปภาพส่วนหัวอยู่ตรงกลางไซต์ WordPress คุณสามารถทำได้โดยปรับการตั้งค่าเหล่านี้ รูปร่าง. หากคุณต้องการให้ส่วนหัวของคุณเป็นขนาดเต็มหน้าจอ ให้เลือกในกล่อง "กลาง" หากคุณต้องการให้มีศูนย์กลางภายในไซต์ WordPress ให้เลือกในกล่อง "ศูนย์" สุดท้าย หากคุณต้องการรูปภาพส่วนหัวที่กำหนดเองโดยสมบูรณ์ คุณสามารถสร้างเทมเพลตส่วนหัวที่กำหนดเองได้ สร้างไฟล์ใหม่ชื่อ header.php และโค้ด *br* เพื่อทำสิ่งนี้ให้สำเร็จ มีฟังก์ชัน php get_header() ใดบ้างที่ตั้งค่าไว้สำหรับการตอบกลับ HTTP เมื่อสร้างไฟล์ theme.php แล้ว คุณจะต้องคัดลอกบรรทัดต่อไปนี้ลงในไฟล์ functions.php: *br. PHP (รวมถึง HTML, CSS และ JS) ควรรวมอยู่ใน (header.html) ตอนนี้คุณสามารถใช้เทมเพลตนี้เพื่อสร้างภาพส่วนหัวของคุณเองได้ ในการเริ่มต้น ให้เพิ่มโค้ดต่อไปนี้ในไฟล์ header.php ของคุณ: *br. Get_header () ใน PHP echo? คุณจะสามารถเห็นภาพส่วนหัวของคุณได้หากคุณใช้ WordPress

วิธีเปลี่ยนรูปภาพส่วนหัวใน Elementor

หากต้องการเปลี่ยนรูปภาพส่วนหัวใน elementor ให้ไปที่ ส่วนหัว แล้วคลิกไอคอนรูปภาพ เลือกรูปภาพที่คุณต้องการใช้แล้วคลิกปุ่ม 'แทรก'

คุณสมบัติการปรับแต่งส่วนหัวของ Elementor ทำให้ง่ายต่อการสร้างและปรับแต่งส่วนหัว เราจะพูดถึงวิธีการแก้ไขส่วนหัวใน Elementor ในบล็อกนี้ คลิกที่นี่สำหรับข้อมูลเพิ่มเติม ช่องโซเชียลของเรา ตลอดจนที่อยู่สำนักงานและแบบฟอร์มการค้นหา ควรแสดงในส่วนหัว คุณสามารถเขียนข้อความของปุ่ม แทรกลิงก์ และจัดการการจัดตำแหน่งปุ่ม ขนาด และการจัดตำแหน่งได้ คุณสามารถใช้รหัสปุ่มเพื่อเพิ่มรหัสที่กำหนดเองให้กับปุ่มได้ แต่ถ้าคุณยังไม่มี คุณสามารถเพิ่มรหัสได้ที่นี่ ทางด้านขวาของส่วนหัว เราต้องการแสดงช่องทางโซเชียลของเรา เพิ่มวิดเจ็ต Elementor Social Icons ในคอลัมน์กลางแล้ว

หากคุณใช้ Elementor เป็นผู้ใช้ทั่วไป คุณสามารถใช้วิดเจ็ต Elementor เพื่อสร้าง ส่วนหัวที่กำหนดเอง ได้ ในคำแนะนำทีละขั้นตอนนี้ คุณจะได้เรียนรู้วิธีใช้ Elementor เพื่อสร้างและปรับแต่งส่วนหัว หากต้องการทราบข้อมูลล่าสุดเกี่ยวกับการออกแบบเว็บที่ทันสมัย ​​คุณสามารถสร้างส่วนหัวที่ติดหนึบได้ ความเร็วในการโหลดของ Happy Addons ไม่เป็นสองรองใคร Elementor ได้เปิดตัววิดเจ็ตใหม่สำหรับโมดูล 'Happy Mega Menu' ด้วยวิดเจ็ตนี้ คุณสามารถสร้างเมนูที่กำหนดเองสำหรับ Adidas, Dribbble, weDevs, InVision และอื่นๆ รวมถึงเมนูสำหรับบริษัทอื่นๆ

ฉันจะเปลี่ยนรูปภาพในส่วนท้ายของ Elementor ได้อย่างไร

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

3 วิธีในการทำให้ส่วนหัวของคุณติดอยู่ที่ด้านบนสุดของหน้า

หากต้องการให้ส่วนหัวอยู่ที่ด้านบนสุดของหน้า มีวิธีดำเนินการสองสามวิธี สามารถใช้เอฟเฟกต์ติดหนึบใน Elementor ได้ เอฟเฟกต์นี้สามารถพบได้ในส่วนขั้นสูงของตัว แก้ไขส่วนหัว คุณสามารถเลือก “ติดที่ด้านบน” และติดส่วนหัวของคุณกับอุปกรณ์ใด ๆ ที่คุณชอบโดยกดปุ่ม “ติด” หลังจากที่คุณได้เลือกเผยแพร่แล้ว Elementor จะขอให้คุณระบุเงื่อนไขในส่วนหัวของคุณ ปลั๊กอินติดหนึบภายนอกก็มีให้เช่นกัน นี่เป็นวิธีที่ยอดเยี่ยมในการรวมส่วนหัวที่ติดหนึบบนเว็บไซต์โดยไม่ต้องใช้ Elementor เนื่องจากมีปลั๊กอินมากมายในตลาด คุณจึงเลือกปลั๊กอินที่ดีที่สุดสำหรับคุณได้ ตรวจสอบให้แน่ใจว่าคุณใส่เงื่อนไขในส่วนหัวของคุณที่ด้านบนสุดของหน้าของคุณจะมองเห็นได้ไม่ว่าจะด้วยวิธีใดก็ตามที่คุณเลือก เว็บไซต์ของคุณจะได้รับการปรับปรุงทั้งด้านภาพและการใช้งานด้วยเหตุนี้

วิธีเพิ่มภาพพื้นหลังของส่วนหัวใน WordPress

ไปที่ ลักษณะที่ปรากฏ > กำหนดเอง > ตัวเลือกธีมทั่วไป > ชื่อส่วนหัวของหน้า เพื่อเปลี่ยนรูปแบบพื้นหลังสำหรับส่วนหัวส่วนกลางของคุณ แผงนี้ให้คุณเลือกสไตล์ที่คุณต้องการ และคุณควรเลือก "ภาพพื้นหลัง" เพื่อเริ่มต้น

คุณจะเพิ่มภาพพื้นหลังให้กับไซต์ WordPress ของคุณได้อย่างไรโดยไม่ต้องมีประสบการณ์ในการเขียนโค้ด มีสามตัวเลือกที่คุณสามารถเลือกได้ แต่อาจใช้ไม่ได้ทั้งหมดหรืออาจทำงานแตกต่างกันไปตามธีมที่คุณใช้ หากธีมของคุณมีการตั้งค่าพื้นหลัง เช่นเดียวกับธีมยอดนิยมในปัจจุบัน คุณอาจต้องการใช้เพื่อทำให้รูปภาพของคุณดูโดดเด่นยิ่งขึ้น มีหลายวิธีในการเพิ่มภาพพื้นหลังไปยังเว็บไซต์ WordPress เป็นไปได้ที่จะใช้รูปภาพที่สามารถเรียงต่อกัน (หรือภาพเดียว) สำหรับพื้นหลังของคุณได้ เครื่องมือปรับแต่งสามารถใช้เพื่อเปลี่ยนพื้นหลังของประเภทหรือทั้งไซต์ได้ นอกจากการเปลี่ยน CSS แล้ว คุณยังสามารถเปลี่ยนได้หากคุณลงมือทำจริง

หลังจากติดตั้งและเปิดใช้งานปลั๊กอิน Gutenberg คุณจะได้รับบล็อก Gutenberg พิเศษที่สามารถใช้ตั้งค่าพื้นหลังแบบไดนามิกได้ วิธีนี้เกี่ยวข้องกับการตั้งค่า meta-block ที่ทำหน้าที่เป็นพื้นหลัง แล้วเติมด้วยบล็อกหรือบล็อกอื่นหลังจากนั้น คุณสามารถปรับการตั้งค่าสีได้ตามใจชอบ แต่ถ้าคุณต้องการพื้นหลังขาวดำหรือพื้นหลังวิดีโอ คุณสามารถเลือกการตั้งค่าสีได้ คุณสามารถใช้พื้นหลังใดก็ได้ที่คุณต้องการในส่วนเนื้อหาของเว็บไซต์ของคุณ ตัวอย่างเช่น สามารถใช้ใบเสนอราคาหรือหัวเรื่องในพื้นหลังพารัลแลกซ์ มีความเป็นไปได้สูงที่คุณจะต้องจัดเก็บสื่อรูปแบบขนาดใหญ่ ซึ่งจะส่งผลต่อเวลาในการโหลด ถึงกระนั้น กราฟิกที่สวยงามก็เป็นวิธีที่ดีที่สุดในการสร้างความประทับใจแรกพบที่น่าจดจำ

วิธีใช้รูปภาพเป็นพื้นหลังของโพสต์และเพจ

เมื่อใช้ฟิลด์ CSS ที่กำหนดเอง คุณจะใช้รูปภาพเป็นฉากหลังสำหรับโพสต์หรือเพจที่ต้องการได้ คุณสามารถเพิ่มบรรทัดต่อไปนี้ในโพสต์หรือเพจของคุณได้ ไฟล์ style.html สามารถพบได้ในส่วน style.css โพสต์- หรือหน้า * *br Title is url(XXX); ตำแหน่งอยู่ในพื้นหลัง