การปรับ สี WordPress Theme ด้วย CSS ฉบับ คนเขียน Code ไม่เป็น

วันนี้ ระบบ War Room ได้สอน การทำโฆษณา ออนไลน์ ด้วย Google AdWords ไปช่วงระยะเวลานานแล้ว
ลูกค้า และผู้เรียนรู้ ต่างตื่นเต้นกับการปรับแก้ไขเว็บไซต์ (ที่เปรียบดั่ง หน้าตาร้านค้า หรือ ทำเลธุรกิจ) ของตนเองให้สวยงาม และ อาจล้อกับ สีของ Marketing Object อื่นๆ เพื่อให้ไปในทิศทางเดียวกัน

อิทธิพลของสี และการปรับ CSS

 

วันนี้ ทาง Search Monopoly ได้ [Request] ให้ช่วยเหลือ เรื่องการปรับแต่ง โทนสี ให้ดูดีขึ้น

ปัญหาของ ผู้ใช้งาน หรือ ลูกค้า ที่ไม่มีพื้นฐาน การปรับ Layout / UX / Design และไม่มีพื้นฐานงาน Coding – Programming มาก่อน เราจะกลัวกันไปเอง ว่าการทำเว็บ WordPress นั้น ยาก และ ไกลเกินเอื้อม

แต่ Search Monopoly อยากบอกว่า — มันไม่ยากอย่างที่คิดครับ การปรับหน้าตาเว็บ ล้วนเป็นเรื่องสนุก เอาใจใส่
เราจะอยู่กับเว็บไซต์ของเราไปนานๆ – และให้มองว่า เว็บคือ ทำเลทอง เป็น Real Estate ของเราเองครับ
ใครทำมาก ได้มาก ใครทำน้อยได้น้อย ใครไม่ทำ จ้างเอา ก็เสียเลือดเยอะ // ฉนั้น ใครงบจำกัด เข้ามาเรียนรู้กับ Search Monopoly ครับ โดยเฉพาะ หลักสูตรของระบบ “The War Room” เรามีสอนในเรื่องการวาง โครง Layout / UX และการจัดทำเนื้อหา ให้สอดประสานกับการทำโฆษณา และ SEO – Organic Traffic อย่างดีเยี่ยม มี LOGIC ที่พิสูจน์ได้ครับ เรียนรู้ อย่างเป็นเหตุเป็นผล เรียนสนุกได้เพื่อนทางธุรกิจที่หลากหลายให้เหมาะสมกับ หน้าตาธุรกิจ เราจึงเขียนบทความนี้แบบ Step By Step มาให้ลองเล่นกันดูนะครับ

บทความนี้ ขอเขียนแบบ เร็วๆ หากคุณติดปัญหา อื่นๆ จุกจิก ที่ทำตามระหว่างนี้ แล้ว ไปต่อไม่ได้ ให้ ส่งข้อความมาสอบถามได้นะครับ ยินดีช่วยเหลือครับ

STEP 1 – ติดตั้ง FireFox ก่อนครับ

ความจริง จะใช้ Google Chrome ก็ได้ครับ คือๆกัน แต่ บทเรียนนี้ ขอใช้ tool เป็น FireFox ก่อนนะครับ

ติดตั้งเสร็จแล้ว ให้ LOG IN Admin Dashboard ใน Web WordPress ของเราเองครับ
เมื่อเรา เข้า WordPress ด้วย บัญชี Admin ของเราเองได้แล้ว

ให้เข้าไปที่ Dashboard ครับ แล้ว ดูตามภาพครับ ให้กดคลิ๊กไปที่ “Appearance”
มันจะขึ้น Tab Menu ให้คลิ๊กที่ Editor

 

 

STEP 2 – กลับมาที่ หน้า Home Page ของเราครับ เข้าผ่าน FireFox ครับ

สังเกต สีของหน้าตาเว็บ เป็นสีเขียว ตุ่นๆ แลดู ไม่ดี ไม่มีสง่าราศีเลย เราจะทำการ ตรวจสอบว่า สี ของ Header หน้า Home Page นั้น ซ่อนอยู่ตรงไหนของ CSS. ให้ทำตามขั้นตอนต่อไปได้เลยครับ

 

STEP 3 – ใช้ Inspecting Element Tool ใน FireFox ครับ (Chrome ก็ได้)

3.1 เลื่อนหัว เมาส์ไปที่ พื้นที่ สี ที่เราอยากเปลี่ยน
3.2 คลิ๊กขวา 1 ครั้ง
3.3 คลิ๊กที่ Inspect Element (Q) —-> กด Q แทนการคลิ๊กได้ครับ

ถ้าทำถูก เราจะพบ แถบรายงาน ที่ชื่อว่า “Inspector” ในหน้าจอ Browser ของเราครับ

STEP 4 – หา code CSS และ สีที่เราจะแก้ไข

จากภาพ พอลอง Inspect. ดูแล้ว เราจะเห็น ฝั่งขวามือของหน้าจอครับ

 

สังเกตคำว่า “style.css” (อันนี้ WordPress Theme ฟรีๆ มักจะใช้ CSS ชื่อนี้) ถ้าเจอแปลกแหวกแนวกว่านี้ ไม่ต้องตกใจครับ กินยานอนหลับ แล้วนอนให้สนิท แล้ว พรุ่งนี้เช้าค่อยโทรมาติดต่อผม เดี๋ยวเข้าไปดูให้ครับ

