कस्टम सीएसएस फ़ाइल को थीम में कैसे जोड़ें?


16

कुछ थीम आपको style.css फ़ाइल को संपादित नहीं करने के लिए कहते हैं, इसके बजाय custom.css फ़ाइल का उपयोग करते हैं। यदि आप custom.css पर कोड लिखते हैं, तो यह style.css में उसी तत्व शैली को ओवरराइट कर देगा। मुझे लगता है कि थीम अपडेट पर उपयोगकर्ता शैलियों के नुकसान को रोकने के लिए ऐसा किया जाता है, क्या ऐसा है?

यह कैसे काम करता है? क्या वे पहले से ही अपने विषय में custom.css फ़ाइल शामिल करते हैं? लेकिन इस फ़ाइल को थीम में कैसे शामिल किया गया है ताकि वह विषय को पहले custom.css में स्टाइल के लिए देखे? धन्यवाद।


यदि यह प्रश्न पूछने वाला व्यक्ति जर्मन है तो लगभग निश्चित रूप से "ओवरराइट" का अर्थ है "ओवरराइड"। मुझे लगता है कि सवाल यह नहीं कह रहा है कि custom.css फ़ाइल में कोड डालने से style.css फ़ाइल संशोधित हो जाएगी। मैं इसे आलोचनात्मक नहीं कह रहा हूं, मैं कह रहा हूं कि मैं भ्रमित हूं और यह मेरी समझ है।
user34660

जवाबों:


2

यदि मैं एक और सीएसएस फ़ाइल जोड़ना चाहता हूं तो मैं आमतौर पर इस कोड को जोड़ देता हूं

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

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


2
सबसे अच्छा अभ्यास अब और नहीं - developer.wordpress.org
iansch

@iantch क्यों नहीं? बेहतर क्या है? मैं कुछ भी बेहतर मिल सकता है।
कंगारू


HTTP / 1 के साथ सभी बुनियादी शैलियों को एक न्यूनतम फ़ाइल में पैक करने के लिए सबसे अच्छा अभ्यास है, एक और सीएसएस फ़ाइल को जोड़ने के बजाय ब्राउज़र को डाउनलोड करने और संसाधित करने की आवश्यकता है।
एंडी

मेरे मामले में, यह सबसे अच्छा समाधान था।
रिच

27

कस्टम सीएसएस जोड़ने के लिए वर्डप्रेस में @import का उपयोग करना अब सबसे अच्छा अभ्यास नहीं है, फिर भी आप इसे उस विधि से कर सकते हैं।

सबसे अच्छा अभ्यास फ़ंक्शन wp_enqueue_style()में उपयोग कर रहा है । एफपी।

उदाहरण :

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));

1
style.css यह सुनिश्चित करने के लिए कि आपके mystyle.cssलोड होने के बाद माता-पिता की निर्भरता जोड़ें style.css!
सुमित


मैं पथ भाग को समझता हूं, लेकिन पहले भाग, 'विषय-शैली' और 'मेरा-शैली' भाग के बारे में क्या, मैं वहां कुछ भी डाल सकता हूं? और फ़ंक्शन के बारे में क्या है। यदि यह काम करने के लिए कुल कोड क्या है?
ब्रूनो विन्सेंट

@BrunoVincent handleजब तक आप अद्वितीय चाहते हैं तब तक आप जो चाहें नाम दे सकते हैं। डॉक
फहमी

4

चाइल्ड थीम को सक्रिय करें और function.php में निम्न उदाहरण कोड जोड़ें

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}

2

मेरा प्रस्ताव बाल विषयों का उपयोग करना होगा। इसे लागू करना बहुत आसान है और आपके द्वारा किए जाने वाले सभी संशोधन (शैलियों सहित) मूल विषय से पूरी तरह से अलग हैं।


0

मुख्य विषय सीएसएस या अन्य फाइलों को अधिलेखित करने से रोकने के लिए, आपको हमेशा वर्डप्रेस में एक बच्चे के विषय का उपयोग करना चाहिए ... ऐसा नहीं करने से आपको केवल मुख्य सिरदर्द और सड़क के नीचे की समस्याओं का कारण होगा।

https://codex.wordpress.org/Child_Themes

... और बाल विषय को सेटअप करना कितना आसान है, इसका कोई कारण नहीं है कि आपको एक का उपयोग नहीं करना चाहिए।

चाइल्ड थीम का उपयोग करने से आप अपनी पसंद के किसी भी मुख्य पेरेंट थीम फाइल को ओवरराइड कर सकते हैं, बस पेरेंट से अपने बच्चे में कॉपी करके या उसी नाम से नई फाइल बना सकते हैं।

