วิธีแก้ไขธีม Bootstrap WordPress

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

ในบทช่วยสอนนี้ ฉันจะแสดงวิธีสร้างธีม Bootstrap สำหรับ WordPress โดยใช้ WordPress Command Line WPGulp เป็นเวิร์กโฟลว์ Gulp ที่ทำงานได้อย่างสมบูรณ์ซึ่งได้รับการบันทึกไว้อย่างกว้างขวาง การใช้ Gulp.js จะช่วยคุณในการสร้างเวิร์กโฟลว์และใช้งานปลั๊กอินและธีม WordPress ของคุณ ช่วยให้คุณประหยัดเวลาในการทำงาน และปฏิบัติตามหลักการ DRY (อย่าทำซ้ำตัวเอง) หากคุณยังอยู่ในไดเร็กทอรีของธีม ให้ไปที่บรรทัดคำสั่งต่อไปนี้และคัดลอกโครงสร้างไฟล์ต่อไปนี้ลงในไดเร็กทอรี WPgulp.config.js ในกรณีนี้ เราจะต้องเปลี่ยนชื่อไฟล์ที่มีอยู่.html และ.js ต่อไปนี้เป็นคำแนะนำในการเรียกใช้โปรแกรมต่อไปนี้เพื่อให้สำเร็จ ในขณะนี้ คุณควรมีไดเร็กทอรีที่มีชื่อดังต่อไปนี้: mv style.css assets/css/style.scss assets/js/ layouts/ ควรรวมบางส่วนของ SCSS ในไดเร็กทอรีฐาน ควรอัปเดตไฟล์ functions.php เพื่อรวม Bootstrap

ฉันจะปรับแต่งเทมเพลต Bootstrap ได้อย่างไร

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

ธีมสำหรับ Bootstrap 4 ที่มี CSS หรือ SASS สามารถดาวน์โหลดได้ เป็นสาเหตุทั่วไปในการปรับแต่ง Bootstrap Bootstrap เวอร์ชันปัจจุบันสามารถอัปเดตเป็นเวอร์ชันในอนาคตได้โดยไม่ทำลายการออกแบบของคุณ SASS (ออกเสียงว่า “sas”) เป็นภาษาการเขียนโปรแกรมที่ใช้สร้าง ไฟล์ Bootstrap 4 CSS โดยใช้คอมไพเลอร์ AKA ตัวแปรและแผนที่ใน SASS หนึ่งตัวแปรสามารถสลับได้ แผนที่ $grid-breakpoints SASS สามารถเปลี่ยนให้มีผลกับทั้งกริดและคลาสตอบสนองอื่น ๆ เราสามารถทำการเปลี่ยนแปลงซอร์ส Bootstrap ได้โดยไม่กระทบต่อไฟล์นั้นโดยใช้ไฟล์ custom.scss แยกต่างหาก

มีหลายแง่มุมของ Bootstrap ที่คุณสามารถเปลี่ยนหรือแทนที่ได้ตามความต้องการของคุณเอง สามารถเพิ่มคลาสที่กำหนดเองใหม่ให้กับคลาส Bootstrap ที่มีอยู่ได้ คุณต้องสร้าง SASS ก่อนจึงจะสร้าง CSS ได้ ตรวจสอบว่า SASS ได้รับการคอมไพล์แล้วโดยใช้หนึ่งในเครื่องมือต่างๆ ที่มีอยู่ Node SASS อึก SASS Webpack พร้อมใช้งาน คอมไพเลอร์ SASS สามารถสร้างได้โดยใช้ NPM และ Node ตาม SASS IMO ตัวสร้างธีมบูตสแตรป Themestr.app สร้างอินเทอร์เฟซบนเว็บอย่างง่ายสำหรับการเปลี่ยนแปลง Bootstrap

วิธีปรับแต่งไซต์ Bootstrap ของคุณ

