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

ขั้นตอนที่ 1

ไปที่ wp-admin ไดเรกทอรีของเว็บไซต์ของคุณและเข้าสู่แดชบอร์ด WordPress นำทางไปยัง ลักษณะที่ปรากฏ และคลิก บรรณาธิการ ลิงค์. คลิกที่ลิงค์เพื่อ header.php ภายใต้หัวข้อเทมเพลตเพื่อโหลดไฟล์ HTML ที่มีแท็ก body ของเว็บไซต์ของคุณ

ขั้นตอนที่ 2

ค้นหา div ที่มี ID ของ "container" ใต้แท็ก body ในไฟล์ header.php ของคุณโดยตรง หากคุณไม่พบให้เพิ่ม นี่คือสิ่งที่ควรมีลักษณะดังนี้:

ด้านบนโดยตรง **เพื่อปิด div.

ขั้นตอนที่ 3

โหลด style.css ในบรรณาธิการ เพิ่มรหัสนี้ที่ด้านล่างของไฟล์:

คอนเทนเนอร์ {

สีพื้นหลัง: #038394; ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, #038394, #00CCCC); ภาพพื้นหลัง: -webkit-linear-gradient (บนสุด #038394, #00CCCC); ภาพพื้นหลัง: -moz-linear-gradient (บนสุด #038394, #00CCCC); }

โค้ดด้านบนตั้งค่าทางเลือกสำหรับเบราว์เซอร์ที่ไม่รองรับการไล่ระดับสี การตั้งค่า "background-image" เป็น "linear-gradient" จะสร้างพื้นหลังไล่ระดับ อย่างน้อย คุณต้องกำหนดทิศทางสำหรับการไล่ระดับสีเพื่อเริ่มต้น จากนั้นสีสองสีจะค่อยๆ จางลงเข้าหากัน เพิ่มรหัสบรรทัดนั้นอีกครั้งสองครั้ง โดยเพิ่มคำนำหน้า Webkit และ Mozilla สำหรับเบราว์เซอร์ Chrome, Safari และ Firefox

คลิกที่สีน้ำเงิน อัปเดตไฟล์ ปุ่มเพื่อบันทึกไฟล์ style.css ของคุณ พื้นหลังไล่ระดับสีของคุณจะปรากฏในทุกหน้าของเว็บไซต์ WordPress ของคุณ