אז ממשיכים לצעד גורלי במדריך וורדפרס זה ונבנה את המבנה הבסיסי של עמוד אינדקס.
לאחר שהקמנו תבנית משלנו , נקבל וורדפרס נקי. עכשיו נתחיל לאסוף עליו קצבים בסיסיים עד לקבלת מבנה אתר . נתחיל עם הדברים ההבסיסיים שהם כמובן : header & footer .
שלב ראשון נייצר את קבצי ה php
ב Php נוכל לייצר מעניין קומפוננטות ולבנות מהם מעיין תבנית של html עם פונקציונליות של php, שזה למעשה כל הקסם. הבסיס הוא להתחיל מלבנות את ההאדר ולייבוא אותו ל index.php שככל הנראה בהמשך ישתנה (לא בטוח בזה עדיין, אבל לפעמים טוב להפריד את index.php מעמוד ייעודי (נזרום ונראה מה מסתדר לי)). אפשר לבנות עמוד ייעודי למשל
page-main.php . מי שצריך תזכורת יש בפוסט של ארכיטקטורה והיררכית תוכן בוורדפרס.
נתחיל במשהו ממש בסיסי לעמוד header.php :
<!DOCTYPE html>
<html lang="he">
<head>
<?php wp_head(); ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title><?php bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<header>
<div class="container-width">
<div class="logo-container">
<?php echo the_custom_logo(); ?>
</div>
<nav></nav>
</div>
</header>
<main class="container-width">מה יש פה:
- html – אפשר לראות שיש פה הרבה מבנה התחלתי של מסמך html , אך התגיות לא נסגרות. למעשה כל התגיות של ההדאר יהיו פה, התגיות הסוגרות של html body main יהיו בפוטר . לאחר מכן נייבא את הקבצים לתוך index.php וכך יווצר לנו עמוד שלם עם כל התגויות והסוגרים שלהם :).
- wp_head – יאפשר לנו בהמשך להזין ערכים לתוך תגית head עם קוד של php.
- the_custom_logo אז כפי שכבר חפרתי לכם קבצי php מאפשרים לנו לבנות html ולהוסיף הרבה שמחה עם php ווורדפרס. אז במקרה הזה אנחנו משתמשים בפונקציה מובנית שמביאה לנו אפשרות לייבא את הלוגו של האתר ולנהל אותו דרך הדאשבורד.
נמשיך למשהו בסיסי בפוטר footer.php :
<footer> </footer> </main> <?php wp_footer();?> </body> </html>
סופר בסיסי ובתכל לא תמצאו יותר מידי דברים בפוטר אבל בכל זאת יש פה מעט עניין:
- אז יש פה את כל התגיות הסוגרות של המסמך . הם ישלימו לנו את העמוד (תראו את Index ומאמין שזה יהיה ברור יותר)
- wp_footer – הפונקציה הזו יורה את הhook של wp_footer . בגדול מאד דומה לwp_ehad מאפשרות לנו להוסיף ערכים לפני body סוגר. עוד מביאה את top admin bar שתציג לנו מן סרגל ניהול שחור בחלק עליון של הדף שמקלה עלינו בניווט לדאשבורד .
נחבר הכל ביחד לקובץ index.php
<?php get_header(); ?> /// כל מה שנשים פה יהיה בתוך תגית main <?php get_footer(); ?>
ב php משתמשים בrequire או include . בוורדפרס מתשמים בget בהרבה מהמקרים של קבצים נפוצים. למשל כמו בדוגמה של header footer .( לא תמיד נוכל להשתמש בget )
חשוב לזכור ולציין שהפונקציות המובנות הללו יכולות לקבל ערכים. למשל אם יש לכם בפרויקט כמה headers יהיה אפשר לציין מתי יוצג האדר מסויים ומתי אחר. למשל אם בניתם עמוד של 404 ותרצו header אחר . תוכלו לייצר קובץ header-404.php ולבצע תנאי שאם היוזר בעמוד 404 יעלה האדר אחר וזאת בעזרת הכנסת פרמטר סטרינגי בצורה הזו(כנל גם עם footer):
;('404')get_header
והנה קיבלנו תצוגה נחמדה של האדר והפוטר עם לוגו נחמד.
רגע, יש עוד בשביל שהכל יזרום
קודם כל, זה לא כלכך יעבוד לכם , יש קובץ נוסף שצריך לייצר על מנת שהכל יעלה כמו שצריך. עשיתי כמה תוסוץ קלות בקובץ functions.php עליו נדבר בהמשך וגם תראו מה בדיוק הוספתי שמה (על מנת שהלוגו שלנו יעבוד ונוכל לנהל אותו בדאשבורד)
סיכום הפוסט של header footer.
בנינו את העמוד הראשון בוורדפרס שממנו הכל קורה! זו התקדמות. למעשה זה הצעד הראשון ועוד נחזור אליו לא מעט בשביל לשפר אותו כי כפי שרובינו יודעים יש שימושים רבים להאדר ופוטר (למשל הוספת תפריטים, טעינת סקריפטים וכו..)
בפוסט הבא אני אשלים את התמונה החסרה לפוסט הזה וכן ירחיב הבסברים על קובץ functions שהוא חברו הטוב ביותר של מפתח וורדפרס.
