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

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

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

ניווט מהיר בין הפרקים:

מתחילים להכין שלד האתר בקובץ index.php

בפרק הקודם בנינו את הקובץ reset.css והוא יהווה את התשתית לקוד css בו נשתמש בדף זה. אנו נבנה את דף הבית שלנו בקובץ index.php. מערכת וורדפרס תשתמש בקובץ זה כדף הבית בהעדר קובץ בשם home.php. למידע נוסף על קבצים בוורדפרס בקרו בדף סדר הטעינה של קבצי תבנית בוורדפרס.
אנו נבנה תבנית וורדפרס בהתבסס על קובץ PSD אליו קישרתי בפרק הראשון של המדריך ואשר מוצג כאן בצד שמאל. נתחיל בבניית השלד שלנו על ידי בניית קוד מבוסס HTML שכל כולו מכלים (div'ים) בהתאם למבנה המוצג בתמונה משמאל.
מורה וורדפרס
התבנית אשר נבנה בקטן

מבנה / שלד HTML של התבנית שאנו בונים

אתם עשויים לדלג על התמונה הזאת כיוון שאני מוסיף את הקוד הראשוני המלא לדף הבית (לקובץ index.php) מיד לאחר מכן אבל אני ממליץ בחום! שתסתכלו על התמונה הזאת ותנסו להבין את המבנה עליו החלטנו בהתאם לקובץ הPSD.

לחצו על התמונה להגדלה מבנה HTML

לחצו כאן לקוד המלא של index.php בשלב זה +
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="description" content="">
</head>
<body>
	<div class="bodyBox">
		<div class="bodySpacer">&nbsp;</div>
		
		<!--===STR==================== BODY CENTER ==========================-->
		<div class="bodyCenter">
		
			<!--===STR===== HEADER ===========-->
			<div class="header">
				
			</div>
			<!--===END===== HEADER ===========-->			
			
			<!--===STR===== CONTENT ===========-->
			<div class="contentBox">
				<div class="sidebar">
				
				</div>
				<div class="homeLoop">
					<div class="newestPost"></div>
					<div class="recentPost"></div>
				</div>
			</div>
			<!--===END===== CONTENT ===========-->
		
			<!--===STR===== FOOTER ===========-->
			<div class="footer">
				<div class="footerOne"></div>
				<div class="footerTwo"></div>
				<div class="footerThree"></div>
			</div>
			<!--===END===== FOOTER ===========-->
		
			<!--===STR===== CREDIT ===========-->
			<div class="credit">
				
			</div>
			<!--===END===== CREDIT ===========-->
			
		</div>
		<!--===END==================== BODY CENTER ==========================-->
		
		<div class="bodySpacer">&nbsp;</div>
		
		<div class="fix"></div>
	</div>
</body>
</html>

התשתית מוכנה – מה בפרק הבא?

בפרק הבא ניקח את קוד הבסיס של הקובץ index.php ונחלק אותו אל שלושה חלקים:

  • header.php
  • index.php
  • footer.php

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

בברכה, שגיב SEO
  • אהבתם? שתפו!