wp-theme-edit

ปรับแต่ง WordPress Theme

ถ้าคุณเป็นคนหนึ่งที่มักพบสิ่งขัดใจในธีมของ WordPress ที่ดาวน์โหลดมาใช้ และไม่ได้จบวิชาเขียนเว็บด้วย PHP และ HTML หรือใช้ธีมของฟรี ที่ส่วนใหญ่ไม่ได้มี Options ต่างๆ เพื่อให้แก้ไขธีมได้อย่างง่ายดายเหมือนกับพวก Premium Theme

และอยากแก้ไขเองบ้างนิดๆ หน่อยๆ โดยปกติแล้ว สิ่งที่เคยเป็น มันก็จะเป็นการเดาสุ่มว่าโค้ดแต่ละชุดมันอยู่ตรงไหน แต่เดี๋ยวนี้ไม่ต้องแล้ว ก่อนอื่นมาดูว่าอะไรคือ โครงสร้างของธีมง่ายๆ กันก่อน จะได้รู้ว่าต้องไปที่ไฟล์ไหนเวลาปรับแต่งในแต่ละส่วนของธีม

อะไรอยู่ใน WordPress Theme

ถึงเวลาที่เราจะมาดูว่าธีม WordPress นั้นสร้างยังไง (แบบคร่าวๆ) เพื่อจะได้รู้ว่าสิ่งที่เรามองเห็นกันสวยๆ นั้น เบื้องหลังมันมาจากไฟล์ตัวไหนกันบ้าง

WordPress Theme ประกอบไปด้วยไฟล์ (template files) ที่จะมีคำสั่งต่างๆ อยู่ภายในไฟล์เหล่านี้ (โค้ด php, html) เพื่อให้สิ่งต่างๆ แสดงตามต้องการ ทั้งเทมเพลตไฟล์ + คำสั่ง รวมกันแล้วมันจะสามารถแสดง Interface หรือหน้าตาเว็บสวยๆ ให้เราได้เห็นโดยปราศจากการเข้าไปแตะต้องตัวซอฟท์แวร์ของ WordPress ทำให้เราสามารถเปลี่ยนหน้าตาไปมาระหว่างธีมได้ทันทีและคงไว้ซึ่งระบบการทำงานที่เหมือนเดิมทุกอย่าง

อะไรอยู่ใน Theme – ไฟล์ 3 แบบ

  1. ไฟล์สามัญประจำบ้าน (ผมเรียกเอง) ที่เป็นส่วนต่างๆ ของเว็บเพจแต่ละหน้า ที่จะถูกเรียกใช้งานบนธีมในหน้าทุกหน้าทั้งหมดที่เราเห็น ไม่ว่าไปหน้าไหนใน WP ก็จะเจอมันเสนอหน้าอยู่ทุกที่ทุกทีไป เช่น header = header.php, sidebar.php, footer.php ฯลฯ มีอะไรซ่อนอยู่ใน header บ้างจะรู้ได้ไง? ไฟล์ header.php คือแหล่งกบดานของพวกมัน เช่น ถ้าผมจะยัด Analytics เข้าไป ผมก็จะใส่ในไฟล์นี้ (ดูภาพ Joe’s website ที่ 1)
  2. Template files เช่น index.php คือหน้าโฮมเพจ, single.php คือหน้าของโพสเดี่ยวๆ, page.php คือหน้าของ page ต่างๆ ที่สร้าง ซึ่งแต่ละหน้าเหล่านี้ก็ต้องล้วนมี header, sidebar ทำให้มันต้องเรียกไฟล์ header.php, sidebar.php ฯลฯ ออกมาใช้ทุกครั้งด้วย ส่วนใหญ่ไฟล์ template พวกนี้จะเริ่ิมจากการเรียกไฟล์ ทายสิว่าอะไร…ก็ header.php ไง
  3. ไฟล์ล่องหนที่ปิดทองหลังพระ ที่ควบคุมการทำงานเบื้องหลังทั้งหมด เช่น สไตล์ สีสัน ขนาดธีม ฟอนต์ ขนาดฟอนต์ ฯลฯ หรือหน้าตาของธีม ที่จะอยู่ในไฟล์ style.css เท่านั้น และการทำงานที่ลึกเข้าไปอีกก็จะอยู่ใน functions.php และอาจจะมีไฟล์อื่นๆ มากกว่านี้ถ้าธีมนั้นซับซ้อนมากขึ้นไป

เช่น ถ้าผมจะแก้ไขข้อความที่ footer.php ผมก็จะไปที่เมนู Appearance > Editor แล้วใช้เบราเซอร์ Search (Control or Command Mac + F)  ค้นหาคำว่า footer จากนั้นก็เข้าไปแก้ไขในตัวไฟล์ footer.php ได้เลย

ปรับขนาดและสีสันด้วย Style.css

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

ในสไตล์ Style.css มันจะประกอบไปด้วยคำสั่งต่างๆ ที่อาจสร้างปัญหาในการค้นหาของคุณได้ว่า เพราะแต่ละธีมอาจต้องชื่อคำสั่งไม่เหมือนกันได้ เช่น คำสั่งของขนาดภาพ Thumbnail บางธีมอาจจะเรียกว่า thumb บางทีมดันเรียกว่า thumbnail บางธีมอาจจะเรียกว่า wp_img

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

อ้าวทีนี้จะรู้ได้ไงว่ามันชื่ออะไร ไม่ยากครับตั้งแต่มี Google Chrome ให้คุณคลิกไปที่ส่วนใดก็ได้ของเว็บเพจ จากคลิกขวาเลือก ‘Inspect Element’ จากนั้นมันจะบอกคุณทุกอย่างว่า ส่วนประกอบของเว็บเพจของธีมนั้นใช้คำสั่งอะไร สั่งงานขนาด สีสันของมัน นอกจากนั้นคุณยังสามารถลองปรับแต่งเว็บได้จากหน้าเบราเซอร์ของ Chrome ก่อนได้เลย จะได้ลองดูว่ามันสวยหรือยังก่อนที่จะปรับแต่งของจริง (ดูภาพ)

theme-edit

  1. ชี้เม้าส์ไปที่ส่วนที่ต้องการปรับ คลิกขวาเลือก Inspect Element
  2. โค้ดต่างๆ ที่คุณสามารถลาดเม้าส์ผ่านขึ้นลงเพื่อดูขนาดของส่วนต่างๆ หรือดูว่าส่วนไหนใช้คำสั่งอะไร
  3. ก่อนที่จะเข้าไปปรับแต่งจริงๆ ในไฟล์ Style.css หรือไฟล์อื่นๆ คุณสามารถทดสอบจากตรงนี้ได้ก่อน
  4. ส่วนนี้จะบอกว่า คำสั่งของส่วนประกอบนี้ มันอยู่ในไฟล์ไหน และชื่ออะไร ซึ่งเป็นคำตอบของปัญหาการเรียกคำสั่งไม่เหมือนกันของแต่ละธีมอย่างที่ผมได้พูดไปก่อนแสดงภาพด้านบน

ถ้าต้องการจะดูโค้ดต่างๆ แบบไม่ตาลายในหน้า Editor ของ WordPress ผมแนะนำให้ใช้ Plugin Advanced Code Editor ที่สามารถเลือกหน้าตาให้คุณดูได้ง่ายที่สุดเวลาปรับแต่งโค้ดธีม

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

Leave a Reply

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