كيفية إدراج ورقة أنماط CSS في ووردبريس

في هذه المقالة سوف نستكشف وظيفة ()wp_enqueue_style؛ وتعلم كيفية استخدامها لإدراج ورقة أنماط CSS إلى قالب ووردبريس الخاص بك. هذه الوظيفة مفيدة بشكل خاص عندما تريد تجميع كل CSS المخصص الذي قمت بحفظه داخل لوحة Customizer. على أقل تقدير ، سيساعد نقل CSS المضمنة إلى ورقة أنماط على تحسين أداء صفحاتك.

إذا كنت مثلي - فأنت تحب تجميع مقتطفات CSS المختلفة واستخدامها لتخصيص تصميم موقع ووردبريس الخاص بك. ولكن ، على الرغم من كل المتعة ، يمكن لهذه المقتطفات أن تضيف بسرعة ما يصل إلى 1000+ سطر من CSS - والتي يتم تحميلها في كل صفحة ، حتى لو لم تكن CSS المخصصة هذه ضرورية لتلك الصفحة المحددة ؛ كبيرة لا للأداء.

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

لذا ، فإن أول شيء تريد القيام به هو نقل جميع ملفات CSS المخصصة الخاصة بك إلى ورقة أنماط جديدة ، في حالتي - قمت بإنشاء ملف يسمى cstm-design.css وحفظه في الدليل الجذر الخاص بي. يمكنك تغيير الدليل إلى ما تريد ، بما في ذلك / wp-content / أو دليل السمة الخاصة بك.

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

الشيء التالي الذي تريد القيام به هو فتح ملف functions.php - إما من لوحة Theme Editor أو عن طريق القيام بذلك من سطر الأوامر إذا كنت تستضيف موقعك على VPS.

ثم انسخ والصق هذا المقتطف:

add_action('init', 'my_custom_css_stylesheet');
 
function my_custom_css_stylesheet() {
    wp_register_style( 'custom-design', '/cstm-design.css' );
}
wp_enqueue_style( 'custom-design' );

هذا هو.

يمكنك تغيير موقع الملف عن طريق إعادة تسمية الجزء /cstm-design.css .

على سبيل المثال ، إذا كانت ورقة الأنماط المخصصة الخاصة بك بداخل /wp-content/، فستحتاج إلى تغييرها إلى /wp-content/cstm-design.css .

وغني عن القول أن هذا أسلوب سريع جدًا.

إذا قرأت المرجع الرسمي ، فمن الممكن استخدام ()wp_enqueue_style لإضافة أرقام الإصدارات واستدعاء السمات الفرعية وتحديد أنواع الوسائط أيضًا. في طريقتنا ، نسميها كما هي ، وستقوم معظم ملحقات التخزين المؤقت بتدوير الإصدار تلقائيًا.