मूल विषय के style.css का संस्करण @import

Question

प्रसंग

मैंने ट्वेंटी तेरह पर आधारित एक बाल विषय बनाया, जो काफी अच्छी तरह से काम करता है। माता-पिता की थीम को संस्करण 1.3 में अपडेट करने के बाद, मैंने स्टाइल के साथ अजीब व्यवहार को देखा जो एक कैश्ड माता-पिता की थीम के कारण था style.css।

यहाँ मेरे बाल विषय की सामग्री है style.css(हेडिंग छोड़ कर)

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');

इसलिए चाइल्ड थीम style.cssपेरेंट थीम को इंपोर्ट करने से ज्यादा कुछ नहीं करती style.css।

मेरे पास अपने बच्चे के विषय के अनुकूलन के साथ एक और सीएसएस फ़ाइल भी है जिसे मैं इसमें पसंद करता हूं functions.php:

// Enqueue parent theme's style.css (faster than using @import in our style.css)
$themeVersion = wp_get_theme()->get('Version');

// Enqueue child theme customizations
wp_enqueue_style('child_main', get_stylesheet_directory_uri() . '/css/main.css',
    null, $themeVersion);

यह मुझे इस तरह से एक बहुत अच्छा सीएसएस url domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1देता है : यह सुनिश्चित करता है कि चाइल्ड थीम अपडेट होने पर स्टाइल शीट फिर से लोड की जाती है।

अब समस्या

बयान @import url('../twentythirteen/style.css');अंतर्निहित मूल विषय के संस्करण से पूरी तरह से स्वतंत्र है। वास्तव में, मूल विषय को चाइल्ड थीम को अपडेट किए बिना अपडेट किया जा सकता है लेकिन ब्राउज़र अभी भी पुराने के कैश्ड संस्करणों का उपयोग करेंगे ../twentythirteen/style.css।

ट्वेंटी तेरह में प्रासंगिक कोड style.css:

function twentythirteen_scripts_styles() {
    // ...

    // Add Genericons font, used in the main stylesheet.
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.03' );

    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
    // Note usage of get_stylesheet_uri() which actually enqueues child-theme/style.css

    // Loads the Internet Explorer specific stylesheet.
    wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

मैं इस समस्या को हल करने के कुछ तरीकों के बारे में सोच सकता हूं लेकिन कोई भी वास्तव में संतोषजनक नहीं है:

1. पैरेंट थीम को style.css(जैसे @import url('../twentythirteen/style.css?ver=NEW_VERSION');) बदलने के लिए हर बार पैरेंट थीम को अपडेट करने के लिए मेरे बच्चे की थीम को अपडेट करें । यह मूल विषय संस्करण और बच्चे के बीच एक अनावश्यक और कष्टप्रद लिंक बनाता है।

2. मेरे बच्चे की में functions.php, 1) wp_dequeue_styleशामिल बच्चे विषय के style.cssऔर 2) माता-पिता विषय है संस्करण स्ट्रिंग के साथ सीधे। यह मूल विषय में कतारबद्ध सीएसएस के क्रम को गड़बड़ कर देता है।wp_enqueue_stylestyle.css

3. style_loader_tagजनरेट किए गए सीएसएस <link>टैग को संशोधित करने के लिए फ़िल्टर का उपयोग करें style.cssऔर सीधे पैरेंट थीम के style.cssसंस्करण स्ट्रिंग के साथ इंगित करने के लिए पथ को संशोधित करें । ऐसी सामान्य आवश्यकता (कैश बस्ट) के लिए अस्पष्ट लगता है।

4. style.cssमेरे बच्चे के विषय में माता-पिता के विषय को डंप करें style.css। के रूप में ही (1) वास्तव में, लेकिन थोड़ा तेज।

5. मेरे बच्चे के विषय style.cssको माता-पिता के विषय का हमदर्द बना दें style.css। यह काफी हैकिश लगता है ...

क्या मुझे कुछ याद आया? कोई सुझाव?

संपादित करें

पैरेंट थीम में जोड़े गए genericicons.cssऔर ie.cssस्टाइल शीट स्पष्ट करें कि मैं अपने चाइल्ड थीम में @importcss स्टेटमेंट को क्यों नहीं बदल सकता wp_enqueue_style। वर्तमान में, @importमेरे बाल विषय में एक कथन के साथ style.css, मेरे पास उत्पन्न पृष्ठों में यह क्रम है:

1. बीसवीं / जेनेरिक / जेनेरिक.कैंस -> मूल विषय के अनुसार
2. child-theme / style.css -> मूल विषय द्वारा प्रवर्तित, @imports बीसवेंथ / style.css
3. बीसवीं / सीएसएस / ie.css -> मूल विषय द्वारा enqueued
4. चाइल्ड-थीम / css / main.css -> चाइल्ड थीम द्वारा एन्केस्ड

