इनलाइन शैलियों का उपयोग किए बिना मैं अपने प्लगइन में सीएसएस विकल्प कैसे जोड़ूं?

Question

मैंने हाल ही में एक प्लगइन WP Coda Slider जारी किया है , जो किसी पोस्ट या पेज पर jQuery स्लाइडर को जोड़ने के लिए शॉर्टकोड का उपयोग करता है। मैं अगले संस्करण में एक विकल्प पृष्ठ जोड़ रहा हूं और मैं कुछ सीएसएस विकल्पों को शामिल करना चाहूंगा लेकिन मैं इनलाइन सीएसएस के रूप में स्टाइल विकल्पों को जोड़ने के लिए प्लगइन नहीं चाहता हूं। मैं चाहता हूँ कि जब यह कहा जाए तो विकल्पों को सीएसएस फ़ाइल में गतिशील रूप से जोड़ा जाए।

मैं सुरक्षा मुद्दों के लिए फ़ाइल को फ़ोपेन या लिखने से बचने से भी बचना चाहूंगा।

क्या इसे पूरा करना आसान है या सीधे पेज पर शैली विकल्पों को जोड़ने से बेहतर होगा?

Comments

@ क्रिस_ओ : मैं लगभग एक ही बात के बारे में सोच रहा हूं। मैं जो चाह रहा हूं वह एक फ़ाइल नाम के बजाय एक फ़ंक्शन नाम के साथ wp_enqueue_style()(और wp_enqueue_script()) कॉल करने का एक तरीका है और मेरा फ़ंक्शन सीएसएस (या जेएस) उत्पन्न करता है लेकिन फिर भी यह अंततः एक लिंक किए गए स्टाइलशीट के माध्यम से शामिल है। जहाँ तक मुझे पता है कि यह wp_equeue_*()फ़ंक्शन के साथ संभव नहीं है । शायद हमें एक टीआरसी टिकट जमा करना चाहिए?

— माइकस्किंकेल

@MikeSchinkel: यह wp_enqueue फ़ंक्शन का उपयोग करने के लिए एक बहुत ही तार्किक तरीका होगा। मैं उस टिकट के लिए समर्थन जोड़ूंगा।

— क्रिस_ओ

@ क्रिस_ओ: मैंने सिर्फ @ डग का जवाब देखा; मैंने एक बुरा अनुमान लगाया जो आप पहले से ही जानते थे। अगर मुझे एहसास होता कि ऐसा नहीं होता तो मैं आपको यहाँ

— बता देता

@MikeSchinkel मुझे wp_register और wp_enqueue के बारे में पता था। मैं प्लगइन विकल्प पृष्ठ से मूल्यों के आधार पर स्टाइल शीट बनाने का एक तरीका ढूंढ रहा था।

— क्रिस_ओ

@ क्रिस_ओ : आह। मैं अपने बारे में सोचना पसंद करता हूं क्योंकि कोई व्यक्ति जो अभी भी देख सकता है कि समाधान सीखने के बाद भी दूसरे लोग क्या याद कर रहे हैं (यानी ज्यादातर विशेषज्ञ अच्छे शिक्षक नहीं हैं और हालांकि मैं सबसे अच्छा विशेषज्ञ नहीं हूं, आमतौर पर मैं एक अच्छा शिक्षक हूं। ) OTOH, यह एक है जो मुझे याद किया, क्षमा करें। :)

— माइकस्किंकेल

Answer 1

का प्रयोग करें wp_register_styleऔर wp_enqueue_styleस्टाइलशीट जोड़ने के लिए। सीधे तौर पर एक स्टाइलशीट लिंक न जोड़ें wp_head। क्यूइंग स्टाइल अन्य प्लगइन्स या थीम को आवश्यक होने पर स्टाइलशीट को संशोधित करने की अनुमति देता है।

आपकी स्टाइलशीट एक .php फ़ाइल हो सकती है:

wp_register_style('myStyleSheet', 'my-stylesheet.php');
wp_enqueue_style( 'myStyleSheet');

my-stylheet.php इस तरह दिखेगा:

<?php
// We'll be outputting CSS
header('Content-type: text/css');

include('my-plugin-data.php');    
?>

body {
  background: <?php echo $my_background_variable; ?>;
  font-size: <?php echo $my_font_size; ?>;
}

Comments

इसके अतिरिक्त - चूंकि मान केवल तब बदलते हैं जब विकल्प पृष्ठ पर मान बदले जाते हैं - आप सहेजने पर CSS फ़ाइल उत्पन्न कर सकते हैं। आप प्लगइन डायरेक्टरी में भी सीएसएस फाइलों को स्टोर कर सकते हैं, इसलिए यह थोड़ा और परफॉर्मेंट है फिर प्रत्येक सीएसएस रिक्वेस्ट आदि पर PHP फाइल चलाने के लिए।

— हकरे ha

धन्यवाद! अच्छा काम किए। लेकिन मुझे घातक त्रुटि get_option () ... अपरिभाषित है। फिर मैंने wp-config.php फ़ाइल लोड की और फिर समस्या को ठीक किया।

— सुमित हर्षन

सुमित, क्या आप यह बता सकते हैं कि कस्टम सीएसएस फ़ाइल के अंदर आप get_option का उपयोग कैसे करते हैं? बहुत धन्यवाद!

— एंटोनियो पेट्रीका

Answer 2

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

यदि आपका स्लाइडर केवल एक पृष्ठ पर होने वाला है, और आप शैली को गतिशील रूप से सेट करना चाहते हैं, तो आपका सबसे अच्छा दांव हेडर में एक स्टाइल ब्लॉक जोड़ना है।

प्रदर्शन के क्रम में:

