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

נתחיל עם התפריט הצדדי

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

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

	/************************************
	**	REGISTER SIDEBARS
	************************************/
	register_sidebar(array(
		'name' => __('Home Sidebar', 'sagive'),
		'id' => 'home-sidebar',
		'description' => __('Main Home Sidebar', 'sagive'),
		'before_title' => '<h3>',
		'after_title' => '</h3>'
	));

	register_sidebar(array(
		'name' => __('Page Sidebar', 'sagive'),
		'id' => 'page-sidebar',
		'description' => __('Page Sidebar', 'sagive'),
		'before_title' => '<h3>',
		'after_title' => '</h3>'
	));

	register_sidebar(array(
		'name' => __('Category Sidebar', 'sagive'),
		'id' => 'category-sidebar',
		'description' => __('Category Sidebar', 'sagive'),
		'before_title' => '<h3>',
		'after_title' => '</h3>'
	));

	register_sidebar(array(
		'name' => __('Footer Sidebar', 'sagive'),
		'id' => 'footer-sidebar',
		'description' => __('Footer Sidebar', 'sagive'),
		'before_title' => '<h3>',
		'after_title' => '</h3>'
	));
	

	<div class="sidebar">

	</div>
	

	<div class="sidebar">
	<?php 
	if ( is_active_sidebar( 'home-sidebar' )) {
		echo '<ul id="home-sidebar" class="home-sidebar">';
		dynamic_sidebar( 'home-sidebar' );
		echo '</ul>';	
	} else {
		_e('Drag widgets to home sidebar to display data here.', 'sagive');
	} 
	?>
	</div>
	

	if ( is_active_sidebar( 'home-sidebar' )) {
	

	echo '<ul id="home-sidebar" class="home-sidebar">';
	dynamic_sidebar( 'home-sidebar' );
	echo '</ul>';
	

	} else {
	 _e('Drag widgets to home sidebar to display data here.', 'sagive');
	} 
	

	.contentBox .sidebar {
		overflow: hidden;
		width: 28%;
	}
	

	.contentBox .sidebar {
		overflow: hidden;
		width: 28%;
		float: right;
	}
	

	/************************************
	**	HOME SIDEBAR
	************************************/
	.home-sidebar {list-style: none; margin-top: 40px;}
	.home-sidebar h3 {font-size: 18px; color: #191919; margin-bottom: 10px; text-shadow: 1px 1px 1px #ccc; filter: dropshadow(color=#ccc, offx=1, offy=1);}
	.home-sidebar img {max-width: 100%;}
	.home-sidebar > li {margin-bottom: 30px; font-size: 14px;}
	.home-sidebar ul {padding: 0;}
	.home-sidebar ul > li {border-bottom: 1px solid #D2D1CE; line-height: 28px; list-style: none outside none; padding: 6px 0;}
	.home-sidebar ul > li > a {color: #C6700A; text-decoration: none;}
	

שמרו ורעננו: לאחר השינוי דף הבית אמור להראות ← כך.

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

צעד ראשון: תיקון המיקום של הDIV של ההFooter

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

• פתחו את קובץ index.php
• עקבו אחר הפעולות בסרטון המצורף

צעד שני: נרווח ונמקם את הFooter

• פתחו את קובץ footer.php

החליפו את הקוד הנוכחי

	<div class="footer">
		<div class="footerOne"></div>
		<div class="footerTwo"></div>
		<div class="footerThree"></div>
	</div>
	

בקוד הבא

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

הסבר קצר: אנו משתמשים בDiv'ים להם כבר יצרנו הגדרות כדי לרווח ולמרכז את הFooter.

נגדיר את התפריט של הפוטר במיקום הרצוי

• נתחיל להטמיע את הקוד במיכל (div) המרכזי

נוסיף לקוד שיצרנו הגדרה שתחזיר את התפריט הרצוי

	<div class="footer">
		<div class="bodySpacer">&nbsp;</div>
		<div class="bodyCenter">
		<?php 
		if ( is_active_sidebar( 'footer-sidebar' )) {
			echo '<ul id="footer-sidebar" class="footer-sidebar">';
			dynamic_sidebar( 'footer-sidebar' );
			echo '</ul>';	
		} else {
			_e('Drag widgets to footer sidebar to display data here.', 'sagive');
		}
		?>
		</div>
		<div class="bodySpacer">&nbsp;</div>
		

	</div>
	

צעד שלישי: ניצור את הרקע המתאים לFooter

• פתחו את קובץ style.css
• מתחת לכל ההגדרות נוסיף הערת קוד
• נוסיף הגדרות עיצוביות נוספות

	/************************************
	**	FOOTER
	************************************/
	.footer {
		background: url("images/top-grey-bar.jpg") repeat scroll left top transparent;
		min-height: 100px;
	}
	

שמרו ורעננו: לאחר השינוי דף הבית אמור להראות ← כך.

• פתחו את קובץ style.css
• מצאו את הקוד שהכנו לפני רגע ונראה כך

	/************************************
	**	FOOTER
	************************************/
	.footer {
		background: url("images/top-grey-bar.jpg") repeat scroll left top transparent;
		min-height: 100px;
	}
	

החליפו אותו בקוד הבא

	/************************************
	**	FOOTER
	************************************/
	.footer {background: url("images/top-grey-bar.jpg") repeat scroll left top transparent; padding: 20px 0 50px;}
	.footer .footer-sidebar {list-style: none outside none; padding: 0 1%;}
	.footer .footer-sidebar h3 {color: #fff;}
	.footer .footer-sidebar > li {color: #F3F1ED; float: left; font-size: 14px; margin-right: 8%; width: 28%;}
	.footer .footer-sidebar > li + li + li {margin-right: 0;}
	.footer .footer-sidebar > li a {color: #C6700A; text-decoration: none;}
	.footer .footer-sidebar > li > ul {list-style: none outside none; padding: 0;}
	.footer .footer-sidebar > li > ul > li {line-height: 22px;}
	

שמרו ורעננו: לאחר השינוי דף הבית אמור להראות ← כך.

• תוסף WordPress Firewall 2
• תוסף Limit Login Attempts
• Wp Security Scan

• Contact Form 7 תקציר: תוסף חכם וגמיש שמאפשר ליצור ולהטמיע טפסי צור קשר בקלות וללא הגבלה.
• Google XML Sitemaps תקציר: תוסף מעולה שמאפשר ישירה אוטומטית של מפת אתר במבנה XML עבור מנועי חיפוש.
• Google XML Sitemaps תקציר: תוסף מעולה שמאפשר ישירה אוטומטית של מפת אתר במבנה XML עבור מנועי חיפוש.
• Smart YouTube PRO תקציר: תוסף שהופך את ההטמעה של סרטונים מיו-טיוב לתהליך קל ומהיר במיוחד.

מה בפרק הבא?

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

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