अगर मैं माता-पिता की style.cssनिर्भरता के बारे में सोचता हूं main.css, तो यह बन जाएगा:

1. बीसवीं / जेनेरिक / जेनेरिक.कैंस -> मूल विषय के अनुसार
2. चाइल्ड-थीम / स्टाइल.क्स -> खाली, अभिभावक थीम द्वारा एन्केस्ड
3. बीसवीं / सीएसएस / ie.css -> मूल विषय द्वारा enqueued
4. बीसवीं / शैली। एसकेएस -> मुख्य विषय पर निर्भरता के रूप में बच्चे के विषय के अनुसार
5. चाइल्ड-थीम / css / main.css -> चाइल्ड थीम द्वारा एन्केस्ड

ध्यान दें कि ie.css अब मूल विषय से पहले शामिल है style.css। मैं मूल विषय की सीएसएस फ़ाइलों के enqueuing क्रम को बदलना नहीं चाहता क्योंकि मैं यह नहीं मान सकता कि इससे सीएसएस नियमों की प्राथमिकता के साथ समस्या नहीं होगी।

Comments

कभी भी उपयोग न करें @import, मूल विषय की स्टाइलशीट को अपनी स्वयं की स्टाइलशीट की निर्भरता के रूप में सेट करें ।

— FUXIA

मैं जानता हूँ कि यह सबसे अच्छा तरीका नहीं है, लेकिन इसे यहाँ अनुशंसा की जाती है: codex.wordpress.org/Child_Themes

— बर्नी

साथ ही, आपने जो सुझाव दिया है, उसे करने से मेरी समस्या ठीक नहीं होती है। मूल विषय style.cssको उसी स्थान पर शामिल नहीं किया जाएगा जैसा अभी है। माता-पिता में अन्य सीएसएस फाइलें शामिल हैं, जो इसके style.cssऔर मेरे बच्चे के विषय सीएसएस के बीच आनी चाहिए ।

— bernie

कृपया कोडेक्स को पूरी तरह से अनदेखा करें। यह गलत सूचनाओं से भरा है। निर्भरता पैरामीटर का उपयोग करना सही क्रम में स्टाइलशीट को शामिल करेगा।

— FUXIA

कृपया मेरा संपादन देखें।

— बर्नई

Answer 1

आपको @import का उपयोग नहीं करना है। यह वास्तव में सबसे अच्छा नहीं है। एक संलग्न दृष्टिकोण का उपयोग करना शायद चारों ओर बेहतर है।

यहाँ बीसवेंडीह के कोड का प्रासंगिक हिस्सा है:

