วิธีการ include "fontawesome 5" ลงบน theme "understrap"

บ่อยครั้งที่เราต้องการเขียน wordpress theme เพื่อปรับแต่งความต้องการของผู้ใช้งาน แต่ต้องมาเสียเวลาในการเขียนทีละส่วนต่าง ๆ ของ theme ไม่ว่าจะเป็น header.php ไปจนถึงการเขียน walker class และรวมไปถึงการ config ส่วนต่าง ๆ เช่น gulpfile.js จนบางครั้งต้องมาหา plugin ต่าง ๆ มาช่วยจนเกินความจำเป็น ดังนั้นแล้วจึงมักมี starter theme ซึ่งเปรียบเสมือน theme ต้นแบบที่มีส่วนต่าง ๆ มาให้อย่างเสร็จสรรพที่เหลือก็ไปปรับแต่งตามใจชอบ ซึ่งในที่นี่จะขอพูดถึงตัว starter theme ที่ชื่อว่า "Understrap"

สำหรับ Understrap เป็น theme ที่รองรับ bootsrap 4 และยังมี fontawesome 4 ติดตั้งมาให้ด้วย โดยจะใช้ scss ทำการปรับแต่ง style โดยใช้ gulp มาทำการ compile ให้ แต่ในปัจจุบัน (ปี 2020) ผู้เขียนต้องการให้ theme มี icon ของตัว "tiktok" เพิ่มขึ้นมาบน theme ที่ต้องการเขียน ปัญหาคือ ใน fontawesome 4 ที่อยู่ใน understrap เวอร์ชั่นนี้ยังไม่รองรับไอคอน tiktok นี้ จึงต้องการลงตัว fontawesome 5 ซึ่งรองรับไอคอน tiktok ตัวนี้ ดังนั้นวิธีการ include fontawesome 5 มีดังนี้

ก่อนอื่น
ควรมีความรู้ในการใช้คำสั่ง Node Package Manager มาบ้างและรวมถึงการใช้งาน gulpjs

มาเริ่มขั้นตอนกันเลย

*1. ทำการ

npm install

*2. จากนั้นติดตั้งตัว fontawesome 5 (ในที่นี่จะขอติดตั้งไว้ที่ส่วนของ devDependencies) โดยใช้คำสั่ง

npm install @fortawesome/fontawesome-free --save-dev

*3 เปิดไฟล์ gulpfile.js
ทำการดึง assets ต่าง ๆ ของ fontawesome 5 ใน node_modules มาไว้ที่ src/sass/fontaewsome และ fonts โดยทำการ

// Copy all Font Awesome Fonts
    var stream = gulp
        .src(paths.node + '/@fortawesome/fontawesome-free/webfonts/*.{ttf,woff,woff2,eof,svg}')
        .pipe(gulp.dest('./fonts'));

// Copy all Font Awesome SCSS files
    gulp.src(paths.node + '/@fortawesome/fontawesome-free/scss/*.scss')
    .pipe(gulp.dest(paths.dev + '/sass/fontawesome'));

มาวางหลังจากบรรทัด

////////////////// End Bootstrap 4 Assets /////////////////////////

โดยทำการ comment ตัวคำสั่งในการดึง assets ต่าง ๆ บน fontawesome เวอร์ชั่นเดิม (หวังว่าจะไม่งงนะคะ ^^)

*4. แล้วพิมพ์คำสั่ง

gulp copy-assets

ตอนนี้ assets ต่าง ๆ ที่ copy เข้ามาจะอยู่ในโฟล์เดอร์ดังรูป

*5. จากนั้นที่ sass/assets/font-awesome.scss ให้แทนที่ดังนี้

$fa-font-path: "../fonts" !default;

@import '../../src/sass/fontawesome/variables';
@import '../../src/sass/fontawesome/mixins';
@import '../../src/sass/fontawesome/core';
@import '../../src/sass/fontawesome/larger';
@import '../../src/sass/fontawesome/fixed-width';
@import '../../src/sass/fontawesome/list';
@import '../../src/sass/fontawesome/bordered-pulled';
@import '../../src/sass/fontawesome/animated';
@import '../../src/sass/fontawesome/rotated-flipped';
@import '../../src/sass/fontawesome/stacked';
@import '../../src/sass/fontawesome/icons';
@import '../../src/sass/fontawesome/screen-reader';
@import '../../src/sass/fontawesome/shims';
@import '../../src/sass/fontawesome/brands';
@import '../../src/sass/fontawesome/regular';
@import '../../src/sass/fontawesome/solid';

*6. ทำการ compile sass ด้วยคำสั่ง

gulp watch

โดยที่ sass/theme.scss จะเห็นไฟล์ font-awesome.scss

ลอง copy ส่วน font-awesome.scss แล้วลบแล้ววางใหม่ดู

*7. ลองทดสอบ icon สมมุติว่าเรียกใช้ icon "tiktok" ไว้ที่ส่วน footer.php

เอาล่ะ ตอนนี้เราก็ได้ไอคอน tiktok ตามที่เราต้องการแล้ว