آموزش طراحی قالب وردپرس (جلسه ششم) کار با حلقه ها

سلام دوستان گرامی

تو این جلسه میخوام برم سراغ حلقه ها در وردپرس

حتما میگید حلقه ها چه کاربردی دارند؟ حلقه ها در واقع همون نوشته های صفحه هستش که نشون داده میشن

پس در این قسمت از آموزش طراحی قالب وردپرس بهتون میگم که چطوری نوشته ها رو با شکل مناسبی نشون بدید.

حلقه ها در طراحی قالب وردپرس

در ابتدا باید ویژگی تصویر شاخص رو برای سایت فعال کنیم. پس فایل functions.php رو باز کنید و کد زیر رو اضافه کنید:

add_theme_suport('post-thumbnails');

حالا فایل ایندکس رو در حالت ادیت باز کنید و کد زیر را در آن قرار دهید:

<?php get_header();?>
<div class=“main-content”>
<div class=“container”>
  <div class=“posts col-md-9 col-sm-12 col-xs-12 pull-right”>
   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   <div class=“post-list”>
    <div class=“post-image”>
    <?php if (has_post_thumbnail()){
the_post_thumbnail(‘full’);
}
?>
    </div>
    <div class=“post-content”>
    <h2 class=“post-title”><a href=<?php the_permalink();?> title=<?php the_title();?>><?php the_title();?></a></h2>
    <div class=“clearfix”></div>
    <div class=“post-meta”>
    <span><i class=“fa fa-user”></i> <?php the_author();?></span>
    <span><i class=“fa fa-calculator”></i><?php the_time(‘M j, Y’);?> </span>
    <span><i class=“fa fa-comments”></i> <?php comments_number( ‘بدون دیدگاه’, ‘یک دیدگاه’, ‘% دیدگاه’ ); ?></span>
    </div>
    <p> <?php the_excerpt();?> </p>
   </div>
   </div>
   <?php endwhile; else : ?>
<p><?php _e( ‘چیزی پیدا نشد’ ); ?></p>
<?php endif; ?>
  </div>
  
  <div class=“sidebar col-md-3 col-sm-12 col-xs-12 pull-left”>
  
  </div>
</div>
</div>
<?php get_footer();?>

 

خب در خط اول با کد <?php get_header();?> فایل هدر را فراخوان کردیم

خط بعدی هم کد  html هستش و من توضیح نمیدم

فقط کدهای php رو توضیح میدم

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>   : با این کد حلقه ما شروع میشه و در واقع شرطی برای وجود نوشته هستش . میگه که اگر نوشته یا نوشته هایی وجود دارد

پس اگر شرط بالا درست میره میره سراغ بعدی

<?php if (has_post_thumbnail()){  : این هم بررسی می کنه که تصویر شاخص برای نوشته ست شده یا نه. با تصویر شاخص که آشنایی دارید دیگه؟

خب پس اگر واسه نوشته تصویر شاخص گذاشته باشیم با کد the_post_thumbnail(‘full’); تصویر شاخص رو فراخوان میکنیم تا نشون داده بشه.

خب حالا می خوام عنوان نوشته رو نشون بده پس تابع <?php the_title();?> عنوان مطالب رو بر می گردونه.

حالا نوبت به این میرسه که عنوان رو به آدرس نوشته لینک بدیم برای این کار هم تابع <?php the_permalink();?> رو استفاده می کنیم.

حتما توی خیلی از سایت های وبلاگ دیدیم که متا های نوشته رو هم قرار می دهند مثل: نام نویسنده، تعداد دیدگاه ها، تاریخ نوشته و …. خب ما هم این قسمت رو به تم اضافه کردیم حالا توضیح میدم که کجا و چطوری

تابع <?php the_author();?> : نام نویسنده رو بر میگردونه

تابع <?php the_time(‘M j, Y’);?> : تاریخ ارسال نوشته رو بر میگردونه

تابع <?php comments_number( ‘بدون دیدگاه’, ‘دیدگاه’, ‘% دیدگاه’ ); ?> : این تابع هم تعداد دیدگاه های هر نوشته رو بر میگردونه خب این هم از این

حالا من می خوام توی صفحه اصلی وبلاگم یه تیکه از متن نوشته رو نشون بده. پس از تابع <?php the_excerpt();?> استفاده می کنم.

در انتها می بینیم با این کد حلقه بسته میشه

<?php endwhile; else : ?>

<?php _e( ‘چیزی پیدا نشد’ ); ?> این متن هم هنگامی که نوشته ای پیدا نشه نشون میده و با کد <?php endif; ?> حلقه به طور کامل بسته میشه

خب کارمون تا اینجا تموم شد حالا نوبت به استایل دهی هستش

حالا این کدهارو به فایل استایلتون اضافه کنید:

?php get_header();?>
<div class=“main-content”>
<div class=“container”>
  <div class=“posts col-md-9 col-sm-12 col-xs-12 pull-right”>
   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   <div class=“post-list”>
    <div class=“post-image”>
    <?php if (has_post_thumbnail()){
the_post_thumbnail(‘full’);
}
?>
    </div>
    <div class=“post-content”>
    <h2 class=“post-title”><a href=<?php the_permalink();?> title=<?php the_title();?>><?php the_title();?></a></h2>
    <div class=“clearfix”></div>
    <div class=“post-meta”>
    <span><i class=“fa fa-user”></i> <?php the_author();?></span>
    <span><i class=“fa fa-calculator”></i><?php the_time(‘M j, Y’);?> </span>
    <span><i class=“fa fa-comments”></i> <?php comments_number( ‘بدون دیدگاه’, ‘یک دیدگاه’, ‘% دیدگاه’ ); ?></span>
    </div>
    <p> <?php the_excerpt();?> </p>
   </div>
   </div>
   <?php endwhile; else : ?>
<p><?php _e( ‘چیزی پیدا نشد’ ); ?></p>
<?php endif; ?>
  </div>
  
  <div class=“sidebar col-md-3 col-sm-12 col-xs-12 pull-left”>
  
  </div>
</div>
</div>
<?php get_footer();?>

البته اینم بگم که شما استایل ها رو هر شکلی که بخواهید می تونید بزارید.

این قسمت از آموزش طراحی قالب وردپرس هم به پایان رسید. امیدوارم که این آموزش لذت بخش بوده باشه. هر سوالی که داشتید در بخش دیدگاه ها بپرسید حتما پاسخ میدم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *