แก้ไขธีม Riba Lite ตอนที่ 2
สอนแก้ไขธีม WordPress

แก้ไขธีม Riba Lite ตอนที่ 2

ต่อจากตอนแรกที่เราแก้ไขธีม WordPress – Riba Lite โดยตรง จุดประสงค์เพื่อกำจัดหน้ารอที่ขึ้นคำว่า LOADING ตอนนี้ก็มีจุดประสงค์เดียวกัน ต่างกันตรงที่เราจะสร้างปุ่มคลิกในเมนู Theme->Customize เพื่อต้องการให้เลือกได้ว่าจะเอาหรือไม่เอาหน้าดังกล่าว

ปกติภายใต้ Theme->Customize จะมีเมนูแรกคือ Preloader Options ซึ่งใช้สำหรับเซตเกี่ยวกับหน้า LOADING เมื่อคลิกต่อภายใต้ Preloader Options->General จะเจอหน้านี้

สอนปรับแต่งธีม wordpress
คอร์สปรับแต่งธีม wordpress

ซึ่งไม่มีที่ให้คลิกว่าจะเอาหรือไม่เอา (หรืออาจจะทำได้จากเมนูอื่นหรืออาจจะต้องเป็นเวอร์ชัน Pro ก็ไม่รู้ ไม่มีเวลาดูรายละเอียด สมมติว่าไม่มีก็แล้วกัน) เราต้องการเพิ่ม Check box แทรกเข้าไปตามรูป

เรียนการแก้ไขธีม WordPress
คอร์สอบรมการแก้ไขธีม WordPress

ใช้ AceIDE แบบในตอนที่แล้ว เปิดไฟล์ชื่อ preloader.php ตามรูป

สอนการแก้ไขธีม WordPress
คอร์สอบรมการแก้ไขธีม WordPress

ให้คลิกเมาส์ที่บรรทัดที่ 58 ตามรูป เรากำลังจะแทรก code ไปตรงนี้

เรียน WordPress สอนการแก้ไขธีม
การแก้ไขธีม สอน WordPress

copy โค๊ดข้างล่างนี้แทรกลงไปที่บรรทัด 58

/* Disable preloader */
$wp_customize->add_setting($prefix.’_disable_preloader’,
array(
‘default’ => false,
)
);

$wp_customize->add_control(
$prefix.’_disable_preloader’,
array(
‘type’ => ‘checkbox’,
‘label’ => esc_html__(‘Disable Preloader’, ‘riba-lite’),
‘section’ => $prefix.’_preloader_general_section’,
)
);

เราก็จะได้โค๊ดหน้าตาอย่างนี้

เรียนการแก้ไขธีม WordPress
คอร์สสอน WordPress และการแก้ไขธีม

ขั้นตอนต่อไปให้กลับไปที่ไฟล์ class.mt-preloader-output.php (ใครยังไม่ได้อ่านตอนที่ 1 ให้กลับไปอ่าน) แล้วก๊อปปี้โค้ดข้างล่างนี้ลงไปใต้บรรทัดที่ 44

get_theme_mod(‘riba_lite_disable_preloader’) ? $this->preloader_is_enabled = get_theme_mod(‘riba_lite_enable_site_preloader’, 0)
: $this->preloader_is_enabled = get_theme_mod(‘riba_lite_enable_site_preloader’, 1);

และบรรทัดที่ 44 ให้ใส่ // ไว้ข้างหน้าตามรูป (หรือลบทิ้ง)

สอนการแก้ไขธีม WordPress
อบรมการแก้ไขธีม WordPress

เวลาแก้ไขใน AceIDE ทุกขั้นตอนอย่าลืมกดปุ่มบันทึกนะครับ แค่นี้เป็นอันเรียบร้อย

ลองไปเมนู Theme->Customize->Preloader Options->General จะเห็นว่ามีกล่อง Disable Preloader ขึ้นมา ซึ่งปกติจะไม่ถูกคลิก ซึ่งหมายความว่าจะขึ้นหน้า LOADING ทุกครั้ง ถ้าเราไม่ต้องการก็ให้คลิกให้มีเครื่องหมายถูก แล้วกดปุ่ม save ก็จะปิดหน้า LOADING อันน่าเกลียดนี้ไป

ผลของตอนนี้เหมือนกับตอนที่ 1 ต่างกันตรงที่เราทำเมนูให้เลือกว่าจะเอาหรือไม่เอา ถ้าใครไม่ต้องการอย่างถาวรก็ไม่ต้องทำอะไรตามที่เขียนในตอนนี้ เอาแบบในตอนแรกก็พอ แต่ถ้ารักพี่เสียดายน้องก็ค่อยทำ แต่เขียนไว้ให้กับคนที่ต้องการศึกษาการแก้ไขธีมมากกว่า คุณที่กำลังอยากแก้ไขธีมอื่นก็เอาไอเดียไปใช้ได้

มีอยุู่สองประเด็นที่อยากจะทิ้งท้าย

  1. การแก้ไขธีมโดยการดัดแปลงที่ตัวโค้ดของธีมโดยตรงแบบที่เขียนมาสองตอนนี้เป็นสิ่งที่ไม่ควรทำ (อ้าว!) เพราะเมื่อเราอัพเอทธีม สิ่งที่แก้ไขก็จะหายไป การแก้ไขธีมที่ถูกต้องคือการทำเป็นธีมลูกหรือที่ WordPress เรียกว่า child theme อันนี้แล้วจะเขียนเป็นอีกเรื่องหนึ่ง
  2. การแก้ไขโค้ดของธีมโดยตรงเสี่ยงกับการที่ทำให้ธีมไม่ทำงานและทำให้เว็บไม่โชว์ ซึ่งเป็นอีกเหตุผลหนึ่งที่ควรจะสร้างธีมลูกแล้วแก้ไขธีมจากตรงนั้น เมื่อมีปัญหาจะได้สวิทช์กลับไปที่ธีมแม่ชั่วคราว หาเหตุที่ทำให้ธีมไม่ทำงานในธีมลูก แก้ไขแล้วจึงสวิทช์กลับไปที่ธีมลูกอีกที เพราะฉะนั้นเวลาทำตามขั้นตอนที่เขียนมานี้คุณต้องระมัดระวังอย่างเคร่งครัด ก๊อปปี้ทุกอย่างให้เหมือนกับที่เขียนไว้

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