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

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

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

סדר הפעולות

  1. נעתיק את הקוד בדף page.php לתוך single.php
  2. מבינים את ההבדלים בין המבנה של דף לפוסט
  3. מוסיפים קישור לדף קטגוריה
  4. מוסיפים את תגיות הפוסט לאחר התוכן
  5. מכינים תשתית לטופס התגובות
  6. קוד טופס התגובות עם הסברים
  7. משלבים את טופס התגובות ונותנים לו עיצוב!
נעתיק את הקוד בדף page.php לתוך single.php +

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

  • פתחו את קובץ single.php ואת הקובץ page.php
  • העתיקו את כל הקוד בקובץ page.php והדביקו בקובץ single.php
  • שמרו את single.php.

הערה:

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

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

מה קיבלנו?

לאחר ששמרנו את הקובץ single.php ולאחר שוידאנו שיש לנו פוסט לדוגמה לבדוק את העיצוב שלו קיבלנו משהו דומה למראה הבא -> דף הזה

ההבדלים בין פוסט לדף רגיל +

לפני שנמשיך לבצע שינויים בקוד החדש של הקובץ single.php עלינו להבין את ההבדלים בין המבנה של עמוד (page.php) למבנה של פוסט (single.php) באתר מבוסס וורדפרס.

קובץ single.php בתבנית וורדפרס

Single.php

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

קובץ single.php בתבנית וורדפרס

Page.php

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

מסקנות?

בדף פוסט יש כמה אלמנטים שאין בעמודים

  • קישור לקטגוריה בה הפוסט נמצא
  • תגים של הפוסט שהם קישור לדף תגים
  • תאריך פרסום (פוסטים הם כרונולוגיים)
  • טופס תגובות בו איתו נוכל לקלוט משוב מגולשים
מוסיפים קישור לדף קטגוריה +

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

  • פתחו את הקובץ single.php
  • מצאו את הקוד הבא
		<div class="postMeta">
			<?php echo __('By', 'sagive').'&nbsp;'.get_the_author_link().', '.__('On', 'sagive').get_the_date().' - '; ?>
		</div>
	

* שורת הקוד הזאת מציגה את המידע אשר נמצא מתחת לכותרת (לחצו כאן לתמונה)

נוסיף לקוד קריאה לקטגוריית הפוסט

לקוד הקיים נוסיף כעת את הפקודה the_catogry.

Categories: <?php the_category(', '); ?>

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

		<div class="postMeta">
			<?php echo __('By', 'sagive').'&nbsp;'.get_the_author_link().', '.__('On', 'sagive').get_the_date().' - '; _e('Categories:').'&nbsp;'.the_category(', '); ?>
		</div>
	

* שורת הקוד הזאת מציגה את המידע אשר נמצא מתחת לכותרת כוללת כעת קישור לקטגוריה (לחצו כאן לתמונה)

מוסיפים את תגיות הפוסט לאחר התוכן +

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

  • פתחו את הקובץ single.php
  • מצאו את הקוד הבא
		<div class="singleContent">
			<?php the_content(); ?>
		</div>	
	

מתחת לקוד זה נוסיף מיכל עבור תגיות

נוסיף מקום / מיכל עבור תגיות ישירות מתחת לקוד הנ"ל – הנה הקוד המתוקן.

		<div class="singleContent">
			<?php the_content(); ?>
		</div>
		
		<div class="singleTags">
			// כאן נשים את הקוד עבור התגיות
		</div>	
	

נוסיף את הפקודה המתאימה

כעת שיש לנו את המקום המתאים להצגת התגיות נשים בתוכו את הפקודה the_tags()

		<div class="singleTags">
			<?php the_tags('', ''); ?>
		</div>	
	

