[ไลฟ์สดสอนทำเว็บครั้งที่ 7] สร้างธีมเว็บนิตยสาร ด้วย Seed 2, ACF, Masonry JS

วันอาทิตย์ที่ 15 ธันวาคม เวลา 16:00 – 1700 น. ทีมงาน SeedThemes สอนทำเว็บโดยไลฟ์สดผ่านเฟซบุ๊ก เพจ SeedThemes นะครับ

เรียนรู้การสร้างธีมเว็บนิตยสาร (Magazine Website) เพื่อนำเสนอบทความต่างๆ

ผู้เข้าเรียนควรมีพื้นฐาน HTML/CSS/PHP นะครับ

สิ่งที่จะสาธิต

  1. การสร้างธีมของตัวเองจากธีม Seed 2
  2. การแก้โค้ดเทมเพลต content-card.php เพื่อปรับการแสดงผล
  3. การนำ Masonry JS มาใช้เพื่อปรับแต่ง Layout
  4. การใช้ ACF เพื่อช่วยเลือกเรื่องที่ต้องการขึ้นหน้าแรก
  5. การปรับแต่ง SCSS ตามดีไซน์ที่ออกแบบไว้

ทดลองสร้างธีม Nittayasarn

  1. เริ่มต้น – แก้ชื่อธีม และรูปประจำธีม
  2. สร้างหน้า Home และตั้งค่าการอ่าน, แก้ไฟล์ front-page.php
  3. สร้าง Content Card
    1. ลองปรับ CSS สำหรับ content แบบ card
    2. ติดตั้ง masonry ในไฟล์ scripts.js
    3. เรียกใช้ masonry ในไฟล์ main-vanilla.js
    4. ลองปรับขนาด Thumbnail ใน functions.php
    5. แก้ขนาด Thumbnail ในไฟล์ content-card.php
    6. ติดตั้งปลั๊กอิน Regenerate Thumbnails และสั่งให้ระบบสร้าง Thumbnail ใหม่
  4. สร้าง Slider
    1. ปรับส่วน site-header
    2. ปรับ CSS ของ Slider
    3. ใช้ ACF สร้าง Repeater Field เพื่อแสดง Post ที่ต้องการ (อ้างอิง Gist นี้)
  5. ปรับโลโก้ – แก้ไฟล์ header.php ใส่โลโก้ ปรับ CSS ทั้งหน้า Home และหน้าทั่วไป
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments