Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 12: การปรับแต่งเว็บไซต์ด้วย CSS และ Custom Code

1. ทำไมต้องปรับแต่งด้วย CSS และ Custom Code?

การปรับแต่งเว็บไซต์ด้วย CSS และ Custom Code ช่วยให้คุณสามารถควบคุมการแสดงผลและฟังก์ชันต่าง ๆ ของเว็บไซต์ได้อย่างละเอียด แม้ธีมและปลั๊กอินจะให้ตัวเลือกมากมาย แต่การเพิ่มโค้ดเองจะช่วยตอบโจทย์ที่เฉพาะเจาะจงมากขึ้น

2. การเพิ่ม Custom CSS ผ่าน WordPress

2.1 การเพิ่ม CSS ใน Customizer

  1. ไปที่ “Appearance” > “Customize”
  2. เลือก “Additional CSS”
  3. เพิ่มโค้ด CSS ในช่องที่กำหนด
  4. คลิก “Publish” เพื่อบันทึกการเปลี่ยนแปลง

ตัวอย่างโค้ด CSS:

body {
  background-color: #f0f0f0;
}
h1 {
  color: #333;
  font-size: 2.5em;
}

2.2 การใช้ปลั๊กอิน Custom CSS

  • หากต้องการจัดการ CSS ในที่เดียว สามารถใช้ปลั๊กอิน เช่น Simple Custom CSS หรือ SiteOrigin CSS

3. การสร้าง Child Theme

3.1 Child Theme คืออะไร?

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

3.2 การสร้าง Child Theme

  1. ไปที่โฟลเดอร์ธีม (/wp-content/themes/)
  2. สร้างโฟลเดอร์ใหม่ เช่น my-theme-child
  3. สร้างไฟล์ style.css และ functions.php ในโฟลเดอร์

ตัวอย่างไฟล์ style.css:

/*
Theme Name: My Theme Child
Template: my-theme
*/

ตัวอย่างไฟล์ functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_child_enqueue_styles' );
function my_theme_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
  1. ไปที่ “Appearance” > “Themes” และเปิดใช้งาน Child Theme

4. การเพิ่ม Custom JavaScript

4.1 การใช้ปลั๊กอินสำหรับ Custom JavaScript

  • ติดตั้งปลั๊กอิน เช่น Custom Scripts หรือ Insert Headers and Footers
  • เพิ่มโค้ด JavaScript ในส่วน <head> หรือ <footer>

4.2 การเพิ่ม JavaScript ใน Child Theme

  1. สร้างไฟล์ custom.js ในโฟลเดอร์ Child Theme
  2. แก้ไขไฟล์ functions.php เพื่อโหลด JavaScript

ตัวอย่างโค้ด:

<?php
function enqueue_custom_scripts() {
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );

5. การแก้ไข Template Files

5.1 การระบุไฟล์ Template

  • ใช้โครงสร้างไฟล์ของธีม เช่น header.php, footer.php, และ single.php
  • ตรวจสอบ Template Hierarchy ใน WordPress Codex เพื่อระบุไฟล์ที่ต้องแก้ไข

5.2 การปรับแต่งไฟล์ Template

  • เปิดไฟล์ใน Editor เช่น VS Code หรือใน WordPress Theme Editor
  • เพิ่มหรือแก้ไขโค้ด PHP และ HTML ตามต้องการ

ตัวอย่างการเพิ่มฟังก์ชันใน header.php:

<?php if ( is_home() ) : ?>
    <h1>Welcome to My Blog</h1>
<?php endif; ?>

6. การใช้งาน Hooks และ Filters

6.1 Hooks คืออะไร?

Hooks ช่วยให้คุณสามารถเพิ่มฟังก์ชันในจุดต่าง ๆ ของ WordPress โดยไม่ต้องแก้ไขไฟล์หลักของ WordPress

6.2 การใช้ Action Hooks

  • เพิ่มฟังก์ชันที่ต้องการในจุดที่กำหนดโดย WordPress

ตัวอย่าง:

add_action( 'wp_footer', 'add_custom_footer' );
function add_custom_footer() {
    echo '<p>Custom Footer Content</p>';
}

6.3 การใช้ Filters

  • แก้ไขหรือปรับแต่งค่าที่ส่งกลับจากฟังก์ชันของ WordPress

ตัวอย่าง:

add_filter( 'the_content', 'add_custom_content' );
function add_custom_content( $content ) {
    return $content . '<p>Custom Text After Content</p>';
}

7. เคล็ดลับในการปรับแต่งเว็บไซต์

  1. สำรองข้อมูลก่อนทำการเปลี่ยนแปลงโค้ด
  2. ทดสอบการเปลี่ยนแปลงใน Localhost หรือ Staging Site ก่อนใช้งานจริง
  3. ใช้ปลั๊กอิน Code Snippets สำหรับการเพิ่มโค้ดโดยไม่แก้ไขไฟล์ Theme
  4. หลีกเลี่ยงการแก้ไข Parent Theme โดยตรง

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