נשקיע רגע בעיצוב!

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

  • פתחו את הקובץ style.css
  • הדביקו את הקוד הבא בסוף העמוד
		/************************************
		**	SINGLE.PHP
		************************************/

		/*** TAGS ***/
		.singleTags {padding: 15px 0; margin: 20px 0 0; border-top: 1px solid #D6D5D1;}
		.singleTags, .singleTags a {font-size: 12px; color: #666;}
		.singleTags a {background: #fff; border-left: 3px solid #C6700A; padding: 3px 10px; text-decoration: none; margin: 0 2px;}
		.singleTags a:hover {background: #f9f9f9;}
	

מכינים תשתית לטופס התגובות +

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

  • הכנסו לתיקיית התבנית שלכם
  • צרו קובץ חדש בשם comments-template.php
  • פתחו אותו והדביקו את הקוד הבא
		<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?>  	
			<?php die('You can not access this page directly!'); ?>  
		<?php endif; ?>

		<?php if(!empty($post->post_password)) : ?>
			<?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?>
				<p><?php _e('This post is password protected. Enter the password to view comments.','sagive'); ?></p>
			<?php endif; ?>
		<?php endif; ?>

		<!--===STR========== COMMENTS LIST =====================-->
		<?php if($comments) : ?>

		<div class="commentFormOpener"><h3><?php _e('Join the Conversation','sagive'); ?></h3></div>

				<div class="CommentsList">
					<ul>
						<?php foreach($comments as $comment) : ?>
						<?php $i++; ?>
								
						<?php if ($comment->comment_approved == '0') : ?>
						<div class="notification"><?php _e('Your comment is awaiting approval','sagive'); ?></div>
						<?php endif; ?>
						<li id="comment-<?php comment_ID(); ?>" <?php if($i&1) { echo 'class="whiteComment"';} else {echo 'class="greyComment"';} ?>>
							
							<div class="commentText">
								<div class="thumbComment">
									<a href="<?php comment_author_url(); ?>"><?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?></a>
								</div>
								<div class="commentInfo">
									<h4 class="authorMeta">
										<span class="author"><?php comment_author(); ?> <?php _e('Wrote','sagive'); ?></span><br />
										<span class="meta"><?php _e('Was published on','sagive'); ?> <?php comment_date(); ?> <?php _e('at','sagive'); ?> <?php comment_time(); ?></span>
									</h4>
									<div class="commentBody">
										<?php comment_text(); ?>
									</div>
								</div>
								<div class="fix"></div>
								
							</div>
							
						</li>
						<?php endforeach; ?>
					</ul>
				</div>	
				<?php else : ?>
		<?php endif; ?>
		<!--===END========== COMMENTS LIST =====================-->
		
		<!--===STR========== COMMENTS FORM =====================-->
		<?php if(comments_open()) : ?>
		<div class="commentFormOpener"><h3><?php _e('Publish Comment','sagive'); ?></h3></div>
			<div id="commentForm">
				<?php if(get_option('comment_registration') && !$user_ID) : ?>
					<p><?php _e('You must be','sagive'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>"><?php _e('logged in','sagive'); ?></a> <?php _e('to post a comment.','sagive'); ?></p><?php else : ?>
					<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
						<?php if($user_ID) : ?>
							<p><?php _e('Logged in as','sagive'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account','sagive'); ?>"><?php _e('Log out &raquo;','sagive'); ?></a></p>
						<?php else : ?>
							<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
							<label for="author"><small><?php _e('Name','sagive'); ?> <?php if($req) _e('required','sagive'); ?></small></label></p>
							<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
							<label for="email"><small><?php _e('Mail','sagive'); ?> <?php if($req) _e('required','sagive'); ?></small></label></p>
							
							<p><input type="text" name="url" id="url" value="<?php echo comment_author_url(); ?>" size="22" tabindex="3" />
							<label for="url"><small><?php _e('Website','sagive'); ?></small></label></p>
							
						<?php endif; ?>
						<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
						<p>
							<input name="submit" type="submit" id="submit" tabindex="5" value="<?php _e('Submit comment','sagive'); ?>" />
							<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
						</p>
						<?php do_action('comment_form', $post->ID); ?>
						<div class="fix"></div>				
					</form>
					
				<?php endif; ?>
			</div>		
			<?php else : ?>
		<?php endif; ?>
		<!--===END========== COMMENTS FORM =====================-->
	

קובץ comments-template להורדה

לחצו כאן לקוד קובץ התגובות עם הערות והסברים +

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

	
		// סקריפט שבודק אם מישהו מנסה להגיש תגובה מרחוק ולא מהדף עצמו
		<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?>  	
			<?php die('You can not access this page directly!'); ?>  
		<?php endif; ?>

		
		// סקריפט שבודק אם התגובות מוגנות עם סיסמה
		<?php if(!empty($post->post_password)) : ?>
			<?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?>
				<p><?php _e('This post is password protected. Enter the password to view comments.','sagive'); ?></p>
			<?php endif; ?>
		<?php endif; ?>

		
		<!--===START========== רשימת התגובות =====================-->
		
		// התניה שבודקת אם יש תגובות
		<?php if($comments) : ?>

		<div class="commentFormOpener"><h3><?php _e('Join the Conversation','sagive'); ?></h3></div>

				// כאן מתחיל הקוד אשר רץ תגובה תגובה ומציג אותן לפי סדר כרונולוגי
				<div class="CommentsList">
					<ul>
						<?php foreach($comments as $comment) : ?>
						<?php $i++; ?>
								
								
						// התניה שבודקת אם התגובה הנוכחית כבר אושרה על ידי מנהל אתר
						<?php if ($comment->comment_approved == '0') : ?>
						<div class="notification"><?php _e('Your comment is awaiting approval','sagive'); ?></div>
						<?php endif; ?>
						<li id="comment-<?php comment_ID(); ?>" <?php if($i&1) { echo 'class="whiteComment"';} else {echo 'class="greyComment"';} ?>>
							
							
							// גוף התגובה עצמה כולל שם הכותב והתמונה בתוך DIV זה
							<div class="commentText">
								<div class="thumbComment">
									<a href="<?php comment_author_url(); ?>"><?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?></a>
								</div>
								<div class="commentInfo">
									<h4 class="authorMeta">
										<span class="author"><?php comment_author(); ?> <?php _e('Wrote','sagive'); ?></span><br />
										<span class="meta"><?php _e('Was published on','sagive'); ?> <?php comment_date(); ?> <?php _e('at','sagive'); ?> <?php comment_time(); ?></span>
									</h4>
									<div class="commentBody">
										<?php comment_text(); ?>
									</div>
								</div>
								<div class="fix"></div>
								
							</div>
							
						</li>
						<?php endforeach; ?>
					</ul>
				</div>	
				<?php else : ?>
		<?php endif; ?>
		<!--===END========== COMMENTS LIST =====================-->
		
		<!--===STR========== COMMENTS FORM =====================-->
		
		// התניה שבודקת אם פוסט זה סגור לפרסום תגובות
		<?php if(comments_open()) : ?>
		<div class="commentFormOpener"><h3><?php _e('Publish Comment','sagive'); ?></h3></div>
			<div id="commentForm">
			
				// התניה שבודקת אם יש דרישה כי גולשים ירשמו / יתחברו לפני פרסום תגובה
				<?php if(get_option('comment_registration') && !$user_ID) : ?>
					<p><?php _e('You must be','sagive'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>"><?php _e('logged in','sagive'); ?></a> <?php _e('to post a comment.','sagive'); ?></p><?php else : ?>
					<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
						<?php if($user_ID) : ?>
							<p><?php _e('Logged in as','sagive'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account','sagive'); ?>"><?php _e('Log out &raquo;','sagive'); ?></a></p>
						<?php else : ?>
							<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
							<label for="author"><small><?php _e('Name','sagive'); ?> <?php if($req) _e('required','sagive'); ?></small></label></p>
							<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
							<label for="email"><small><?php _e('Mail','sagive'); ?> <?php if($req) _e('required','sagive'); ?></small></label></p>
							
							<p><input type="text" name="url" id="url" value="<?php echo comment_author_url(); ?>" size="22" tabindex="3" />
							<label for="url"><small><?php _e('Website','sagive'); ?></small></label></p>
							
						<?php endif; ?>
						<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
						<p>
							<input name="submit" type="submit" id="submit" tabindex="5" value="<?php _e('Submit comment','sagive'); ?>" />
							<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
						</p>
						<?php do_action('comment_form', $post->ID); ?>
						<div class="fix"></div>				
					</form>
					
				<?php endif; ?>
			</div>		
			<?php else : ?>
		<?php endif; ?>
		<!--===END========== COMMENTS FORM =====================-->
	

משלבים את טופס התגובות ונותנים לו עיצוב! +

כעת לאחר שיש לנו קובץ תגובות מוכן עלינו לשלב אותו בקובץ single.php שהוא למעשה הקובץ אשר אחראי על הצגת פוסטים.

  • פתחו את הקובץ single.php
  • מצאו את הקוד הבא
	<div class="singleTags">
		<?php the_tags('', ''); ?>
	</div>	
	
ממש מתחתיו הוסיפו את הקוד הבא
	<div class="singleComments">
		<?php comments_template( '/comments-template.php' ); ?> 
	</div>
	
* פקודה זאת מגדירה את קובץ התגובות שלנו כקובץ comments-template.php.

יש לנו טופס תגובות!

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

מה עם הסטייל? אז נכון, יש לנו טופס להגשת תגובות (תנסו אותו, פרסמו כמה תגובות). אבל לא נשאיר אותו לא מעוצב… בואו נוסיף קצת קוד CSS כדי שיראה יותר טוב ויתאים לאופי האתר.

  • פתחו את הקובץ style.css
  • הוסיפו את הקוד הבא בתחתית הדף
	/*** COMMENTS ***/
	.singleComments {border-top: 1px solid #D6D5D1;}
	.singleComments textarea {width: 99%;}
	.singleComments input#submit {background: #C6700A; color: #fff; padding: 3px 10px; border: 0 none;}

	.CommentsList {margin: 0 0 40px; padding: 0 0 20px; border-bottom: 1px dotted #D6D5D1;}
	.CommentsList ul {padding: 0; margin: 0;}
	.CommentsList ul .notification {background: #f9f9f9; padding: 3px 5px; border: 1px dotted #ccc; font-size: 15px;}
	.CommentsList li {margin-bottom: 20px;}
	.CommentsList li.whiteComment {background: #FAFAF8;}
	.CommentsList li.greyComment {background: #EDEBE4;}
	.CommentsList li .commentText {padding: 0 10px 15px 15px;}
	.CommentsList li .thumbComment {float: left; width: 11%;}
	.CommentsList li .commentInfo {float: left; width: 85%; padding: 0 0 0 3%; border-left: 1px solid #D6D5D1; vertical-align: top;}
	.CommentsList li .authorMeta {margin: 0;}
	.CommentsList li .meta {font-size: 12px; font-weight: normal;}
	.CommentsList li .commentBody {font-size: 14px;}
	

מה קיבלנו? פוסט מעוצב עם טופס תגובות פעיל!

טופס תגובות מעוצב

הערה: תרגום ויישור לעברית יעשו בפרק מאוחר יותר

מה בפרק הבא?

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

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

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