ในภาพ เราจะเห็นว่า Theme ตัวนี้ มีการใส่สี Header Background ในบรรทัดที่ “682”
โดย code ที่ใช้ control สี คือ

.site-header {
background: #4F4F00;

นั่นแหละครับ สีที่เราจะแก้ไข คือ “#4F4F00” ต้องเปลี่ยนเป็น code สีอันอื่นครับ

 

STEP 5 – มาหาสีในดวงใจกันครับ

เข้าไปที่เว็บ “http://www.computerhope.com/htmcolor.htm”

ผมใช้ตัวนี้ ครับ ในการค้นหาสีที่อยากเอามาระบายใน web layout / WordPress Theme ของเราครับ

จากรูป ให้เรากด Colore Shade ที่เราต้องการเลยครับ ชอบแดงกดแดง ชอบฟ้ากดฟ้า
ตัวอย่างนี้ผมเลือกไปที่ น้ำเงินครับ

 

STEP 6 – copy code สี ที่เราชอบครับ

เมื่อกด shade สีที่เราต้องการแล้ว *** ใช้เวลาเลือกนานๆหน่อยครับ อย่าเอาอย่างผม เปลี่ยนบ่อย งานไม่เดิน เลือกแล้วเลือกเลย อย่าแก้ไปมา มันจะไม่จบ

ในภาพ เราเลือกสี น้ำเงินเข้มครับ

เอาหล่ะ ตอนนี้ STEP 1 – 6 คือ PART A เป็นการเตรียมงาน
ต่อไป Part B – คือการ ลงมือเปลี่ยน code สีจริงจังแล้ว

สรุป PART A)

1) code สีเดิม = #4F4F00
2) code สีใหม่ = #000050
3) ตำแหน่ง ไฟล์ = style.css
4) บรรทัดที่ต้องแก้ = 682
5) code control สี

.site-header {
 background: #4F4F00;

 

PART B)
Step 7 – การเข้าไปแก้ไข CSS ใน WordPress File Editor

อันที่จริง ถ้าอยาก AdVance กว่านี้ ติดตั้ง Plugin เป็น CSS Controlor หรือ CSS Custom ก็ได้ครับ
แต่ search Monopoly คิดว่า ลัดขึ้นตอนดีกว่าครับ

เข้าไปที่ Appearance > Editor
เลือกไฟล์ stylesheet ตามภาพครับ ถ้าปกติที่พบบ่อย จะเป็นไฟล์ style.css

 

STEP 8 – control + F ค้นหา code ที่เราจะแก้ครับ

ให้ใส่คำว่า .site-header {

*** อาจไม่เหมือนกันนะครับ อย่าตกใจ ถ้าไม่เหมือน ให้กลับไปฝึก Inspect ดีๆ แล้วจะรู้ว่า บรรทัดที่ต้องใส่คืออะไร ตัวไหน
ตัวอย่าง CSS ของเว็บนี้ ใช้ code ว่า “.site-header {”

พอใส่ปุ๊บ Find ปั๊บ เราจะพบ บรรทัด code ที่อยู่ใน CSS อันนี้ครับ ตามภาพ

 

STEP 9 – นำ code code สีใหม่ = #000050 ไปแทน code สีเดิม = #4F4F00

Copy เอา #000050 ลงไปแทน #4F4F00 ครับ แล้วกดปุ่ม สีฟ้าๆ “Update File”

แค่นี้เป็นอันเสร็จครับ

ชีวิตไม่ยากครับ แก้ปัญหาทีจะจุด อย่ารีบ
งานเว็บ สนุก ปล่อยให้ระบบพังๆ อย่าไปยึดความ “Perfect”

งาน Online Marketing ไม่มี Perfect ครับ มีแต่ การเรียนรู้ และการเปลี่ยนแปลง

ใครบอกทำเว็บเสร็จภายใน 14 นาที แล้วเก็บเงิน ปีละ สองสามหมื่น อันนี้ก็แล้วแต่ครับ
สุดท้าย ของดีๆ งานดีๆ ต้องพัฒนาจากตนเองครับ ไม่มีใครทำให้ได้แน่นอนครับ

บางที แก้สีแค่นี้ หากผู้ประกอบการไม่รู้ โดน Charge ไปแล้ว 7,500 บาทครับ

< แก้ 1 บรรทัด ใช้เวลา 3 นาที เท่านั้น >
แก้งานเสร็จแล้ว
อย่าลืมตรวจสอบ Pageload Speed ด้วย FireBug นะครับ
ผมค่อนข้าง Serious กับ Site Performance มั่นใจเสมอว่า การแก้ code ไม่ทำให้ site Performance Drop โดยเด็ดขาด สำหรับคนที่อยากยึดหัวหาดทางฝั่ง SEO / Organic.
เอ้าจบแล้ว หากสนใจอยากเรียน ลึกๆ แบบโหดๆ โค่นคู่แข่ง ประหยัดต้นทุน แนะนำ การเรียนรู้ที่ระบบ “The War Room” ครับ
ของดี ให้ฟรี มีน้อยๆ แต่ให้ด้วยใจ สังคมเล็กๆ ค่อยๆเติบโต

คู่แข่งไม่ทำ เราทำมากกว่าคู่แข่ง — สุดท้าย ใครถึก ก็ชนะตลาดไปครับ