11

ฉันใช้ธีม Oenology ที่เขียนโดย Chip Bennett เป็นผู้ปกครองในหัวข้อ Child ของฉันเอง

ในกระบวนการพัฒนาของฉันฉันได้ค้นพบว่ามีความท้าทายบางอย่างสำหรับคนที่เขียนธีมเด็กเมื่อพูดถึงการควบคุมสไตล์

ฉันเพิ่งค้นพบว่าไฟล์ style.css หลักของฉันถูกโหลดก่อนที่ลิงก์หรือคำสั่งสไตล์ชีทอื่น ๆ ใน <head> และนี่อธิบายว่าทำไมฉันมีปัญหาในการเอาชนะสไตล์ผู้ปกครองบางส่วน

การศึกษาเพิ่มเติมเกี่ยวกับปัญหาแสดงให้เห็นว่าสไตล์และสไตล์ของผู้ปกครองที่หลากหลายสามารถเข้าคิวใน <head> ในสามแห่ง; add_action('wp_print_styles',, และจากนั้นadd_action('wp_enqueue_scripts',add_action('wp_head',

เพื่อให้ง่ายขึ้นฉันวางแผนที่จะสร้างสองสไตล์ ชีท 'style.css' หลักแรกจะรวมเฉพาะ@import url()คำสั่งที่จำเป็นในการโหลดสไตล์ชีทหลักของ Oenology

สไตล์ชีทที่สองจะมีกฎลูกของฉัน เพื่อให้แน่ใจว่ามันเต็มไปหลังจากที่ทั้งหมดของกฎอื่น ๆ add_action( 'wp_head',ที่ฉันต้องการคิวโดยใช้

เสียงนี้สมเหตุสมผลหรือไม่ หรือมีวิธีที่ดีกว่า

~~btw ไม่มีใครรู้ว่า '/parent-theme/style.css' MRPreviewRefresh = 723 'หมายถึงอะไร?~~

ปรับปรุง

wp_enqueue_style () ไม่ทำงานใน wp_head ()

ไชโย
เกรกอรี่

child-theme css parent-theme

— เกรกอรี่
แหล่งที่มา

21

เพียงแค่ FYI คำถามนี้อาจมีการแปลเป็นภาษาท้องถิ่นเกินไปเนื่องจากเป็นธีมเฉพาะของ Oenology

ที่กล่าวว่าที่นี่ฉันคิดว่าคุณมีปัญหา: Oenology enqueues สไตล์ชีตสอง:

style.cssโดยตรงในส่วนหัวของเอกสาร (เช่นก่อน wp_head()ถูกไล่ออก)

{varietal}.cssที่ที่wp_enqueue_scriptsมีลำดับความสำคัญ11ในfunctions/dynamic-css.php:

/**
 * Enqueue Varietal Stylesheet
 */
function oenology_enqueue_varietal_style() {

// define varietal stylesheet
global $oenology_options;
$oenology_options = oenology_get_options();
$varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet';
$varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css';

wp_enqueue_style( $varietal_handle, $varietal_stylesheet );
}
// Enqueue Varietal Stylesheet at wp_print_styles
add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

สไตล์ชีทหลากหลายซึ่งใช้ "สกิน" จัดคิวที่ลำดับความสำคัญ11เพื่อให้แน่ใจว่าสไตล์ชีทหลักstyle.cssโหลดก่อนและสไตล์ชีทหลากหลายโหลดสองเพื่อทำให้เรียงซ้อนที่ถูกต้อง

ดังนั้นถ้าคุณต้องการที่จะแทนที่หลากสไตล์ชีทเพียง enqueue สไตล์ชีตที่สองของคุณหลังจากสไตล์ชีตพันธุ์; เช่นมีความสำคัญอย่างน้อย12หรือมากกว่า

แก้ไข

หากต้องการให้คำตอบที่ทั่วไปมากขึ้นให้กับคำถามทั่วไปมากขึ้น:

ในการแทนที่ enqueue สไตล์ชีทของ Theme Theme คุณต้องรู้สองสิ่ง:

เบ็ดการกระทำที่เป็นสไตล์ enqueued
ลำดับความสำคัญที่การเรียกกลับจะถูกเพิ่มเบ็ด

ฟังก์ชั่น Enqueue ( wp_enqueue_script()/ wp_enqueue_style()) สามารถดำเนินการได้อย่างเหมาะสมทุกที่ระหว่างinitตะขอและwp_print_scripts/ wp_print_styleshooks ( ฮุกที่ถูกต้องเชิงความหมายที่จะใช้wp_enqueue_*()งานฟังก์ชั่นปัจจุบันwp_enqueue_scripts) รายการนี้รวมถึงการกระทำดังต่อไปนี้ (ในหมู่อื่น ๆ ; เหล่านี้เป็นเพียงผู้ต้องสงสัยตามปกติ):

init
wp_head
wp_enqueue_scripts
wp_print_scripts/wp_print_styles

(หมายเหตุว่าwp_enqueue_scripts, wp_print_stylesและwp_print_scripts ไฟทั้งหมดภายในของwp_headที่มีความสำคัญที่เฉพาะเจาะจง

ดังนั้นเพื่อแทนที่สไตล์ชีทธีมคุณต้องทำอย่างใดอย่างหนึ่งต่อไปนี้:

ยกเลิกการจัดคิวชีทสไตล์เทมเพลตชุดรูปแบบผ่านwp_dequeue_style( $handle )
ลบธีมผู้โทรกลับที่จัดวางสไตล์ผ่านทางremove_action( $hook, $callback )
ใช้น้ำตก CSS เพื่อแทนที่สไตล์ผู้ปกครองธีมโดย hooking สไตล์ชีตเด็กธีมของคุณwp_enqueue_style()โทรเข้ามาเบ็ดเดียวกันที่มีความสำคัญต่ำกว่าหรือเป็นตะขอภายหลัง

สำหรับตัวเลือกสุดท้ายนี้หากธีมหลักใช้:
```
`add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`
```
... จากนั้นชุดรูปแบบเด็กจะใช้:
```
`add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
```

— ชิปเบนเน็ตต์
แหล่งที่มา

ขอบคุณชิป แน่นอนฉันสามารถใช้ wp_enqueue_scripts และลำดับสูงเพื่อให้สไตล์ชีทเด็กของฉันโหลดล่าสุด อย่างไรก็ตามยังคงมีงบสไตล์ 3 แบบแตกต่างกันหลังจากคำสั่งสไตล์ลูกของฉัน 2 ในนั้นคือเอาต์พุตโดย WP เอง !!! และ 1 คือเอาต์พุตโดย Oenology ผ่านฟังก์ชั่น add_custom_image_header () ของ wp

— เกรกอรี่

คำสั่งสไตล์ body.custom-background เป็นเอาต์พุตของ WP เอง แต่ปรากฏว่าฉันสามารถระบุสีพื้นหลังแบบกำหนดเองได้โดยการกำหนด 'BACKGROUND_COLOR' แปลกที่กฎ css พื้นฐานจะต้องตั้งค่าผ่านค่าคงที่ WP ที่กำหนดเอง

— เกรกอรี่

1

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

— เกรกอรี่

ปัญหาที่ฉันเห็นคือสิ่งนี้ child_theme_enqueue_style จะโหลดสไตล์เด็กที่มีลำดับความสำคัญสูงกว่าลงไปที่ wp_head แต่มันจะทำซ้ำสไตล์ชีตเด็ก - Wordpress จะโหลดสไตล์ชีตเด็กโดยอัตโนมัติตามลำดับความสำคัญปกติจากนั้นโหลดอีกครั้ง ยิ่งลดลงไปด้วยลำดับความสำคัญใหม่ ขณะที่มันบรรลุผลของการแทนที่สไตล์ชีตอื่น ๆ ทั้งหมดมันจะสร้างสไตล์ชีทที่ซ้ำกันในหน้า

— php-b-grader

2

วิธีเดียวที่จะรับประกันได้ว่าสไตล์ของฉันได้พูดครั้งสุดท้ายในน้ำตกคือการรวมไว้ที่ส่วนท้ายของ <head> ผ่านทางตะขอ wp_head wp_enqueue ไม่ทำงานภายใน wp_head ดังนั้นฉันต้องสะท้อนลิงก์โดยตรง:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
    return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );

ในที่สุดฉันสามารถตั้งค่าสไตล์ของฉันได้อย่างง่ายดายและโดยไม่ต้องใช้ความเฉพาะเจาะจงในระดับสูงหรือกฎ!! ซึ่งควรใช้เป็นทางเลือกสุดท้าย

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

ปรับปรุง

ฉันสามารถควบคุมสไตล์ในชุดรูปแบบลูกของฉันได้ในขณะที่ยังคงรักษารูปแบบดั้งเดิมของชุดรูปแบบผู้ปกครอง (ซึ่งใช้สไตล์ชีทหลักสไตล์ย่อยย่อย คำถาม. ฉันไม่ได้ใช้ตะขอ wp_head () อีกต่อไปแทนที่จะใช้ตะขอที่เหมาะสมและมาตรฐาน wp_enqueue_scripts () ที่มีลำดับสูงเพื่อให้แน่ใจว่าสไตล์ชีทของฉันได้รับการโหลดล่าสุด

สไตล์ชีทเริ่มต้นของธีมลูกของฉัน:

/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");

ฟังก์ชั่นเพื่อจัดคิวสไตล์หลักของฉัน:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
    return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );

อย่างไรก็ตามมีคำสั่งสไตล์ที่สร้างโดย WP น้อย (เช่นไม่ใช่ธีมหลัก) ที่ระบุไว้หลังจากสไตล์ชีทของฉันและฉันจะต้องดูโดยใช้กฎ CSS เฉพาะเจาะจงสูงเพื่อแทนที่กฎที่เกี่ยวข้องกับฉันหรือมองหา hooks เพื่อปิดการใช้งานโดยเฉพาะกฎ body.custom-background

ขอบคุณสำหรับความคิดเห็นของคุณ

ไชโย
เกรกอรี่

— เกรกอรี่
แหล่งที่มา

1

คุณควรเสมอใช้wp_enqueue_style()ในการโหลดสไตล์ชีตของคุณและฟังก์ชั่นที่ควรจะติดยาเสพติดไปยังwp_enqueue_scriptsเบ็ดที่มีวิ่งอยู่ในหัว ฉันสงสัยว่าคุณไม่ได้ติดมันที่นั่นดังนั้นปัญหาของคุณ (ตั้งแต่ WP 3.3 หากเชื่อมwp_enqueue_style()ต่อกับสิ่งอื่นจะส่งการแจ้งเตือนเมื่อเปิด WP_Debug)

— mrwweb
แหล่งที่มา

@ คำตอบของ Chip นั้นดีกว่าของฉันและเขามีคุณสมบัติที่จะพูดคุยเกี่ยวกับธีม Oenology;) นี่เป็นกรณีที่ฉันควรลบคำตอบของฉันแม้ว่าจะเป็นใช่มั้ย?

— mrwweb

ไม่ฉันจะทิ้งคำตอบของคุณไว้ มันถูกต้องและอยู่เป็นส่วนหนึ่งของคำถาม

— Chip Bennett

ฉันจะจัดคิวลูกของฉันสไตล์ชีท / s * หลังจาก * ทุกแม่สไตล์ชีต / คำสั่ง?

ปรับปรุง

แก้ไข

ปรับปรุง