תכנות PHP בניית תבנית וורדפרס עם הקפה של הבוקר

בניית תבנית לוורדפרס מערכת הCMS הפופולארית ביותר בעולם היא מבין הקלות ביותר והמתעודות ביותר. מערכת התבניות של וורדפרס מאפשרת לנו לבנות תבניות ולרדת לפרטים הקטנים ביותר , החל משינוי Class של אובייקט תפריט ועד למיקום ע"י מערכת הוידג'טים של וורדפרס שמאפשרת למשתמש להזיז אובייקטים בעצמו ממיקום למיקום.

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

נתחיל מזה שכדי ליצור תבנית לוורדפרס שהוא יוכל לקרוא יש ליצור את תבנית הוורדפרס כך שתכיל לפחות את הקבצים הבאים

/index.php
/style.css

1 2	/index.php /style.css

קובץ index.php וקובץ style.css ללא הקבצים הללו וורדפרס לא יקבל את התבנית , המבנה של מרבית התבניות נראה כך –

js/
img/
css/
index,php
style.css
header.php
footer.php
functions.php
sidebar.php

js/

img/

css/

index,php

style.css

header.php

footer.php

functions.php

sidebar.php

במאמר הזה , תוך ניסיון מירבי לפשט אותו כמה שיותר , אני מעוניין להשתמש אך ורק בקבצים הבאים לשם בניית תבנית וורדפרס :

index.php
footer.php
header.php
style.css

index.php

footer.php

header.php

style.css

השאר הם תוספות בלבד בעצם , ואפשר להוסיף קבצים נוספים ולטעון אותם.

הבה נתחיל במלאכת בניית תבנית הוורדפרס שלנו !

נתחיל בקובץ הindex.php שכך אנחנו רוצים שייראה , אנחנו מעוניינים שהוא יהיה בעל מבנה דף בסיסי ביותר בכדי שנוכל להבין את הדוגמא.

<?php
/*
 * Theme Name: Omerbsh com
 * Author: Omerbsh
 * Text Domain: www.omerbsh.com
 */
get_header(); 

// Start the loop.
while ( have_posts() ) : the_post();
?>
   <h2>
      <?php echo the_title(); ?>
  </h2>
   <article>
      <?php the_content(); ?>
   </article>
<?php get_footer(); ?>

<?php

* Theme Name: Omerbsh com

* Author: Omerbsh

* Text Domain: www.omerbsh.com

get_header();

// Start the loop.

while ( have_posts() ) : the_post();

<h2>

<?php echo the_title(); ?>

</h2>

<?php the_content(); ?>

</article>

<?php get_footer(); ?>

נראה מה עשינו כאן , בחלק הראשון , החלק עם ההערות בעצם הגדרנו לוורדפרס את שם התבנית התיאור שלה ואת שם הכותב –

/*
 * Theme Name: Omerbsh com
 * Author: Omerbsh
 * Text Domain: www.omerbsh.com
 */

* Theme Name: Omerbsh com

* Author: Omerbsh

* Text Domain: www.omerbsh.com

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

 get_header();

1	get_header();

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

   <h2>
      <?php echo the_title(); ?>
  </h2>
   <article>
      <?php the_content(); ?>
   </article>

<h2>

<?php echo the_title(); ?>

</h2>

<?php the_content(); ?>

</article>

כמובן שעל תבנית וורדפרס להציג גם footer וגם לכך קיימת פונקציה מובנית –

<?php get_footer(); ?>

1	<?php get_footer(); ?>

כמובן שבדף זה הפלט שאנחנו אמורים לקבל הוא הכותרת של העמוד + תוכן העמוד בין התגיות שהצבנו אותם.
לאחר שסיימנו לבנות את הקבצים הללו , אנחנו ניגש לעבוד על הקובץ header.php שיכיל למעשה את כל החלק העליון של האתר + התוכן בין תגיות הhead שלנו , למעשה החלק שמכיל את תגיות הmeta ותגיות הtitle שבהם עושים הדפדפנים ומנועי החיפוש שימוש.

נתחיל מהצגת הדוגמה המלאה –

<!doctype html>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
        <title><?php wp_title(); ?></title>
        <meta name="description" content="<?php echo bloginfo('description'); ?>">
        <link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">
    </head>
    <body>

<!doctype html>

<head>

</head>

<body>

עכשיו אני אפשט את הפונקציות שעשינו בהם שימוש השייכות לוורדפרס , נתחיל בראשונה –

<meta charset="<?php bloginfo( 'charset' ); ?>">

