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

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

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

רספברי פיי

הרצת גו על רספברי פיי

עולם הרספברי פיי והמייקרים ניתן לתפעול בכל שפה – לא רק פייתון או C – כאן אני מסביר על גו

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