הוספת 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 מבוא למתחילים

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

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

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

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

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