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

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

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

<?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('post-img');
	}
	?>
    </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_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; ?> حلقه به طور کامل بسته میشه

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

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

/************ Posts *****************/
 
.posts{
margin: 20px 0;
background: #fff;
padding-left: 0 !important;
padding-right: 0 !important;
}
 
.post-list {
padding-bottom: 40px;
border-bottom: 10px solid #F1F1F1;
}
 
.post-image img {
width:100%;
height:auto;
}
 
.post-content {
padding: 0 20px;
}
 
.post-title a {
color: #333;
font-size: 25px;
}
 
.post-meta span {
margin-left: 30px;
display: inline-block;
float: right;
}
 
.post-meta {
display:block;
width:100%;
float:right;
border-bottom:1px solid #F1F1F1;
padding-bottom:10px;
margin-bottom:20px;
font-size: 12px;
}
 
.post-meta span i {
color:#e74c3c;
margin-left:5px;
}

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

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

موفق باشید