בחלק זה בסדרה, נלמד איך לחבר את החלק העליון של האתר שלנו, ה-Header, ואיך לטעון את הקבצי העיצוב (CSS) והסקריפטים (JavaScript) שלנו בצורה נכונה.

חיבור Header

השלב הראשון שעלינו לעשות הוא ליצור קובץ header.php אשר יתפקד בתור החלק העליון אשר ילווה את הגולשים בכל העמודים של האתר, ניצור את הקובץ ונשמור אותו בתיקייה הראשית של התבנית. כעת, נדביק את הקוד הבא לקובץ:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

  <!-- Page Wrapper -->
  <div id="page-wrapper">

    <!-- Top Nav -->
    <header id="header" class="alt">
      <h1><a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
      <nav>
        <a href="#menu"><?php _e( 'Menu', 'solid-state' ); ?></a>
      </nav>
    </header>
    <!-- /Top Nav -->

    <!-- Main Menu -->
    <nav id="menu">
      <div class="inner">
        <h2><?php _e( 'Menu', 'solid-state' ); ?></h2>

        <?php wp_nav_menu( array(
            'theme_location' => 'main-menu',
            'menu' => 'main-menu',
            'container' => false,
            'menu_class' => 'links',
            'menu_id' => 'main-menu',
          ) ); ?>

        <a href="#" class="close"><?php _e( 'Close', 'solid-state' ); ?></a>
      </div>
    </nav>
    <!-- /Main Menu -->

    <!-- Banner -->
    <section id="banner">
      <div class="inner">
        <div class="logo"><span class="icon fa-diamond"></span></div>
        <h2><?php bloginfo( 'name' ); ?></h2>
        <p><?php bloginfo( 'description' ); ?></p>
      </div>
    </section>
    <!-- /Banner -->

שורה 2 // אנחנו משתמשים בפונקציה של WordPress על מנת להגדיר את הגדרות השפה של האתר.
שורה 4 // נשתמש בפונקציה bloginfo על מנת לקבל את הקידוד של האתר, לרוב זה יהיה utf-8.
שורה 7 // הפונקציה wp_head היא אחת הפונקציות החשובות שיש ב-WordPress, היא דואגת להדפיס את תגיות ה-HTML אשר קוראות לקבצי ה-CSS וה-JS שלנו, של תוספים מותקנים ושל המערכת עצמה. מלבד זאת היא גם דואגת להדפיס את תגית <title> עם כותרת אתר.
שורה 9 // פוקנציית body_class אחראית על הדפסה של class-ים שונים ואינפורמטיביים בתגית ה-<body>, בכל עמוד מודפסים class-ים אשר מעידים על איזה סוג עמוד אנחנו נמצאים, האם זאת תבנית בת, האם המשתמש מחובר, איזה Post Type כרגע מוצג וכד׳.
שורה 16 // בשורה זאת אנחנו משתמשים שוב בפונקציה bloginfo על מנת לקבל את שם האתר ואת כתובת האתר על מנת שנוכל להדפיס קישור עם שם האתר.

חיבור תפריטים

אחד מהפיצ׳רים ש-WordPress מאפשרת לנו להשתמש הוא הפיצ׳ר של תפריטים דינאמיים, כלומר, לא צריך יותר להקשיח את התפריט שלנו בקוד, אנחנו יכולים לתת הלקוח או לעצמנו שליטה נוחה ומאוד אינטואיטיבית על התפריטים שיש באתר.

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

  • theme_location // אנחנו בהמשך נשתמש בפונקציה register_nav_menu על מנת לרשום מיקומים בתבנית אשר בהם יהיו תפריטים, וע״י פרמטר זה אנחנו מגדיר כי אותו המיקום שרשמנו אמור להיות בחלק הזה באתר.
  • menu // ה-ID, ה-Slug או השם של התפריט אותו אנחנו רוצים להציג (אופציונלי).
  • container // אנחנ מעבירים את הפרמטר false כי אנחנו לא רוצים שיהיה div כלשהו אשר יעטוף את התפריט שלנו (אופציונלי).
  • menu_class // שם של class או רשימה של class-ים (מופרדים ברווחים), אשר אנחנו רוצים שיהיו מודפסים בתגית <ul> (אופציונלי).
  • menu_id // ה-id שאנחנו רוצים שיודפס בתגית <ul> (אופציונלי).

קריאה ל-Header

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

<?php get_header(); ?>

הגדרת יכולות תבנית

אחרי שחיברנו את ה-Header של האתר, נעבור לקובץ functions.php אשר יכלול מגוון פונקציות אשר נשתמש בהם לצורך בניית התבנית, קובץ זה צריך לשבת בתיקיית השורש של התבנית.

שימוש בפיצ׳רים

הפונקציה הראשונה שנכתוב היא פונקציה שתגיד ל-WordPress באיזה פיצ׳רים התבנית שלנו תתמוך, נעשה זאת ע״י שימוש בפונקציה add_theme_support בתוך הפונקציה שלנו, ונקשור אותה לטעינה של התבנית ע״י שימוש ב-add_action.

<?php
/**
 * FUNCTIONS
 */

// Theme setup and capabilities
function solid_theme_setup() {

  # Add i18n support to the theme
  load_theme_textdomain( 'solid-state', get_template_directory() . '/languages/' );

  # Let WordPress handle <title> tag
  add_theme_support( 'title-tag' );

  # Enable theme support for dynamic menus
  add_theme_support( 'menus' );
  register_nav_menu( 'main-menu', __( 'Main Menu', 'solid-state' ) );

  # Enable support for post thumbnails
  add_theme_support( 'post-thumbnails' );

}

add_action( 'after_setup_theme', 'solid_theme_setup' );

שורה 10 // על מנת להפעיל את השימוש ב-i18n ו-l10n, נשתמש בפונקציה load_theme_textdomain אשר מקבלת שתי פרמטרים, ה-Text Domain שלנו, והנתיב של קבצי התרגום, לא ארחיב על פונקציות gettext במאמר זה, אך אפנה אתכם למאמר קודם שכתבתי אודות תרגום תבניות ופונקציות gettext.
שורה 13 // אנחנו מבקשים מ-WordPress לנהל את תגית ה-<title>, דבר אשר מאפשר לנו לחסוך בקוד של בניית כותרת האתר בעמודים שונים, וגם מאפשר לתוספים כמו Yoast! SEO לנהל את הכותרת שלנו ולהקל על תהליך קידום האתרים.
שורה 16 // אנחנו מכריזים כי התבנית שלנו תומכת בתפריטים דינאמיים.
שורה 17 // אנחנו רושמים תפריט דינאמי שה-ID שלו הוא main-menu והשם שלו הוא Main Menu, במידה ואנחנו מעוניינים לרשום יותר מתפריט אחד, מומלץ להשתמש בפונקציה register_nav_menus.

הוספת קבצי CSS ו-JavaScript

השלב הבא הוא קשירת קבצי ה-CSS וה-JavaScript של התבנית ל-Header ול-Footer, נעשה זאת ע״י הוספת פונקציה המשתמשת בשתי פונקציות wp_enqueue_style ו-wp_enqueue_script.

בתור התחלה, נפתח את הקובץ style.css שיצרנו פעם הקודמת ונעתיק אליו, אחרי ההערה עם פרטי התבנית, את הקוד CSS מהקובץ main.css בקבצי HTML שהורדנו. כאשר נעתיק את ה-CSS, נמחוק את שתי השורות שמתחילות עם @import.

לאחר מכן, ניצור מבנה תיקיות באופן הבא, ונעתיק אליו את הקבצים הרלוונטיים מקבצי ה-HTML שהורדנו.

עץ קבצים ותיקיות של התבנית

כעת, נעתיק את הקוד הבא ונוסיף אותו לקובץ functions.php אחרי הפונקציה הקודמת.

// Link the CSS & JavaScript files to the template
function solid_register_theme_assets() {

  # CSS
  wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic', false, false );
  wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.min.css', false, '4.4.0' );
  wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array( 'google-fonts', 'font-awesome' ), '1.0.0' );

  # JavaScript
  wp_enqueue_script( 'scrollex', get_template_directory_uri() . '/assets/js/jquery.scrollex.min.js', array( 'jquery' ), '0.2.1', true );
  wp_enqueue_script( 'skel', get_template_directory_uri() . '/assets/js/skel.min.js', false, '3.0.0', true );
  wp_enqueue_script( 'util', get_template_directory_uri() . '/assets/js/util.js', array( 'jquery' ), false, true );
  wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'scrollex', 'skel', 'util' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'solid_register_theme_assets' );

אנחנו משתמש בפונקציה wp_enqueue_style על מנת להכריז על קובץ CSS ששייך לתבנית, הפונקציה מקבלת 4 פרמטרים:

  • מזהה הסקריפט // שם ייחודי לסקריפט, יכול להיות כל ערך אלפאנומרי שתרצו.
  • קישור לקובץ // קישור לקובץ עצמו, יכול להיות קישור לקובץ בשרת מרוחק, או קישור לקובץ היושב בתבנית, על מנת לקבל את הנתיב של התבנית, יש להשתמש בפונקציה get_template_directory_uri.
  • תלותיות // מערך של מזהי סקריפטים שרשמנו כבר, ניתן להעביר false אם אין תלות, דבר זה מאפשר לנו להגדיר את הסדר שיטענו הסקריפים, לצורך העניין אם התבנית שלנו מבוססת Bootstrap, נוכל לרשום קודם את Bootstrap ולאחר מכן את הסקריפט של התבנית ולהעביר את המזהה של ה-Bootstrap כתלות של הסקריפט שלנו.
  • גרסא // ניתן להעביר את המספר גרסא של הסקריפט או להעביר false על מנת להגדיר את הגרסא של WordPress כמספר הגרסא של הסקריפט.

על מנת לרשום קבצי JavaScript, נשתמש בפונקציה wp_enqueue_script, אשר מקבלת 5 פרמטרים, 4 פרמטרים שהזכרנו מקודם, ועוד פרמטר אחד שמקבל ערך true או false אשר יקבע האם הסקריפט ייטען ב-Footer.

סיכום

בחלק זה במאמר למדנו איך לחבר Header ל-WordPress, כולל שימוש במספר פונקציות של WordPress על מנת להגדיר את יכולות התבנית ואיך לקשור את קבצי ה-CSS וה-JavaScript של התבנית.

בחלק הבא, נדבר על חיבור ה-Footer, ועל חיבור העמוד הראשי של התבנית index.php.

תגובות לפוסט

כתיבת תגובה