קוד ופיתוח, וורדפרס, מתחילים, תבניות

בניית תבנית WordPress: חיבור Header

  1. דורזקי
  2. קוד ופיתוח
  3. בניית תבנית WordPress: חיבור Header
תוכן עניינים
  1. חיבור Header
  2. הגדרת יכולות תבנית
  3. סיכום

בחלק זה בסדרה, נלמד איך לחבר את החלק העליון של האתר שלנו, ה-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 על מנת להדפיס את התפריט שלנו במיקום ספציפי. הפונקציה מקבל מגוון רחב של פרמטרים אשר מועברים כמערך אחד ונותנים שליטה רבה על הגדרות התפריט (במדריך זה לא השתמשנו בכולם, ניתן לראות את הרשימה המלאה פה):

קריאה ל-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 פרמטרים:

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

סיכום

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

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

    כתיבת תגובה

    הנה עוד כמה מאמרים מעניינים:

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

    שתפו