วิธีเพิ่ม CSS ที่กำหนดเองให้กับธีมลูก WordPress ของคุณ

หากคุณต้องการเพิ่ม CSS ที่กำหนดเองให้กับธีมลูกของ WordPress คุณต้องสร้าง สไตล์ชีตใหม่ ก่อน ในการดำเนินการนี้ คุณสามารถใช้โปรแกรมแก้ไขข้อความ เช่น Notepad++ หรือโปรแกรมแก้ไขโค้ด เช่น Dreamweaver เมื่อคุณบันทึกสไตล์ชีตใหม่แล้ว คุณจะต้องอัปโหลดไปยังไดเร็กทอรีของธีมลูก วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้ไคลเอนต์ FTP เมื่อสไตล์ชีตใหม่ของคุณอยู่ในไดเร็กทอรีของธีมลูก คุณจะต้องจัดคิว ในการดำเนินการนี้ คุณต้องเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php ของธีมลูกของคุณ: wp_enqueue_style( 'child-theme-styles', get_stylesheet_uri() ); รหัสนี้จะบอกให้ WordPress โหลดสไตล์ชีตใหม่ของคุณต่อจากสไตล์ชีตของธีมหลัก นั่นคือทั้งหมดที่มีในการเพิ่ม CSS ที่กำหนดเองให้กับธีมลูก WordPress ของคุณ!

หลังจากที่คุณสร้างธีมลูกของคุณแล้ว คุณสามารถเริ่มปรับแต่งการออกแบบและการกำหนดค่าได้ คุณสามารถปรับแต่งธีมลูกของคุณในวิธีที่ง่ายที่สุดโดยใช้ Cascading Style Sheet (CSS) ธีมลูกของคุณทั้งหมดมีไฟล์ที่เรียกว่า style.css ซึ่งเก็บกฎเกณฑ์ที่ควบคุมลักษณะเว็บไซต์ของคุณ ในเว็บเบราว์เซอร์ส่วนใหญ่ คุณสามารถตรวจสอบ CSS ของไซต์ได้ในขณะเรียกดู ไฟล์ธีมลูกจะถูกจัดลำดับความสำคัญมากกว่าไฟล์ที่เกี่ยวข้องใน โฟลเดอร์ธีมหลัก ใน WordPress ไฟล์สแตนด์อโลนสามารถสร้างได้ นอกเหนือจากส่วนหัว ส่วนท้าย เค้าโครงหน้า และแถบด้านข้าง มีไฟล์เพียงไม่กี่ไฟล์ในโฟลเดอร์ธีมลูกที่จะรวมอยู่ในการนำเสนอของไซต์ของคุณ

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

ฉันจะจัดคิวไฟล์ Css ใน WordPress ธีมลูกได้อย่างไร

การจัดคิวไฟล์ใน WordPress เป็นกระบวนการโหลดไฟล์ลงในแกนหลักของ WordPress ซึ่งสามารถทำได้ผ่านไฟล์ functions.php หรือโดยใช้ปลั๊กอิน เมื่อใช้ธีมลูก คุณจะต้องจัดคิวไฟล์ด้วยตัวเอง วิธีที่ถูกต้องในการทำเช่นนี้คือการใช้ wp_enqueue_scripts action hook เบ็ดนี้ช่วยให้คุณสามารถโหลดไฟล์ลงในส่วนหัวของเอกสารของคุณ ซึ่งเป็นตำแหน่งที่ควรโหลด ไฟล์ CSS ในการใช้ hook นี้ คุณจะต้องสร้างฟังก์ชันที่จะโหลดไฟล์ CSS ของคุณก่อน ควรเพิ่มฟังก์ชันนี้ในไฟล์ functions.php ของธีมลูกของคุณ เมื่อเพิ่มฟังก์ชันของคุณลงใน functions.php แล้ว คุณสามารถใช้ wp_enqueue_scripts hook เพื่อเรียกใช้ฟังก์ชันของคุณได้ ฟังก์ชันของคุณควรมีลักษณะดังนี้: function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . ' /style.css' ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ฟังก์ชันนี้จะโหลดไฟล์ CSS ของคุณต่อจากไฟล์ CSS ของธีมพาเรนต์ นี่เป็นสิ่งสำคัญเพราะจะทำให้แน่ใจว่าไฟล์ CSS ของคุณจะแทนที่สไตล์ใดๆ จากธีมหลัก

โหลดสไตล์ชีตของคุณด้วยฟังก์ชันสไตล์ชื่อธีม

หากมี URI ที่กำหนด สไตล์ชีตจะถูกโหลดโดยฟังก์ชัน themename-style

ฉันจะเพิ่มรหัสในธีมลูกได้อย่างไร

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

หากคุณต้องการเพิ่มรหัสของคุณเอง ตัวเลือกที่ดีที่สุดคือการใช้ธีมลูก ธีมลูกสามารถใช้เพื่อแก้ไขธีม WordPress ในขณะที่ไม่ได้แก้ไขไฟล์ของธีมหลัก ธีม Zakra Child สามารถดาวน์โหลดได้โดยตรงจากหน้าเริ่มต้น สร้างไฟล์ชื่อ style.css ในโฟลเดอร์ zakra-child ตามด้วยข้อมูลที่แสดงด้านล่าง หากจำเป็น ให้บันทึกไฟล์โดยการแทรก โปรดตรวจสอบให้แน่ใจว่าได้ติดตั้งธีมหลักควบคู่ไปกับธีมย่อยในธีมที่ติดตั้ง คุณสามารถเพิ่มโค้ดลงในไฟล์เทมเพลตได้โดยการปรับเปลี่ยน หากคุณต้องการเปลี่ยนแปลงหรือเพิ่มโค้ดพิเศษในไฟล์ header.php ให้คัดลอกไฟล์ของธีมหลักแล้ววางลงในธีมย่อย

ฉันจะเพิ่ม Css ในหน้าเฉพาะใน WordPress ได้อย่างไร

หากต้องการเพิ่มปลั๊กอินใหม่ ให้เข้าสู่ระบบแผงควบคุม WordPress ของคุณและไปที่เมนูปลั๊กอิน คุณสามารถค้นหาปลั๊กอินเฉพาะได้โดยพิมพ์ CSS ที่กำหนดเองของ Post/ Page ลงในช่องค้นหา การติดตั้งสามารถทำได้โดยคลิกที่ปุ่ม "Install Now"

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

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

เข้าคิว Css WordPress ธีมลูก

CSS เป็นภาษาสไตล์ชีตที่ใช้สำหรับอธิบายการนำเสนอเอกสารที่เขียนด้วยภาษามาร์กอัป สไตล์ชีตคือชุดของกฎที่บอกเว็บเบราว์เซอร์ถึงวิธีแสดงเอกสารที่เขียนด้วย HTML หรือ XML
CSS ใช้เพื่อจัดรูปแบบแท็ก HTML ทั้งหมด รวมถึงเนื้อหาของเอกสาร หัวเรื่อง ย่อหน้า และข้อความอื่นๆ CSS ยังสามารถใช้เพื่อจัดรูปแบบการแสดงองค์ประกอบตาราง องค์ประกอบกริด และรูปภาพ

วิธีเพิ่มไฟล์ Css ใน WordPress Theme

ในการปรับแต่งแดชบอร์ดของคุณ ให้ไปที่ ลักษณะที่ปรากฏ – ทั่วไป และเลื่อนลงไปที่ด้านล่างของหน้า คุณจะเพิ่มโค้ด CSS ใดๆ ลงในเพจได้โดยใช้เครื่องมือในตัว

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

