25
Apr

วิธีแก้ปัญหา Calendar Widget ใน WordPress ใหญ่ล้น Sidebar

Category: Blog / 676 views

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

car

นี่คือ ปฏิทิน Final ที่ต้องการควรจะมีขนาดพอดีแบบนี้

จริงๆแล้ว เราต้องมาดูก่อนว่า ปัญหาที่แท้จริงคืออะไร ปัญหาที่แท้จริงของปฏิทินใหญ่เวอร์จนล้น Sidebar เกิดจากการตั้งค่า ตัวอักษร และ padding ใหญ่เกินไปครับ เช่น ตั้งค่า font size ใน <caption> ใหญ่ 30px แบบนี้ มันก็จะล้นได้กรอบแน่ๆ ดังนั้นการแก้ไขต้องมาแก้ตรงจุดนี้ ไม่ใช่ไปตั้งค่าความกว้างใน table ครับ เหมือนกับอาการคันแต่เกาไม่ตรงจุด เกาให้ตายก็ไม่หายคัน (เอ๊ะ จริงๆ ตายแล้วก็น่าจะหายคันแหล่ะครับ ฮ่าๆ)

การแก้ไข จะมีทั้งหมดอยู่จุดหลักๆคือ หนึ่งตัว<caption> สองช่องว่าง padding ระหว่าง columns ของตาราง สาม padding ระหว่าง thead ซึ่งก็ลองปรับเปลี่ยนได้ ตามตัวอย่างโค้ดด้านล่างนี่ครับ เอาไปแปะใน style.css ของคุณ นะครับ


table#wp-calendar caption{
font-size:14px; //ขนาดตรงนี้เอาให้เหมาะสม
padding:0px; //ช่องว่างปรับให้เหมาะสม
font-weight: bold;
margin-top:10px;
}
table#wp-calendar tr td, table#wp-calendar table tbody tr td{
font-size:12px; //ปรับให้เหมาะสม
}
table#wp-calendar thead tr th{
font-size: 12px; //ปรับให้เหมาะสม
}
table#wp-calendar thead th, table#wp-calendar tbody td, table#wp-calendar tr td{
padding:2px 8px; //ปรับให้เหมาะสม
}

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

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours