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

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

לדוגמה:

כרגע לתבנית שלנו אין שום הגדרה אשר מצורפת אליה

• פתחו את הקובץ style.css
• הדביקו בו את הקוד הבא

	/*
	Theme Name: My First Theme
	Theme URI: https://sagive.co.il/professional-library/wordpress-web-development/building-wordpress-theme-part-1/
	Description: My first wordpress theme created while learning with sagive SEO
	Author: Sagive SEO
	Author URI: https://sagive.co.il
	License: GNU General Public License version 3.0
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Tags: rtl theme, hebrew theme, blog theme
	Version: 1.0
	*/
	

מה המשמעות של כל שורה?

• פתחו את הקובץ style.css
• הדביקו בו את הקוד הבא

	/*
	Theme Name: My First Theme
	Theme URI: https://sagive.co.il/professional-library/wordpress-web-development/building-wordpress-theme-part-1/
	Description: My first wordpress theme created while learning with sagive SEO
	Author: Sagive SEO
	Author URI: https://sagive.co.il
	License: GNU General Public License version 3.0
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Tags: rtl theme, hebrew theme, blog theme
	Version: 1.0
	*/

	body{background: #F3F2EE;}
	

• נפתח את style.css
• ישר מתחת להגדרה עבור body נוסיף את ההגדרות הבאות
• הורידו את התמונה עבור הפס האפור ושמרו אותה בתוך התיקייה images.

	.bodyBox {background: url("images/top-grey-bar.jpg") repeat-x scroll left top transparent;}
	

1. הגדרת שוליים ומרכוז התבנית

• נפתח את style.css
• נוסיף את ההגדרות ישר מתחת להגדרה עבור .bodyBox

	.bodySpacer {float: left; width: 10%;}
	.bodyCenter {float: left; width: 80%;}
	

שאלות נפוצות

למה אנו מיישרים לשמאל?

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

הריווח לא עובד לי כמו שצריך!

• אם בניית השוליים אינה עובדת חסר לכם בוודאי   בתוך ה DIV bodySpacer

כלומר במקום:

	<div class="bodySpacer"></div>
	

שנו ל:

	<div class="bodySpacer">&nbsp;</div>
	

• פתחו את הקובץ index.php
• מצאו את המיכל של הheader כלומר את:

	<!--===STR===== HEADER ===========-->
	<div class="header">
		
	</div>
	<!--===END===== HEADER ===========-->	
	

נכין את השטח!

כעת נוסיף שני מיכלים (div'ים). אחד עבור הלוגו והשני עבור התפריט. אנו מראש נוסיף להם קלאסים (class) כדי שנוכל להתייחס אליהם בעזרת css בחלק הבא.

	<!--===STR===== HEADER ===========-->
	<div class="header">
		<div class="logo">
		
		</div>
		<div class="div topMenu">
		
		</div>
	</div>
	<!--===END===== HEADER ===========-->	
	

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

והפתרון?

• להתאים את רוחב התמונה לשם האתר
• להתאים את שם האתר לרוחב התמונה
• להשתמש בתמונה אחרת ללוגו?!

1. ראשית נציג את שם האתר

• בקובץ index.php באותו DIV עליו עבדנו במקטע הקודם
• נוסיף פקודה שמאחזרת את שם האתר

	<!--===STR===== HEADER ===========-->
	<div class="header">
		<div class="logo">
			<!--=== פקודה זאת תחזיר את שם וכתובת האתר ===-->
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
		</div>
		<div class="div topMenu">
		
		</div>
	</div>
	<!--===END===== HEADER ===========-->
	

2. ניקח את הלוגו מקובץ הPSD

בחלק זה אינני יכול לעזור לכם. כל אחד משתמש בעורך גרפי אחר (אני אוהב את fireworks) אך אתם עשויים לעבוד עם Photoshop או עורך אחר.

אף אל פי כן אתם יכולים להוריד את קובץ הlogo.png כפי שאני שמרתי אותו.

• נפתח את הקובץ PSD
• נגזור רק את הרקע ללוגו שלנו
• נשמור אותו בתיקיית images עם השם logo.png
• להורדה: logo.png

3. נגדיר את התמונה כרקע לשם האתר

• נפתח את style.css
• נוסיף הגדרת CSS של תמונת רקע לDIV עם הקלאס LOGO
• נגדיר את הרוחב והגובה עבור הDIV עם הקלאס LOGO

	.header .logo {
		background: url("images/logo.png") no-repeat scroll center top transparent;
		float: left;
		height: 87px;
		margin-top: 20px;
		width: 252px;
	}
	

4. נמרכז את שם האתר ביחס לרקע

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

	.header .logo h1 {
		padding-top: 2px;
		text-align: center;
	}

	.header .logo h1 a {
		color: #444444;
		padding: 10px 32px;
		text-decoration: none;
	}
	

5. בדיקת מצב

רעננו את דף הבית של התבנית שאנו בונים ביחד ואם הכל כשורה אתם אמורים לראות תמונה דומה. אם נתקלתם בבעיה אתם מוזמנים לפרסם אותה כתגובה ונשמח לעזור.

נגדיר את התפריט לשימוש

• פתחו את הקובץ functions.php והוסיפו את הקוד הבא

	add_action( 'init', 'register_my_menus' );
	function register_my_menus() {
		register_nav_menus(array('top-menu' => __( 'Top Menu' )));
	}
	

נטמיע את התפריט במיקום הרצוי

• פתחו את הקובץ index.php מצאו את הDIV עם הקלאס topMenu
• הוסיפו בתוכו את הפקודה שקוראת לתפריט במיקום זה
• לאחר השינוי הDiv יראה כך…

	<div class="topMenu">
		<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' => 'top_menu', 'menu_id' => 'top_menu' ) ); ?>
	</div>
	

מידע נוסף: הפקודה wp_nav_menu מגדירה לוורדפרס לטעון תפריט ספציפי מתוך התפריטים המותאמים של וורדפרס. בנוסף הגדרנו לוורדפרס כי הקלאס והID של תפריט זה יהיה topMenu. בצורה כזאת נוכל להתייחס לתפריט מאוחר יותר בעזרת CSS ובעזרת סקריפט הג'אווה סקריפט בו נעשה שימוש כדי ליצור תפריט נופל / נפתח אשר מציג תת פריטים.

» למידע נוסף wp_nav_menu בקרו בקודקס של וורדפרס: wp_nav_menu

רצף הפעולות בקצרה

• יצרתי מספר עמודים
• ניגשתי אל עיצוב -> תפריטים
• יצרתי תפריט בשם תפריט עליון
• שייכתי אותו למיקום שיצרנו בחלק הקודם של המדריך
• הוספתי אליו עמודים וגם תת עמוד לניסיון
• שמרתי ורצתי הלאה! (ראו את הסרטון להדגמה)

צעד ראשון

• נפתח את הקובץ index.php ונשנה את הdiv של הheader
• כל מה שנעשה הוא למעשה להוסיף לו פקודת clear:both; בצורה כזאת

לפני השינוי

	<!--===STR===== HEADER ===========-->
	<div class="header">
		<div class="logo">
			<!--=== פקודה זאת תחזיר את שם האתר ===-->
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
		</div>
		<div class="topMenu">
			<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' => 'top_menu', 'menu_id' => 'top_menu' ) ); ?>
		</div>
	</div>
	<!--===END===== HEADER ===========-->
	

אחרי השינוי

	<!--===STR===== HEADER ===========-->
	<div class="header">
		<div class="logo">
			<!--=== פקודה זאת תחזיר את שם האתר ===-->
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
		</div>
		<div class="topMenu">
			<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' => 'top_menu', 'menu_id' => 'top_menu' ) ); ?>
		</div>
		
<!-- הוספנו את זה -->
	</div>
	<!--===END===== HEADER ===========-->
	

צעד שני

• נפתח את הקובץ style.css
• נוסיף בתוכו הגדרות CSS עבור התפריט העליון
• זהו הקוד המלא עבור התפריט – להעתיק ולהדביק!

צעד שני – קוד זה הוא קוד העיצוב המלא (ה-CSS) עבור התפריט העליון!

	/************************************
	**	TOP MENU
	************************************/
	#top_menu {float: right; list-style: none outside none; margin: 45px 0 0; padding: 0;}   
		 
	ul#top_menu 					{ position: relative; }
	ul#top_menu li				{ float: right; zoom: 1; text-align: right; padding: 0 0 0 6px;}
	ul#top_menu a:hover			{ color: #fff; }
	ul#top_menu a:active   		{ color: #ffa500; }
	ul#top_menu li a                    	{ display: block; padding: 4px 8px; color: #fff; text-decoration: none; font-size: 17px;}
	ul#top_menu li:last-child a	{ border-right: none; } /* Doesn't work in IE */
	ul#top_menu li.hover,
	ul#top_menu li:hover       		{ background: #444; color: #fff; position: relative; }
	ul#top_menu li.hover a    		{ color: #fff; }


	/* LEVEL TWO */
	ul#top_menu ul 				{ list-style: none outside none; position: absolute; right: 0; top: 100%; visibility: hidden; width: 185px;}
	ul#top_menu ul li 				{ font-weight: normal; background: url("images/top-grey-bar.jpg") repeat-x scroll left top transparent; color: #000; float: none; padding: 5px 3px; }
		
	ul#top_menu ul li a				{ border-right: none; width: 100%; display: inline; font-size: 14px; } 	
	*ul#top_menu ul li a			{ border-right: none; width: 100%; display: inline-block; font-size: 14px; } /* IE 6 & 7 Needs Inline Block */


	/* LEVEL THREE */
	ul#top_menu ul ul 				{ left: 100%; top: 0; }
	ul#top_menu li:hover > ul 		{ visibility: visible; }
	

צעד שלישי

• היכנסו לתיקייה js וצרו קובץ בשם jquery.dropdown.js
• כעת פתחו אותו והדביקו בו את הקוד הבא

	(function($) {
		$("ul.top_menu li").hover(function(){
		
			$(this).addClass("hover");
			$('ul:first',this).css('visibility', 'visible');
		
		}, function(){
		
			$(this).removeClass("hover");
			$('ul:first',this).css('visibility', 'hidden');
		
		});
		
		$("ul.top_menu li ul li:has(ul)").find("a:first").append(" » ");

	})(jQuery);
	

צעד רביעי

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

• פתחו את הקובץ functions.php
• מצאו את הפונקציה 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' );
		
		wp_enqueue_script( 'tooltip', get_bloginfo('template_url').'/js/tooltip.js', array('jquery'));
	}
	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' );
		
		wp_enqueue_script( 'tooltip', get_bloginfo('template_url').'/js/tooltip.js', array('jquery'));
		wp_enqueue_script( 'dropdown', get_bloginfo('template_url').'/js/jquery.dropdown.js', array('jquery'));

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

למי שלא מוצא את ההבדלים, הוספנו את השורה:

	wp_enqueue_script( 'dropdown', get_bloginfo('template_url').'/js/jquery.dropdown.js', array('jquery'));