รวม CSS Grid Layouts อย่างง่ายเข้ากับ WordPress

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

ฉันจะใช้ชุดรูปแบบเริ่มต้นของสระว่ายน้ำใน WordPress สำหรับบทช่วยสอนนี้เพื่อแสดงวิธีการ "เริ่มต้นจากศูนย์" เพื่อรับกริดที่เหมาะสม.

ขั้นตอนที่ 1: กำหนดความกว้างกริดของคุณ

ก่อนเริ่มต้นใช้งานคุณต้องพิจารณาว่ากริดของคุณจะต้องกว้างขนาดไหน สำหรับเว็บไซต์ WordPress ของฉันฉันเห็นความกว้างของคอลัมน์หลักของฉันคือ 450px โดยใช้คุณลักษณะ "องค์ประกอบการตรวจสอบ" ของ Google Chrome เมื่อคุณคลิกขวาที่วัตถุ นี่เป็นวิธีที่เร็วที่สุดที่ฉันพบซึ่งสามารถกำหนดความกว้างและความสูงของวัตถุบนเว็บเพจได้อย่างรวดเร็ว.

ขั้นตอนที่ 2: ออกแบบกริด

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

ฉันต้องการจอแสดงผลสามคอลัมน์และฉันต้องแน่ใจว่าพิกเซลของฉันอยู่ที่ 450 ดังนั้นปรับตามและข้ามไปที่แท็บ "ส่งออก" เราจะไม่ข้ามไป * พิมพ์ ฟีเจอร์ในบทช่วยสอนนี้แม้ว่าจะคุ้มค่ากับการสำรวจด้วยตัวเอง.

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

.
 
 
 
ขั้นตอนที่ 3: การอัปเดตสไตล์ชีท WordPress ของคุณ
 
เข้าสู่เว็บไซต์ WordPress ของคุณและไปที่ Appearance> Editor.
 
 
 
ที่ด้านล่างขวาของแผงตัวแก้ไขคุณจะเห็น styles.css ไฟล์ (หรือสิ่งที่คล้ายกันขึ้นอยู่กับธีมของคุณ) คลิกที่นี่เพื่อเปิดขึ้น.
 
 
 
เลื่อนไปที่ด้านล่างของแผ่นงานและวางคำนำหน้าของคุณจาก MindPlay.dk:
 
 
 
ขั้นตอนที่ 4: การนำกริดมาใช้
 
หากต้องการใช้กริดคุณเพียงแค่สร้าง 
 กับคลาส "กริด" แต่ละพื้นที่ของกริดถูกกำหนดไว้ใน CSS เปิดหน้าใหม่หรือโพสต์ ไปที่แท็บ HTML เพื่อเริ่มสร้างกริดของคุณ.
 
 
 
นี่คือตัวอย่างก่อนที่คุณสามารถวางลงในสถานที่เพื่อให้คุณเริ่มต้น:
 
 
  
คอลัมน์ซ้าย
  
คอลัมน์กลาง
  
คอลัมน์ด้านขวา
  
 
 
นี่คือสิ่งที่ดูเหมือนใน WordPress:
 
 
 
บันทึก / อัพเดทหน้าและดูผลลัพธ์ ในกรณีของฉันนี่คือหน้าแรกของเว็บไซต์:
 
 
 
ดังที่คุณเห็นจากภาพหน้าจอด้านบนเรามีสามคอลัมน์ของเราและทุกอย่างเหมาะสมที่เราคาดหวัง คุณสามารถเพิ่มแถวได้มากเท่าที่คุณต้องการโดยเริ่มจากสิ่งต่อไปนี้ 
:
 
 
   
คอลัมน์ซ้าย
  
คอลัมน์กลาง
  
คอลัมน์ด้านขวา
    
แถวซ้าย # 2
  
แถวกลาง # 2
  
แถวขวา # 2
  
 
นี่คือลักษณะที่ปรากฏ:
 
 
 
ตอนนี้คุณสามารถเพิ่มรูปภาพหรือข้อความและจัดรูปแบบแต่ละแถวให้ตรงตามที่คุณต้องการ.
 
เคล็ดลับในการปรับแต่ง
 
คุณอาจมีปัญหาในบางเบราว์เซอร์เมื่อคุณมีมากกว่าหนึ่งแถว หากต้องการแก้ไขปัญหานี้คุณจะต้องสร้างระยะขอบด้านขวาสุด (.ตาราง-M4, ในกรณีของเรา) ถึงความสูงที่คุณต้องการให้แต่ละแถวเป็น หากคุณใช้รูปภาพที่มีขนาด 250px คูณ 250px ให้สร้างความสูงของแถวใน .ตาราง-M4 เป็น 250px:
 
.grid-m4 ลอย: ซ้าย; ความกว้าง: 20px; ความสูง: 250px; 
 
นี้จะทำให้แน่ใจว่าคุณ .ตาราง-M1 ทางด้านซ้ายของแถวถัดไปจะไม่ลอยขึ้นไปยังแถวด้านบน.
 
หากคุณต้องการจัดรูปแบบพื้นหลังของตารางทั้งหมดคุณจะต้องปรับความสูงของ .ตะแกรง ชั้น สมมุติว่าคุณมีสี่แถวในกริดของคุณแต่ละอันอยู่ที่ 250px คุณจะต้องการเพิ่มความสูงให้กับคลาส. grid ที่ 1,000px ดังนั้นองค์ประกอบการออกแบบใด ๆ ที่คุณเพิ่มจะครอบคลุมการออกแบบกริดทั้งหมด.
 
.กริด width: 450px; ความสูง: 1,000px; ขอบ: อัตโนมัติ; 
 
ขึ้นอยู่กับรุ่นของตัวสร้างกริดของ MindPlay.dk ที่คุณใช้ไซต์อาจไม่สร้าง ".grid-m4" และคุณจะต้องใช้แทน .ตาราง-M1 หลังจาก .ตาราง c3 เพื่อให้แน่ใจว่ากริดของคุณขยายไปยังตำแหน่งที่เหมาะสม:
 
  
คอลัมน์ซ้าย
  
คอลัมน์กลาง
  
คอลัมน์ด้านขวา
  
 
ผลลัพธ์สุดท้าย 
 
นี่คือผลลัพธ์สุดท้ายของฉันที่มีสองแถวและกราฟิกที่เรียบง่าย:
 
 
 
สนุกกับการออกแบบและจำไว้ว่าคุณสามารถจัดตารางของคุณในแบบที่คุณต้องการ.
 
หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย ธารา Hornor สำหรับ Hongkiat.com Tara จบปริญญาตรีด้านภาษาอังกฤษและเขียนเกี่ยวกับการตลาดการโฆษณาการสร้างแบรนด์การออกแบบกราฟิกและการเผยแพร่บนเดสก์ท็อป นอกจากอาชีพเขียนของเธอแล้วทารายังสนุกกับการใช้เวลาอยู่กับสามีและลูก ๆ อีกสองคน.