טיפול בקובץ CSS בדרופל

הוספת והסרה של קבצי CSS בדרופל 6 ובדרופל 7 באמצעות template.php

גם התמה (theme) של דרופל וגם מודולים שונים נוהגים להוסיף קבצי CSS שונים לתוצאה המתקבלת בדף. ולפעמים אנחנו לא רוצים את קבצי ה-CSS האלו, בין אם מדובר בקובץ CSS שאנחנו הוספנו בדף ה-info של התבנית ובין אם מדובר בקובץ CSS שמודול מסוים מוסיף. לעיתים אנו רוצים להוסיף קובץ CSS ספציפי המיועד למקרים מיוחדים כמו קבוצת דפים מסוימת או משתמש מסוג מסוים שעבורו יהיה קובץ CSS משלו. איך עושים את זה? קל מאד לעשות את זה ב-template.php.

דרופל 6

בדרופל 6 זה טיפה מסובך, מה שאנו עושים זה לתפוס את ה-CSS באמצעות preprocess – למחוק או להוסיף CSS למערך ה-CSSים ולרנדר אותם מחדש. איך עושים את זה? פותחים את template.php
ומוסיפים את פונקצית preprocess באופן הבא:


/**
 * Override or insert variables into all templates.
 *
 * @param $vars
 *   An array of variables to pass to the theme template.
 * @param $hook
 *   The name of the template being rendered (name of the .tpl.php file.)
 */

function MYTHEME_preprocess(&$vars, $hook) {
	$css = drupal_add_css();
	unset($css['all']['theme']['YOUR_OLD_CSS.css']);
	$css['all']['theme']['YOUR_NEW_CSS.css'] = 1;
	
	$vars['styles'] = drupal_get_css($css);
}

כאשר יש להחליף את MYTHEME בשם של התמה שלכם. בדוגמא הזו אני משיג את מערך ה-CSS באמצעות פונקצית drupal_add_css – עושה במערך הזה שינויים כרצוני (מוסיף OLD_CSS ומכניס NEW_CSS) ואז מרנדר את הכל מחדש ומכניס לתוך משנה styles. זה הכל.

שימו לב שקובץ NEW_CSS חייב להיות במקום שציינתי. במידה והוא לא יהיה, הוא לא יופיע בתמה.

דרופל 7

בדרופל 7 זה אפילו יותר פשוט – יש hook מיוחד לזה שניתן להשתמש בו – בלי חוכמות ובאופן פשוט לחלוטין:


/**
 * Override or insert CSS files into all templates.
 *
 * @param $css
 *   An array of css files to pass to the theme template.
 */

function hook_css_alter(&$css) {
	unset($css['all']['theme']['YOUR_OLD_CSS.css']);
	$css['all']['theme']['YOUR_NEW_CSS.css'] = 1;
}

השימוש פה הוא פשוט מאד, יש מערך של CSS ועל מנת להוסיף או להוריד קבצים פשוט צריך לשנות אותו – זה הכל!

כמובן שאפשר עכשיו גם להכניס תנאים לתוך template.php – למשל פונקציה שבודקת איזה role יש למשתמש או פונקציה שבודקת את הארגומנטים של העמוד או את הקונפיגורציה של התמה. השמים הם הגבול במקרה הזה.

פוסטים נוספים שכדאי לקרוא

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

הסבר על טכניקה פשוטה וידועה מאד שאנו מפעילים על מידע לפני שאנחנו מציגים אותו ב-HTML באפליקציה או באתר.

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

יצירת מערכת מולטימדיה שלמה בגודל של בול דואר עם מיקרובקר ובעלות של דולרים בודדים. וגם על הדרך נלמד על ת׳רדים

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

פרק בפודקאסטעל נגישות בעברית שצולל לכלים האוטומטיים ולפן המאד מאד טכני של הנגישות.

פיתוח ב-JavaScript

Axios interceptors

תכנון נכון של קריאות AJAX באפליקציה ריאקטית וניהול השגיאות או ההצלחות עם פיצ׳ר נחמד של axios

גלילה לראש העמוד