วิธีเพิ่มภาพพื้นหลัง WordPress ลงในเว็บไซต์ของคุณอย่างถูกต้อง?

เผยแพร่แล้ว: 2022-01-06

การเพิ่มภาพพื้นหลัง WordPress ลงในเว็บไซต์ของคุณง่ายหรือไม่? คำตอบคือใช่เป็นส่วนใหญ่ เว้นแต่ธีมของคุณไม่รองรับ

ความจริงก็คือ ธีม WordPress จำนวนมากในปัจจุบันได้เสนอวิธีที่ง่ายดายในการเพิ่มและเปลี่ยนภาพพื้นหลังที่มีอยู่

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

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

ภาพพื้นหลังของ WordPress คือ อะไร?

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

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

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

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

ไม่ว่าจะด้วยเหตุผลใดก็ตาม เรามาทดลองเปลี่ยนมันกัน

ใช้ตัวปรับแต่ง WordPress เริ่มต้นเพื่อ เพิ่ม ภาพ พื้นหลังของ WordPress

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

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

จากแดชบอร์ด WordPress ให้ไปที่ Appearance > Wallpaper/ Background or Appearance > Customize > Wallpaper

คลิกที่ปุ่ม Select Image เพื่อเปิด Media Library

เลือกภาพที่คุณต้องการ คุณสามารถอัปโหลดจากคอมพิวเตอร์ของคุณหรือเลือกไฟล์ที่มีอยู่จากไลบรารีสื่อ

คลิกปุ่ม เลือกรูปภาพ เมื่อคุณมีความสุข
ถ้าคุณชอบสิ่งที่คุณเห็นในการแสดงตัวอย่าง ให้คลิกปุ่ม เผยแพร่ และนั่นก็คือ!

นอกจากนี้ WordPress ยังมีเครื่องมือแก้ไขภาพพื้นหลังอย่างง่าย คุณสามารถทดลองใช้เพื่อดูว่าขนาด ตำแหน่ง ฯลฯ ใดดีที่สุด

ไม่ต้องกังวลว่าจะติดอะไร ง่ายต่อการกลับไปที่การตั้งค่าและเปลี่ยนพื้นหลัง (และตัวเลือกที่เกี่ยวข้อง) ทุกเมื่อที่คุณต้องการ

ใช้ตัวสร้างหน้า Elementor เพื่อเพิ่มรูปภาพพื้นหลัง WordPress ไปยังโพสต์/เพจ

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

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

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

คลิกที่ไอคอนการตั้งค่าขนาดเล็กที่มุมล่างซ้ายของตัวสร้างเพจ

จากนั้นเลือกแท็บ สไตล์

หลังจากนั้น คลิกที่ไอคอนพู่กันเพื่อเพิ่ม ภาพพื้นหลังของ WordPress

ถัดไป คลิกที่ปุ่ม เลือกรูปภาพ เพื่อเปิดไลบรารีสื่อ

เลือกภาพที่คุณต้องการ คุณสามารถอัปโหลดจากคอมพิวเตอร์ของคุณหรือเลือกไฟล์ที่มีอยู่จากไลบรารีสื่อ

จากนั้นคลิกปุ่ม 'แทรกสื่อ' ที่มุมล่างขวา

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

อย่าลืมกดปุ่ม 'UPDATE' เพื่อบันทึกการเปลี่ยนแปลงทั้งหมดและอัปเดตโพสต์/หน้า

นอกจากนี้ Elementor ยังให้การปรับเปลี่ยนบางอย่างสำหรับภาพพื้นหลังของ WordPress เช่น ตำแหน่ง สิ่งที่แนบมา ทำซ้ำ ฯลฯ อย่าลังเลที่จะทดลองกับพวกเขาเพื่อค้นหาพื้นหลังที่ดีที่สุด

ใช้ปลั๊กอินเพื่อ เพิ่มรูปภาพพื้นหลัง WordPress

มีปลั๊กอินฟรีแต่ยอดเยี่ยมหลายตัวที่สามารถเพิ่ม รูปภาพพื้นหลังของ WordPress ได้ ตัวอย่างเช่น ภาพพื้นหลังแบบเต็มหน้าจออย่างง่าย พื้นหลัง WordPress ขั้นสูง ตัวจัดการพื้นหลังแบบเต็ม ฯลฯ

เพิ่ม ภาพ พื้นหลัง WordPress สำหรับทั้งเว็บไซต์

ในคู่มือนี้ เราจะใช้ภาพพื้นหลังแบบเต็มหน้าจออย่างง่าย เนื่องจากเป็นแบบเรียบง่าย จึงเป็นที่มาของชื่อ

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

ในการดำเนินการนั้นต้องใช้ขั้นตอนง่ายๆ เพียงไม่กี่ขั้นตอน มีเวอร์ชันที่ต้องชำระเงินซึ่งเพิ่มคุณสมบัติพิเศษ อย่างไรก็ตาม ของฟรีคือสิ่งที่เราต้องการ

ติดตั้งและเปิดใช้งานปลั๊กอิน Simple Screen Background Image
จากแดชบอร์ด WordPress ให้ไปที่ Appearance > Fullscreen BG Image

คลิกที่ปุ่ม เลือกรูปภาพ เพื่อเปิดไลบรารีสื่อ

เลือกภาพที่คุณต้องการ คุณสามารถอัปโหลดจากคอมพิวเตอร์ของคุณหรือเลือกไฟล์ที่มีอยู่จากไลบรารีสื่อ

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

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