custom.cssफ़ाइल के बारे में ऐसे कई तरीके हैं जो थीम डेवलपर इसे संभालते हैं ... उनमें से बहुत से ऐसा करने की कोशिश करते हैं और उन ग्राहकों को रोकने के लिए करते हैं जो मुख्य style.cssफ़ाइल को संपादित करने से एक बच्चे के विषय का उपयोग नहीं करना चाहते हैं ...।

किसी भी तरह से आपको उस बारे में चिंतित नहीं होना चाहिए, जब तक आप एक बच्चे के विषय का उपयोग करते हैं, तब तक आपको अपने विषय को बाद में अपडेट करने और अपने परिवर्तनों को खोने के बारे में चिंता नहीं करनी चाहिए ... हमेशा बच्चे के विषयों का उपयोग करने की आदत डालें, आप मैं बाद में धन्यवाद दूंगा, मैं वादा करता हूं।


0

अगर आप अपने html को साथ छोड़ना चाहते हैं। आप इसे अपनी css फ़ाइल में जोड़ सकते हैं। मुझे लगता है कि यह बेहतर है।

@import url("../mycustomstyle.css");

यह भी आपके विषय पर निर्भर करता है कि यह बच्चे और मूल विषयों के साथ काम करेगा।

- ध्यान रखें, सीएसएस क्रमिक कार्य करता है (समान स्तर पर पहचानकर्ता का उपयोग करते समय, पहले से ही उपयोग किया जाता है), इसलिए आपकी फ़ाइल में जो अंतिम है वह अधिलेखित हो जाएगा। इसलिए यदि आप सामान को ओवरराइड करना चाहते हैं तो अपने कस्टमस्टाइल आयात को नीचे रखें।


सीएसएस क्रमिक रूप से काम नहीं करता है, यह नियम की विशिष्टता के आधार पर काम करता है; यह केवल पिछले
ओवरराइट्स

आप सही हैं, और यही मेरा मतलब है। मेरी अनुक्रमिक ओवरराइटिंग को संदर्भित करता है। एक पूरे के रूप में सीएसएस नहीं।
11

0

सबसे अच्छा तरीका है कि सभी एनकेड स्टाइल को एक ही फंक्शन में मिलाएं और फिर एक्शन का उपयोग करके उन्हें कॉल करेंwp_enqueue_scripts । परिभाषित थीम को अपने विषय के फंक्शंस में जोड़ें। प्रारंभिक सेटअप के नीचे कहीं और।

कोड ब्लॉक:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

कृपया ध्यान दें :

तीसरा पैरामीटर निर्भरता सरणी है जो संदर्भित करता है कि यह स्टाइलशीट किसी अन्य स्टाइलशीट पर निर्भर है या नहीं। तो, हमारे उपरोक्त कोड में custom.css style.css पर निर्भर है

|
अतिरिक्त मूल:
wp_enqueue_style() फ़ंक्शन के 5 पैरामीटर हो सकते हैं: इस तरह - wp_enqueue_style ( $ संभाल, $ src, $ deps, $ ver, $ मीडिया );
WP कोडिंग की वास्तविक दुनिया में, आमतौर पर हम इस तरह से उस फ़ंक्शन के अंदर जावास्क्रिप्ट फ़ाइलों / jQuery पुस्तकालयों को भी जोड़ते हैं:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

5 वाँ पैरामीटर सही / गलत वैकल्पिक है (2nd, 3rd और 4th params भी ऑप्ट।) लेकिन बहुत आवश्यक है, यह हमें हमारी स्क्रिप्ट्स को पाद लेख में रखने की अनुमति देता है जब हम बूलियन पैरामीटर को सही के रूप में उपयोग करते हैं।


0

अपने WordPress डैशबोर्ड से Appearance> Edit CSS पर जाएं। यहाँ छवि विवरण दर्ज करें

यहाँ बुनियादी CSS संपादक के साथ स्क्रीन है। यहाँ छवि विवरण दर्ज करें

अब अपने CSS को डिफ़ॉल्ट टेक्स्ट पर सीधे पेस्ट करें। आप डिफ़ॉल्ट पाठ को हटा सकते हैं ताकि आपका सीएसएस केवल संपादक में दिखाई दे। फिर स्टाइलशीट को सेव करें और आपका CSS लाइव हो जाएगा।


-2

चाइल्ड थीम का इस्तेमाल करें। यह आपकी सबसे अच्छी शर्त है। इस तरह अगर थीम कभी अपडेट की जाती है, तो आप अपने द्वारा बनाए गए स्टाइलशीट को ओवरराइड नहीं करेंगे।

https://codex.wordpress.org/Child_Themes

इस मार्ग पर जाएं, आप बाद में खुद को धन्यवाद देंगे।


यह वास्तव में सवाल का जवाब नहीं देता है। आप यह बताना चाह सकते हैं कि फिर बाल थीम में स्टाइलशीट को कैसे जोड़ा जाए।
केसर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.