আমি কীভাবে ইনলাইন স্টাইল ব্যবহার না করে আমার প্লাগইনে সিএসএস বিকল্পগুলি যুক্ত করব?

Question

আমি সম্প্রতি একটি প্লাগইন প্রকাশ করেছি, ডাব্লুপি কোডা স্লাইডার , যে কোনও পোস্ট বা পৃষ্ঠায় jQuery স্লাইডার যুক্ত করতে শর্টকোড ব্যবহার করে। আমি পরবর্তী সংস্করণে একটি বিকল্প পৃষ্ঠা যুক্ত করছি এবং আমি কয়েকটি সিএসএস বিকল্প অন্তর্ভুক্ত করতে চাই তবে প্লাগিনটি স্টাইল পছন্দগুলি ইনলাইন সিএসএস হিসাবে যুক্ত করতে চাই না। আমি চাইলে পছন্দগুলি সিএসএস ফাইলে ডায়নামিকভাবে যুক্ত করা হোক।

আমি সুরক্ষার সমস্যার জন্য ফপেন ব্যবহার বা কোনও ফাইলে লেখার বিষয়টি এড়াতে চাই।

এইরকম কিছু সম্পাদন করা কি সহজ বা কেবল পৃষ্ঠায় সরাসরি শৈলীর পছন্দগুলি যুক্ত করা থেকে আরও ভাল থাকব?

Comments

@ ক্রিস_ও : আমি প্রায় একই জিনিসটি নিয়ে ভাবছিলাম। আমি যা চাই তা হ'ল ফাইল নামের পরিবর্তে ফাংশন নাম সহ কল করা wp_enqueue_style()(এবং wp_enqueue_script()) একটি উপায় এবং আমার ফাংশনটি সিএসএস (বা জেএস) উত্পন্ন করতে তবে এটি শেষ পর্যন্ত কোনও লিঙ্কযুক্ত স্টাইলশিটের মাধ্যমে অন্তর্ভুক্ত করতে পারে। আমি যতদূর জানি wp_equeue_*()ফাংশন দিয়ে এটি সম্ভব নয় । আমাদের ট্র্যাকের টিকিট জমা দিতে হবে?

— মাইকচিন্কেল

টুইটার আমি এই টিকিটে সমর্থন যোগ করতে হবে।

— ক্রিস_ও

@ ক্রিস_ও: আমি কেবল @ ডগের উত্তর দেখেছি; আমি একটি খারাপ ধারণা করেছি যে আপনি এটি ইতিমধ্যে জানতেন। যদি আমি বুঝতে পারি যে ঘটনাটি না হয় তবে আমি আপনাকে এখানে

— দেখিয়ে দিতাম

@ মাইকস্কিঙ্কেল আমি wp_register এবং wp_enqueue সম্পর্কে জানতাম। আমি প্লাগইন বিকল্প পৃষ্ঠা থেকে মানগুলির উপর ভিত্তি করে স্টাইল শীটটি তৈরি করার একটি উপায় খুঁজছিলাম।

— ক্রিস_ও

@ ক্রিস_ও : আহ। আমি নিজেকে এমন একজন হিসাবে ভাবতে চাই যিনি এখনও সমাধানটি শিখার পরেও সমাধানে অন্যেরা কী অনুপস্থিত রয়েছে তা দেখতে পাচ্ছেন (যেমন বেশিরভাগ বিশেষজ্ঞ ভাল শিক্ষক নন এবং যদিও আমি সেরা বিশেষজ্ঞ নই তবে আমি সাধারণত একজন ভাল শিক্ষক। ) ওটিও, এই আমি মিস করেছি, দুঃখিত। :)

— মাইকচিন্কেল

Answer 1

স্টাইলশিটটি যুক্ত করতে wp_register_styleএবং ব্যবহার wp_enqueue_styleকরতে। এতে কেবল স্টাইলশিট লিঙ্কটি যুক্ত করবেন না wp_head। সন্ধানী শৈলীগুলি অন্য প্লাগইন বা থিমগুলিকে প্রয়োজনীয় হলে স্টাইলশীটটি সংশোধন করার অনুমতি দেয়।

আপনার স্টাইলশীট একটি। Php ফাইল হতে পারে:

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

আমার-স্টাইলশীট.এফপি দেখতে পাবেন:

<?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

অতিরিক্ত হিসাবে - বিকল্প পৃষ্ঠার মানগুলি পরিবর্তিত হলেই মানগুলি পরিবর্তন হয় - আপনি সংরক্ষণে সিএসএস ফাইল তৈরি করতে পারেন। আপনি প্লাগইন ডিরেক্টরিতে সিএসএস ফাইলগুলিও সংরক্ষণ করতে পারেন, সুতরাং প্রতিটি সিএসএস অনুরোধে পিএইচপি ফাইল চালানো ইত্যাদি সহ এটি আরও কিছুটা পারফরম্যান্ট।

— hakre

ধন্যবাদ! ভাল কাজ করেছে। তবে আমি পেয়েছি মারাত্মক ত্রুটি get_option () ... অপরিজ্ঞাত। তারপরে আমি wp-config.php ফাইলটি লোড করেছি এবং তারপরে সমস্যাটি স্থির করেছি।

— সুমিত হর্ষন

সুমিত, আপনি কীভাবে কাস্টম সিএসএস ফাইলের অভ্যন্তরে get_option ব্যবহার করেছেন তা ব্যাখ্যা করতে পারেন? অনেক ধন্যবাদ!

— আন্তোনিও পেট্রিক্কা

Answer 2

