การสร้าง WordPress Loop และปรับแต่ง CSS

สมมติว่าคุณทำส่วนที่ 1 เสร็จแล้ว ในส่วนนี้ เราจะสร้าง ลูป WordPress และปรับแต่ง CSS WordPress loop คือโค้ด PHP ที่ WordPress ใช้เพื่อแสดงเนื้อหาบนเว็บไซต์ของคุณ ในการแก้ไขลูป คุณต้องทำความคุ้นเคยกับ PHP หากคุณไม่ใช่ มีแหล่งข้อมูลออนไลน์มากมายที่จะช่วยให้คุณเรียนรู้พื้นฐานได้ เมื่อคุณมีความเข้าใจพื้นฐานเกี่ยวกับ PHP แล้ว ให้เปิดโปรแกรมแก้ไขข้อความและสร้างไฟล์ใหม่ชื่อ loop.php ในไฟล์นี้ เราจะสร้างลูป WordPress สิ่งแรกที่คุณต้องทำคือบอกให้ WordPress โหลดไฟล์ header.php ที่เราสร้างไว้ในตอนที่ 1 เพิ่มโค้ดต่อไปนี้ใน loop.php: ต่อไป เราต้องสร้าง WordPress loop ลูปมีหน้าที่แสดงเนื้อหาทั้งหมดบนเว็บไซต์ของคุณ ทำได้โดยการวนซ้ำโพสต์ทั้งหมดในฐานข้อมูล WordPress ของคุณและแสดงบนหน้า ในการสร้างลูป ให้เพิ่มโค้ดต่อไปนี้ใน loop.php: รหัสนี้จะตรวจสอบเพื่อดูว่ามีโพสต์ในฐานข้อมูล WordPress หรือไม่ หากมีโพสต์ จะวนซ้ำแต่ละโพสต์และแสดงบนหน้า ตอนนี้เราได้ตั้งค่าลูปแล้ว เราต้องเพิ่มเนื้อหาบางส่วนเข้าไป สำหรับตัวอย่างนี้ เราจะแสดงแค่ชื่อและเนื้อหาของแต่ละโพสต์ เพิ่มโค้ดต่อไปนี้ในลูป: รหัสนี้แสดงชื่อและเนื้อหาของแต่ละโพสต์ ตอนนี้เรามีการตั้งค่าลูปแล้ว เราต้องเพิ่ม CSS เพื่อจัดรูปแบบ ในโปรแกรมแก้ไขข้อความ ให้สร้างไฟล์ใหม่ชื่อ style.css เพิ่มรหัสต่อไปนี้ใน style.css: .post { margin-bottom: 40px; } รหัสนี้จะเพิ่มระยะขอบที่ด้านล่างของแต่ละโพสต์ วิธีนี้จะช่วยเว้นวรรคโพสต์บนหน้า ตอนนี้เรามีการตั้งค่าลูปและ CSS แล้ว เราจำเป็นต้องเพิ่มไฟล์อีกสองสามไฟล์ในธีมของเรา ในเท็กซ์เอดิเตอร์ของคุณ ให้สร้างไฟล์ใหม่ชื่อ footer.php เพิ่มรหัสต่อไปนี้ใน foote

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

หากต้องการให้ฟังก์ชัน bootstrapstarter_widgets_init() เริ่มทำงาน ให้เพิ่มบรรทัดต่อไปนี้ในไฟล์ footer.php: footer-copyright-text และ sidebar-module-inset มีแถบด้านข้างสองแถบอยู่ที่นี่: อันหนึ่งมีพื้นหลังสีเทาและอีกอันมีพื้นหลังสีดำ เมื่อคุณดูเทมเพลตเริ่มต้น พื้นหลังสีส้มจะปรากฏขึ้นสำหรับวิดเจ็ตด้านบนของวิดเจ็ต (เกี่ยวกับ) และหากคุณป้อนชื่อ ชื่อนั้นจะถูกรวมไว้ในแท็ก h4 โดยอัตโนมัติ การใช้ dynamic_sidebar() เราสามารถแสดงวิดเจ็ตที่กำหนดให้กับพื้นที่ที่เรียกว่า Footer – Copyright Text สร้างแถบด้านข้างบล็อกที่มีคุณลักษณะครบถ้วนโดยใช้คำแนะนำทีละขั้นตอนในบทแนะนำทีละขั้นตอนนี้ ไฟล์ index.php สุดท้ายประกอบด้วยผลลัพธ์: ฟังก์ชัน Results ซึ่งสามารถพบได้หลัง พื้นที่บล็อก นี่เป็นเวอร์ชันสุดท้ายของกระดาษที่สามารถดาวน์โหลดได้ที่นี่

นอกจากนี้ยังมีการ แก้ไขและปรับแต่ง CSS สำหรับแถบนำทางและแถบด้านข้าง ในหน้านี้ คุณอาจพบลิงค์พันธมิตรภายนอกที่อาจส่งผลให้มีการจ่ายค่าคอมมิชชั่นให้กับ LyraThemes.com หากคุณใช้งาน เราไม่รับรองหรืออ้างสิทธิ์เกี่ยวกับความคิดเห็นหรือคำวิจารณ์ที่เป็นลายลักษณ์อักษรของเราในหน้านี้

เราสามารถใช้ Bootstrap Theme ใน WordPress ได้หรือไม่?

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

การติดตั้งธีมหรือปลั๊กอินนั้นไม่ง่ายเหมือนการสร้าง เว็บไซต์ Bootstrap ด้วย WordPress ในการสร้างธีม 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 ได้

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