วิธีการ include "fontawesome 5" ลงบน theme "understrap"
Tags: wordpress, understrap, fontawesome, gulpjs
Published: 2020-11-25 21:48:49

บ่อยครั้งที่เราต้องการเขียน wordpress theme เพื่อปรับแต่งความต้องการของผู้ใช้งาน แต่ต้องมาเสียเวลาในการเขียนทีละส่วนต่าง ๆ ของ theme ไม่ว่าจะเป็น header.php ไปจนถึงการเขียน walker class และรวมไปถึงการ config ส่วนต่าง ๆ เช่น gulpfile.js จนบางครั้งต้องมาหา plugin ต่าง ๆ มาช่วยจนเกินความจำเป็น ดังนั้นแล้วจึงมักมี starter theme ซึ่งเปรียบเสมือน theme ต้นแบบที่มีส่วนต่าง ๆ มาให้อย่างเสร็จสรรพที่เหลือก็ไปปรับแต่งตามใจชอบ ซึ่งในที่นี่จะขอพูดถึงตัว starter theme ที่ชื่อว่า "[Understrap](https://github.com/understrap/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 โดยทำการ
```javascript
// 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 เข้ามาจะอยู่ในโฟล์เดอร์ดังรูป

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2kc7f9j3rukwaq4h4mqu.png)

*5. จากนั้นที่ sass/assets/font-awesome.scss ให้แทนที่ดังนี้
```sass
$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 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tb1zel7y1nx8d4m7ww6h.png)

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/35biklcq0p5kqag0757b.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/56vjew3nyt22zihoumay.png)