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


ปรับแต่ง WordPress เพื่อแสดงความไว้อาลัย
บทความนี้ผมก็จะมาแบ่งปันเพื่อนๆผู้ดูแลเว็บทุกท่านที่เข้ามาดูนะครับ เพื่อเป็นการแสดงความไว้อาลัยแด่บุคลสำคัญที่จากไป ด้วยเทคโนโลยีปัจจุบันนั้นช่วยให้ผู้ดูแลเว็บง่ายต่อการปรับแต่งเว็บขึ้นเยอะ ในบทความนี้ผมก็จะใช่เทคนิคหนึ่งจาก Ai นั่นก็คือ ChatGPT เพื่อปรับแต่งในส่วนของ Header เป็นสีขาวดำ โดยมีขั้นตอนดังนี้
ขั้นตอนแรก เปิด ChatGPT ขึ้นมาก่อนเพียงบอกว่า
“ฉันต้องการปรัป CSS ของ Header โดยปรับสีพื้นสีดำ ตัวหนังสือเมนูสีขาว ปรับโลโก้เป็นขาวดำ”
เท่านี้ก็จะได้ CSS มาดังนี้
/* ทำให้โลโก้เป็นขาวดำ */
.custom-logo,
.site-logo img,
.site-branding img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
/* ถ้าอยากให้กลับเป็นสีตอนเอาเมาส์ชี้ */
.custom-logo:hover,
.site-logo img:hover,
.site-branding img:hover {
filter: grayscale(0%);
}
/* --- เปลี่ยนสีตัวอักษรและลิงก์ใน header --- */
header a,
.site-header a,
.navbar a,
.main-header a,
.site-title,
.site-title a,
.site-description,
.main-navigation a,
.menu-item a {
color: #ffffff !important;
text-decoration: none;
}
ต่อไปให้ทำการ Copy แล้วเข้าไปในส่วน ปรับแต่งธีม > CSS เพิ่มเติม แล้วให้วางส่วนที่ก๊อปปี้ลงไป แล้วกด เผยแพร่ ก็เป็นอันเรียบร้อยครับ

เพียงเท่านี้ก็เป็นอันเรียบร้อยครับ หรือ หากคุณใช้ Child Theme (ธีมลูก):
ให้เปิดไฟล์ style.css ของ Child Theme แล้ววางโค้ดเดียวกันนี้ไว้ด้านล่างสุดเลยข้อดีของวิธีนี้คือ — เมื่ออัปเดตธีมหลัก (Parent Theme) CSS นี้จะไม่หายไป
แต่บางคลาส .custom-logo, .site-logo img, และ .site-branding img เป็นคลาสมาตรฐานของ WordPress สำหรับโลโก้ในธีมส่วนใหญ่
แต่บางธีม (เช่น Astra, GeneratePress, Elementor ฯลฯ) อาจใช้คลาสต่างออกไป
→ หากโลโก้ยังไม่เปลี่ยนสี ให้กด F12 (Inspect Element) ในเบราว์เซอร์ แล้วดูว่าโลโก้ใช้คลาสอะไร จากนั้นปรับชื่อ selector ให้ตรง
