จดบันทึกอันนี้ไว้เผื่อต้องกลับมาเซตสิ่งเหล่านี้ใหม่ในอนาคต กำลังหาข้อมูลว่าถ้าอยากให้เวลาขึ้น paragraph ใหม่สำหรับเนื้อหาในแต่ละหน้าของ wordpress จะทำยังไงได้บ้าง (เอาเฉพาะวิธีสำหรับใช้ editor ในโหมด “code” ไม่รวมวิธีที่ใช้ในโหมด “visual” นะ เพราะชอบใช้แต่เฉพาะโหมด “code” มากกว่า)
1. วิธีแรกก็เซต stylesheet ให้กับแต่ละ paragraph ไปเลย ใน tag p นั่นแหละ หน้าไหนอยากใช้ค่อยใส่ แต่ก็ลำบากต้องมาเขียนรายละเอียดใหม่ทุกรอบ
<p style="text-indent: 2em;">my custom indent</p>
2. วิธีที่สอง เพิ่ม stylesheet ที่ต้องการสำหรับกำหนดรูปแบบให้ paragraph ไว้ในไฟล์ stylesheet ของตีมที่เราใช้งาน เมื่อทำการเพิ่มไว้แล้วเวลาจะใช้งานจากหน้าไหนก็ให้ทำการกำหนด class ของ paragraph ให้ตรงกันกับชื่อ stylesheet ที่เราระบุตอนเพิ่ม
2.1 ทำการเพิ่ม stylesheet ที่ต้องการ โดยเปิดไฟล์ Appearance > Theme file editor > เลือก style.css จากตีมที่เราใข้อยู่ จากนั้นเพิ่ม style ที่เราต้องการตามตัวอย่าง
p.custom-indent{
text-indent: 2em;
}
2.2 เวลาเรียกใช้งาน ในหน้า content ของเรา เราก็สามารถกำหนดลักษณะให้ paragraph ที่เราต้องการได้เลย โดยระบุคลาสของ paragraph ให้ตรงกับชื่อของ style ที่เราระบุไว้
<p class="custom-indent">my custom indent</p>
3. วิธีที่สาม เซตทุกอย่างที่เป็น paragraph (tag p) ให้ทุกที่ต้องมี indent หมดเลย (วิธีนี้ต้องระวัง ถ้าลองเซตแล้ว theme พัง ก็แก้บรรทัดที่ใส่เพิ่มไปให้กลับมาเหมือนเดิม)
เริ่มทำการแก้ stylesheet สำหรับ paragraph โดยไฟล์จะอยู่ Appearance > Theme file editor > เลือก style.css จากตีมที่เราใข้อยู่
p{
text-indent: 2em; // ถ้าอยากเซตเป็นแบบ fix ขนาดก็เซตเป็น text-indent: 20px; แทน
}
จากนั้นก็ลอง refresh เพื่อเช็คดู ถ้าไม่มีตรงไหนกระทบก็ใช้ได้ แต่ถ้าส่วนไหนใน theme ที่เปลี่ยนแปลง ก็ให้แก้ไฟล์กลับเป็นเหมือนเดิม แล้วใช้วิธีตามข้อ 2. เอา
4. วิธีที่สี่ วิธีนี้ใช้สำหรับเซตให้ทุก paragraph ที่ตั้งอยู่ภายใต้เฉพาะในส่วน content ของโพสท์ต่างๆ(ไม่รวม paragraph ของโครงร่างส่วนอื่นๆของตีม) โดยเราต้องการจะเพิ่มการ indent เข้ามาตอนขึ้น paragraph ย่อยทุกอันในส่วนนี้ การใช้วิธีนี้ต้องไปนั่งสำรวจดูมาก่อนว่าส่วนของ content ที่แสดงผลนั้นอยู่ใน tag ไหน โดยสำหรับตีมที่เราใช้งาน ส่วน content จะอยู่ภายใต้ <div class=”entry-content”></div> ถ้าตีมอื่นมีการเซตต่างไป ก็ลองไปหาดูก่อนว่า ส่วนของ content อยู่ตรง tag ไหน
ทำการเริ่มแก้ไข stylesheet โดยเข้าไปที่ Appearance > Theme file editor > เลือก style.css จากตีมที่เราใข้อยู่ แล้วเพิ่มโค้ดนี้เข้าไป
div.entry-content p{
text-indent: 2em; // ถ้าอยากเซตเป็นแบบ fix ขนาดก็เซตเป็น text-indent: 20px; แทน
}
ลอง refresh เวปดูว่าการแสดงผลถูกต้องตามที่ต้องการไหม