গতিশীলভাবে একটি সিএসএস ফাইল তৈরি করা এবং তারপরে এটি লোড করা একটি সিএসএস ফাইল যুক্ত করার খুব কম ব্যান্ডউইথ চুক্তি হওয়া উচিত এর সাথে একটি বিশাল কর্মক্ষমতা বোঝা যুক্ত করে, বিশেষত যদি সিএসএসে ভেরিয়েবলগুলি রয়েছে যা ডাব্লুপিপি-র মাধ্যমে প্রক্রিয়া করা হতে পারে। যেহেতু এটি একটি পৃষ্ঠা লোডের জন্য তৈরি করা হচ্ছে দুটি পৃথক ফাইল, ডাব্লুপি দু'বার শুরু হয় এবং সমস্ত ডিবি অনুসন্ধানগুলি দু'বার চালায় এবং এটি একটি বিরাট গোলযোগ mess

যদি আপনার স্লাইডারটি কেবল একটি পৃষ্ঠায় চলেছে এবং আপনি শৈলীগুলি গতিশীলভাবে সেট করতে চান তবে আপনার সেরা বেট হ'ল শিরোনামে স্টাইল ব্লক যুক্ত করা।

কার্য সম্পাদনের ক্রম:

1. শিরোনামে শৈলীর ছোট ব্লক যুক্ত করুন, গতিশীলভাবে তৈরি - খুব দ্রুত
2. Wp_enqueue_style - মাঝারি মাধ্যমে একটি অ-গতিশীল স্টাইলশিট যুক্ত করুন
3. Wp_enqueue_style এর মাধ্যমে একটি গতিশীল স্টাইলশিট যুক্ত করুন - খুব ধীর

Comments

@ ড্যান-গেইলে খুব ভাল পয়েন্ট। প্লাগইন একাধিক পৃষ্ঠায় ব্যবহার করা যেতে পারে এবং কিছু ব্যবহারকারী এটি 2 বা 3 পৃষ্ঠায় ব্যবহার করছেন। এটি কেবলমাত্র বর্তমান স্থিতিশীল স্টাইল শীট এবং শর্টকোডযুক্ত পৃষ্ঠাগুলিতে জেএস সজ্জিত করে।

— ক্রিস_ও

আমি ড্যান গেইলের সাথে একমত, যদিও আপনি আমার উত্তরটি দিয়েছিলেন। প্রতিটি পৃষ্ঠার ভিউতে (শর্টকোড সহ কয়েকটি পোস্ট / পৃষ্ঠায় সীমাবদ্ধ থাকলেও) পৃথক স্টাইলশীট ডাউনলোড করার চেয়ে ডাব্লুপি_হেডে একটি ছোট সিএসএস ব্লক যুক্ত করা পারফরম্যান্স অনুযায়ী আরও ভাল হবে। প্রথম স্থানে পৃথক স্টাইলশিট ব্যবহার করার একমাত্র কারণ হ'ল সেগুলি ব্রাউজার দ্বারা ক্যাশে করা যায় । গতিশীল স্টাইলশিটগুলি ক্যাশে করা যায় না।

— ডগ

এটি কি এখনও জিনিসগুলি নিয়ে যাওয়ার সঠিক উপায়?

— ডেভ কিস

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

এই ইলকের সমস্ত পরামর্শ নিয়ে আমার অসুবিধা হয়েছিল - সম্ভবত আমি কিছুটা ঘন, অথবা অবদানকারীরা সাধারণ ছোঁয়া হারিয়ে ফেলেছে।

আমি প্লাগ-ইন পিএইচপি ফাইলে কোডিংয়ের উপর স্থির হয়েছি: -

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'/>";

মনে হচ্ছে এটি কাজ করে। এটি কেবল সেই পৃষ্ঠাগুলিতে লোড হয় যা প্লাগইন ব্যবহার করে। এটি আমার দ্বারা জরিমানা করা এইচ 1 ট্যাগের পরে লোড হয়। কীভাবে এটি আরও দক্ষ বা আরও স্পষ্ট হতে পারে তা আমি দেখতে পাচ্ছি না।

.... তবে সম্ভবত আমি ভুল - আমি বলেছিলাম যে আমি কিছুটা ঘন ছিলাম।

Comments

আপনার কেবল <link>পৃষ্ঠার

— শিরোনামে

Yerss। এটি হ'ল কারণ আপনার সিএসএস পৃষ্ঠার শীর্ষ থেকে নীচে সমস্ত কিছুকে প্রভাবিত করতে চেয়েছিল wanted এইচ 1 ট্যাগের পরে যা আসে তা কেবল আমিই প্রভাবিত করতে পেরে আমি খুশি। আমি উদাহরণগুলির মধ্যে কোনওটিই কাজ করতে পারি না (আমি মনে করি সেগুলি খারাপভাবে ব্যাখ্যা করা যেতে পারে) test এটি HTML এর কিছু পরীক্ষার জন্য চেষ্টা করুন। যদি আমি ভুল হই তবে আমাকে বলুন :)

— চ্যাজা

@ চাজ্জা এটিই একমাত্র কারণ নয়। বডি ট্যাগ লেখার পরে যখন কোনও ব্রাউজার কোনও শৈলীর শনাক্ত করে, স্টাইলটি লোড এবং প্রয়োগ না করা পর্যন্ত এটি যা কিছু করছে তা বন্ধ করে দেয়, যা কার্য সম্পাদনের পক্ষে খারাপ এবং স্টাইলের স্ট্রোলগুলি এবং আনস্টাইলযুক্ত পাঠ্যের ঝলক বাড়ে। যাইহোক, যদি এটি সত্যিই গুরুত্বপূর্ণ না হয় তবে আপনি যেমন বলেছিলেন সেগুলি সেই CSS ফাইলগুলিতে ফেলে দিন। আমি এটি সব সময় করি, এবং দিনের শেষে এটি ঠিক আছে। অনুকূল নয়, তবে জরিমানা।

— ড্যান গেইল

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' );