function twentythirteen_scripts_styles() {
...
    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

यहाँ आप अपने कोड में क्या करते हैं:

function child_scripts_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

यदि आपके main.css को माता-पिता की शैली के बाद आना है। तो आप बस इसे उसी पर निर्भर करते हैं।

अब, यदि आपके पास बच्चे में B.cs भी है, तो आप उसके अनुसार निर्भरताएं निर्धारित करते हैं:

function child_scripts_styles() {
    wp_enqueue_style( 'child-B-style', get_stylesheet_directory_uri().'/B.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('child-B-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

प्रत्येक आइटम के लिए आपके द्वारा परिभाषित की गई निर्भरताएं वास्तव में उन निर्भरताओं को दर्शाती हैं जो वास्तव में निर्भरताएं हैं। यदि B.css के बाद main.css आना चाहिए, तो यह उस पर निर्भर करता है। यदि B.cs को पैरेंट की शैली के बाद आना चाहिए ।css, तो B उस पर निर्भर करता है। एन्क्यू सिस्टम आपके लिए इसे छांटेगा।

और अगर आप वास्तव में किसी भी चीज़ के लिए बच्चे की शैली का उपयोग नहीं कर रहे हैं, तो आपको इसे पूरी तरह से समझने की ज़रूरत नहीं है । यह आपके थीम की हेडर जानकारी रखने के लिए सिर्फ एक प्लेसहोल्डर हो सकता है। इसका उपयोग नहीं कर रहे हैं? इसे लोड न करें।

इसके अलावा, आप वास्तव में क्या कर रहे हैं जो यहां ऑर्डर करने पर निर्भर है? सीएसएस ज्यादातर स्थितियों में लोड ऑर्डर की परवाह नहीं करता है। CSS चयनकर्ताओं की विशिष्टता पर अधिक निर्भर है। यदि आप किसी चीज़ को ओवरराइड करना चाहते हैं, तो आप इसके लिए अपने चयनकर्ता को अधिक विशिष्ट बनाते हैं। यह पहले, या आखिरी, या बीच में कुछ भी आ सकता है, अधिक विशिष्ट चयनकर्ता हमेशा जीतता है।

संपादित करें

आपकी टिप्पणियों को पढ़ना और कोड को करीब से देखना, मैं देखता हूं कि गलती यहां कहां है। बीस-तेरह कोड "get_stylesheet_uri ()" को शामिल करते हैं, जो कि एक बाल थीम मामले में, आपके बच्चे के विषय की style.css फ़ाइल होगी, न कि माता-पिता की फ़ाइल। इसीलिए @import काम करता है, और एक ही क्रम रखता है (जो फिर से, लगभग उतना मायने नहीं रखता जितना आप सोचते हैं कि यह करता है)।

उस स्थिति में, यदि आप आयात का उपयोग नहीं करना चाहते हैं, तो मैं सीधे माता-पिता की शैली को ध्यान में रखते हुए सिफारिश करूंगा। इस तरह:

function child_scripts_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

चाइल्ड थीम के फंक्शंस में कोड। एफपी सबसे पहले चलता है, इसलिए आपका अपना wp_enqueue_scripts सबसे पहले चलेगा, और यह पेरेंट थीम के स्टाइल.कैंस को एंक्यू करेगा, जो कि पेरेंट थीम खुद नहीं कर रहा है (क्योंकि वास्तव में आपके बच्चे के स्टाइल को एंसी करना है)। इसे माता-पिता के समान, किसी भी चीज पर निर्भर न बनाकर, फिर इसे सही तरीके से आउटपुट में रखा जाता है। ध्यान दें कि इस फ़ाइल और जेनेरिक.कैंस के क्रम में कोई फर्क नहीं पड़ता, क्योंकि मूल "बीसवीं शैली" में जेनेरिक.एसक्स एक सूचीबद्ध निर्भरता के रूप में नहीं है।

आपके अपने बच्चे का स्टाइल.क्स लोड होगा, और ईमानदारी से, यह वह जगह है जहाँ आपको बच्चे के विषय के लिए अपने बदलाव करने चाहिए, न कि एक अलग मेन.कॉसेस में। वहाँ कुछ भी नहीं है आप अपने परिवर्तन वहाँ से रोकने के लिए, लेकिन कोई अतिरिक्त css फ़ाइल होने का कोई वास्तविक कारण नहीं है।

Comments

मैं पूरी तरह से सहमत हूं कि @importजाने का सबसे अच्छा तरीका नहीं है। कृपया अधिक सटीक जानकारी के लिए मेरा "संपादित करें" अनुभाग देखें। सीएसएस के आदेश के संबंध में मुझे कोई विशेष आवश्यकता नहीं है। मैं केवल मूल विषय की सीएसएस फ़ाइलों के आंतरिक क्रम को संशोधित नहीं करना चाहता हूं, जो सीएसएस नियमों की प्राथमिकता के साथ समस्याएं पैदा कर सकते हैं।

— bernie

स्पष्ट करने के लिए, B.cs (अब प्रश्न में ie.css में बदल गया) मेरे बच्चे के विषय का हिस्सा नहीं है, लेकिन वास्तव में मूल विषय का हिस्सा है।

— बर्नकी

यदि आप चाहते हैं कि आपकी शैली आईईएस शैली के बाद आए, तो अपनी खुद की शैली इस पर निर्भर करें। इसका नाम "बीसतीर-यानी" है। यह आदेश पूरी तरह से आपके द्वारा घोषित निर्भरताओं द्वारा प्रबंधित किया जाता है, लेकिन फिर से, सीएसएस के साथ, दस्तावेज़ में उनमें से वास्तविक क्रम आमतौर पर कोई मायने नहीं रखता है, इसलिए मुझे यकीन नहीं है कि आप इसके बारे में अधिक परवाह क्यों करेंगे।

— ओट्टो

एक अलग दृष्टिकोण को शामिल करने के लिए मेरे उत्तर को संपादित किया।

— ओट्टो

हाँ मुझे लगता है कि मैं सीएसएस ऑर्डर रखने के लिए "आवश्यकता" के साथ दूर चला गया। यदि आदेश मूल विषय के लिए वास्तव में महत्वपूर्ण था, तो इसे निर्भरता में कहा जाना चाहिए।

— बर्नी

Answer 2

मेरा पिछला उत्तर अत्यधिक जटिल है और संभावित रूप से मूल विषय की निर्भरता श्रृंखला का सम्मान नहीं करता है (अन्य उत्तर में ध्यान दें देखें)।

यहाँ एक और सरल तरीका है जो बहुत बेहतर काम करना चाहिए:

function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles() {
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array(), $themeVersion);
}

// Filter get_stylesheet_uri() to return the parent theme's stylesheet 
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');

// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

विचार केवल get_stylesheet_uri()मूल विषय में कॉल को फ़िल्टर करने के लिए है, इसे चाइल्ड थीम के बजाय अपनी स्टाइलशीट को वापस करने के लिए है। बच्चे के विषय की स्टाइलशीट को बाद में एक्शन हुक में रखा गया है my_theme_styles।

Comments

केवल रिकॉर्ड के लिए: 1) आपका कोड पुराने @importसंस्करण का उपयोग करने के समान सटीक HTML उत्पन्न करेगा , प्रदर्शन पर कोई प्रभाव नहीं, दो अलग-अलग स्टाइल होंगे। सर्वर से अनुरोध 2) यह उत्तर पूरी निर्भरता चीज़ को छोड़ देता है एक साथ ... 3) आप देख सकते हैं क्या get_template_directory_uriऔर get_template_stylesheet_uriयहाँ क्या कर रहे हैं core.trac.wordpress.org/browser/tags/4.8/src/wp-includes/... फिर से, कि कोड के अधिकांश के लिए कोई जरूरत नहीं।