คุณสามารถเพิ่มโค้ดที่กำหนดเองลงในไซต์ Bootstrap ได้โดยปล่อยซอร์สโค้ดตามที่เป็นอยู่ จากนั้นใช้ สไตล์ชีตภายนอก เพื่อปรับแต่ง คุณสามารถใช้โค้ดในสไตล์ชีตภายนอกนี้เพื่อแทนที่สไตล์ที่มีอยู่ตราบใดที่มีการกำหนดค่าอย่างเหมาะสม จำเป็นต้องมีขั้นตอนที่แตกต่างกันเล็กน้อยสำหรับกระบวนการติดตั้ง Bootstrap บนไซต์ของคุณ การใช้ไฟล์ต้นฉบับของเราเป็นวิธีที่ง่ายที่สุดในการสร้างโค้ดที่กำหนดเองใน Bootstrap เมื่อใช้ตัวจัดการแพ็คเกจ ง่ายต่อการแก้ไขโฟลเดอร์ Bootstrap และเนื้อหาจากตำแหน่งในไซต์ของคุณ โดยการคัดลอกและอัปโหลด ไฟล์ต้นฉบับได้รับการจัดทำเป็นเอกสารอย่างดีและง่ายต่อการติดตาม ทำให้ง่ายต่อการเริ่มต้นใช้งานในเวลาไม่นาน การแคชและประวัติของเบราว์เซอร์อาจเป็นปัญหากับ Bootstrap ตรวจสอบว่า Bootstrap ทำงานในเวอร์ชันล่าสุดของเบราว์เซอร์และ Bootstrap หรือไม่ ถ้าใช่ ให้ล้างคุกกี้และแคช ขึ้นอยู่กับความซับซ้อนของเครื่องมือสร้างของคุณ เวอร์ชันของ Bootstrap ที่คุณใช้ และเบราว์เซอร์ของคุณรองรับ Bootstrap ได้ดีเพียงใด วิธีที่ดีที่สุดในการปรับแต่งบนเว็บไซต์ของคุณเองคือการใช้ Bootstrap เวอร์ชันอื่น แม้ว่าจะมีหลายวิธีในการโหลด Bootstrap บนเว็บไซต์ของคุณ แต่วิธีที่พบบ่อยที่สุดคือ CDN และการนำเข้า หากคุณใช้ Bootstrap บนไซต์ของคุณเอง การติดตั้งโค้ดที่กำหนดเองด้วยไฟล์ต้นฉบับนั้นทำได้ง่าย

ฉันสามารถใช้ธีม Bootstrap กับ WordPress ได้หรือไม่

เป็นวิธีที่ตรงไปตรงมาที่สุดในการเริ่มต้นใช้งาน Bootstrap ใน WordPress จำเป็นต้องมี ธีม WordPress แบบตอบสนอง ที่รองรับอยู่แล้ว หลายธีมรวมถึง Bootstrap ช่วยให้คุณใช้งานได้โดยไม่ต้องดาวน์โหลดหรือติดตั้ง

การติดตั้งธีมหรือปลั๊กอินบน WordPress นั้นไม่ง่ายเหมือนการกำหนดค่า Bootstrap ด้วย WordPress คุณจะต้องมีบัญชีโฮสติ้ง WordPress เพื่อสร้างและใช้ธีม WordPress และ Bootstrap ถูกใช้ในลักษณะเดียวกันเพื่อสร้างธีมตาม Bootstrap คุณลักษณะทางเทคนิคหลายอย่างถูกซ่อนจากผู้ใช้ที่อยู่เบื้องหลังอินเทอร์เฟซที่เรียบง่าย ไม่ใช่เรื่องแปลกที่ธีม WordPress จะต้องสร้างขึ้นจากพื้นฐาน หากต้องการทดลองกับธีม WordPress แบบ Bootstrap ให้คัดลอกไฟล์บางไฟล์จาก ธีมเริ่มต้น ของคุณ กล่าวอีกนัยหนึ่ง ไดเร็กทอรีจะเรียกว่า WPBootstrap และชื่อธีมจะเป็น WPBootstrap (ตัวพิมพ์ใหญ่)

ฉันจะทำให้ Bootstrap เป็นธีมที่ตอบสนองได้อย่างไร มีสองวิธีในการทำเช่นนั้น คุณสามารถเพิ่มไลบรารี Bootstrap CSS และ JavaScript ลงใน ไฟล์ header.html และ footer.html อัปโหลดไฟล์ image.png ไปยังไดเร็กทอรีของธีมเพื่อแสดงตัวอย่างธีม เนื่องจากต้องใช้ความพยายามอย่างมากในการสร้างธีม WordPress ฉันจึงแนะนำให้คัดลอกไฟล์จากที่อื่น Bootstrap นอกเหนือจากชุดของกฎและแนวทางปฏิบัติแล้ว ยังจำเป็นต้องมีความเข้าใจอย่างถ่องแท้ ต้องใช้เวลาก่อนที่จะได้รับคำตอบ เพราะ WordPress และ Bootstrap มีชุมชนที่ใช้งานอยู่

ข้อดีและข้อเสียของการใช้ Bootstrap และ WordPress

ไม่จำเป็นต้องใช้ WordPress หรือ Bootstrap WordPress มีความยืดหยุ่นและตัวเลือกการปรับแต่งมากกว่า Bootstrap แต่ง่ายต่อการเรียนรู้และใช้งาน หากคุณเพิ่งเริ่มใช้ Bootstrap ขอแนะนำให้ใช้เพราะจะทำให้เว็บไซต์ของคุณดูเป็นมืออาชีพมากขึ้น การใช้ WordPress อาจเป็นทางเลือกที่ดีกว่าสำหรับการพัฒนาทักษะการออกแบบเว็บไซต์ของคุณ หากคุณต้องการเรียนรู้สิ่งใหม่