בונים ביחד תבנית וורדפרס – פרק 9

ברוכים הבאים לחלק התשיעי במדריך "בונים ביחד תבנית וורדפרס". בחלק זה נטמיע בצורה נכונה קבצי ג'אווה סקריפט וקבצי עיצוב מסוג CSS.

הטמעה של קבצי javascript וקבצי CSS בוורדפרס

בחלק זה של המדריך נטמיע מספר קבצים בצורה חכמה בתבנית הוורדפרס שאנו בונים ביחד. בפרק 4 יצרנו קבצים ותיקיות וביניהם יצרנו 4 קבצי CSS אותם נטמיע בצורה חכמה בתבנית שלנו.

בנוסף נטען אל וורדפרס קובץ javascript נפוץ בשימוש אשר נקרא jQuery אותו תצטרכו להוריד בעצמכם ולהכניס אל התיקייה js בתבנית שלכם. בנוסף נטען קובץ javascript אשר נקרא tooltip והוא יעזור לנו "לרמוז" על הפעולה של כפתורים מסוימים במעבר עכבר.

קבצים להורדה:

• jQuery 1.7.1
• tooltip.js

הטמעה של קבצי CSS

איזה קבצים נטמיע?

בונים את הפונקציה

/*****************************************
**	ENQUEUE MY STYLES & SCRIPTS
*****************************************/

/*****************************************
**	ENQUEUE MY STYLES & SCRIPTS
*****************************************/
function enqueue_my_styles() {

}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );

/*****************************************
**	ENQUEUE MY STYLES & SCRIPTS
*****************************************/
function enqueue_my_styles() {
	$resetStyle 		= get_template_directory_uri() . '/css/reset.css';
	$mainStyle 			= get_template_directory_uri() . '/style.css';
	$rtlStyle 			= get_template_directory_uri() . '/rtl.css';
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );

/*****************************************
**	ENQUEUE MY STYLES & SCRIPTS
*****************************************/
function enqueue_my_styles() {
	$resetStyle 		= get_template_directory_uri() . '/css/reset.css';
	$mainStyle 			= get_template_directory_uri() . '/style.css';
	$rtlStyle 			= get_template_directory_uri() . '/rtl.css';
	
	wp_enqueue_style( 'resetStyle', $resetStyle, array(), 'v1', 'all' );
	wp_enqueue_style( 'mainStyle', $mainStyle, array(), 'v1', 'all' );
	if ( is_rtl() ) {
	  wp_enqueue_style(  'style-rtl', $rtlStyle, array(), 'v1', 'all' );
	}		
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/only-ie.css" />
<![endif]-->

סיימנו את ההטמעה של קבצי עיצוב

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

הטמעה של קבצי Javascript

function register_my_jscripts() {

}
add_action('wp_enqueue_scripts', 'register_my_jscripts');

function register_my_jscripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', get_bloginfo('template_url').'/js/jquery-1.7.1.min.js');
    wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'register_my_jscripts');

function register_my_jscripts() {
    wp_deregister_script( 'jquery' );	// מוודאים שאין גרסת jquery אחרת!
    wp_register_script( 'jquery', get_bloginfo('template_url').'/js/jquery-1.7.1.min.js');
    wp_enqueue_script( 'jquery' );
	
    wp_enqueue_script( 'tooltip', get_bloginfo('template_url').'/js/tooltip.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'register_my_jscripts');

סיכום בפסקה אחת ו-קדימה אל הפרק הבא במדריך!

בפרק זה… למדנו איך להטמיע בצורה נכונה! את קבצי הCSS שיצרנו בפרק 4. בנוסף, הורדתם קבצי javascript הכרחיים לתפקוד השוטף של וורדפרס והטמעתם גם אותה בתבנית שלכם בצורה חכמה! אני מקווה שקראתם וביצעתם לפני סדר הפעולות כיוון שאנחנו כבר ניגשים לפרק הבא במדריך. אני ממליץ לעדכן את גרסת הjQuery מעת לעת כיוון שמדריך זה ילך ויתיישן מהר מאוד ביחס לגרסאות הjQuery אשר יוצאות.

בפרק הבא – מתחילים לבנות את התבנית בצד העיצובי!

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

פרגנו עם +1 בגוגל פלוס שלנו ובהצלחה, שגיב SEO