ขอคำแนะนำการ custom...
 
การแจ้งเตือน
ลบทั้งหมด

[ได้คำตอบแล้ว] ขอคำแนะนำการ custom css ใน child theme

8 โพสต์
3 ผู้ใช้
0 Likes
698 เข้าชม
0
หัวข้อเริ่มต้น

สวัสดีครับ จาก post ก่อนหน้านี้ ที่ผมได้ทำการลองสร้าง template part ใน fruit theme 
คราวนี้ ผมอยากลอง custom css ต้องบอกก่อนว่าผมไม่ค่อยถนัดพวก css แต่อยากลองฝึกดูครับ

อย่างเช่น content-item -caption
ถ้าผมต้องการเอาไป custom เองใน fruit theme ต้องเริ่มยังไง ขอคำแนะนำด้วยน่ะครับ

3 คำตอบ
0

ถ้าหมายถึงแก้ CSS แนะนำให้อ่านหน้านี้ก่อนนะครับ 

ซึ่งจะเห็นว่า แนะนำให้ใช้ VS Code + Live Sass Compiler สำหรับ Compile จาก SCSS ไปเป็น CSS ครับ 

ถ้าลง Extension ไว้ ก็เข้าไปแก้ไฟล์ใน /css/scss/ ได้เลย ระบบจะแปลงเป็น CSS ให้อัตโนมัติครับ

paper paper หัวข้อเริ่มต้น 04/07/2021 7:18 pm

ขอบคุณครับพี่แม่น

0

สวัสดีครับ

ผมจะลองอธิบายเป็นข้อๆตามขั้นตอนนะครับ

  1. ใน Child Theme หากยังไม่มีโฟลเดอร์ที่ชื่อว่า template-parts ให้สร้างไว้ก่อนครับ
  2. สร้าง template part ที่ต้องการ อาจจะก๊อปปี้จาก Theme หลักมาเป็นต้นฉบับก่อน จากนั้นเปลี่ยนชื่อไฟล์ 
  3. อย่าลืมเปลี่ยน Loop Name ของ template part นั้นๆด้วยนะครับ 
    <?php
    /**
    * Loop Name: Content Post Detail
    */
    ?>
     
  4. เขียนโค้ด Custom ที่ต้องการใน template part ที่เราสร้างได้เลยครับ

ตัวอย่างการสร้าง

จะเห็นว่าผมเอาต้นฉบับของ content-card.php มาใช้ปรับใหม่ เพื่อให้ได้โครงสร้างตามที่ผมต้องการ และตั้งชื่อใหม่เป็นอะไรก็ได้ (ของผมตั้งไว้ว่า content-only-text.php)

paper paper หัวข้อเริ่มต้น 03/07/2021 9:00 pm

ตรงนี้ลองทำได้แล้วครับ
แล้วถ้าต้องการเพิ่ม custom scss ต้องทำโครงสร้างยังไงบ้างครับ

paper paper หัวข้อเริ่มต้น 03/07/2021 11:04 pm

ได้ล่ะครับ ผมไปเจอวิธีนี้มา
https://github.com/ahmadawais/WPSass#readme

เม่น 04/07/2021 6:40 pm

วิธีนี้ก็ได้ แต่ผมว่าลง npm จะยากไปนิดสำหรับหลายๆ คน เลยแนะนำในอีกคำตอบครับ

0
หัวข้อเริ่มต้น

ขอบสอบเรื่อง css เพิ่มเติมจากกระทู้นี้ครับ
seed & plat theme สามารถเรียกใช้งาน พวก bootstrap ได้ไหมครับ 
พอดีผมกำลังดูจากคลิปคอร์สเดิม เห็นมีให้เรียกใช้ bootstap

ขอบคุณครับ

เม่น 18/07/2021 10:32 am

เราเลิกใช้ Bootstrap ไปเพราะมันทำให้เว็บโหลดช้าครับ

ถ้าอยากใช้ลองดูปลั๊กอินเหล่านี้ดูได้ครับ https://wordpress.org/plugins/tags/bootstrap/

พวก shortcode / blocks ดูพร้อมใช้งานอยู่ครับ

แบ่งปัน: