הוספת 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.

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

DALL·E 2024-09-06 12.34.24 - A visually engaging post about Python and cryptographic problems. The image should feature a dark-themed background with a glowing, futuristic Python
פתרונות ומאמרים על פיתוח אינטרנט

בעיות במימוש של פונקציות קריפטוגרפיות בפייתון

היום (16 לספטמבר) ממש, אני מעביר הרצאה ב-PyconIL 2024 על בעיות קריפטוגרפיות באפליקציות פייתון. לצערי אי אפשר להכניס את כל הבעיות הקריפטוגרפיות להרצאה אחת או

מיקרו בקרים

חיבור מצלמה למיקרובקר

חיבור מצלמה למיקרו בקר ויצירה של מצלמת אבטחה מרחוק בעלות של 20 שקל.

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