it-swarm.asia

كيف أضيف خيارات CSS إلى المكون الإضافي الخاص بي دون استخدام الأنماط المضمّنة؟

لقد قمت مؤخرًا بإصدار مكون إضافي ، WP Coda Slider ، يستخدم الرموز المختصرة لإضافة منزلق jQuery إلى أي منشور أو صفحة. أقوم بإضافة صفحة خيارات في الإصدار التالي وأرغب في تضمين بعض خيارات CSS لكن لا أريد أن يضيف المكوّن الإضافي خيارات النمط مثل CSS المضمن. أرغب في إضافة الخيارات ديناميكيًا إلى ملف CSS عند استدعائه.

أود أيضًا تجنب استخدام fopen أو الكتابة إلى ملف لمشكلات الأمان.

هل من السهل إنجاز شيء كهذا أم سأكون أفضل حالاً بمجرد إضافة خيارات النمط مباشرةً إلى الصفحة؟

plugin-developmentcssoptions
25
Chris_O

استخدم wp_register_style و wp_enqueue_style لإضافة ورقة الأنماط. لا تقم ببساطة بإضافة رابط ورقة أنماط إلى wp_head. تسمح أنماط قوائم الانتظار بإضافات أو سمات أخرى لتعديل ورقة الأنماط إذا لزم الأمر.

يمكن أن تكون ورقة الأنماط الخاصة بك ملف .php:

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

my-stylesheet.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; ?>;
}
27
Doug

يؤدي إنشاء ملف CSS ديناميكيًا ثم تحميله إلى إضافة عبء أداء ضخم إلى ما يجب أن يكون صفقة النطاق الترددي المنخفض جدًا لإضافة ملف CSS ، خاصةً إذا كانت هناك متغيرات في CSS سيتم معالجتها من خلال WP. نظرًا لأنه يتم إنشاء ملفين مختلفين لتحميل صفحة واحدة ، WP يبدأ التشغيل مرتين ويعمل كل استعلامات قاعدة البيانات مرتين ، وهي مشكلة كبيرة.

إذا كان شريط التمرير الخاص بك سيكون فقط على صفحة واحدة ، وتريد تعيين الأنماط بشكل حيوي ، فإن أفضل رهان لك هو إضافة كتلة نمط إلى الرأس.

من أجل الأداء:

  1. أضف مجموعة صغيرة من الأنماط في الرأس ، تم إنشاؤها ديناميكيًا - سريع جدًا
  2. أضف ورقة أنماط غير ديناميكية عبر wp_enqueue_style - Medium
  3. أضف ورقة أنماط ديناميكية عبر wp_enqueue_style - بطيئة جدًا
10
Dan Gayle

هذه هي الطريقة التي أفعل ذلك عادة:

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

لقد واجهت صعوبة في جميع توصيات هذا النوع - ربما أنا سميك بعض الشيء ، أو ربما فقد المساهمون اللمسة المشتركة.

لقد استقرت على ترميز هذا في ملف 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 وهو أمر جيد من قبلي. لا أستطيع أن أرى كيف يمكن أن يكون أكثر كفاءة أو أكثر وضوحًا.

.... لكن ربما أكون مخطئًا - قلت إنني كنت سميكًا بعض الشيء.

1
chazza