เพิ่ม รูปภาพพื้นหลัง WordPress ใน หน้า เฉพาะ /Post

ในคู่มือนี้ เราจะใช้ปลั๊กอิน Advanced WordPress Backgrounds ที่เรากล่าวถึงข้างต้น

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

ในกรณีนี้ เราจะเพิ่มเฉพาะภาพพื้นหลังแบบคงที่ในพื้นที่เนื้อหา โดยเฉพาะโพสต์/หน้า

เนื่องจากวิธีนี้ใช้ได้กับบล็อกของ Gutenberg โปรดเปลี่ยนจากโหมด Classic Editor หากคุณต้องการ

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

คลิกปุ่ม รูปภาพ ที่คอลัมน์ด้านข้าง จากนั้นคลิกปุ่ม เลือกรูปภาพ ด้านล่างเพื่อเปิดไลบรารีสื่อ

เลือกภาพที่ต้องการ จากนั้นให้คลิกปุ่ม เลือก เมื่อคุณทำเสร็จแล้ว คุณควรเห็นภาพพื้นหลัง

ที่แถบไอคอนด้านบน ให้คลิกที่ไอคอนรูปแฮมเบอร์เกอร์ จากนั้นเลือกตัวเลือก เต็มความกว้าง เพื่อให้ครอบคลุมความกว้างทั้งหมด นี่เป็นทางเลือกทั้งหมด

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

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

อย่าลืมบันทึกโพสต์/หน้าเมื่อคุณพอใจกับผลลัพธ์

ใช้ CSS เพื่อเพิ่ม รูปภาพพื้นหลัง WordPress

ตอนนี้ เราจะสำรวจวิธีการ เปลี่ยนภาพพื้นหลัง WordPress โดยใช้ CSS สามารถทำได้ทั้งไซต์หรือสำหรับหมวดหมู่เฉพาะโดยใช้ WordPress Customizer

จากแดชบอร์ด WordPress ให้ไปที่ ลักษณะที่ปรากฏ > ปรับแต่ง เพื่อเข้าถึงเครื่องมือปรับแต่ง WordPress

เลื่อนลงและคลิกที่ส่วน CSS เพิ่มเติม

คัดลอกและวางโค้ดที่เหมาะสมด้านล่างลงในฟิลด์ CSS:

เพิ่ม ภาพ พื้นหลัง WordPress สำหรับทั้งเว็บไซต์

 body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

อย่าลืมแทนที่ข้อความตัวยึดตำแหน่ง 'imageURL' ด้วย URL ไฟล์รูปภาพจริง หากต้องการดูสิ่งนี้ ให้เลือกภาพที่คุณต้องการใน Media Library เพื่อดูข้อมูลภาพ

และถ้าคุณรู้จัก CSS อยู่แล้ว ก็สามารถปรับแต่งมันได้ตามต้องการ

เพิ่ม รูปภาพพื้นหลัง WordPress บน หน้า หมวดหมู่ เฉพาะ

 body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

อย่าลืมแทนที่ข้อความตัวยึดตำแหน่ง 'imageURL' ด้วย URL ไฟล์รูปภาพจริงและ 'categoryid' ด้วยชื่อหมวดหมู่ที่ถูกต้อง

หากต้องการทราบรหัสหมวดหมู่ ให้ทำตามคำแนะนำด้านล่าง:

จากแดชบอร์ด WordPress ให้ไปที่ โพสต์ > หมวดหมู่

วางเมาส์เหนือข้อความ แก้ไข ของหมวดหมู่ที่คุณต้องการอ้างอิง คุณจะเห็น URL ที่ด้านล่างซ้ายของหน้า โดยแสดงรหัสหมวดหมู่

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ภาพพื้นหลังใน WordPress

การตั้งค่าภาพพื้นหลังที่กำหนดเองบน WordPress ดูเหมือนเป็นเรื่องง่าย ใช่! มันเป็นความจริงในกรณีส่วนใหญ่ แต่ไม่เสมอไป

ดังนั้นเราจึงแนะนำให้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดสำหรับภาพพื้นหลังของ WordPress เพื่อขจัดปัญหาให้ได้มากที่สุด

ตรวจสอบการสนับสนุนภาพพื้นหลังก่อนใช้ธีม WordPress

ขออภัย ธีม WordPress บางธีมไม่รองรับภาพพื้นหลังที่กำหนดเอง โดยปกติแล้วเนื่องจากพื้นหลังไม่ตรงกับการออกแบบโดยรวมของธีม ดังนั้นนักพัฒนาจึงเลือกที่จะปิดอย่างสมบูรณ์

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

ติดกับรูปภาพคุณภาพสูง

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

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

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

ปรับภาพพื้นหลังให้เหมาะสม

เช่นเดียวกับรูปภาพทั้งหมดที่อัปโหลดไปยังไซต์ WordPress ของคุณ คุณควรปรับรูปภาพพื้นหลังให้เหมาะสมก่อนเผยแพร่

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

คุณมีสองตัวเลือกที่นี่:

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

ความคิดสุดท้าย

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

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

ตามหลักการแล้ว ให้ใช้ WordPress Customizer เพื่อเพิ่มภาพพื้นหลังทุกครั้งที่ทำได้ เนื่องจากได้รับการออกแบบมาโดยเฉพาะเพื่อให้ทำงานได้ตามที่ต้องการ

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

ตอนนี้ ไปข้างหน้าและสร้างสรรค์กับพื้นหลังเว็บไซต์ของคุณเพื่อดึงดูดผู้เยี่ยมชมของคุณทางสายตา