วิธีการสร้างผลงานธีม WordPress ด้วย Bootstrap

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

รวมการพัฒนาธีม Bootstrap WordPress ที่ตอบสนองด้วยเฟรมเวิร์ก Bootstrap CSS ยอดนิยม เราจะพูดถึงวิธีสร้างธีมและฟีดบล็อกโดยใช้ เทมเพลตเริ่มต้น ของ Bootstrap ในตอนที่ 1 จะมีการติดตั้งในอนาคตที่ฉันจะแสดงที่นี่ทันทีที่เขียนและเสร็จสิ้น ทำการเปลี่ยนแปลงที่จำเป็นกับสไตล์ว่างปัจจุบันของคุณใน Notepad (ฉันขอแนะนำให้ใช้) โปรดใส่ส่วนหัวของความคิดเห็นและ CSS ฟังก์ชั่น.php สามารถแก้ไขได้ โปรดทำสำเนาของรหัสต่อไปนี้ และฉันจะข้ามแต่ละบรรทัดอย่างรวดเร็ว

เราทำสิ่งนี้ให้สำเร็จโดยจัดคิวไฟล์แล้วเชื่อมต่อฟังก์ชันกับ WP_enqueue_scripts เมื่อใช้ bootstrapstarter_enqueue_scripts() จะมีการกำหนดอาร์เรย์การพึ่งพา ซึ่งประกอบขึ้นจาก 'jquery' สคริปต์นี้ขึ้นอยู่กับอาร์เรย์ของตัวจัดการสคริปต์ที่ลงทะเบียนทั้งหมด เนื่องจาก สไตล์ชีต หลักของเราประกอบด้วยไฟล์ Bootstrap CSS เป็นหลัก เราจึงใช้เพียงหนึ่งแฮนเดิลในอาร์เรย์ $dependencies ของเรา: bootstrap (ซึ่งเราลงทะเบียนในบรรทัดก่อนหน้านี้) ไฟล์ถูกแบ่งออกเป็นสี่ไฟล์แยกกันหลังจากการแยก Bootstrap จากเทมเพลต ไฟล์สุดท้ายจะแสดงโพสต์ล่าสุดตามลำดับเวลาเริ่มต้น The Loop คือเครื่องมือ WordPress ที่แสดงชื่อเรื่อง เนื้อหา ชื่อผู้แต่ง วันที่ และอื่นๆ

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

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

การพัฒนาเว็บฟรอนต์เอนด์ที่เหมาะกับอุปกรณ์พกพาสามารถทำได้โดยใช้ Bootstrap ซึ่งเป็นเฟรมเวิร์กโอเพนซอร์ส เป็นผลให้สามารถใช้เพื่อสร้าง ธีม WordPress ที่ตอบสนอง ได้โดยใช้เทมเพลต CSS และ JavaScript

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

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

Bootstrap ดีกว่า WordPress หรือไม่?

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

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

Bootstrap: จุดเริ่มต้นที่ยอดเยี่ยมสำหรับการพัฒนา WordPress

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

สร้างธีม WordPress จาก Scratch Bootstrap

การสร้างธีม WordPress ตั้งแต่เริ่มต้นโดยใช้ Bootstrap เป็นกระบวนการที่ค่อนข้างง่าย ขั้นแรก คุณจะต้องสร้างโฟลเดอร์สำหรับธีมของคุณภายในไดเร็กทอรี /wp-content/themes/ ถัดไป คุณจะต้องสร้างไฟล์ index.php และไฟล์ style.css ภายในโฟลเดอร์ธีมของคุณ จากนั้นคุณสามารถเริ่มเพิ่มโค้ด HTML, CSS และ PHP ลงในไฟล์เหล่านี้ได้ สุดท้าย คุณจะต้องเปิดใช้งานธีมของคุณภายในแผงการดูแลระบบ WordPress

NavWalker ซึ่งเป็นคลาส PHP ช่วยให้เมนูการนำทางของ WordPress ทำงานได้อย่างมีประสิทธิภาพมากขึ้น NavWalker จะแสดงขึ้นเมื่อใช้ไฟล์ inc/bs5-navwalker.php ในโค้ดด้านล่าง Get_search_form() เป็นฟังก์ชันที่สร้างแบบฟอร์มการค้นหาสำหรับ WordPress ต้องเพิ่มโค้ดด้านล่างลงในไฟล์ search.php ของธีม WordPress หากต้องการแสดงรหัสพิเศษที่คุณต้องการใช้ใน URL ที่มองไม่เห็น ให้สร้างไฟล์ใหม่ 404.php ต้องอัปโหลดภาพหน้าจอของธีม (ภาพขนาดย่อ) ไปยังโฟลเดอร์ธีม

วิธีรวม Bootstrap ใน WordPress Child Theme

หากคุณกำลังสร้างธีมลูกของ WordPress คุณจะต้องรวม ไฟล์บูต สแตรปไว้ในโฟลเดอร์ของธีมของคุณ คุณสามารถใช้ CDN (Content Delivery Network) เพื่อรวมไฟล์บูตสแตรป หรือคุณสามารถดาวน์โหลดไฟล์และรวมไว้ในโฟลเดอร์ของธีมของคุณ หากคุณกำลังใช้ CDN คุณจะต้องรวมไฟล์ Bootstrap CSS และ JavaScript ไว้ในไฟล์ header.php ของธีมย่อยของคุณ คุณสามารถค้นหาลิงก์ CDN สำหรับไฟล์บูตสแตรปได้จากเว็บไซต์ Bootstrap หากคุณกำลังรวมไฟล์บูตสแตรปไว้ในโฟลเดอร์ของธีม คุณจะต้องจัดคิวไฟล์ CSS และ JavaScript ในไฟล์ functions.php ของธีมลูกของคุณ คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำเช่นนี้ได้ใน WordPress Codex

คุณสามารถรวม Bootstrap เข้ากับธีม WordPress ได้สามวิธี วิธีแรกคือการรวม Bootstrap CDN ไว้ในไฟล์ functions.html ของคุณ วิธีที่ 2 ซึ่งเกี่ยวข้องกับการรวมไฟล์ Bootstrap เข้ากับธีมโดยตรงก็สามารถทำได้เช่นกัน ข้อมูลเพิ่มเติมเกี่ยวกับวิธีการรวมไฟล์ CSS และ Javascript ในธีม WordPress สามารถพบได้ในเอกสารประกอบของ WordPress