בפרק זה ניצור את הקובץ page.php. קובץ זה הוא הקובץ בו ישתמש וורדפרס כדי להציג עמודים באתר (לא פוסטים, עמודים!)
לוקחים את index.php ועושים לו דיאטה!
בכדי לחסוך בשורות קוד מיותרות מבחינת CSS אנו ניקח את הקובץ index.php ונעשה לו חיתוך והתאמה כדי שיציג את המידע של העמוד אותו אנו מבקשים להציג. בכדי לחסוך בזמן צילמתי סרטון בו אני חותך את הקוד המיותר. במקביל אתם יכולים להוריד את הקוד המלא של page.php בתחתית העמוד.
פעולות ראשוניות
- העתיקו את כל הקוד בקובץ index.php אל הקובץ page.php
- הסירו את הקוד המיותר (ראו הערות בסרטון)
- שנו את הקוד עבור התפריט הצדדי שיתאים לעמודים
- שנו את הLOOP שיתאים להצגת דף בודד
אלו החלקים שנשנה (לחצו לתמונה מוגדלת)
בכדי לחסוך המון המון זמן ומעבר על כל שורת קוד שאנו נמחוק יצרתי סרטון בו אני בונה את הקובץ page.php על בסיס הקוד שנעתיק מindex.php. צפו בסרטון אם תרצו לעשות את הפעולות יחדיו. בנוסף תוכלו לקחת את הקוד המוגמר של page.php בהמשך הדף.
הקוד המוגמר של page.php
<?php get_header(); ?>
<body>
<div class="bodyBox">
<div class="bodySpacer"> </div>
<!--===STR==================== BODY CENTER ==========================-->
<div class="bodyCenter">
<!--===STR===== HEADER ===========-->
<div class="header">
<div class="logo">
<!--=== SITE NAME ===-->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
<div class="topMenu">
<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' => 'top_menu', 'menu_id' => 'top_menu' ) ); ?>
</div>
</div>
<!--===END===== HEADER ===========-->
<div class="fix"></div>
<!--===STR===== CONTENT ===========-->
<div class="contentBox">
<div class="sidebar">
<?php
if ( is_active_sidebar( 'page-sidebar' )) {
echo '<ul id="home-sidebar" class="home-sidebar page-sidebar">';
dynamic_sidebar( 'page-sidebar' );
echo '</ul>';
} else {
_e('Drag widgets to page sidebar to display data here.', 'sagive');
}
?>
</div>
<div class="homeLoop">
<div class="innerLoop">
<div class="post">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2 class="newestPost"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="postMeta">
<?php echo __('By', 'sagive').' '.get_the_author_link().', '.__('On', 'sagive').get_the_date().' - '; ?>
</div>
<div class="singleContent">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<!--===END===== CONTENT ===========-->
</div>
<!--===END==================== BODY CENTER ==========================-->
<div class="bodySpacer"> </div>
<div class="fix"></div>
</div>
<!--===STR===== FOOTER ===========-->
<?php get_footer(); ?>
<!--===END===== FOOTER ===========-->
<!--===STR===== WP FOOTER ===========-->
<?php wp_footer(); ?>
<!--===END===== WP FOOTER ===========-->
</body>
</html>
קובץ page.php להורדה
מה בפרק הבא?
בפרק הבא נעשה שינויים קלים בקובץ page.php כדי ליצור את הקובץ single.php – הקובץ האחראי להצגה של פוסטים. כמו כן נבנה ביחד טופס תגובות מעוצב. אני מקווה שאוכל לפרסם את החלק הבא במדריך בהקדם האפשרי ואתם מוזמנים להירשם לרשימת התפוצה שלנו כדי לקבל עדכון באימייל בעת פרסום החלק הבא במדריך.
אם נתקלתם בבעיה או יש לכם שאלה אתם מוזמנים לפרסם אותה כתגובה. אם אהבתם נודה לכם אם תפרגנו לנו עם +1.
4 תגובות