1. हेडर में शैलियों के छोटे ब्लॉक जोड़ें, गतिशील रूप से बनाए गए - बहुत तेज़
2. Wp_enqueue_style - माध्यम के माध्यम से एक गैर-गतिशील स्टाइलशीट जोड़ें
3. Wp_enqueue_style के माध्यम से एक गतिशील स्टाइलशीट जोड़ें - बहुत धीमी

Comments

@ दान-गेल बहुत अच्छी बात है। प्लगइन का उपयोग एक से अधिक पेज पर किया जा सकता है और कुछ उपयोगकर्ता इसे 2 या 3 पेज पर उपयोग कर रहे हैं। यह केवल उन मौजूदा स्टैटिक स्टाइल शीट और js को उन पन्नों पर जोड़ देता है जिन पर शोर्ट है।

— क्रिस_ओ

मैं दान गेल से सहमत हूं, भले ही आपने मेरे जवाब को वोट दिया हो। Wp_head में एक छोटे सीएसएस ब्लॉक को जोड़ने से बेहतर प्रदर्शन-वार होगा, एक अलग स्टाइलशीट को हर पृष्ठ दृश्य पर डाउनलोड करने की आवश्यकता होगी (भले ही शॉर्टकोड के साथ कुछ पोस्ट / पेज तक सीमित हो)। पहली जगह में अलग स्टाइलशीट का उपयोग करने का एकमात्र कारण यह है कि उन्हें ब्राउज़र द्वारा कैश किया जा सकता है । गतिशील स्टाइलशीट को कैश नहीं किया जा सकता है।

— डग

क्या यह अभी भी चीजों के बारे में जाने का सही तरीका है?

— डेव चुंबन

Answer 3

ऐसा मैं आमतौर पर करता हूँ:

function build_stylesheet_url() {
    echo '<link rel="stylesheet" href="' . $url . 'stylesheetname.css?build=' . date( "Ymd", strtotime( '-24 days' ) ) . '" type="text/css" media="screen" />';
}

function build_stylesheet_content() {
    if( isset( $_GET['build'] ) && addslashes( $_GET['build'] ) == date( "Ymd", strtotime( '-24 days' ) ) ) {
        header("Content-type: text/css");
        echo "/* Something */";
        define( 'DONOTCACHEPAGE', 1 ); // don't let wp-super-cache cache this page.
        die();
    }
}

add_action( 'init', 'build_stylesheet_content' );
add_action( 'wp_head', 'build_stylesheet_url' );

Answer 4

मुझे इस ilk की सभी सिफारिशों के साथ कठिनाई हुई है - शायद मैं थोड़ा मोटा हूं, या शायद योगदानकर्ताओं ने आम स्पर्श खो दिया है।

मैं प्लग-इन php फ़ाइल में इसे कोड करने पर बस गया: -

echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/css.css' type='text/css' rel='stylesheet' />";
echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/public.css' rel='stylesheet' type='text/css'/>";

यह काम करने लगता है। यह केवल उन पृष्ठों पर लोड होता है जो प्लगइन का उपयोग करते हैं। यह h1 टैग के बाद लोड होता है जो मेरे द्वारा ठीक है। मैं यह नहीं देख सकता कि यह अधिक कुशल या अधिक स्पष्ट कैसे हो सकता है।

.... लेकिन शायद मैं गलत हूं - मैंने कहा कि मैं थोड़ा मोटा था।

Comments

आपको <link>पेज हेड में तत्वों को लोड करना चाहिए

— shea

Yerss। ऐसा इसलिए होगा क्योंकि आपका सीएसएस पृष्ठ के शीर्ष से नीचे की ओर से सब कुछ प्रभावित करना चाहता है। मुझे खुशी है कि h1 टैग के बाद केवल वही प्रभावित हुआ है। मैं किसी भी उदाहरण का काम नहीं कर सका (मुझे लगता है कि उन्हें बुरी तरह समझाया जा सकता है)। इसे अपने लिए परीक्षण html के किसी टुकड़े पर ले जाएं। अगर मुझे गलत बताया गया है :)

— chazza

@ अच्जा यह एकमात्र कारण नहीं है। जब कोई ब्राउज़र बॉडी टैग लिखे जाने के बाद किसी भी शैली का पता लगाता है, तो यह उस शैली को लोड होने और लागू होने तक जो कुछ भी कर रहा है, उसे रोक देता है, जो प्रदर्शन के लिए बुरा है और स्क्रीन रिफ्लोज़ और अस्थिर पाठ की चमक की ओर जाता है। हालांकि, अगर यह वास्तव में मायने नहीं रखता है, तो उन सीएसएस फ़ाइलों को फेंक दें जैसे आपने कहा था। मैं इसे हर समय करता हूं, और दिन के अंत में यह ठीक है। इष्टतम नहीं है, लेकिन ठीक है।

— दान गेल

Answer 5

वर्डप्रेस 3.3 के बाद से अपडेट करें

Wp_add_inline_style नामक एक फ़ंक्शन है जिसका उपयोग थीम / प्लगइन विकल्पों के आधार पर शैलियों को गतिशील रूप से जोड़ने के लिए किया जा सकता है। इसका उपयोग सिर में एक छोटी सीएसएस फ़ाइल जोड़ने के लिए किया जा सकता है जो तेज और कुशल होनी चाहिए।

<?php
function myprefix_scripts() {

    wp_enqueue_style('name-of-style-css', plugin_dir_path(__FILE__) . '/css/ccsfilename.css');

    $css = get_option( 'loader_css', 'default css goes here for when there is no value' );

    //or for Example
    $color = get_option( 'custom_plugin_color', 'red' ); //red is default value if value is not set
    $css = ".mycolor{
                background: {$color};
           }";

    wp_add_inline_style('name-of-style-css', $css);

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );