โพสต์นี้แสดงคำถามสองสามข้อที่ฉันได้พบเกี่ยวกับการเปลี่ยนแปลงล่าสุดเกี่ยวกับวิธีการจัดคิวชีตสไตล์ชีทที่เกิดขึ้นในเธรดนี้และเธรดนี้
ปัญหาที่ฉันพบเกิดขึ้นในสถานการณ์การใช้งานทั่วไปโดยใช้ชุดรูปแบบหลักที่ใช้กันอย่างแพร่หลายและได้รับการดูแลเป็นอย่างดีซึ่งเป็นธีมลูกแบบเฉพาะที่พร้อมติดตั้ง WP 4.0 functions.php ของชุดรูปแบบลูกของฉันประกอบด้วยwp_enqueue_styleฟังก์ชันตามรายละเอียดใน Codexเท่านั้น
โปรดทราบว่าในขณะที่รหัสที่อ้างถึงด้านล่างนี้ใช้เฉพาะกับชุดรูปแบบนี้ส่วนใหญ่จะใช้รูปแบบการเข้ารหัสปัจจุบันที่ใช้โดยธีมหลัก นอกจากนี้ประเด็นที่น่าเป็นห่วงของฉันมักจะซ้ำซ้อนกับชุดรูปแบบของผู้ปกครองจำนวนมากในขณะนี้อยู่ในป่า นอกจากนี้คำถามที่เพิ่มขึ้นเหล่านี้สามารถใช้งานได้ในระดับสากลไม่ว่าจะใช้ธีมหลักใด
ปัญหาที่ 1: สองคน
การตั้งค่าที่แนะนำ:
ธีมหลักคือการจัดคิวสไตล์และสคริปต์โดยใช้wp_enqueue_scriptshook ส่วนที่เกี่ยวข้องจะเป็นดังนี้:
add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
wp_register_style( 'avia-style' , $child_theme_url."/style.css", array(), '2', 'all' );
wp_enqueue_style( 'avia-base');
if($child_theme_url != $template_url) { wp_enqueue_style( 'avia-style'); }
}
ชุดรูปแบบลูกของฉันจัดfunctions.phpคิวสไตล์ต่อการเปลี่ยนแปลง codex ล่าสุด:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}
บันทึก ID ต่อไปนี้ตามที่ใช้โดยรหัสอ้างอิง:
id='dm-parent-style-css'เป็นสไตล์ชีทของธีมหลักตามที่จัดทำโดยฟังก์ชันธีมลูกของฉันid='avia-style-css'เป็นสไตล์ชีทของชุดรูปแบบลูกของฉันตามที่จัดทำโดยฟังก์ชันธีมหลักid='dm-child-style-css'เป็นสไตล์ชีทของชุดรูปแบบลูกของฉันตามที่กำหนดโดยฟังก์ชันชุดรูปแบบลูกของฉัน
ผลลัพธ์:
เมื่อดูอย่างรวดเร็วครั้งแรกทุกอย่างใช้ได้ดีโดยมี<head> แสดงลำดับต่อไปนี้:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
หลังจากติดตั้งปลั๊กอินคำสั่งเข้าคิวจะเปลี่ยนเป็นดังนี้:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
ในที่สุดผมต้อง CSS ธีมของเด็กที่จะโหลดหลังจากปลั๊กอินใด ๆ ดังนั้นฉันถูกบังคับให้เพิ่มจำนวนให้ความสำคัญกับการทำงานในรูปแบบที่บุตรหลานของฉัน(ดูการอภิปรายก่อนหน้านี้เกี่ยวกับจำนวนลำดับความสำคัญ)
เนื่องจากฟังก์ชั่นของฉันทำให้ css ของธีมหลักเท่านั้นผลลัพธ์ที่ได้คือตอนนี้css ของธีมถูกย้ายไปที่จุดสิ้นสุดทำให้เหลือ css ของธีมลูกของฉันในสถานการณ์ที่เลวร้ายยิ่งกว่าเดิม
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
ตอนนี้ฉันถูกบังคับให้ต้องจัดให้เข้ากับสไตล์ธีมลูกของฉันเช่นกันเพื่อให้แน่ใจว่ามันถูกย้ายกลับไปที่ด้านหน้าของบรรทัดทำให้เกิดปัญหาดังกล่าวของ twoqueueing (คำใหม่?) ธีมเด็ก css
การตั้งค่าที่เลิกใช้:
ฟังก์ชันที่แก้ไขในธีมลูก:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}
ผลลัพธ์:
ผลิตลำดับต่อไปนี้ใน<head>:
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
แม้ว่าการรวมสไตล์ชีทของเด็กในฟังก์ชั่นของฉันทำให้ได้รับการจัดคิวสองครั้ง แต่ IMHO ที่นิยมใช้การเข้ารหัสภายใต้สมมติฐานว่าธีมหลักจะจัดคิวสไตล์เด็กของเราให้เราอย่างเหมาะสม ขึ้นอยู่กับ ID ที่กำหนดให้กับสไตล์ที่จัดคิวแต่ละรายการปรากฏว่าธีมพาเรนต์จัดคิวมันไม่ใช่อะไรใน WP Core
Shivm ของฉัน:
แม้ว่าฉันจะไม่ค่อยแนะนำสิ่งนี้เป็นวิธีที่แนะนำ (และฉันมั่นใจว่า devs ที่มีประสบการณ์การเข้ารหัสมากกว่าที่ฉันจะคร่ำครวญในการแก้ปัญหานี้) แต่ฉัน dequeued ID ของธีมหลัก (ใช้ในการเข้ารูปแบบธีมชุดลูก) ในไฟล์ฟังก์ชันของธีมลูกของฉันตามที่แสดง:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_dequeue_style( 'avia-style' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}
ผลลัพธ์:
วิธีนี้แก้ไขปัญหาที่เกิดขึ้นส่งผลให้:
<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
แน่นอนว่าสิ่งนี้จำเป็นต้องรู้ ID ที่ใช้โดยชุดรูปแบบหลักซึ่งจำเป็นต้องใช้อะไรทั่วไปที่มากกว่าเพื่อใช้เป็นวิธีการพัฒนาชุดรูปแบบลูกมาตรฐาน
ปัญหาที่ 2: ย้ายชุดลูกสไตล์
(ดูเหมือนยากที่จะเชื่อว่าสิ่งนี้ไม่ได้เกิดขึ้นในเธรดอื่นแม้ว่าฉันจะไม่เห็นรายการใด ๆ ที่เฉพาะเจาะจงเมื่อดู ... ถ้าฉันพลาดก็รู้สึกฟรีเพื่อนำมาให้ความสนใจของฉัน)
ฉันไม่เคยใช้ค่าเริ่มต้นstyle.cssในไดเรกทอรีรากของชุดรูปแบบลูกสำหรับลักษณะชุดรูปแบบของฉัน - แน่นอนว่าต้องมี แต่ลักษณะที่แท้จริงทั้งหมดของฉันรวบรวมจาก SCSS เป็นไฟล์. css / minified แม้ว่าฉันจะรู้ว่านี่ไม่ใช่"บรรทัดฐานที่คาดหวัง"ในระดับสากลสำหรับการพัฒนาชุดรูปแบบเด็กนักพัฒนา WordPress ที่จริงจังที่สุดที่ฉันรู้จักก็ทำสิ่งที่คล้ายกัน แน่นอนว่านี้ต้องมีการเข้าคิวด้วยตนเองว่าสไตล์ชีทในฟังก์ชั่นของฉันไม่ว่าธีมหลักจะจัดให้มีหรือไม่ก็ตาม
เพื่อรวมมันทั้งหมดขึ้น ...
- มีความปลอดภัยหรือไม่ที่จะรวมสมมติฐานที่ว่าธีมผู้ปกครองจัดคิวสไตล์ธีมลูกให้ถูกต้องจากมุมมองของมาตรฐานธีมลูก?
- การลบลำดับความสำคัญอาจทำให้เกิดความสับสนมากขึ้นสำหรับส่วนหนึ่งของชุมชน WordPress เมื่อรูปแบบธีมลูกเริ่มถูกแทนที่ด้วยปลั๊กอิน เราคาดว่าชุดรูปแบบจะเขียนทับลักษณะ แต่ไม่มากกับปลั๊กอิน
- เมื่อใช้สไตล์ชีทที่กำหนดเองสำหรับสไตล์ธีมลูกจริง (ตามที่ควรจะใส่ไว้ในที่กำหนดไว้ล่วงหน้า
style.css) การเข้าคิวไฟล์ด้วยตนเองนั้นมีความจำเป็น ในแง่ของการรักษาความต่อเนื่องในช่วงกว้างของนักพัฒนามันจะไม่เหมาะสมหรือไม่ที่จะสนับสนุนให้จัดสไตล์ชีทสำหรับเด็กด้วยตนเองโดยไม่คำนึงถึงความซ้ำซ้อนที่อาจเกิดขึ้นได้