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

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

סדר הפעולות

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

[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;} [/css]

• הכנסו לתיקיית התבנית שלכם
• צרו קובץ חדש בשם comments-template.php
• פתחו אותו והדביקו את הקוד הבא

[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 =====================–> [/php]

קובץ 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 =====================–> [/php]

• פתחו את הקובץ single.php
• מצאו את הקוד הבא

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

[php] <div class="singleComments"> <?php comments_template( '/comments-template.php' ); ?> </div> [/php]

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

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

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

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

[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;} [/css]

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

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

מה בפרק הבא?

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

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