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

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

ניווט מהיר בין הפרקים:
  • אהבתם? שתפו!

מפעילים את התבנית

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

  • התחברו לממשק הניהול של וורדפרס
  • בתפריט הימני עברו עם העכבר מעל כפתור עיצוב
  • בתפריט הנפתח בחרו ב: ערכות עיצוב
  • לחצו על הפעלה לצד התבנית My First Theme
  • פתחו את האתר עצמו בלשונית חדשה ורעננו

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

צעדים גרפיים ראשונים

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

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

 

מכיוון ש… פרק זה במדריך יהיה ארוך ומקיף חילקתי את הדף לחלקים ולכן פשוט לחצו על הנושא הרצוי

חונכים את style.css +

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

לדוגמה: מידע תבנית חדשה

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

  • פתחו את הקובץ style.css
  • הדביקו בו את הקוד הבא
	/*
	Theme Name: My First Theme
	Theme URI: http://www.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: http://www.sagive.co.il
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Tags: rtl theme, hebrew theme, blog theme
	Version: 1.0
	*/
	

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

ערך הסבר
Theme Name: שם התבנית שאנו בונים… בחרו איזה שם שתרצו
Theme URI: כתובת הדף בו ניתן למצוא את התבנית להורדה / לרכישה
Description: תיאור חופשי של התבנית באורך של פסקה לרוב
Author: השם של בונה התבנית (שנו את זה לשם שלכם!!)
Author URI: כתובת אתר של בונה התבנית
License: רישיון השימוש בתבנית – במקרה זה חופשי!
License URI: קישור למידע והסברים על רישיון התבנית
Tags: תגיות מופרדות בעזרת פסיקים אשר מתארות את התבנית
Version: גרסת תבנית נוכחית במקרה זה 1.0
קובעים את צבע הרקע לתבנית +
לפני שנתחיל ונחלק את ראש המסמך שלנו ללוגו ותפריט ראשי נקבע ביחד את צבע הרקע לתבנית כולה ונשתמש בצבע אשר מוגדר בקובץ PSD. אנו משתמשים בהגדרת CSS פשוטה כדי לקבוע את צבע הרקע ושמים אותה בראש הקובץ style.css.
  • פתחו את הקובץ style.css
  • הדביקו בו את הקוד הבא
	/*
	Theme Name: My First Theme
	Theme URI: http://www.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: http://www.sagive.co.il
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Tags: rtl theme, hebrew theme, blog theme
	Version: 1.0
	*/

	body{background: #F3F2EE;}
	
נטען את הרקע האפור בראש המסמך +
אם השקעתם במבט מעמיק בPSD ממנו אנו בונים את תבנית הוורדפרס שלנו וודאי שמתם לב כי קיים רקע אפור כהה בראש המסמך. את הטעינה וההגדרה של רקע זה נעשה בקלות בעזרת CSS.
  • נפתח את 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%;}
	

 

צילום מסך 1

שאלות נפוצות

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

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

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

  • אם בניית השוליים אינה עובדת חסר לכם בוודאי   בתוך ה 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 ===========-->	
	
נגדיר את הלוגו +
כאן המקום להסביר כי לתבנית הPSD שבחרתי יש חיסרון (שהייתי צריך לחשוב עליו אבל.. זה מה יש).

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

בעיה בלוגו

והפתרון?

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

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. בדיקת מצב

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

צילום מסך 2

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

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

  • פתחו את הקובץ 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

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

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

  • יצרתי מספר עמודים
  • ניגשתי אל עיצוב -> תפריטים
  • יצרתי תפריט בשם תפריט עליון
  • שייכתי אותו למיקום שיצרנו בחלק הקודם של המדריך
  • הוספתי אליו עמודים וגם תת עמוד לניסיון
  • שמרתי ורצתי הלאה! (ראו את הסרטון להדגמה)
זכרו לבחור באיכות HD!
הגדרות CSS ראשוניות לתפריט העליון +
אם תרעננו את דף הבית של התבנית שלנו כעת תראו תמונה דומה לתמונה אשר מוצגת כאן. כעת עלינו להכין הגדרות CSS ראשוניות לתפריט העליון כך שיעמוד לצד הלוגו וגם שהקישורים בו יראו בדומה לקובץ PSD שלנו.

צעד ראשון

  • נפתח את הקובץ 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(" &raquo; ");

	})(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'));
	

בזה תם טקס ראש המסמך!

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

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

צילום מסך 3

מה בפרק הבא?

בפרק הבא של המדריך נבנה ביחד את מרכז הדף (דף הבית שלנו) כולל הLOOP של וורדפרס ופוסטים אחרונים החל מרמת הקוד ועד לעיצוב שלם ופרטני של מרכז הדף שלנו כולל כל האלמנטים אשר מוצגים בקובץ הPSD.

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

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

אם אהבתם נודה לכם אם תפרגנו עם לייק, בברכה, שגיב SEO

  • אהבתם? שתפו!