— bg17aw

@ bg17aw wp_enqueue_styleस्वचालित रूप ?ver=2013-07-18से थीम के संस्करण के आधार पर उत्पन्न (उदा ) उत्पन्न होने वाले url में कैश बस्टिंग क्वेरी स्ट्रिंग जोड़ता है । यह एक @importबयान से नहीं हुआ।

— बर्नई

Answer 3

चेतावनी

यह समाधान मूल विषय की निर्भरता का सम्मान नहीं करता है ! मूल विषय के हैंडल नाम को बदलने से मूल विषय में निर्धारित निर्भरता की श्रृंखला प्रभावित होती है। मेरे बहुत सरल अन्य उत्तर देखें ।

orignal उत्तर

हालांकि ओटो का जवाब बहुत अच्छा है, मैंने अपने बच्चे के विषय के कार्यों में इसके साथ समाप्त किया

function my_theme_styles() {
    global $wp_styles;
    $parentOriginalHandle = 'twentythirteen-style';
    $parentNewHandle = 'parent-style';

    // Deregister our style.css which was enqueued by the parent theme; we want
    // to control the versioning ourself.
    $parentStyleVersion = $wp_styles->registered[$parentOriginalHandle]->ver;
    $parentDeps = $wp_styles->registered[$parentOriginalHandle]->deps;
    wp_deregister_style($parentOriginalHandle);

    // Enqueue the parent theme's style.css with whatever version it used instead
    // of @import-ing it in the child theme's style.css
    wp_register_style($parentNewHandle, get_template_directory_uri() . '/style.css',
        $parentDeps, $parentStyleVersion);

    // Enqueue our style.css with our own version
    $themeVersion = wp_get_theme()->get('Version');
    wp_enqueue_style($parentOriginalHandle, get_stylesheet_directory_uri() . '/style.css',
        [$parentNewHandle], $themeVersion);
}

// Run this action action the parent theme has enqueued its styles.
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

यह style.cssचाइल्ड थीम के वर्जन को नियंत्रित करते हुए पेरेंट थीम के ऑर्डर और वर्जन नंबर को बनाए रखता है style.css।

Comments

मेरे दिमाग में यह बात कौंधती है कि सबसे लोकप्रिय ब्लॉग सॉफ्टवेयर को मौजूदा विषय के सीएसएस को मोड़ने के लिए कोड की 20+ लाइनों की आवश्यकता होती है। मुझे लगता है कि नौकरी की सुरक्षा है।

— कार्ल जी

मैं बदलना पड़ा [$parentNewHandle]करने के लिएarray($parentNewHandle)

— कार्ल जी

@CarlG: जिस सरणी सिंटैक्स का मैंने उपयोग किया है (कोष्ठक) PHP 5.4 में पेश किया गया था।

— बेर्नी

अपवित्र करने के लिए: कृपया मेरे दूसरे उत्तर को देखें जो इस समस्या को हल करता है।

— बेर्नी

यह सब एक बहुत बड़ी गलतफहमी है, इसमें से किसी की भी जरूरत नहीं है। वास्तव में, पुरानी @importविधि ठीक वैसे ही काम करती है, कृपया दोनों विधियों की तुलना करें। मूल विषय पर बच्चे के विषय की निर्भरता के लिए, इसके लिए कोई आवश्यकता नहीं है। बच्चे style.cssको हमेशा माता-पिता के बाद लोड किया जाता है, कम से कम मेरे परीक्षणों से। प्यार गलत साबित होना।

— bg17aw