آموزش ساخت قالب وردپرس (قسمت چهارم)
در گذشته در پست آموزش ساخت قالب وردپرس (قسمت اول) به پیش نیازهای طراحی قالب وردپرس و در قسمت دوم آموزش ساخت قالب وردپرس به ساخت ساختار اچ تی ام ال پوسته و ساخت فایلهای footer.php و header.php پرداختیم . در قسمت سوم آموزش ساخت قالب وردپرس هم بر روی بخش هدر سایت متمرکز بودیم و کاره header سایت را به پایان رساندیم. در این قسمت به کامل کردن فایل index.php میپردازیم.
اتمام فایل ایندکس
بدون شک فایل index.php مهمترین فایل کاری است. اگر این فایل به دقت طراحی و کد شود تاثیر بی نظیری در کارکرد سایر بخش های پوسته خواهد داشت. هرگز از هیچ تلاشی برای بدون ایراد کردن فایل index دریغ نکنید.
حلقه یا همان Loop معروف
در مورد حلقه شاید خیلی شنیده باشید . فایل مهم index.php با حلقه شروع و به اتمام می رسد. بدون حلقه شما در اصل هیچ چیز نخواهید داشت و تمام زحمات شما بدون نتیجه خواهد بود. حالا این کد حلقه که اینقدر مهم است چه شکلی است
1 2 | <?php while (have_posts () ) : the_post () ?> <?php endwhile; /> |
شاید تعجب کرده باشید که چگونه کد به این سادگی نقش به این مهمی ایفا می کند ؟ تا هنگامی که در بانک اطلاعاتی خود نوشته و اطلاعاتی دارید این حلقه فعالیت می کند تا تمامی محتوای بانک اطلاعاتی را استخراج و به میل و سلیقه ما نمایش دهد.
حالا وارد بخش عملی کار شویم. کد زیر مربوط به حلقه است.آنرا در پوسته خود و در div به نام content# قرار می دهیم. این div همان طور که در جریان هستید در فایل index.php قرار دارد.
1 2 3 4 5 6 7 | <ul> <?php while ( have_posts () ) : the_post () ?> <li> <?php the_excerpt () ; ?> </li> <?php endwhile; ?> </ul> |
در این کد با کمک یک حلقه مطالب موجود در بانک اطلاعاتی را استخراج می کنیم و به صورت یک لیست آنها را نمایش می دهیم. برای این کار از تگ های خود وردپرس مانند ()the_excerpt استفاده شده است. در واقع این حلقه آنقدر ادامه پیدا می کند تا مطالب مورد نظر ما به صورت کامل نمایش داده شود.
اکنون با کد ساده ی حلقه آشنا شدید. ولی این کافی نیست و باید حلقه ای قوی تر و کامل تر تهیه کنیم. در حلقه جدید کدهایی مربوط به تگهای بیشتر و تگ صفحه بعد را می خواهیم اضافه نماییم.
1 2 3 4 | div class="entry-content"> <?php the_content ( __( ‘Continue reading <span class="meta-nav">»</span>', 'your-theme’ ) ); ?> <?php wp_link_pages ('before=<div class="page-link">’ . __( ‘pages:’ , ‘your-theme’ ) . '&after=</div>' ) ?> </div><!-- .entry-content --> |
حال ﻧﻮﺑﺖ ﻧﻤﺎﻳﺶ ﻋﻨﻮان ﭘﺴﺖ ﻫﺎ ﺷﺪه اﺳﺖ وﻟی ﭼﮕﻮﻧﻪ؟ ﺟﻮاب ﺳﻮال ﺧﻴلی ﺳﺎده است . برای اینکار از تگ the_title () استفاده میکنیم ﺗﺎ ﻋﻨﻮان ﻫﺮ ﭘﺴﺖ را از ﺑﺎﻧک اﻃﻼﻋﺎتی درﻳﺎﻓﺖ ﻧﻤﺎﻳﻴﻢ. عنوان گرفته شده را با تگ <a> به تگ ()the_permalink ﻟﻴﻨک ﺧﻮاﻫﻴﻢ ﻛﺮد و ﺑﻪ ﻫﻤﻴﻦ راﺣتی ﻛﺎرﺑﺮ ﺑﺎ ﻛﻠﻴک روی ﻋﻨﻮان ﭘﺴﺖ ﺑﻪ ﻟﻴﻨک ﻣﺮﺑﻮط ﺑﻪ آن ﺧﻮاﻫﺪ رﻓﺖ .
1 2 3 | <h2 class="entry-title"> <a href="<?php the_permalink () ; ?>" title="<?php printf (__('Permalink to %s' , 'your-theme'), the_title_attribute ('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a> </h2> |
ﺷﺎﻳﺪ ﺷﻤﺎ ﻫﻢ ﻣﺜﻞ ﻣﻦ ﺑﺨﻮاﻫﻴﺪ اﻃﻼﻋﺎت ﺑﻴﺸﺘﺮی از ﺑﺎﻧک اﻃﻼﻋﺎﺗی اﺳﺘﺨﺮاج ﻛﻨﻴﺪ ، اطلاعاتی مانند زمان منتشر شدن پست ، ﻓﺮدی ﻛﻪ آﻧﺮا ﭘﺴﺖ ﻛﺮده اﺳﺖ ، دﺳﺘﻪ ﺑﻨﺪی ﻣﻄﻠﺐ ، ﺗﮓ ﻫﺎ و ﻛﺎﻣﻨﺖ ﻫﺎی ﻣﺮﺑﻮط ﺑﻪ آن.
در اداﻣﻪ ﺑﺮای ﺗﻜﻤﻴﻞ اﻳﻦ ﺑﺨﺶ ﻣﻦ ﻧﺎم ﻧﻮﻳﺴﻨﺪه ی ﻣﻄﻠﺐ و ﺗﺎرﻳﺦ اﻧﺘﺸﺎر را ﻗﺒﻞ از ﻣﻄﻠﺐ اﺻلی و اﻃﻼﻋﺎتی ﻣﺎﻧﻨﺪ دﺳﺘﻪ ﺑﻨﺪی ، ﺗﮓ ﻫﺎ و ﻛﺎﻣﻨﺖ ﻫﺎ را ﺑﻌﺪ از ﻣﺘﻦ ﻧﻮﺷﺘﻪ ﻗﺮار می دﻫﻢ .اﮔﺮ ﺑﺨﻮاﻫﻴﻢ ﺗﻤﺎمی ﻧﻜﺎتی را که گفتم ﺑﻪ ﺻﻮرت ﻛﺪ ﺗﺒﺪﻳﻞ ﻛﻨﻴﻢ ﻛﺪﻣﺎن ﺑﻪ ﺻﻮرت زﻳﺮ ﺧﻮاﻫﺪ ﺷﺪ :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <?php /* the LOOP – with comments ! */ ?> <?php while (have_posts () ) : the_post () ?> <?php /* Create a div with a unique ID thanks to the_ID () and semantic classes with post_class() */ ?> <dive id="post-<?php the_ID () ; ?>" <?php post_class () ; ?>> <?php /* an h2 title */ ?> <h2 class="entry-title"><a href="<?php the_permalink () ; ?>" title="<?php printf(__('Permalink to %s', 'your-theme’), the_title_attribute(‘echo=()’) ); ?>" rel="bookmark"><?php the_title () ; ?></a></h2> <?php /* Microformatted, translatable post meta */ ?> <div class="entry-meta"> <span class="meta-prep meta-prep-author"><?php _e(‘by’, ‘your-theme’); ?></span> < span class="author vcard"><a class="url fn n" href="<?php echo get_author_link ( false, $authordata->ID, $authordata->user_nicename); ?>" title="<?php printf( __( 'View all posts by %s’,’your-theme’ ), $authordata->display_name); ?>"><?php the_author (); ?></a></span> <span class="meta-sep"> | </span> <span class="meta-prep meta-prep-entry-date"><?php _e(‘published’ , ‘your-theme’ ); ?> </span> <span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span> <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class= \"edit-link\">", "</span>\n\t\t\t\t\t" ) ?> </div><!-- .entry-meta --> <?php /* The entry content */ ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">»</span>', 'your-theme' ) ); ?> <?php wp_link_pages('before=<div class="page-link">' . __( ' Pages:', 'your-theme' ) . '&after=</div>') ?> </div><!-- .entry-content --> <?php /* Microformatted category and tag links along with a comments link */ ?> <div class="entry-utility"> <span class="cat-links"><span class= "entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', ' your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span> <span class="meta-sep"> | </span> <?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?> <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span> <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class= \"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?> </div><!-- #entry-utility --> </div><!-- #post-<?php the_ID(); ?> --> <?php /* Close up the post div and then end the loop with endwhile */ ?> <?php endwhile; ?> |
پیمایشگر
برای پیمایش بین پست های مختلف بدون شک باید راهی در نظر بگیریم. برای انجام این کار از دو تگ وردپرس به نامهای ()next_posts_link و ()previous_posts_link استفاده خواهیم کرد. درک این بخش کمی منطقی نیست. تابع اول کارش این است که وقتی کاربر روی آن کلیک می کند به مطلب قبلی می رود و اگر روی لینکی که تابع دوم یعنی ()previous_posts_link ایجاد می کند کلیک کنید پست بعدی نمایش داده می شود . از نظر ترجمه زبانی و واقعیتی که این تابع ها چه کار می کنند کمی گیج کننده است. این نکته را حتما در نظر داشته باشید.
همانند تمامی اجزا صفحه index.php باید دقت خوبی در استفاده از این کد ها داشته باشید تا به بهترین نحو ممکن کار کنند. من دوست دارم پیمایشگر وبلاگم در بالا و پایین مطلب اصلی نمایش داده شود. البته در صورتی که خواستید می توانید پیمایشگر ها را در شرایطی خاص مخفی نمایید. برای مثال در برگه ها جستجو و یا برگه های که دیگر پست های قدیمی تر وجود ندارد نیازی به نمایش خروجی این توابع نداریم پس بهتر است کدی بنویسیم تا چیزهای غیر ضروری را مخفی نماید و باعث شلوغی بیهوده صفحه نشود.
1 2 3 | <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <?php } ?> |
کاری که در کد بالا انجام داده ایم چیست؟ در اصل ما کنترل می کنیم تا بفهمیم حداکثر تعداد برگه های که در حلقه باید اجرا شود چقدر است و اگر تعداد برگه ها بیشتر از ۱ باشد ما پیمایشگر را به خروجی می فرستیم. کدی که برای نمایش در قبل و بعد از حلقه اصلی نیاز داریم به صورت زیر خواهد بود.
قبل از حلقه
1 2 3 4 5 6 7 8 9 10 | <?php /* Top post navigation */ ?> <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'your-theme' )) ?></div> <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'your-theme' )) ?></div> </div><!-- #nav-above --> <?php } ?> |
بعد از حلقه
1 2 3 4 5 6 7 | <?php /* Bottom post navigation */ ?> <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">«</span> Older posts', 'your-theme' )) ?></div> <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">»</span>', 'your-theme' )) ?></div> </div><!-- #nav-below --> <?php } ?> |
باید خدمت شما عرض کنم که کار ما با فایل index.php به اتمام رسیده است. فقط در آخر این فایل خط زیر را قبل از تگ ()get_footer قرار دهید تا ستون کناری هم به پوسته اضافه شود:
1 | <?php get_sidebar() ; ?> |
