[WordPress] Class ที่เราไม่ควรลืมในการเขียน CSS

เวลาเราสร้าง WordPress Theme ขึ้นมานั้น แน่นอนว่า CSS เป็นส่วนประกอบสำคัญอย่างหนึ่งเลย โดยตัว WordPress จะยึดตัว style.css เป็นหลัก และใน style.css นั้นเราควรมี Class เหล่านี้อยู่ด้วย

Class ที่ควรมีใน CSS ของเรา

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

CSS ตัวอย่างของ Class ที่ควรจะมีใน CSS ของเรา

[css]
/* =WordPress Core
————————————————————– */
.alignnone {
margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

.alignright {
float:right;
margin: 5px 0 20px 20px;
}

.alignleft {
float: left;
margin: 5px 20px 20px 0;
}

.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}

a img.alignnone {
margin: 5px 20px 20px 0;
}

a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}

a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}

.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}

.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
margin: 5px 0 20px 20px;
}

.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
[/css]

ซึ่งตัวอย่างนี้ ก็นำมาจากในเว็บของ wordpress.org เอง ซึ่งเราสามารถนำไปปรับเปลี่ยนได้ตามที่เราต้องการนะครับ


Posted

in

by

Comments

2 responses to “[WordPress] Class ที่เราไม่ควรลืมในการเขียน CSS”

  1. NPDesign Avatar

    ตอนทำ Theme ใหม่ๆโดนมาแล้ว ถ้าไม่มีนี่ พวก Image หรือพวกชิดซ้าย, กลาง, ขวา และส่วนอื่นๆถึงกับอัมพาตเลย (เพี้ยน) ครับ 🙂

    1. rabbitinblack Avatar
      rabbitinblack

      ผมก็เพิ่งรู้ว่าต้องมีพวกนี้ หลังจากทำไป สอง สามเว็บแล้วเหมือนกันครับ

Leave a Reply to rabbitinblack Cancel reply

Your email address will not be published. Required fields are marked *