בחלק זה בסדרת המאמרים "בניית תבנית WordPress" נלמד איך לחבר את ה-Footer של האתר ואיך לחלק אזורים שונים בתבנית לתתי-תבניות על מנת לאפשר שימוש חוזר ועל מנת לנהל את הקוד.
חיבור Footer
השלב הראשון שיש לעשות הוא ליצור קובץ חדש בשם footer.php, חלק זה של התבנית יתפקד כחלק התחתון של העמודים השונים שבאתר.
<section id="footer">
<div class="inner">
<h2 class="major"><?php _e( 'Get in touch', 'solid-state' ); ?></h2>
<p>Cras mattis ante fermentum, malesuada neque vitae, eleifend erat. Phasellus non pulvinar erat. Fusce tincidunt, nisl eget mattis egestas, purus ipsum consequat orci, sit amet lobortis lorem lacus in tellus. Sed ac elementum arcu. Quisque placerat auctor laoreet.</p>
<form method="post" action="#">
<div class="field">
<label for="name"><?php _e( 'Name', 'solid-state' ); ?></label>
<input type="text" name="name" id="name" />
</div>
<div class="field">
<label for="email"><?php _e( 'Email', 'solid-state' ); ?></label>
<input type="email" name="email" id="email" />
</div>
<div class="field">
<label for="message"><? _e( 'Message', 'solid-state' ); ?></label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="<?php _e( 'Send Message', 'solid-state' ); ?>" /></li>
</ul>
</form>
<ul class="contact">
<li class="fa-home">
Untitled Inc<br />
1234 Somewhere Road Suite #2894<br />
Nashville, TN 00000-0000
</li>
<li class="fa-phone">(000) 000-0000</li>
<li class="fa-envelope"><a href="#">information@untitled.tld</a></li>
<li class="fa-twitter"><a href="#">twitter.com/untitled-tld</a></li>
<li class="fa-facebook"><a href="#">facebook.com/untitled-tld</a></li>
<li class="fa-instagram"><a href="#">instagram.com/untitled-tld</a></li>
</ul>
<ul class="copyright">
<li>© <?php bloginfo( 'name' ); ?> <?php _e( 'All rights reserved.' , 'solid-state' ); ?></li>
<li><?php _e( 'Design:', 'solid-state' ); ?> <a href="http://html5up.net"><?php _e( 'HTML5 UP', 'solid-state' ); ?></a></li>
</ul>
</div>
</section>
</div>
<?php wp_footer(); ?>
</body>
</html>כמו שניתן לראות, יש טקסטים שנרצה שיהיו ניתן לשליטה דרך פאנל הניהול, וגם טופס שצריך לחבר כך שיהיה ניתן לשלוח דרכו מיילים לבעל האתר, מכיוון שאנחנו עוד בהתחלה, כרגע נשאיר את זה כמו שזה, ובמאמרים הבאם נדבר על איך לחבר את הטופס ע"י שימוש ב-AJAX ואיך לשלוט על טקסטים דרך ה-Customizer.
בנוסף נפתח את הקובץ index.php ונוסיף בסופו את הקוד הבא על מנת להציג את הפוטר בתחתית העמוד.
<?php get_footer(); ?>חילוק לתתי תבניות
לרוב כאשר בונים קבצי תבנית, הקבצים יהיה מלאים בהרבה קוד וזה לפעמים יגרום לבלבול או כאשר נרצה להשתמש בקוד מסויים שוב במקום אחר בתבנית ולא נרצה לשכפל את הקוד על מנת לא להפר את עיקרון ה-DRY, נוכל לחלק את הקוד שלהם לתתי תבניות.
בתור התחלה ניצור תיקייה חדשה בשם templates ובתוכה ניצור שני קבצים חדשים – contact-form.php ו-contact-details.php ונכניס את הקוד הבא בהתאמה לקבצים.
<form method="post" action="#">
<div class="field">
<label for="name"><?php _e( 'Name', 'solid-state' ); ?></label>
<input type="text" name="name" id="name" />
</div>
<div class="field">
<label for="email"><?php _e( 'Email', 'solid-state' ); ?></label>
<input type="email" name="email" id="email" />
</div>
<div class="field">
<label for="message"><? _e( 'Message', 'solid-state' ); ?></label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="<?php _e( 'Send Message', 'solid-state' ); ?>" /></li>
</ul>
</form><ul class="contact">
<li class="fa-home">
Untitled Inc<br />
1234 Somewhere Road Suite #2894<br />
Nashville, TN 00000-0000
</li>
<li class="fa-phone">(000) 000-0000</li>
<li class="fa-envelope"><a href="#">information@untitled.tld</a></li>
<li class="fa-twitter"><a href="#">twitter.com/untitled-tld</a></li>
<li class="fa-facebook"><a href="#">facebook.com/untitled-tld</a></li>
<li class="fa-instagram"><a href="#">instagram.com/untitled-tld</a></li>
</ul>כעת על מנת לקרוא לתתי התבניות הללו, נשתמש בפונקצייה של WordPress אשר מטפלת בתתי תבניות בשם get_template_part. הפונקציה מקבלת 2 פרמטרים, אשר מהווים את הנתיב לתת תבנית הרצויה.
נפתח את הקובץ footer.php ונחליף את הקוד הקיים בקוד הבא:
<section id="footer">
<div class="inner">
<h2 class="major"><?php _e( 'Get in touch', 'solid-state' ); ?></h2>
<p>Cras mattis ante fermentum, malesuada neque vitae, eleifend erat. Phasellus non pulvinar erat. Fusce tincidunt, nisl eget mattis egestas, purus ipsum consequat orci, sit amet lobortis lorem lacus in tellus. Sed ac elementum arcu. Quisque placerat auctor laoreet.</p>
<!-- CONTACT FORM -->
<?php get_template_part( 'templates/contact', 'form' ); ?>
<!-- /CONTACT FORM -->
<!-- CONTACT DETAILS -->
<?php get_template_part( 'templates/contact', 'details' ); ?>
<!-- /CONTACT DETAILS -->
<ul class="copyright">
<li>© <?php bloginfo( 'name' ); ?> <?php _e( 'All rights reserved.' , 'solid-state' ); ?></li>
<li><?php _e( 'Design:', 'solid-state' ); ?> <a href="http://html5up.net"><?php _e( 'HTML5 UP', 'solid-state' ); ?></a></li>
</ul>
</div>
</section>
</div>
<?php wp_footer(); ?>
</body>
</html>סיכום
בחלק זה של המאמר למדנו איך לחבר את ה-Footer של האתר ואיך לחלק את הקוד שלנו לתתי תבניות על מנת שנוכל לנהל את הקוד שלנו ולהשתמש בו שוב מבלי לשכפל אותו ולהקשות על טיפול בקוד.
בחלק הבא של הסדרה נדבר על The Loop ועל קבצי תבנית שונים.