הוספת CSS/JS ספציפית לעמוד בדרופל

כך מוסיפים CSS ו-JS באופן ספציפי לעמוד או לקבוצת עמודים בדרופל 6 ובדרופל 7

Theming בדרופל הוא תמיד תענוג, כל עוד אנחנו זוכרים שלא להכניס Business Intelligence לתוך התמה. באמצעות שימוש נבון ב-template..php ובפונקציות ה-preprocess שלו, אנחנו יכולים לשנות דברים עיצוביים בדרופל בקלות.

אחד מהדברים שקל לעשות עם פונקצית preprocess היא להוסיף קבצי CSS וקבצי JavaScript. זה שימושי במיוחד אם מדובר בחלקים ב-CSS שרלוונטיים לעמוד מסוים/קבוצת עמודים שאנו לא מעוניינים להכניס אותם ל-CSS הכללי. אנו רוצים שיתווספו רק כאשר יש תנאים מסוימים. למשל עם ה-URL של העמוד הוא בכתובת מסוימת או ב-content type מוסים.

דרופל 6

בדרופל 6, אנו נחפש דווקא את preprocess_page, נפתח את template.php ונחפש את פונקציות YOURTHEME_preprocess_page:


/**
 * Override or insert variables into the page templates.
 *
 * @param $vars
 *   An array of variables to pass to the theme template.
 * @param $hook
 *   The name of the template being rendered ("page" in this case.)
 */

function MYTHEME_preprocess_page(&$vars, $hook) {

}

כאשר ה-MYTHEME זה שם התמה שלכם כמובן.
הפונקציה הזו רצה קצת לפני שהדף עצמו מרונדר ומודפס, כל המשתנים כבר אמורים להופיע והיא שימושית במיוחד לכל מני הוספות ותוספות – גם לתוספות CSS ו-JavaScript.

הנה הקוד המלא שמאפשר הוספת CSS ו-JS לכל דף שנרצה. במקרה הזה מדובר בהוספת קוד CSS ו-JavaScript לדפים שה-content type שלהם הוא מסוג Article.


/**
 * Override or insert variables into the page templates.
 *
 * @param $vars
 *   An array of variables to pass to the theme template.
 * @param $hook
 *   The name of the template being rendered ("page" in this case.)
 */

	function launchpoker_preprocess_page(&$vars, $hook) {
		if($vars['node']->type == 'Article') {
		$my_script = path_to_theme().'/js/custom.js';
		drupal_add_js($my_script, 'theme');		
		$vars['scripts'] = drupal_get_js();
	
	$css = path_to_theme().'/css/custom.css';
	$vars['styles'].=drupal_get_css(array('all' => $css));
	}
}

דרופל 7

בדרופל 7 אנו נשתמש ב-preprocess שלא קיים בדרופל 6 ושמו הוא preprocess_html. הקוד הזה רץ לפני שה-HTML נטען ובו אנו יכולים להוסיף CSS ו-JavaScript באופן יותר אלגנטי:


 * Override or insert variables into the template.
 *
 * @param $vars
 *   An array of variables to pass to the theme template.
 */
function bartik_preprocess_html(&$vars) {
	if($vars['page']['content']['system_main']['nodes'][arg(1)]['#node']->type == 'article') {
		$my_css = path_to_theme().'/css/inline_tab.css';
		drupal_add_css($my_css, array('group' => CSS_THEME, 'preprocess' => FALSE));
		$my_script = path_to_theme().'/js/custom.js';
		drupal_add_js($my_script, array('group' => JS_THEME, 'preprocess' => FALSE));		
	}
}

אפשר לראות שהתחביר בדרופל 7 קצת שונה מזה של 6. אחד השינויים החשובים הוא שהמערך של ה-vars יותר מורכב (בין היתר בגלל ה-hook שאנו משתמשים בו) וכן תחביר ה-drupal_add_css ו-drupal_add_js שונה במקצת. השינוי הגדול ביותר הוא שאנו לא נאלצים בדרופל 7 לרנדר מחדש את משתנה ה-style ומשתנה ה-scripts.

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

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

מיקרו בקרים

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

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

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

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

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

רינדור של קליינט סייד עם SSR

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

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