นอกเหนือจากการอนุญาตให้คุณเพิ่ม CSS ที่ไม่ขึ้น อยู่กับธีมลงในไซต์ของคุณแล้ว ปลั๊กอิน CSS ที่กำหนดเองยังทำให้การรวม CSS แบบกำหนดเองเป็นเรื่องง่าย หากคุณต้องการเปลี่ยน CSS ของธีมของคุณอย่างมีนัยสำคัญ ธีมลูกเป็นความคิดที่ดี คุณสามารถใช้ธีมลูกเพื่อแทนที่ไฟล์ของธีมหลัก เช่น CSS, PHP และทรัพย์สินแบบคงที่ เช่น รูปภาพ เราจะใช้ Simple Custom CSS ในบทช่วยสอนนี้เพื่อทำสิ่งเดียวกันให้สำเร็จโดยไม่ต้องกำหนดค่าเพิ่มเติม สไตล์. CSS สามารถแก้ไขได้โดยใช้ตัวแก้ไขโค้ดที่คุณเลือก เช่น Atom หรือ Visual Studio Code หรือเมนูลักษณะที่ปรากฏของพื้นที่ผู้ดูแลระบบ WordPress ของคุณ หากคุณไม่ต้องการสัมผัสฐานโค้ด คุณสามารถใช้เครื่องมือปรับแต่งหรือปรับแต่งได้

ในการเรียก ไฟล์ CSS ภายนอก ตรวจสอบให้แน่ใจว่า WordPress Core รู้ว่าคุณกำลังใช้อะไร หากคุณต้องการปรับแต่งธีมของบุตรหลาน คุณสามารถทำได้โดยการสร้างธีมย่อย ในการเพิ่มกฎของสไตล์ที่กำหนดเองให้กับธีมย่อยของคุณ คุณต้องแก้ไขไฟล์ style.html ก่อน ในการสร้างไฟล์ CSS ภายนอก คุณต้องแก้ไข functions.php ก่อน ใน ThemeForest มีธีม WordPress ให้เลือกมากมาย

วิธีการสร้างธีมเด็ก

ธีมลูกคือธีมที่สืบทอดฟังก์ชันการทำงานของธีมอื่น เรียกว่าธีมหลัก ธีมย่อยมักใช้เมื่อคุณต้องการเปลี่ยนแปลงธีมที่มีอยู่
ในการสร้างธีมลูก คุณจะต้องสร้างโฟลเดอร์ใหม่และไฟล์สองไฟล์: style.css และ functions.php
ในโฟลเดอร์ใหม่ ให้สร้างไฟล์ชื่อ style.css และเพิ่มโค้ดต่อไปนี้:
/*
ชื่อธีม: ธีมลูก
แม่แบบ: parent-theme
*/
@import url(“../parent-theme/style.css”);
รหัสนี้บอกให้ WordPress ใช้สไตล์ชีตของธีมหลัก
จากนั้นสร้างไฟล์ชื่อ functions.php และเพิ่มรหัสต่อไปนี้:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
ฟังก์ชั่น my_theme_enqueue_styles () {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . ' /style.css' );
}
? >
รหัสนี้บอกให้ WordPress จัดคิวสไตล์ชีตของธีมหลัก
ตอนนี้ เมื่อคุณเปิดใช้งานธีมลูก ธีมจะสืบทอดสไตล์และฟังก์ชันของธีมหลัก จากนั้น คุณสามารถเปลี่ยนแปลงไฟล์สไตล์ชีตและไฟล์ functions.php ของธีมลูก และการเปลี่ยนแปลงเหล่านั้นจะมีผลกับส่วนหน้าของไซต์ของคุณ

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

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

เมื่อคุณสร้างธีมลูกของ WordPress ด้วยตนเอง คุณสามารถเปลี่ยนแปลงธีมได้ในภายหลัง ขั้นตอนแรกคือการสร้างโฟลเดอร์สำหรับธีมของบุตรหลาน ขั้นตอนที่สองคือการสร้างสไตล์ชีตสำหรับธีมของบุตรหลาน ควรนำเข้า สไตล์ชีตของธีม หลักและรอง ในขั้นตอนที่ 4 คุณจะต้องเพิ่มไฟล์ style.css ลงในโฟลเดอร์ไดเร็กทอรีที่คุณเพิ่งสร้าง ลักษณะที่ปรากฏสามารถใช้เพื่อเปิดใช้งานธีมลูก ในฐานะที่เป็นธีมลูก คุณสามารถแก้ไขธีมหลักได้อย่างง่ายดายโดยไม่ต้องผ่านขั้นตอนการแก้ไขธีมโดยตรง

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