1	<meta charset="<?php bloginfo( 'charset' ); ?>">

באמצעות פונקציה זו אנחנו למעשה קוראים לקידוד של וורדפרס (בדרך כלל בוואב בכלל עושים שימוש בUTF8).

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

1	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

הגדרת פינגבאק.

<title><?php wp_title(); ?></title>

1	<title><?php wp_title(); ?></title>

הכותרת של אתר בלוג וורדפרס.

<link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">

1	<link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">

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

ועכשיו נעבור , לחלק התחתון של האתר לfooter.php –

        <footer>
            <?php wp_nav_menu( array('theme_location' => 'footer-menu','before' => ' - ',)); ?>
        </footer>
    </body>
</html>

<?php wp_nav_menu( array('theme_location' => 'footer-menu','before' => ' - ',)); ?>

</footer>

</body>

</html>

בfooter למעשה מה שאני רוצה לעשות זה לקרוא לתפריט תחתון , אני רוצה להדגים כאן את הקריאה לתפריט באמצעות הפונקציה wp_nav_menu , למעשה השימוש בפונקציה פשוט יחסית והוא ממש כמו בדוגמה שאתה רואים בקוד שצירפתי כאן למעלה . איך אני קורא לתפריט ובעצם קובע את המיקום של התפריט בקוד.
אבל בזאת המלכה שלנו לא הסתיימה ועלינו גם להגדיר את התפריט בקובץ functions.php –

function register_my_menus() {
  register_nav_menus(
    array(
      'footer-menu' => __( 'Footer menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

function register_my_menus() {

register_nav_menus(

array(

'footer-menu' => __( 'Footer menu' )

)

);

}

add_action( 'init', 'register_my_menus' );

למעשה הקובץ functions.php מכיל את כל ההגדרות של התבנית , שם אנחנו גם נגדיר מיקום לוידג'טים בתבנית .

function arphabet_widgets_init() {
	register_sidebar( array(
		'name'          => 'Home Welcome Text',
		'id'            => 'home_widget',
		'before_widget' => '<p>',
		'after_widget'  => '</p>',
		'before_title'  => '<h3>',
		'after_title'   => '</h3>',
		'class'			=> '',
	) );

}

add_action( 'widgets_init', 'arphabet_widgets_init' );

function arphabet_widgets_init() {

register_sidebar( array(

'name' => 'Home Welcome Text',

'id' => 'home_widget',

'before_widget' => '<p>',

'after_widget' => '</p>',

'before_title' => '<h3>',

'after_title' => '</h3>',

'class' => '',

) );

}

add_action( 'widgets_init', 'arphabet_widgets_init' );

למעשה כך הגדרנו , וידג'ט שאנחנו רוצים להציב אותו בדף הראשי לשם כך , נערוך את הקובץ index.php –

<?php 
if ( is_active_sidebar( 'home_widget' ) ) :
    dynamic_sidebar( 'home_widget' );
endif;
 ?>

<?php

if ( is_active_sidebar( 'home_widget' ) ) :

dynamic_sidebar( 'home_widget' );

endif;

לוידג'ט קראנו home_widget ולשם אנחנו יכולים לשפוך טקסטים שלמעשה יופיעו בדף הראשי של הדף.

   <div class="home_widget_text">
   <?php 
   if ( is_active_sidebar( 'home_widget' ) ) :
       dynamic_sidebar( 'home_widget' );
   endif;
   ?>
   </div>
   <h2>
      <?php echo the_title(); ?>
  </h2>
   <article>
      <?php the_content(); ?>
   </article>

<?php

if ( is_active_sidebar( 'home_widget' ) ) :

dynamic_sidebar( 'home_widget' );

endif;

</div>

<h2>

<?php echo the_title(); ?>

</h2>

<?php the_content(); ?>

</article>

זהו , למעשה , הצגתי לפניכם את הפונקציות העיקריון לבניית תבנית וורדפרס בסיסית , כמובן , קיימות פונקציות נוספות לבניית תבנית וורדפרס , אך עליהם ניתן לקרוא רבות בדוקומנטציה של וורדרפס –
https://codex.wordpress.org/Theme_Development

ועוד על הפונקציות שעשינו בהם שימוש כיום –
wp_nav_menu (תפריטים) –
https://codex.wordpress.org/Function_Reference/wp_nav_menu
register_sidebar (וידג'טים) –
https://codex.wordpress.org/Function_Reference/register_sidebar

אני אשמח לשמוע הערות בפייסבוק או במייל בטופס יצירת הקשר של האתר.

המון המון בהצלחה!